我正在尝试用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上的示例代码,我似乎没有做错。