Only one frame displayed WebRTC stream

Question

I'm using PeerJS and their cloud-hosted servers to build a WebRTC application. Here's my code:

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);

            });
        });
    });

});

The stream initiates and both users are requested to give webcam access. However, past that only the very first frame is displayed. Though the pulsing record icon on the Chrome tab still displays, no further frames are shown. The "stream!" log above is only added once.

I've tried hosting the server locally to check if that was the issue, and it wasn't. What am I missing?

Answer 1

I needed to add the attribute "autoplay = true" to my video element.