无法显示远程流

时间:2013-06-01 23:34:34

标签: javascript socket.io webrtc

我正在使用webRTC应用进行视频广播。 该应用程序的工作方式。 - 客户A创建一个频道;看到他的本地Feed显示(从/ room加载的内容),然后等待。 - 客户B加载页面,点击频道加入页面。

  • 客户端A发送SDP提议,B接收,发送答案,添加远程流并显示它。

一切正常,但客户端B获取黑色视频元素,其中包含MediaStream对象。日志似乎很好......我迷路了,请看看! 我会尽可能清楚地尝试和评论,但如果需要,请提出解释。

脚本如下:

var pc_config = {"iceServers": [{"url": "stun:stun.l.google.com:19302"}]};
    var pC = null;
    var localStream = null;
    var emitter = false;
    var mediaConstraints = {'mandatory': {
                      'OfferToReceiveAudio':false, 
                      'OfferToReceiveVideo':false }};

        var setLocal = function (sdp) {
        pC.setLocalDescription(sdp);
        console.log("Sending: SDP");
        console.log(sdp);
        socket.json.send(sdp);
    };

    function onRemoteStreamAdded(event) {
        console.log("Added remote stream" + event);
        video.src = window.URL.createObjectURL(event.stream);
        video.play();
    }

    function createPeerConnection() {
        console.log("Creating peer connection");
        pc_config.iceServers.push({
            "url": "turn:" + 'shirase.dev%40gmail.com' + "@" + 'numb.viagenie.ca',
            "credential": 'drkllr'
        });

        try {
            pC = new RTCPeerConnection(pc_config);
            console.log("Created peer connection" + pc_config);

        } catch (e) {
            console.log("Failed to create Peer Connection, exception: " + e.message);
        }
        pC.addEventListener("addstream", onRemoteStreamAdded, false);//receiver
        started = true;
        pC.onicecandidate = function(evt) {
            if (evt.candidate) {
                console.log('Sending ICE candidate...');
                console.log(evt.candidate);
                socket.json.send({
                        type: "candidate",
                        sdpMLineIndex: evt.candidate.sdpMLineIndex,
                        sdpMid: evt.candidate.sdpMid,
                        candidate: evt.candidate.candidate
                    });
            } else {
                console.log("End of candidates.");
            }
        };

套接字事件是:

        var video = document.getElementById('video'),
        started = false;

    var channel = {
        create: function(){
            socket.emit('create');

            return false;
        },
        join: function(channelId){
            socket.emit('join', channelId);

            return false;
        }           
    };

    socket.on('channel_created', function () {
        $.get('/room', function(data) {
            $('#content').html(data);
        });
        emitter = true;
    }); 


    //fired by socket server when a new user joins
    socket.on('user_joined', function () {
        console.log('received');
        createPeerConnection();
        pC.addStream(localStream);//emitter
        console.log(pC);
        started = true;
        pC.createOffer(setLocal,null,mediaConstraints);
    });

    //peerconnection events from socket
    socket.on('message', function (evt) {
            if (evt.type === 'offer') {
                console.log("Received offer...");
                createPeerConnection();
                console.log('Creating remote session description...' );
                pC.setRemoteDescription(new RTCSessionDescription(evt));
                console.log('Sending answer...');
                pC.createAnswer(setLocal,null,mediaConstraints);

            } else if (evt.type === 'answer' && emitter) {
                console.log('Received answer...');
                console.log('Setting remote session description...' + evt);
                pC.setRemoteDescription(new RTCSessionDescription(evt));

            } else if (evt.type === 'candidate' && started) {
                console.log('Received ICE candidate...');
                var candidate = new RTCIceCandidate({
                        sdpMLineIndex: evt.sdpMLineIndex,
                        sdpMid: evt.sdpMid,
                        candidate: evt.candidate
                    });
                console.log(candidate);
                pC.addIceCandidate(candidate);

            } else if (evt.type === 'bye') {
                console.log("Received bye");
                stop();
            }
        });

测试: 启动客户端A,然后B.控制台打印后:

在A:

Creating peer connection 

Created peer connection[object Object] 

Sending: SDP 

Sending ICE candidate... 

  **A few of those **

Received answer... 

Setting remote session description...

在B:

Received offer...

Creating peer connection

Created peer connection[object Object]

Creating remote session description... 

Sending answer... 

Received ICE candidate... 

**A few of those**

Added remote stream[object MediaStreamEvent] 

Sending: SDP 

并出现黑色视频元素......

有什么想法吗?

1 个答案:

答案 0 :(得分:1)

trueOfferToReceiveAudio设置值OfferToReceiveVideo

var mediaConstraints = {
    'mandatory': {
        'OfferToReceiveAudio': true,
        'OfferToReceiveVideo': true
    }
};

这些仅适用于仅数据会话{。}}。