Fatal编程技术网
  • javascript/
  • Javascript Can'；无法从peerConnection连接播放视频

Javascript Can'；无法从peerConnection连接播放视频

javascript webrtc

Javascript Can'；无法从peerConnection连接播放视频,javascript,html5-video,webrtc,Javascript,Html5 Video,Webrtc,我为一个学生项目编写了一个小的webRTC示例。其目的是，一个客户端（学生）通过peerConnection将其视频和音频流发送给第二个客户端（导师）。沟通是有效的，导师得到了SDP_提供的服务和所有的东西。它还为remoteVideo src获取一个blob。但是视频输出是黑色的。 在导师方面，我得到以下错误： 未捕获错误：语法错误：DOM异常12 多纳 处理信号消息 ws.onmessage 我希望有人有主意。 谢谢 这是我的代码： <!DOCTYPE html> <h

我为一个学生项目编写了一个小的webRTC示例。其目的是，一个客户端（学生）通过peerConnection将其视频和音频流发送给第二个客户端（导师）。沟通是有效的，导师得到了SDP_提供的服务和所有的东西。它还为remoteVideo src获取一个blob。但是视频输出是黑色的。 在导师方面，我得到以下错误：

未捕获错误：语法错误：DOM异常12
多纳 处理信号消息
ws.onmessage

我希望有人有主意。 谢谢

这是我的代码：

<!DOCTYPE html>  
<html>
    <head>
        <title>PeerConnection with an websocket</title>
    </head>
    <script>
    //variables
    var pc;
    var ws;
    var name; 

    // Local stream generation
    function gotStream(s) {
        var url = webkitURL.createObjectURL(s);
        document.getElementById("localView").src = url;
        localStream = s;
        console.log("gotStream" + s)
        console.log("Started showing loval stream. url = " + url); 
    }
    function gotStreamFailed(error) {
        console.log("Failed to get access to local media. Error code was " 
                    + error.code + ".");
    }
    function getUserMedia() {
        try {
            navigator.webkitGetUserMedia({audio:true, video:true}, 
                                        gotStream, gotStreamFailed);
        console.log("Requested access to local media");
        } catch (e) {
            console.log(e, "getUserMedia error");
        }
    }

    //peerConnection generation
    function genreatePeerConnection(){
        try{
            pc = new webkitPeerConnection00("STUN stun.l.google.com:19302", onIceCandidate);
            console.log("new peerConnection!");
            pc.onaddstream = onAddStream;
            pc.onremovestream = onRemoveStream;
        }catch (e){
            console.log(e, "generatePeerConnection error");
        }
    }
    function onAddStream(e) {
        var stream = e.stream;
        var url = webkitURL.createObjectURL(stream);
        try{
            document.getElementById("remoteView").src = url;
            console.log("Started showing remote stream. url = " + url);
        }catch (e){
            console.log(e, "no Video error...");
        }

    }
    function onRemoveStream(e) {
        document.getElementById("remoteView").src = "";
        trace("Stopped showing remote stream");
    }
    function onIceCandidate(candidate, moreToFollow) {
        console.log("candidate: " + candidate);
        if (candidate) {
            sendMessage({type: 'candidate',
                        label: candidate.label, candidate: candidate.toSdp()});
        }
    }
    function startCall() {
        console.log("adding stream" + localStream);
        pc.addStream(localStream);
        doCall();
    }
    function doCall() {
        console.log("Send offer to peer");
        var offer = pc.createOffer({audio:true, video:true});
        pc.setLocalDescription(pc.SDP_OFFER, offer);
        sendMessage({type: 'offer', sdp: offer.toSdp()});
        pc.startIce();
    }
    function doAnswer() {
        console.log("Send answer to peer");
        var offer = pc.remoteDescription;
        var answer = pc.createAnswer(offer.toSdp(),{audio:true, video:true});
        pc.setLocalDescription(pc.SDP_ANSWER, answer);
        sendMessage({type: 'answer', sdp: answer.toSdp()});
        pc.startIce();
    }
    function processSignalingMessage(message) {
        var msg = JSON.parse(message.data);

        if (msg.type === 'offer') {
            console.log("Test 1 - offer" + msg.sdp);
            pc.setRemoteDescription(pc.SDP_OFFER, new SessionDescription(msg.sdp));
            doAnswer();
        } else if (msg.type === 'answer') {
            pc.setRemoteDescription(pc.SDP_ANSWER, new SessionDescription(msg.sdp));
        } else if (msg.type === 'candidate') {
            console.log("Candidate...");
            var candidate = new IceCandidate(msg.label, msg.candidate);
            pc.processIceMessage(candidate);
        } else if (msg.type === 'bye') {
            onRemoteHangup();
        }
    }

    //Websocket connection 
    function openWs(){
        genreatePeerConnection();
        ws = new WebSocket("ws://10.68.0.88:10081");
        ws.onopen = function() {
                        console.log("Openned websocket connection");
                    }
        ws.onmessage = function (evt){
                            console.log("you got mail: " + evt);
                            processSignalingMessage(evt);               
                       }
    }

    //sendMessage to WS
    function sendMessage(msg){
        var stringMsg = JSON.stringify(msg);
        ws.send(stringMsg);        
    }
    function sendName(){
        name = document.getElementById("name").value;
        ws.send("name: " + name);
    }
    </script>
    <body>
        name<input id="name"/><button id="sendName" onclick="sendName();">send </button>

        <video id="localView" width="352" height="288" autoplay></video>
        <video id="remoteView" width="352" height="288" autoplay></video>
        <button id="call" onclick="startCall();">Call</button>
        <button id="connect" onclick="openWs();">Connection</button>
        <button id="getMedia" onclick="getUserMedia();">Cam</button>
    </body>
</html>


与websocket的对等连接
//变数
var-pc；
var-ws；
变量名；
//本地流生成
函数gotStream（s）{
var url=webkitURL.createObjectURL；
document.getElementById（“localView”）.src=url；
localStream=s；
console.log（“gotStream”+s）
console.log（“开始显示loval stream.url=“+url”）；
}
函数失败（错误）{
console.log（“无法访问本地媒体。错误代码为”
+错误代码+”；
}
函数getUserMedia（）{
试一试{
webkitGetUserMedia（{audio:true，video:true}，
gotStream，gotStreamFailed）；
console.log（“请求访问本地媒体”）；
}捕获（e）{
日志（e，“getUserMedia错误”）；
}
}
//对等连接生成
函数genreatePeerConnection（）{
试一试{
pc=新的webkitPeerConnection00（“STUN STUN.l.google.com:19302”，onIceCandidate）；
log（“新建peerConnection！”）；
pc.onaddstream=onaddstream；
pc.onremovestream=onremovestream；
}捕获（e）{
日志（e，“generatePeerConnection错误”）；
}
}
数据流函数（e）{
var-stream=e.stream；
var url=webkitURL.createObjectURL（流）；
试一试{
document.getElementById（“remoteView”）.src=url；
console.log（“开始显示远程流。url=“+url”）；
}捕获（e）{
日志（e，“无视频错误…”）；
}
}
关于RemoveStream（e）的函数{
document.getElementById（“remoteView”）.src=“”；
跟踪（“停止显示远程流”）；
}
函数onIceCandidate（候选者，更多如下）{
控制台日志（“候选者：+候选者”）；
如果（候选人）{
sendMessage（{type:'candidate'，
label:candidate.label，candidate:candidate.toSdp（）}）；
}
}
函数startCall（）{
log（“添加流”+localStream）；
pc.addStream（localStream）；
doCall（）；
}
函数doCall（）{
console.log（“向对等方发送报价”）；
var offer=pc.createOffer（{audio:true，video:true}）；
pc.setLocalDescription（pc.SDP_报价，报价）；
sendMessage（{type:'offer'，sdp:offer.toSdp（）}）；
pc.startIce（）；
}
函数doAnswer（）{
日志（“向对等方发送应答”）；
var offer=pc.remoteDescription；
var answer=pc.createAnswer（offer.toSdp（），{audio:true，video:true}）；
pc.setLocalDescription（pc.SDP_答案，答案）；
sendMessage（{type:'answer'，sdp:answer.toSdp（）}）；
pc.startIce（）；
}
函数processSignalingMessage（消息）{
var msg=JSON.parse（message.data）；
如果（msg.type==='offer'）{
console.log（“测试1-offer”+msg.sdp）；
pc.setRemoteDescription（pc.SDP_OFFER，新SessionDescription（msg.SDP））；
doAnswer（）；
}else if（msg.type==='answer'）{
pc.setRemoteDescription（pc.SDP_答案，新会话说明（msg.SDP））；
}else if（msg.type==='candidate'）{
console.log（“候选者…”）；
var候选者=新的ICE候选者（msg.label，msg.candidate）；
pc.processIceMessage（候选者）；
}else if（msg.type==='bye'）{
onRemoteHangup（）；
}
}
//网箱连接
函数openWs（）{
genreatePeerConnection（）；
ws=新WebSocket（“ws://10.68.0.88:10081”）；
ws.onopen=函数（）{
log（“打开的websocket连接”）；
}
ws.onmessage=函数（evt）{
log（“您收到邮件：+evt”）；
处理信号消息（evt）；
}
}
//向WS发送消息
函数sendMessage（msg）{
var stringMsg=JSON.stringify（msg）；
发送（stringMsg）；
}
函数sendName（）{
name=document.getElementById（“name”）.value；
发送（“名称：”+名称）；
}
名称端
呼叫
联系
凸轮
仔细查看以下示例：

我认为您可能缺少一些内容，例如在processSignalingMessage（）中停止被调用方发送要约，并在startCall（）中将createPeerConnection（）放在pc.addStream之前。祝你好运

非常感谢您的示例！我不知道为什么我如此盲目，但通过这个例子我发现了我的错误。 我忘记了doCall（）函数中的以下行：

pc.setLocalDescription(pc.SDP_OFFER, offer);
我不知道我怎么会错过这个，但也许我看不见森林了。 现在它工作了！ 谢谢：）