Javascript 如何使用attachMediaStream?

Javascript 如何使用attachMediaStream?,javascript,webrtc,Javascript,Webrtc,我尝试使用WebRTC socket.io测试一个视频通话和聊天练习。 我无法在firefox上获得控制台错误,但没有攻击它们之间的两个本地/远程流。 我的浏览器代码是 “严格使用”; var p=navigator.mediaDevices.getUserMedia({video:true,audio:true}); //清理功能: //在卸载浏览器窗口之前收集垃圾 window.onbeforeunload=函数(e){ 挂断(); } //数据通道信息 var发送通道、接收通道; var

我尝试使用WebRTC socket.io测试一个视频通话和聊天练习。 我无法在firefox上获得控制台错误,但没有攻击它们之间的两个本地/远程流。 我的浏览器代码是

“严格使用”;
var p=navigator.mediaDevices.getUserMedia({video:true,audio:true});
//清理功能:
//在卸载浏览器窗口之前收集垃圾
window.onbeforeunload=函数(e){
挂断();
}
//数据通道信息
var发送通道、接收通道;
var sendButton=document.getElementById(“sendButton”);
var sendTextarea=document.getElementById(“dataChannelSend”);
var receiveTextarea=document.getElementById(“dataChannelReceive”);
//HTML5元素
var localVideo=document.querySelector('#localVideo');
var remoteVideo=document.querySelector(“#remoteVideo”);
//与发送按钮关联的处理程序
sendButton.onclick=sendData;
//旗帜。。。
var isChannelReady=false;
var isInitiator=false;
var isStarted=假;
//WebRTC数据结构
//溪流
var-SStream;
var b流;
var-localStream;
远程流;
//对等连接
var-pc;
变量pc_约束={
“可选”:[
{'DtlsSrtpKeyAgreement':true}
]};
var sdpConstraints={};
//让我们开始:提示用户输入(房间名称)
var room=prompt('输入房间名称:');
//连接到信令服务器
变量套接字=io.connect(“http://localhost:8181");
//向singnaling服务器发送“创建或加入”消息
如果(房间!=''){
控制台日志(“创建或加入文件室”,文件室);
socket.emit('create或join',房间);
}
//服务器中介的消息交换。。。
// 1. 服务器-->客户端。。。
//该对等方是发起方
插座打开('已创建'),功能(房间){
console.log('创建的房间'+房间);
isInitiator=true;
//调用getUserMedia()
p、 然后(函数(MediaStream){
SStream=MediaStream;
localVideo.src=window.URL.createObjectURL(MediaStream);
localVideo.onloadedmetadata=函数(e){
log(“添加本地流”);
sendMessage('got user media');
};
});
p、 catch(函数(err){console.log(err.name);});
checkAndStart();
});
//处理从服务器返回的“加入”消息:
//另一个对等方正在加入该频道
插座开('join',功能(房间){
console.log('此对等方是房间'+room+'!'的发起人);
isChannelReady=true;
})
//处理从服务器返回的“已加入”消息:
//这是加入通道的第二个对等方
插座上的('连接',功能(房间){
console.log('该对等方已加入房间'+房间);
isChannelReady=true;
//调用getUserMedia()
p、 然后(函数(MediaStream){
isChannelReady=true;
b流=媒体流;
remoteVideo.src=window.URL.createObjectURL(MediaStream);
remoteVideo.onloadedmetadata=函数(e){
log(“添加远程流”);
sendMessage('got user media');
};
});
p、 catch(函数(err){console.log(err.name);});
});
//服务器已发送日志消息。。。
socket.on('log',函数(数组){
console.log.apply(控制台,数组);
});
//通过信令服务器从另一个对等方接收消息
socket.on('message',函数(message){
console.log('收到的消息:',消息);
如果(消息=='已获得用户媒体'){
console.log('sono-in-if');
checkAndStart();
} 
else if(message.type==='offer'){
如果(!isInitiator&!isStarted){
checkAndStart();
}
pc.setRemoteDescription(新的RTCSessionDescription(消息));
doAnswer();
}		 
else if(message.type==='answer'&&isstart){
pc.setRemoteDescription(新的RTCSessionDescription(消息));
} 
else if(message.type==='candidate'&&isStarted){
var-candidate=new-RTCIceCandidate({sdpMLineIndex:message.label,candidate:message.candidate});
pc.addIceCandidate(候选人);
}
else if(消息==='bye'&&istarted){
handleRemoteHangup();
}	
});
// 2. 客户端-->服务器
//通过信令服务器向另一个对等方发送消息
函数sendMessage(消息){
console.log('发送消息:',消息);
发出('message',message);
}
//信道协商触发函数
函数checkAndStart(){
如果(!IsStart&&IsChannel Ready){
createPeerConnection();
IsStart=true;
if(isInitiator){
doCall();
}
}
}
//对等连接管理。。。
函数createPeerConnection(){
试一试{
/*posso aggiungere turn,谷歌ecc*/
pc=新的RTPeerConnection({iceServers:[{URL:'stun:93.33.165.245'}]}{
“可选”:[
{'DtlsSrtpKeyAgreement':true}
]});
if(isInitiator){
SStream.getTracks().forEach(track=>pc.addTrack(track,SStream));
pc.ontrack=handleRemoteStreamAdded;}
否则{
b stream.getTracks().forEach(track=>pc.addTrack(track,b stream));}
pc.onicecandidate=handleIceCandidate;
log('creatertpeerconnection');
} 
捕获(e){
console.log('创建对等连接失败,异常:'+e.message);
警报('无法创建RTPeerConnection对象');
返回;
}
pc.ontrack=添加了HandlerRemoTestStream;
pc.onremovestream=已移除把手移除测试流;
if(isInitiator){
试一试{
//创建可靠的数据通道
sendChannel=pc.createDataChannel(“sendDataChannel”,
{可靠:正确});
log('Created send data channel');
}捕获(e){
警报('未能创建数据通道');
log('createDataChannel()失败,出现异常:'+e.message);
}
sendChannel.onopen=handleSendChannelStateChange;
sendChannel.onmessage=handleMessage;
sendChannel.onclose=handleSendChannelStateChange;
}else{//Joiner
pc.ondatachannel=gotReceiveChannel;
}
}
//数据通道管理
函数sendData(){
var data=sendTextarea.value;
如果(isInitiator)发送通道。发送(数据);
else接收通道。发送(数据);
console.log('发送数据:'+数据);
}
//处理程序。。。
函数gotReceiveChannel(事件){
log(“接收通道回调”);
receiveChannel=event.channel;
receiveChannel.onmessage=handleMessage;
receiveChannel.onopen=HandlerReceiveChannelStateChange;
receiveChannel.onclose=HandlerReceiveChan
attachMediaStream(remoteVideo, event.streams[0]);
remoteVideo.srcObject = event.streams[0];