我准备了一个网络摄像头流媒体应用程序,因此使用“navigator.mediaDevices.getUserMedia”在视频标签中预览了用户网络摄像头。
在用户点击一个按钮并且“RTCmulticonnection”打开一个房间后,我想添加预览网络摄像头/视频以用作网络摄像头流。
我只是不明白它的工作。
我将向您展示的部分在 socket.io 连接建立后开始 - “connection.open”方法还返回房间已创建并建立连接。所以信令工作 - 我只是不知道如何简单地将我的视频附加到(RTCmulsiconnection)连接对象。
我曾尝试使用“attachStreams”方法,但仍未成功。
//Get Users Webcam
navigator.mediaDevices.getUserMedia({
audio: true,
video: true
}).then(function(stream) {
$("#mediaPreview").show();
let preview = document.getElementById('mediaPreviewVideo');
preview.srcObject = stream;
preview.volume = 0;
preview.play();
});
//Start stream
$("#btnMediaStreamStart").on('click', function(e) {
//Prevent Default & Hide
e.preventDefault();
//Add Classes
$("#mediaPreviewVideo").addClass('webcam-online');
$("#mediaStreamStatus").show().addClass('bg-success').html('<small><strong>Live</strong></small>');
connection.socketURL = 'localhost:9001/';
let connectionRoom = '123';
connection.open(connectionRoom, function(e) {
if (e === true) {
connection.attachStreams.forEach(function(localStream) {
//How to attach the cam stream? Is my previously created video even part of the "streams"?
});
connection.mediaConstraints = {
audio: {
deviceId: selectAudio
},
video: {
deviceId: selectVideo
}
};
}
});