useRemoteVideo
The useRemoteVideo hook exposes primitives to interact with video streams coming from other peers in the room.
const {
state,
track,
stream,
} = useRemoteVideo({
peerId: "remote-peer-id",
onPlayable(data) {},
onClose() {},
});Props
The useRemoteVideo hook accepts an object with the following fields as props.
1. peerIdRequired
| Description | Type |
|---|---|
| The peerId of the peer whose video stream you want to consume. | string |
Example Usage
const remoteVideo = useRemoteVideo({ peerId: "remote-peer-id" });2. onPlayableOptionalAdvanced
| 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
}});3. onCloseOptionalAdvanced
| 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: () => {
console.log("Remote video stream has been closed!");
// your code here
}});Returns
The useRemoteVideo hook returns an object with the following fields.
1. streamObject
| Description | Type |
|---|---|
| Remote peer's video stream. null if not enabled yet. | MediaStream | null |
2. trackObject
| Description | Type |
|---|---|
| Remote peer's video stream track. null if not enabled yet. | MediaStreamTrack | null |
3. stateObject
| Description | Type |
|---|---|
| State of the remote peer's video stream. | "playable" | "unavailable" | "stopped" | "paused" | "available" |