useRemoteVideo

The useRemoteVideo hook exposes primitives to interact with video streams coming from other peers in the room.

Name	Description	Return Type
stream	Remote peer's video stream. null if not enabled yet.	MediaStream \| null
track	Remote peer's video stream track. null if not enabled yet.	MediaStreamTrack \| null
state	State of the remote peer's video stream.	"playable" \| "unavailable" \| "stopped" \| "paused" \| "available"
isVideoOn	State of the remote peer's video stream.	boolean

Example Usage

import { useRemoteVideo } from '@huddle01/react/hooks';
import { useEffect, useRef } from 'react';
 
const {
    state,
    track,
    stream,
    isVideoOn,
  } = useRemoteVideo({
    peerId: "remote-peer-id",
    onClose(reason:{
    code: number;
    tag: string;
    message: string;
    }) {},
    onPlayable(data:{
      stream:Mediastream,
      track:Mediatrack,
      label:"video"
    }) {}
  });
 
const videoRef = useRef<HTMLVideoElement>(null);
 
useEffect(() => {
  if (videoRef.current && stream) {
    videoRef.current.srcObject = stream;
  }
}, [stream]);
 
return (
  <div>
    <video ref={videoRef} autoPlay muted />
  </div>
);

Props

The useRemoteVideo hook accepts an object with the following fields as props.

peerId

Required

Description	Type
The peerId of the peer whose video stream you want to consume.	string

Example Usage

const remoteVideo = useRemoteVideo({ peerId: "remote-peer-id" });

onPlayable

OptionalAdvanced

Description	Return Type
This function will be called when the other peer has enabled their video stream and it can now be played on your end.	void

Parameter Name	Type	Description	Required
data	{track: MediaStreamTrack; stream: MediaStream; label: 'video';}	The data object containing the video stream and video stream track that can be played.	Yes

Example Usage

const remoteVideo = useRemoteVideo({ peerId: "remote-peer-id", onPlayable: (data) => {
	console.log("Ready to play remote peer's video stream!");
    // your code here
}});

onClose

OptionalAdvanced

Description	Return Type
This function will be called when the other peer disabled their camera's video stream.	void

Example Usage

const remoteVideo = useRemoteVideo({ peerId: "remote-peer-id", onClose: (reason) => {
	console.log("Remote video stream has been closed!");
    // your code here
}});

useRemotePeer useRemoteAudio