Integrate Video
This tutorial guides how to add basic video features to an application.
1. Add new buttons to the application layout
Open the index.html
file and create the following HTML elements:
- A
div
element with thevideo-container
ID, to which a video stream will be dynamically added - A
div
element with theactions
ID responsible for buttons with thestart-video-btn
ID - A
button
element with thestop-video-btn
ID located in theactions
element
<!-- Step 1: Add buttons responsible for enabling and disabling video -->
<div id="app">
<div id="form">...</div>
<div id="actions">
<button id="start-video-btn" disabled>Start video</button>
<button id="stop-video-btn" disabled>Stop video</button>
</div>
<div id="video-container"></div>
</div>
2. Declare the startVideoBtn and stopVideoBtn variables
Open the ui.js
file and declare startVideoBtn
and stopVideoBtn
in the initUI
function. These buttons will be responsible for starting and stopping the local participant's video stream.
/// Step 2: Declare variables responsible for enabling and disabling video
const startVideoBtn = document.getElementById("start-video-btn");
const stopVideoBtn = document.getElementById("stop-video-btn");
3. Edit the joinButton "onclick" function
The function needs to enable the startVideoBtn
button when the local participant joins a conference. This way, the local participant will be able to start their video after joining.
/// Step 3: Modify the join function to allow enabling video after joining a conference
joinButton.onclick = () => {
... => VoxeetSDK.conference.join(conference, {}))
.then(() => {
// -----> Enable the button here ------>
startVideoBtn.disabled = false;
})
...
};
4. Write an "onclick" handler for startVideoBtn
The handler needs to start video transmission and enable the stopVideoBtn
button after calling the start method. This way, the participant will be able to stop transmitting the started video stream.
/// Step 4: Write a handler that starts video transmission and enables the stopVideoBtn button
startVideoBtn.onclick = () => {
VoxeetSDK.video.local
.start()
.then(() => {
startVideoBtn.disabled = true;
stopVideoBtn.disabled = false;
})
.catch((err) => console.error(err));
};
Note: If you use SDK 3.6 or earlier, use the VoxeetSDK.conference.startVideo method.
5. Write an "onclick" handler for stopVideoBtn
The stopVideoBtn
button needs to stop the started video stream and enable the startVideoBtn
button after calling the stop method.
/// Step 5: Write a handler that stops the video stream transmission and enables the startVideoBtn button
stopVideoBtn.onclick = () => {
VoxeetSDK.video.local
.stop()
.then(() => {
startVideoBtn.disabled = false;
stopVideoBtn.disabled = true;
})
.catch((err) => console.error(err));
};
Note: If you use SDK 3.6 or earlier, use the VoxeetSDK.conference.stopVideo method.
6. Write the addVideoNode function
The function needs to be responsible for the dynamic creation of a specific participant's video node element in the HTML DOM.
/// Step 6: Create a video node element in the video-container <div> for a specific participant
const addVideoNode = (participant, stream) => {
let videoNode = document.getElementById("video-" + participant.id);
if (!videoNode) {
videoNode = document.createElement("video");
videoNode.setAttribute("id", "video-" + participant.id);
videoNode.setAttribute("height", 240);
videoNode.setAttribute("width", 320);
videoNode.setAttribute("playsinline", true);
videoNode.muted = true;
videoNode.setAttribute("autoplay", "autoplay");
const videoContainer = document.getElementById("video-container");
videoContainer.appendChild(videoNode);
}
navigator.attachMediaStream(videoNode, stream);
};
When the local participant joins a conference with audio or video enabled, the SDK emits the streamAdded event to all remote conference participants.
Note: The playsinline
attribute used in this example prevents the video from freezing in the Safari browser.
7. Write the removeVideoNode function
The function needs to be responsible for removing specific participant's video elements from the UI.
/// Step 7: Write a function responsible for removing specific video elements from the UI
const removeVideoNode = (participant) => {
let videoNode = document.getElementById("video-" + participant.id);
if (videoNode) {
videoNode.srcObject = null; // Prevent memory leak in Chrome
videoNode.parentNode.removeChild(videoNode);
}
};
When the local participant leaves a conference, the SDK emits the streamRemoved event to all remote conference participants.
8. Call addVideoNode after receiving the streamAdded and streamUpdated events
Open the client.js
file and call addVideoNode
upon receiving the streamAdded and streamUpdated events in the main
function.
/// Step 8: Add event handlers that call addVideoNode after receiving the streamAdded and streamUpdated events
VoxeetSDK.conference.on("streamAdded", (participant, stream) => {
if (stream.type === "ScreenShare") return;
if (stream.getVideoTracks().length) {
addVideoNode(participant, stream);
}
});
VoxeetSDK.conference.on("streamUpdated", (participant, stream) => {
if (stream.type === "ScreenShare") return;
if (stream.getVideoTracks().length) {
addVideoNode(participant, stream);
} else {
removeVideoNode(participant);
}
});
9. Call removeVideoNode after receiving the streamRemoved event
In the same file, call removeVideoNode
in the main
function upon receiving the streamRemoved event.
/// Step 9: Add an event handler that calls removeVideoNode after receiving the streamRemoved events
VoxeetSDK.conference.on("streamRemoved", (participant, stream) => {
removeVideoNode(participant);
});
After these steps, you should see in your application the added buttons and be able to start and stop your video stream.
Updated 6 months ago