We assume you have already deployed your backend. If not, please follow this tutorial to deploy your backend with outspeed-client.

The code shown establishes a peer connection with the backend and streams local audio and video to it. If the backend is configured to return the audio and video, they will be displayed as well.

  • We import necessary components from the @outspeed/react and @outspeed/core libraries.
  • useWebRTC: This hook is used to manage WebRTC connections. It provides methods like connect, getRemoteVideoTrack, and getLocalVideoTrack. Visit here to learn more about useWebRTC.
  • The useWebRTC hook is set up with a URL (functionURL) and options to enable audio and video. We can also use useCreateConfig to create a config, visit here.
    • audioConstraints: {}: This selects the default audio input device and streams the audio to the backend. You can also specify any MediaTrackConstraints to customize the audio input.
    • videoConstraints: {}: This selects the default video input device and streams the video to the backend. Similar to audio, you can pass MediaTrackConstraints to define specific video input settings.
  • Video Streams: Using RealtimeVideo component to view streams. Learn more about RealtimeVideo component here.

​
Resources

WebRTC Example

Check out our WebRTC App on Github.

Playground

Check out our playground code on Github.

Was this page helpful?

InstallationWebsocket