Camera Controls - React
Whenever any participant wants to start/stop broadcasting their video to other participant in a meeting, they can simply do it with VideoSDK Meeting.
This guide will provide an overview of how to implement enable, disable and switch webcam features in a meeting.
-
Enable Camera - By using
enableWebcam()
function, a participant can publish camera stream to other participants.- You can pass customise video track in
enableWebcam()
by using Custom Video Track.
- You can pass customise video track in
-
Disable Camera - By using
disableWebcam()
function, a participant can stop publishing camera stream to other participants. -
Switch Camera - By using
changeWebcam()
function, a participant can stream from front / rear camera during the meeting.This function is only applicable for Mobile devices. -
Toggle Camera - By using
toggleWebcam()
function, a participant start or stop publishing the video during the meeting.
Enable, Disable And Switch Webcam​
import { useMeeting } from "@videosdk.live/react-sdk";
const MeetingView = () => {
const {
enableWebcam,
disableWebcam,
getWebcams,
changeWebcam,
toggleWebcam,
} = useMeeting();
const onPress = async () => {
// Enable Webcam in Meeting
enableWebcam();
// Disable Webcam in Meeting
disableWebcam();
// Toggle Webcam in Meeting
toggleWebcam();
// Change Webcam in Meeting
const webcams = await getWebcams(); // returns all webcams
const { deviceId, label } = webcams[0];
changeWebcam(deviceId);
};
return <>...</>;
};
To get a better control over the Video Quality, we recommend you to use the custom video tracks. You can check out how to use custom video tracks here.
Events​
Event associated with enableWebcam()
:
- Every Participant will receive a callback on
onStreamEnabled()
of theuseParticipant()
hook withStream
object.
Event associated with disableWebcam()
:
- Every Participant will receive a callback on
onStreamDisabled()
of theuseParticipant()
hook withStream
object.
import { useParticipant } from "@videosdk.live/react-sdk";
function onStreamEnabled(stream) {
if(stream.kind === 'video'){
console.log("Video Stream On: onStreamEnabled", stream);
}
}
function onStreamDisabled(stream) {
if(stream.kind === 'video'){
console.log("Video Stream Off: onStreamDisabled", stream);
}
}
const {
displayName
...
} = useParticipant(participantId,{
onStreamEnabled,
onStreamDisabled,
...
});
Got a Question? Ask us on discord