Twillio 视频和 JavaScript：更改网络摄像头

如何解决Twillio 视频和 JavaScript：更改网络摄像头

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

视频从本地网络摄像头（在 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 开发者布道者。

我想我知道您正在查看的 GitHub 上的示例代码（我认为它是我的 ?），但您没有注意到那里也有一个视频聊天示例。

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

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

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