来自android webview的peerjs webrtc流媒体视频太慢了

Question

I have an android application that sends the camera stream through a webview through peerjs (webrtc) the web application on the browser receives the video and streams it.

Things are working but the video on the web is too slow and the image freezes for some time before getting the second image...

Is there a way to make the resolution lower ? or buffer the video on the web application ? or can it be something wrong with my implementation ?

Android Webview code:

        initVideo = function(videoSourceValue) {

        var video = document.querySelector('video');
        navigator.getUserMedia({video:  {optional: [{
                                                    sourceId: videoSourceValue
                                                     }]
                                          }
                                },function(stream) {
        video.src = window.URL.createObjectURL(stream);
        $('#peerId').text("calling : " + SERVER_PEER_ID);
         var mediaConnection = peer.call(SERVER_PEER_ID, stream);
          mediaConnection.on('stream', function(remoteStream) {
            // Show stream in some video/canvas element.
          });
        },function(e){
                console.log('failed',e);
        });
    }

Web part:

   function getVideoStream() {
    PEER.on('call', function(call) {
        var mediaConnection = navigator.getUserMedia({video: true}, function(stream) {
            call.answer(stream); // Answer the call with an A/V stream.
            call.on('stream', onReceiveStream);
        }, function(err) {
            console.log('Failed to get local stream' ,err);
        });
    });
}


    function onReceiveStream(stream){
        console.log('received stream');
        $('video').prop('src',window.URL.createObjectURL(stream));

}

Thanks

Update 1

I tried to add {reliable : true} , still having the same issue.

I'm also sending location data to the server, and it seems that the video streams and location data are sent together periodically (the chart on the web showing speed and the video move at the same time) but the frame rate is too slow.

Answer 1

When you establish the video/audio stream you can specify some constraints...

var videoOptions = (isCordova) ? {audio: true, video: true} :
                    {  audio: true, 
                      video: {
                        mandatory: {
                               maxWidth: 640,
                               maxHeight: 360,
                               // maxAspectRatio:4/3,
                               // maxFrameRate:1
                              },
                        quality: 7,
                        width: { ideal: 320 },
                        height: { ideal: 240 }
                      }
                    };

navigator.getUserMedia(videoOptions, function (stream) {

In the above code, if you are on a device (android/ios) you don't get to choose, but you can control it on the browser. A quality of 5 is the level that the video driver author deemed as an acceptable trade off between quality and bandwidth. Limiting the dimensions of the picture helps too.

See this link for mode details: https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia

Answer 2

My issue was completely unrelated to bandwidth, I simply didn't put autoplay on the video tag , so the video was only refreshing when a redraw was happening.

Thanks a lot for your answers they really give insight on how things work in webrtc.