只有一帧显示WebRTC流

时间:2013-12-29 06:45:55

标签: javascript webcam webrtc peerjs

我正在使用PeerJS及其云托管服务器来构建WebRTC应用程序。这是我的代码:

navigator.getMedia = ( navigator.getUserMedia ||
                       navigator.webkitGetUserMedia ||
                       navigator.mozGetUserMedia ||
                       navigator.msGetUserMedia);

window.URL = window.URL || window.webkitURL;

var callSettings = {
  video: {
    mandatory: {
      maxWidth: 400,
      maxHeight: 300
    }
  },
  audio: true
};

$(document).ready(function ()
{
    var videoel = $("#teacher-stream")[0];

    $(document).on('click', ".start-call", function () //A button initiates call
    {
        var peerID = $(this).data('id'); //Button contains ID of peer
        navigator.getMedia(callSettings, function (stream)
        {
            var call = peer.call(peerID, stream);
            call.on('stream', function(remoteStream)
            {
                console.log('stream!');
                videoel.src = window.URL.createObjectURL(remoteStream);
                            //On stream copy data to video el

            });
        });
    });

    peer.on('call', function(call)
    {
        console.log('got call');
        navigator.getMedia(callSettings, function(stream)
        {
            call.answer(stream);
            call.on('stream', function(remoteStream)
            {
                videoel.src = window.URL.createObjectURL(remoteStream);

            });
        });
    });

});

流启动,并要求两个用户都提供网络摄像头访问权限。但是,过去只显示第一帧。虽然Chrome选项卡上的脉冲记录图标仍然显示,但不会显示其他帧。 “流!”上面的日志只添加一次。

我尝试在本地托管服务器以检查是否是问题,但事实并非如此。我错过了什么?

1 个答案:

答案 0 :(得分:4)

我需要将属性“autoplay = true”添加到我的视频元素中。