docs Documentation

Official MDX developer resources and documentation for pingdotgg/docs with 37k stars. Verified technical context for AI.

36,534 stars MDX 52 files Β· ~243,732 tokens
RAW Doc

1. Project Overview & Quickstart (pingdotgg/docs)

File: README.md

Ping.gg Docs

Getting Started

  • git clone
  • npm install
  • npm 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

  1. Multi-Program Windows Camera Problemℒ️: your camera crashes when used in two programs at once (like OBS and Ping/Discord/VDO Ninja)
  2. 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)
:::

  1. Click the Settings cog next to the "Start Virtual Cam" button
  2. Change "Output Type" from "Internal" to "Scene"
  3. Select the scene you want to send out!

File: docs/intro.md


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:

text
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:

  1. Sign in with Twitch, Twitter or Google.
  2. Select camera and microphone devices
  3. 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

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 clone
  • npm install
  • npm 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

  1. Multi-Program Windows Camera Problemℒ️: your camera crashes when used in two programs at once (like OBS and Ping/Discord/VDO Ninja)
  2. 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)
:::

  1. Click the Settings cog next to the "Start Virtual Cam" button
  2. Change "Output Type" from "Internal" to "Scene"
  3. Select the scene you want to send out!

File: docs/intro.md


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:

text
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:

  1. Sign in with Twitch, Twitter or Google.
  2. Select camera and microphone devices
  3. 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

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