javascript - 只有一帧显示 WebRTC 流

Question

我正在使用 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 选项卡上的脉冲记录图标仍然显示，但没有显示更多帧。 “流!”上面的日志只添加一次。

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

Answer 1

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