0

So if I get a webcam stream like this, record and play it back on the fly...

<script>
    const constraints = { video: true, audio:false };

    const video1 = document.querySelector('.real1');
    const video2 = document.querySelector('.real2');

    var mediaSource = new MediaSource();
    video2.src = window.URL.createObjectURL(mediaSource);
    var sourceBuffer;
    mediaSource.addEventListener('sourceopen', function () {
        sourceBuffer = mediaSource.addSourceBuffer('video/webm; codecs=vp8');
        console.log(sourceBuffer);
    })

    function handleSuccess(stream) {
        video1.srcObject = stream;
        var mediaRecorder = new MediaRecorder(stream, { mimeType: "video/webm; codecs=vp8" });
        console.log(mediaRecorder.mimeType)
        mediaRecorder.ondataavailable = function (e) {
            var reader = new FileReader();
            reader.onload = function (e) {              
                sourceBuffer.appendBuffer(new Uint8Array(e.target.result));
            }
            reader.readAsArrayBuffer(e.data);

            if (video2.paused) {
                video2.play(0); // Start playing after 1st chunk is appended.
            }
        }
        mediaRecorder.start(20);
    }

    function handleError(error) {
        console.error('Reeeejected!', error);
    }
    navigator.mediaDevices.getUserMedia(constraints).
        then(handleSuccess).catch(handleError);
</script>

This works without a problem. If I replace the local stream with a remote stream, same code, only received over webRTC, I see the first frame and nothing more... No errors... jsut one Frame.

chrome://media-internals/ from the player

render_id: 4
player_id: 4
origin_url: http://myurl/
kFrameUrl: http://myurl/index.html
kFrameTitle: 
url: blob:http://myurl/23baa428-df7a-4d95-8625-f442f9fab5bc
info: (Log limit reached. Further similar entries may be suppressed): Estimating WebM block duration=63ms for the last (Simple)Block in the Cluster for this Track (PTS=0ms). Use BlockGroups with BlockDurations at the end of each Cluster to avoid estimation.
pipeline_state: kSuspended
kVideoTracks: [object Object]
kIsVideoDecryptingDemuxerStream: false
kVideoDecoderName: VpxVideoDecoder
kIsPlatformVideoDecoder: false
duration: unknown
height: 240
width: 320
kResolution: 320x240
event: SUSPENDED

The code from above: https://jsfiddle.net/pkj4sa1n/ Fiddle not running in chrome because of iframe restrictions for the webcam?! Copy and paste the code above into a html file and open it or use firefox.

thanks for help or ideas

Cracker0dks
  • 2,422
  • 1
  • 24
  • 39

1 Answers1

0

here is the link to share more detail information about the behavior. https://axel.isouard.fr/blog/2016/05/24/streaming-webm-video-over-html5-with-media-source I believe there could be case of clustering block.

Mohsin khan
  • 326
  • 3
  • 9