Can't play video from peerConnection-Connection

StackOverflow https://stackoverflow.com/questions/12177711

  •  29-06-2021
  •  | 
  •  

题

I work on an little webRTC example for an student project. The intention is, that one client (the student) send his video and audio stream via peerConnection to the second Client (the tutor). The communication works and the tutor gets the SDP_OFFER and all that stuff. It gets also an blob for the remoteVideo src. But the Video output is black. On the tutor side I get the follow errors:

Uncaught Error: SYNTAX_ERR: DOM Exception 12
doAnswer processSignalingMessage
ws.onmessage

I hope someone has an idea. Thanks!

There is my code: 

<!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>
有帮助吗？

解决方案

Take a close look at the example at: http://www.html5rocks.com/en/tutorials/webrtc/basics/

I think you may have some bits missing like stopping the callee sending an offer in processSignalingMessage() and putting createPeerConnection() before pc.addStream in startCall(). Good luck!

其他提示

Thank you very much for the example! I don't know why i was so blind but through the example I found my mistake. I forgot the follow line in my doCall() function:

pc.setLocalDescription(pc.SDP_OFFER, offer);

I don't know how I could miss this but maybe I couldn't see the forest for the trees. Now it works! Thanks :)

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top