提问者:小点点

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


我正在尝试用Twilio可编程视频及其JavascriptSDK实现一个网络聊天。到目前为止,我已经设法创建了一个房间(在后端)并将当前用户连接到房间。

视频从本地网络摄像头(在PC上)流式传输到一个名为“telte-media-div”的div。

当用户连接并在屏幕上看到视频时,Twilio将一个标签和一个标签插入到telte-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上的示例代码,我似乎没有做错。


共0个答案