只有一帧显示WebRTC流



我正在使用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 标签上的脉冲记录图标仍会显示,但不会显示其他帧。上面的"流!"日志只添加一次。

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

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

最新更新