Javascript Video Calling Tutorial

This tutorial gives you a quick overview of how Stream's video JavaScript client works.

The code snippets use TypeScript, but you can use the library with JavaScript as well.

Create an instance of StreamVideoClient that will establish WebSocket connection by connecting a user. Next you create a call object and join the call. We'll specify create: true to create the call if it doesn't exist.

default is a call type. There are 4 built-in call types and you can also create your own. The call type controls the permissions and which features are enabled.

The second argument is the call id. Call ids can be reused, meaning that it's possible to join a call with the same id multiple times (for example, for recurring meetings).

For an easy setup, you can copy the following credentials to use for the tutorial. It also helps with joining multiple participants:

Once we join a call, we can start publishing audio and video:

More information about this topic can be found in the Camera & Microphone guide.

The JavaScript client provides reactive state management, which makes it easy to trigger UI updates. To render the audio and video of participants, you can watch for changes on call.state.participants$, here is the full example:

Now let's see what happens in the renderParticipant method, because that's what does the heavy lifting:

The most important parts are:

• call.trackElementVisibility: this will enable the client to detect if a particpant's video element isn't visible on the screen, in which case it will stop requesting the video, saving bandwidth
• call.bindVideoElement will bind the given participants video stream to the given video element, and takes care of stream changes and resizes
• call.bindAudioElement will bind the given participants audio stream to the given audio element, and takes care of stream changes

For more information check out these guides:

• Participant visibility tracking
• Playing Video and Audio

When a participant leaves the call, we need to unbind their video and audio elements.

If you're using a web framework, you can usually use a component lifecycle event to trigger the unbinding.

More information about state management can be found in the Call & Participant State guide.

Background noise during a call session is never pleasant for the call participants.

Our SDK provides a plugin that helps to greatly reduce the unwanted noise caught by your microphone. Read more on how to enable it here.

Most video apps will show buttons to mute/unmute the audio or video.

This is how the renderControls method looks like:

More information about this topic can be found in the Camera & Microphone guide.

We have prepared a CodeSandbox example that demonstrates the above steps in action.

Final Thoughts

In this video app tutorial we built a fully functioning Javascript messaging app with our Javascript SDK component library. We also showed how easy it is to customize the behavior and the style of the Javascript video app components with minimal code changes.

Both the video SDK for Javascript and the API have plenty more features available to support more advanced use-cases.

Give us Feedback!

Did you find this tutorial helpful in getting you up and running with Javascript for adding video to your project? Either good or bad, we’re looking for your honest feedback so we can improve.

No

Almost

Yes

Send