Twillio Video and JavaScript: Changing Webcam

Question

I am trying to implement a webchat with Twilio Programmable Video and its Javascript SDK. So far I have managed to create a Room (in the backend) and connect the current user to the room.

The video is streamed from the local webcam (on a PC) to a div which is called 'remote-media-div'.

When the user is connected and video is seen on the screen, Twilio inserts a tag and a tag into remote-media-div

I would like to let the users choose the camera if they have more than one. I get the list of cameras and show it in a drop-down. When I select the webcam I run the below code to switch the stream to a newly selected camera. The second webcam's recording light is turned on but the video is still being received from the previous camera. What am I doing wrong?

let currentStream = null;
$.ajax({
    url: `/operations/Room/Create`,
    type: 'POST',
    contentType: "application/json",
    success: function (result) {
        var roomName = result.room.name;
        var token = result.room.token;

        Twilio.Video.connect(token,
            {
                name: `${roomName}`,
                audio: true,
                maxAudioBitrate: 16000, 
                video: { height: 1000, frameRate: 24, width: 1000 },
                networkQuality: {local:1, remote: 1}
            }
            
            ).then(function(room) {

               currentStream= room.stream;
               navigator.mediaDevices.enumerateDevices().then(gotDevices);
            
            const localParticipant = room.localParticipant;

            localParticipant.tracks.forEach(publication => {
                const track = publication.track;
                document.getElementById('remote-media-div').appendChild(track.attach());
                
            });
        }, function(error) {
            console.error('Unable to connect to Room: ' +  error.message);
        });
    },
    error: function (error) {
        console.log(error);
    }
});

When the drop-down changes, I switch the media stream.

function stopMediaTracks(stream) {
    stream.getTracks().forEach(track => {
        track.stop();
    });
}

var cameraId = 1; // new Camera Id
    const videoConstraints = {};
    videoConstraints.deviceId = { exact:cameraId };
    const constraints = {
        video: videoConstraints,
        audio: true
    };
    if (currentStream) {
        stopMediaTracks(currentStream);
    }
    debugger;
    const video = document.getElementsByTagName('video');
    
    navigator.mediaDevices
        .getUserMedia(constraints)
        .then(stream => {
            currentStream = stream;
            video.srcObject = stream;
            return navigator.mediaDevices.enumerateDevices();
        })
        .catch(error => {
            console.error(error);
        });

This code, as I said, does not turn the previous camera off. And the video (my own picture) keeps coming from the previous camera although the new camera is on too.

I have looked at the sample codes on GitHub and I don't seem to have done it incorrectly.

score 0 · Answer 1 · answered Apr 19 '21 at 06:48

Twilio developer evangelist here.

I think I know the sample code on GitHub that you are looking at (I think it's mine ) but you have missed that there is a sample Video Chat available there too.

First, I can tell you that you are not seeing the first stream end because you are trying to set currentStream to room.stream which doesn't exist. This means stopMediaTracks is never called.

Secondly, you are not applying the new video stream to the room, so it won't be seen by other participants in the call. You need to turn the new camera stream into a LocalVideoTrack and then publish the track to the room.

I recommend you read through this blog post on changing cameras during a Twilio video call and check this example code for changing a camera during a Twilio Video call.

Twillio Video and JavaScript: Changing Webcam

1 Answers1