问题描述
我正在尝试使用 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。