Twilio 视频和 JavaScript：更改网络摄像头答案

【问题标题】：Twillio Video and JavaScript: Changing WebcamTwilio 视频和 JavaScript：更改网络摄像头
【发布时间】：2021-04-10 13:22:42
【问题描述】：

我正在尝试使用 Twilio 可编程视频及其 Javascript SDK 实现网络聊天。到目前为止，我已经成功创建了一个 Room（在后端）并将当前用户连接到该房间。

视频从本地网络摄像头（在 PC 上）流式传输到称为“remote-media-div”的 div。

当用户连接并在屏幕上看到视频时，Twilio 会在 remote-media-div 中插入一个标签和一个标签

如果有多个相机，我想让用户选择相机。我得到相机列表并将其显示在下拉列表中。当我选择网络摄像头时，我运行以下代码将流切换到新选择的摄像头。第二个网络摄像头的录制灯已打开，但仍从前一个摄像头接收视频。我做错了什么？

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);
    }
});

当下拉改变时，我切换媒体流。

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);
        });

正如我所说，这段代码不会关闭前一个摄像头。并且视频（我自己的照片）一直来自以前的相机，尽管新相机也打开了。

我查看了 GitHub 上的示例代码，似乎没有做错。

【问题讨论】：

标签： twilio twilio-api twilio-video

【解决方案1】：

这里是 Twilio 开发者宣传员。

我想我知道您正在查看的 GitHub 上的示例代码（我想这是我的 ?），但您错过了那里也有可用的示例视频聊天。

首先，我可以告诉您，您没有看到第一个流结束，因为您尝试将 currentStream 设置为不存在的 room.stream。这意味着永远不会调用 stopMediaTracks。

其次，您没有将新视频流应用到房间，因此通话中的其他参与者不会看到它。您需要将新的摄像头流转为LocalVideoTrack，然后将轨道发布到房间。

我建议您通读changing cameras during a Twilio video call 上的这篇博文并查看example code for changing a camera during a Twilio Video call。

【讨论】：