HTML5 MediaRecorder capture very slow?

本秂侑毒 提交于 2021-01-29 05:44:39

问题


This code below works as a test to render a camera video stream on a video element then record that stream and render it to another video element:

$(function () {

    var handleSuccess = function(stream) {

        var player = document.querySelector("#vid-user");
        player.srcObject = stream;

        console.log("Starting media recording")

        var options = {
            videoBitsPerSecond : 2500000,
            mimeType: 'video/webm'
        };
        var mediaRecorder = new MediaRecorder(stream, options);

        var guestPlayer = document.querySelector("#vid-guest");
        var mediaSource = new MediaSource();
        mediaSource.addEventListener('sourceopen', sourceOpen, false)
        mediaSource.addEventListener('webkitsourceopen', sourceOpen, false);

        guestPlayer.src = URL.createObjectURL(mediaSource);

        function sourceOpen() {
            //URL.revokeObjectURL(guestPlayer.src);
            var sourceBuffer = mediaSource.addSourceBuffer('video/webm; codecs="vorbis,vp8"');
            mediaRecorder.ondataavailable = function(e) {
                // Streaming video data is to be uploaded to a real-time server
                if (e.data.size > 0) {
                    var bufferPromise = e.data.arrayBuffer();
                    bufferPromise.then(function(array){
                        sourceBuffer.appendBuffer(new Uint8Array(array));
                    })
                }
            }
        }
        mediaSource.addEventListener('webkitsourceended', function(e) {
        }, false);

        mediaRecorder.start(100);
    };

    navigator.mediaDevices.getUserMedia({ audio: true, video: true })
        .then(handleSuccess)

})

This code above works, however, the issues are:

  1. The "forked" video to the guestPlayer is delayed for about 5 seconds (tested on Firefox, as playback on guestPlayer does not work with Chrome), is that normal? I mean is there an option for MediaRecorder to record faster? Considering the guestPlayer is just getting data from the recorder in the same browser process. (No server-side stream at this point)

来源:https://stackoverflow.com/questions/61035109/html5-mediarecorder-capture-very-slow

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!