1. Project Overview & Quickstart (pingdotgg/docs)
File: README.md
Ping.gg Docs
Getting Started
git clonenpm installnpm run dev
TODO
- Merge homepage and /docs
- Find some way for Adam to easily edit this
- Set up analytics
File: docs/advanced-ping/chrome-permissions.md
Enabling Camera and Microphone in Google Chrome
To use Ping, you need to have both your Webcam and Microphone accessible by Google Chrome, and by the off-chance the Chrome does not prompt you at the top of your browser, here is how to enable both devices
First connect to your desired Ping Room
Before joining your call make sure that you are able to see yourself in the preview window.
It seems here that my Camera is not being picked up, and I donβt have the option to add a camera.
in the top left of your browser, click the π icon next to the Address Bar
When you click the π icon, a menu will appear
Here, you will be able to enable your Camera and Microphone again!
:::tip
You may need to refresh your browser after enabling camera/microphone permissions before they will be able to be picked up by Ping.
:::
File: docs/advanced-ping/goxlr-desktop-audio.md
Send GoXLR Desktop Audio through Ping
In Ping, make sure youβre using the βChat Micβ output from GoXLR
In the GoXLR Routing Table, make sure that System Audio is ticked on in the Chat Mic Section
In Ping, go to your dashboard and click on options under your room
Then on the left side, go to Experimental
And make sure to turn off Automatic Gain Control, Automatic Noise Supression, and Automatic Echo Cancellation.
Side note, if your guests can hear themselves in the playback, make sure that whatever youβre using to hear them (Discord or Google Chrome) is being sent to βChatβ in Windows
- You can get there by Right Clicking the Volume Icon in the bottom right of the system tray, then going to Sound Settings, then going to βApp volume and device preferencesβ
File: docs/advanced-ping/return-feeds.md
Screen Share via OBS to Ping
Screen sharing a Return Feed can be an essential part of your broadcast, from Podcasts to Esports events, it is invaluable to let your Talent see what is currently live to your audience.
First open OBS
Navigate to your controls and Start Virtual Camera
Once Virtual Camera is started, join your desired Ping Room
Before joining the call, make sure that βOBS Virtual Cameraβ is selected under your Camera Devices
Now that your Virtual Camera is selected, you may join the room
OBS Virtual Camera sends a video feed of what is currently displayed in your Program Feed
- For those using Studio Mode in OBS, its the feed on the right side
To send Audio via Ping, we recommend using VoiceMeeter, if you happen to be using a GoXLR we have documentation on how to send audio to Ping Here
File: docs/advanced-ping/slots.md
Slots
Slots allow you to set up your browser sources in OBS once, and be able to how swap who is in them directly from Ping. This feature is great for those who leverage nested scenes, have different guests on your broadcast, or run a show where you need to move guests around mid-broadcast.
Setup in Ping
To get started, lets make our first Embed in the Embeds Window on the right-hand side of your call
We'll go ahead and name this Embed like something like "Guest", this will be our Embed slot that we use to rotate a new guest into our show every week.
Now when we have our guest join our call on Ping, we'll click on the Embed Menu icon on their video and add them to Guest.
:::tip
If there is already a guest in this slot, you can also click the swap button to swap them out!
:::
Great! Lets go ahead and take a look in OBS
OBS
We are going to leverage Nested Scenes here to be able to minimize our embeds while dynamically having ourselves and guests placed differently across different scenes
:::tip
We have a full Doc on how Nesting Scenes work, check it out here!
:::
First lets make a scene and name it something like "This Week's Guest", and add a Browser Source to it.
In Ping, we'll grab the Browser Source link from our embed panel by clicking the options cog on our "Guest" embed.
We'll add the link to our Slot Embed to the source, and make it 1280x720 aswell.
From here, we'll be adding a Scene as a source instead of a Browser Source to wherever we need our guest to be!
You'll be adding "This Weeks Guest" where you need them to be, just like you would if it was a Browser Source or Video Capture Device.
In Conclusion
Slots is a way for you to be able to dynamically change your broadcast when using Ping without needing to manually edit browser sources. On the fly, easy snapping, and updates quickly!
File: docs/advanced-obs/nesting-scenes.md
Nesting Scenes
Nesting scenes is a great hack that not a whole lot of people know about in OBS. This allows you to change one source across many different scenes with one action.
We'll go through an example of how Nested Scenes can help in a simple collaborative Scene Collection, and use Ping.gg as our source that we'll be swapping out.
Setup
First we'll make some Scenes
- Interview
- Interview w/ Screen
- Buffer (Optional, but a great way to keep your scenes organized)
- This Weeks Guest
In "This Weeks Guest", all we are going to add is a Browser Source from Ping!
:::tip
Check out our Doc on Slots to see how you can leverage those and nested scenes together!
:::
Right click in the sources box and add a Browser Source, we'll be making it 1280x720 and dropping an embed link that we grabbed from our call on Ping.gg
Now that we have this setup in our scene, we'll be able to nest this scene into others.
Adding scenes with dynamically changing sources, like our guest that rotates out every week, will prevent us from having to update multiple different scenes every time we need to bring someone new into the fold.
To add our Scene as a source, all you'll need to do is right click the sources window and add "Scene". We'll be picking "This Weeks Guest"
And now that they are added, we are able to move them around and format them any way that we want in any scene that we want!
Here is an example of a scene that have both participants split 50/50 on screen
And here is one with both participants on screen, but also with a Desktop Capture!
In Conclusion
Nested Scenes was a hidden gem in OBS that only within the last 1-2 years started getting leveraged by broadcasters. It is a fantastic way to manage and alter multiple scenes at once!
File: docs/advanced-obs/refresh-all-sources.md
Refresh All Your Sources At Once
After using OBS for some time, you may find that you end up with 2, 3, or 40 browser sources at a time to personalize your stream, show alerts, or turn yourself into Bongo Cat upon chats request.
But when your internet hiccups, and all of your browser sources decide that they need a refresh, it can be cumbersome to go through each and every one.
With this handy lua script, you can bind Refresh All Broswers with the tap of a single button
Adding scripts to OBS is extremely easy!
First, you'll go to "Tools" in the top bar of OBS
Then you'll navigate down to "Scripts"
Now, in the scripts menu, you'll click the Plus Icon and point OBS to the .lua or .pyz that you want to add, we're going to add the "refresh-broswers.lua" script
Now its added, scripts will have different functionality depending on how their made, and thus will have different menu options on the right hand side of the menu. For us, this script adds a hotkeyable option to refresh all your browser sources.
Now we can navigate to our settings, and down to Hotkeys. You can filter through all the different options by searching in the bar at the top for "Refresh All"
Assign it to your desired key and there you have it! A quick way to refresh all of your Browser Sources all at once!
:::tip
If you use an Elgato Streamdeck, this will be available under "Hotkey Trigger" using the "OBS Tools" addon (available on the StreamDeck Store from BarRaider)
:::
File: docs/advanced-obs/virtual-cam.md
OBS Virtual Camera
OBS's built in Virtual Camera is a super powerful feature. OBS version 26 introduced Virtual Cam as a built-in feature. OBS version 28 overhauled the control you have with it.
Why Do I Need A Virtual Cam?
There are two reasons you might need a virtual camera
- Multi-Program Windows Camera Problemβ’οΈ: your camera crashes when used in two programs at once (like OBS and Ping/Discord/VDO Ninja)
- You want to use OBS as "webcam" in another app (Ping.gg, Discord, VDO Ninja, etc)
OBS Virtual Camera is ONLY USEFUL OUTSIDE OF OBS. That's the point though - you can bridge the magic of OBS into other programs (like Ping!)
Okay...What Do I Use It For?
We're going to talk about TWO common use cases - Return Feed and Cam Out (OBS v28 only)
Return Feed
This is the default - you send out whatever OBS has in it. Great for producing shows w/ your camera taken by OBS, and Virtual Camera used to send it to Ping (or Discord, Zoom, VDO etc). NOT IDEAL if you're a GUEST on someone else's show.
Directly between the "Recording" and "Studio Mode" buttons, you can click "Start Virtual Cam" to send out your main OBS feed as a camera. Whatever you see in the main preview in OBS is now sent out as a camera
Now when you use programs like Ping, you should see "OBS Virtual Cam" as an option
Camera/Scene Out (OBS v28+)
By default, OBS Virtual Cam sends out your main feed. As of version 28, you can send out any scene. This is SUPER USEFUL if you're a guest on another show and you're dealing with the Multi-Program Windows Camera Problemβ’οΈ
:::tip
If you make a separate, full-screen camera scene and use it as a scene source, you can set that scene as a virtual cam! (trust us this makes things so much simpler)
:::
- Click the Settings cog next to the "Start Virtual Cam" button
- Change "Output Type" from "Internal" to "Scene"
- Select the scene you want to send out!
File: docs/intro.md
sidebar_position: 1 slug: /
Getting Started
Ping.gg is the best way to make collab video. Live on Twitch, recorded for Youtube, produced for television, and everything in between.
If you prefer videos, Theo and Adam filmed one below to help you get started quick! Otherwise you can follow along below
Ping.gg Room Setup
Create your room
To get started, sign up for your trial on Ping
The URL you choose during setup is the URL you'll be sending to guests to join your call - will look like:
https://ping.gg/call/demo...where demo would be replaced with the slug you pick during sign-up.
Join Your Room
Use the link you made above (or the join button on ping.gg/dashboard) to enter the call waitroom.
From here, you can select your
- Camera Device
- Camera Resolution & Frame Rate
- Microphone Device
- Speaker/Output Device (Only available in waitroom)
:::tip
Having issues with your camera in Ping?
Using an OBS Virtual Camera as your video camera device can fix many, including the Multi-Program Windows Camera Problemβ’οΈ
:::
Invite a guest
Send the URL you created above to a guest for them to request to join. Whenever a guest tries to join, they will go through three steps:
- Sign in with Twitch, Twitter or Google.
- Select camera and microphone devices
- Click "Request To Join"
When the guest clicks "Request To Join", you will see their request inside of the call in the top right. When you "accept" them, they will join the call
Copy Embed link
When you hover over a video preview in the call, a menu button will appear. Click it and you will have the option to "copy embed link".
This link should be used in a browser source in your streaming software of choice - more below!
Streaming Software Setup
Ping is compatible with any video software that can treat a website URL as a "source" (i.e. a browser source). This includes:
While all of these solutions work, we highly recommend that you use OBS.
Browser Sources
:::tip
Using nested scenes for your Ping browser sources can make things much simpler with complex setups
:::
To get Ping into OBS, first create a Browser Source (+ button in "sources" -> "Browser").
Once you have the browser source customizer window open, you have to change THREE THINGS.
1. Add the Embed URL
Paste the embed URL from a guest as shown above. These URLs are static and don't need to be changed after a call ends
:::tip
For quick embeds, you'll need to add &audio=on to the end of the URL in order to enable audio.
:::
2. Change the resolution to 1920x1080
Even if your guest is using a different resolution, we recommend using 1920 width and 1080 height here to guarantee the simplest scaling and resizing at a 16:9 aspect ration
3. Enable audio control in OBS
In order to have control of the audio from your browser source, you have to enable this checkbox
Now Go Live!
That's it! If this was helpful in getting started, please shout us out on Twitter - also don't hesitate to join our Discord if you have any questions or want to chat with us.
File: docs/solo-tier.md
label: "Solo Tier" sidebar_position: 2
Solo Tier
The solo tier on Ping.gg is focused on getting YOUR video OUT to another OBS user. Great if you're a guest and want to be sure your video comes through crystal clear on the other side.
Watch Adam's video about Ping's Solo Tier
2. Official Technical Reference & Guides (pingdotgg/docs)
File: README.md
Ping.gg Docs
Getting Started
git clonenpm installnpm run dev
TODO
- Merge homepage and /docs
- Find some way for Adam to easily edit this
- Set up analytics
File: docs/advanced-ping/chrome-permissions.md
Enabling Camera and Microphone in Google Chrome
To use Ping, you need to have both your Webcam and Microphone accessible by Google Chrome, and by the off-chance the Chrome does not prompt you at the top of your browser, here is how to enable both devices
First connect to your desired Ping Room
Before joining your call make sure that you are able to see yourself in the preview window.
It seems here that my Camera is not being picked up, and I donβt have the option to add a camera.
in the top left of your browser, click the π icon next to the Address Bar
When you click the π icon, a menu will appear
Here, you will be able to enable your Camera and Microphone again!
:::tip
You may need to refresh your browser after enabling camera/microphone permissions before they will be able to be picked up by Ping.
:::
File: docs/advanced-ping/goxlr-desktop-audio.md
Send GoXLR Desktop Audio through Ping
In Ping, make sure youβre using the βChat Micβ output from GoXLR
In the GoXLR Routing Table, make sure that System Audio is ticked on in the Chat Mic Section
In Ping, go to your dashboard and click on options under your room
Then on the left side, go to Experimental
And make sure to turn off Automatic Gain Control, Automatic Noise Supression, and Automatic Echo Cancellation.
Side note, if your guests can hear themselves in the playback, make sure that whatever youβre using to hear them (Discord or Google Chrome) is being sent to βChatβ in Windows
- You can get there by Right Clicking the Volume Icon in the bottom right of the system tray, then going to Sound Settings, then going to βApp volume and device preferencesβ
File: docs/advanced-ping/return-feeds.md
Screen Share via OBS to Ping
Screen sharing a Return Feed can be an essential part of your broadcast, from Podcasts to Esports events, it is invaluable to let your Talent see what is currently live to your audience.
First open OBS
Navigate to your controls and Start Virtual Camera
Once Virtual Camera is started, join your desired Ping Room
Before joining the call, make sure that βOBS Virtual Cameraβ is selected under your Camera Devices
Now that your Virtual Camera is selected, you may join the room
OBS Virtual Camera sends a video feed of what is currently displayed in your Program Feed
- For those using Studio Mode in OBS, its the feed on the right side
To send Audio via Ping, we recommend using VoiceMeeter, if you happen to be using a GoXLR we have documentation on how to send audio to Ping Here
File: docs/advanced-ping/slots.md
Slots
Slots allow you to set up your browser sources in OBS once, and be able to how swap who is in them directly from Ping. This feature is great for those who leverage nested scenes, have different guests on your broadcast, or run a show where you need to move guests around mid-broadcast.
Setup in Ping
To get started, lets make our first Embed in the Embeds Window on the right-hand side of your call
We'll go ahead and name this Embed like something like "Guest", this will be our Embed slot that we use to rotate a new guest into our show every week.
Now when we have our guest join our call on Ping, we'll click on the Embed Menu icon on their video and add them to Guest.
:::tip
If there is already a guest in this slot, you can also click the swap button to swap them out!
:::
Great! Lets go ahead and take a look in OBS
OBS
We are going to leverage Nested Scenes here to be able to minimize our embeds while dynamically having ourselves and guests placed differently across different scenes
:::tip
We have a full Doc on how Nesting Scenes work, check it out here!
:::
First lets make a scene and name it something like "This Week's Guest", and add a Browser Source to it.
In Ping, we'll grab the Browser Source link from our embed panel by clicking the options cog on our "Guest" embed.
We'll add the link to our Slot Embed to the source, and make it 1280x720 aswell.
From here, we'll be adding a Scene as a source instead of a Browser Source to wherever we need our guest to be!
You'll be adding "This Weeks Guest" where you need them to be, just like you would if it was a Browser Source or Video Capture Device.
In Conclusion
Slots is a way for you to be able to dynamically change your broadcast when using Ping without needing to manually edit browser sources. On the fly, easy snapping, and updates quickly!
File: docs/advanced-obs/nesting-scenes.md
Nesting Scenes
Nesting scenes is a great hack that not a whole lot of people know about in OBS. This allows you to change one source across many different scenes with one action.
We'll go through an example of how Nested Scenes can help in a simple collaborative Scene Collection, and use Ping.gg as our source that we'll be swapping out.
Setup
First we'll make some Scenes
- Interview
- Interview w/ Screen
- Buffer (Optional, but a great way to keep your scenes organized)
- This Weeks Guest
In "This Weeks Guest", all we are going to add is a Browser Source from Ping!
:::tip
Check out our Doc on Slots to see how you can leverage those and nested scenes together!
:::
Right click in the sources box and add a Browser Source, we'll be making it 1280x720 and dropping an embed link that we grabbed from our call on Ping.gg
Now that we have this setup in our scene, we'll be able to nest this scene into others.
Adding scenes with dynamically changing sources, like our guest that rotates out every week, will prevent us from having to update multiple different scenes every time we need to bring someone new into the fold.
To add our Scene as a source, all you'll need to do is right click the sources window and add "Scene". We'll be picking "This Weeks Guest"
And now that they are added, we are able to move them around and format them any way that we want in any scene that we want!
Here is an example of a scene that have both participants split 50/50 on screen
And here is one with both participants on screen, but also with a Desktop Capture!
In Conclusion
Nested Scenes was a hidden gem in OBS that only within the last 1-2 years started getting leveraged by broadcasters. It is a fantastic way to manage and alter multiple scenes at once!
File: docs/advanced-obs/refresh-all-sources.md
Refresh All Your Sources At Once
After using OBS for some time, you may find that you end up with 2, 3, or 40 browser sources at a time to personalize your stream, show alerts, or turn yourself into Bongo Cat upon chats request.
But when your internet hiccups, and all of your browser sources decide that they need a refresh, it can be cumbersome to go through each and every one.
With this handy lua script, you can bind Refresh All Broswers with the tap of a single button
Adding scripts to OBS is extremely easy!
First, you'll go to "Tools" in the top bar of OBS
Then you'll navigate down to "Scripts"
Now, in the scripts menu, you'll click the Plus Icon and point OBS to the .lua or .pyz that you want to add, we're going to add the "refresh-broswers.lua" script
Now its added, scripts will have different functionality depending on how their made, and thus will have different menu options on the right hand side of the menu. For us, this script adds a hotkeyable option to refresh all your browser sources.
Now we can navigate to our settings, and down to Hotkeys. You can filter through all the different options by searching in the bar at the top for "Refresh All"
Assign it to your desired key and there you have it! A quick way to refresh all of your Browser Sources all at once!
:::tip
If you use an Elgato Streamdeck, this will be available under "Hotkey Trigger" using the "OBS Tools" addon (available on the StreamDeck Store from BarRaider)
:::
File: docs/advanced-obs/virtual-cam.md
OBS Virtual Camera
OBS's built in Virtual Camera is a super powerful feature. OBS version 26 introduced Virtual Cam as a built-in feature. OBS version 28 overhauled the control you have with it.
Why Do I Need A Virtual Cam?
There are two reasons you might need a virtual camera
- Multi-Program Windows Camera Problemβ’οΈ: your camera crashes when used in two programs at once (like OBS and Ping/Discord/VDO Ninja)
- You want to use OBS as "webcam" in another app (Ping.gg, Discord, VDO Ninja, etc)
OBS Virtual Camera is ONLY USEFUL OUTSIDE OF OBS. That's the point though - you can bridge the magic of OBS into other programs (like Ping!)
Okay...What Do I Use It For?
We're going to talk about TWO common use cases - Return Feed and Cam Out (OBS v28 only)
Return Feed
This is the default - you send out whatever OBS has in it. Great for producing shows w/ your camera taken by OBS, and Virtual Camera used to send it to Ping (or Discord, Zoom, VDO etc). NOT IDEAL if you're a GUEST on someone else's show.
Directly between the "Recording" and "Studio Mode" buttons, you can click "Start Virtual Cam" to send out your main OBS feed as a camera. Whatever you see in the main preview in OBS is now sent out as a camera
Now when you use programs like Ping, you should see "OBS Virtual Cam" as an option
Camera/Scene Out (OBS v28+)
By default, OBS Virtual Cam sends out your main feed. As of version 28, you can send out any scene. This is SUPER USEFUL if you're a guest on another show and you're dealing with the Multi-Program Windows Camera Problemβ’οΈ
:::tip
If you make a separate, full-screen camera scene and use it as a scene source, you can set that scene as a virtual cam! (trust us this makes things so much simpler)
:::
- Click the Settings cog next to the "Start Virtual Cam" button
- Change "Output Type" from "Internal" to "Scene"
- Select the scene you want to send out!
File: docs/intro.md
sidebar_position: 1 slug: /
Getting Started
Ping.gg is the best way to make collab video. Live on Twitch, recorded for Youtube, produced for television, and everything in between.
If you prefer videos, Theo and Adam filmed one below to help you get started quick! Otherwise you can follow along below
Ping.gg Room Setup
Create your room
To get started, sign up for your trial on Ping
The URL you choose during setup is the URL you'll be sending to guests to join your call - will look like:
https://ping.gg/call/demo...where demo would be replaced with the slug you pick during sign-up.
Join Your Room
Use the link you made above (or the join button on ping.gg/dashboard) to enter the call waitroom.
From here, you can select your
- Camera Device
- Camera Resolution & Frame Rate
- Microphone Device
- Speaker/Output Device (Only available in waitroom)
:::tip
Having issues with your camera in Ping?
Using an OBS Virtual Camera as your video camera device can fix many, including the Multi-Program Windows Camera Problemβ’οΈ
:::
Invite a guest
Send the URL you created above to a guest for them to request to join. Whenever a guest tries to join, they will go through three steps:
- Sign in with Twitch, Twitter or Google.
- Select camera and microphone devices
- Click "Request To Join"
When the guest clicks "Request To Join", you will see their request inside of the call in the top right. When you "accept" them, they will join the call
Copy Embed link
When you hover over a video preview in the call, a menu button will appear. Click it and you will have the option to "copy embed link".
This link should be used in a browser source in your streaming software of choice - more below!
Streaming Software Setup
Ping is compatible with any video software that can treat a website URL as a "source" (i.e. a browser source). This includes:
While all of these solutions work, we highly recommend that you use OBS.
Browser Sources
:::tip
Using nested scenes for your Ping browser sources can make things much simpler with complex setups
:::
To get Ping into OBS, first create a Browser Source (+ button in "sources" -> "Browser").
Once you have the browser source customizer window open, you have to change THREE THINGS.
1. Add the Embed URL
Paste the embed URL from a guest as shown above. These URLs are static and don't need to be changed after a call ends
:::tip
For quick embeds, you'll need to add &audio=on to the end of the URL in order to enable audio.
:::
2. Change the resolution to 1920x1080
Even if your guest is using a different resolution, we recommend using 1920 width and 1080 height here to guarantee the simplest scaling and resizing at a 16:9 aspect ration
3. Enable audio control in OBS
In order to have control of the audio from your browser source, you have to enable this checkbox
Now Go Live!
That's it! If this was helpful in getting started, please shout us out on Twitter - also don't hesitate to join our Discord if you have any questions or want to chat with us.
File: docs/solo-tier.md
label: "Solo Tier" sidebar_position: 2
Solo Tier
The solo tier on Ping.gg is focused on getting YOUR video OUT to another OBS user. Great if you're a guest and want to be sure your video comes through crystal clear on the other side.
Watch Adam's video about Ping's Solo Tier