The useWebRTC hook handles all the necessary logic to manage a WebRTC connection with the Outspeed’s backend.

​
Options

​
config
TRealtimeConfig
  • Required
  • This configuration is used by the useWebRTC hook to initialize local audio and video streams, set up peer connections, enable logging, and more.
  • Learn more about config here.

​
Returns

​
connectionStatus
TWebRTCConnectionStatus
  • Init when the component mounts and config is undefined.
  • SetupCompleted when config is defined but connect hasn’t been called.
  • Connecting when connect is called and the connection to the backend is in progress.
  • Connected when the connection to the backend is successful.
  • Failed if the connection to the backend fails.
  • Disconnecting when attempting to disconnect from the backend.
  • Disconnected when successfully disconnected from the backend.
​
connect
() => void
  • A function that initiates the connection to the backend.
  • Be sure to call this when connectionStatus is SetupCompleted, otherwise it will have no effect.
​
disconnect
() => void
  • A function to disconnect from the backend.
  • Be sure to call this when connectionStatus is Connected, otherwise it will have no effect.
​
reset
() => void
  • A function to reset the connection.
  • Be sure to call this when connectionStatus is Disconnected, otherwise it will have no effect.
  • This will set the connectionStatus to Init.
​
dataChannel
WebRTCDataChannel
  • A WebRTC data channel for sending and receiving messages.
  • To send a message to the backend, use dataChannel.send({ type: "message", data: "Hello" }).
  • To listen for messages from the backend, use dataChannel.addEventListener('message', (message) => console.log(message)).
  • To remove a message listener, use dataChannel.removeEventListener('message', onMessage).
  • The available events are open (triggered when the data channel opens), close (triggered when the data channel closes), and message (triggered when a message is received).
​
addEventListener
(type: TRealtimeConnectionListenerType, listener: TRealtimeConnectionListener) => TUseWebRTCReturn
  • To attach an event listener to the RTCPeerConnection.
  • Refer to this MDN doc to learn more.
​
removeEventListener
(type: TRealtimeConnectionListenerType, listener: TRealtimeConnectionListener) => TUseWebRTCReturn
  • To remove an event listener from the RTCPeerConnection.
​
getLocalAudioTrack
() => Track | null
  • Returns the first local audio track, or null if no audio track is available.
  • This is a reactive function that may trigger a re-render when a track is added or removed.
​
getLocalVideoTrack
() => Track | null
  • Returns the first local video track, or null if no video track is available.
  • This is a reactive function that may trigger a re-render when a track is added or removed.
​
getRemoteAudioTrack
(remoteId: string) => Track | null | undefined
  • Returns the first active remote audio track, or null if it doesn’t exist. If the connection is still in progress, it may return undefined. Once the connection is updated, it will return the track.
  • This is a reactive function that may trigger a re-render when a track is added or removed.
​
getRemoteVideoTrack
(remoteId: string) => Track | null | undefined
  • Returns the first active remote video track, or null if it doesn’t exist. If the connection is still in progress, it may return undefined. Once the connection is updated, it will return the track.
  • This is a reactive function that may trigger a re-render when a track is added or removed.

​
Resources

WebRTC Realtime App

Check out WebRTC Realtime App on GitHub

useWebRTC

Check out our useWebRTC code on Github.

Was this page helpful?

createConfiguseWebSocket