Setting Up the Environment
- Ensure you have installed Node.js as it's required to run the Twilio Video JavaScript SDK.
- Use a package manager like npm or yarn to include the Twilio Video SDK in your project. Run
npm install twilio-video in your project directory.
Creating a Basic Video Room
- To start using the Twilio Video API, you need to generate access tokens. These tokens should be generated on a backend server for security reasons.
- Once you have the server-side token generator set up, ensure that your JavaScript code can receive a valid token.
- Import the Twilio Video library in your JavaScript file.
import { connect, createLocalVideoTrack } from 'twilio-video';
- Now, create a function to connect to the Twilio Video service using the access token.
async function joinVideoRoom(token, roomName) {
try {
const room = await connect(token, { name: roomName });
console.log(`Connected to Room: ${room.name}`);
room.on('participantConnected', participant => {
console.log(`Participant "${participant.identity}" connected`);
participant.on('trackSubscribed', track => {
document.getElementById('remote-media-div').appendChild(track.attach());
});
});
} catch (error) {
console.error(`Unable to connect to Room: ${error.message}`);
}
}
Handling Video Tracks
- To start or stop your local video, use the
createLocalVideoTrack function. Attach it to a DOM element to display the local video stream.
- Create a simple helper function to initialize and attach the local video track.
async function setupLocalVideo() {
const localVideoTrack = await createLocalVideoTrack();
const localMediaContainer = document.getElementById('local-media-div');
localMediaContainer.appendChild(localVideoTrack.attach());
}
Displaying Remote Media
- Every participant in a video room can publish audio and video tracks. Whenever a participant adds a video track, you need to handle this event and attach the track to the DOM.
- Add handling logic inside the
participantConnected listener from the earlier step.
room.on('participantConnected', participant => {
participant.tracks.forEach(publication => {
if (publication.isSubscribed) {
const track = publication.track;
document.getElementById('remote-media-div').appendChild(track.attach());
}
});
});
Cleanup after Leaving a Room
- When leaving a room, always ensure to stop all local and remote media tracks to free up resources and avoid memory leaks.
- Attach the following code snippet to handle cleanup operations.
function leaveRoom(room) {
room.localParticipant.tracks.forEach(publication => {
const track = publication.track;
track.stop();
track.detach().forEach(element => element.remove());
});
room.disconnect();
console.log('Disconnected from the Room');
}
Troubleshooting Common Issues
- If video doesn't display, ensure that your browser has permissions to access the camera and microphone.
- Check the console for any error messages that can provide hints for debugging the connection process.
- Ensure that network settings and firewalls allow access to Twilio's signaling and media servers.
