Question

我使用MediaStreamRecorder在浏览器中录制视频。以下测试了OSX 10.11.1，Windows 10，Firefox 41和Chrome 46的所有排列。

基本上每秒使用HTTP POST将录制的视频传输到服务器。这个第二通知是通过MSR的ondataavailable事件到达的。

它在Firefox中运行良好但在Chrome中产生以下（不需要的）行为：当运行此代码的选项卡在后台时（或窗口因其被另一个窗口遮挡而不可见）时，帧速率降至零，每秒只生产一次空壳网页。当我将窗口/标签返回到前面时，它会再次开始传输包含帧（具有可变帧速率）的视频blob。

我尝试在视频约束中专门设置帧速率但没有成功（设置通过adapter.js处理以兼容）。

我尝试不显示视频，但仅录制视频（下面的代码不包含任何视频显示功能）但没有成功。

即使在Chrome中看不到标签，我该怎么做才能生成框架？

这里是代码：

function userMedia() {
    return navigator.getUserMedia = navigator.getUserMedia ||
        navigator.webkitGetUserMedia ||
        navigator.mozGetUserMedia ||
        navigator.msGetUserMedia || null;
}

function onMediaSuccess(stream) {
    startRecording(stream, handleBlob);
}

function onMediaError(error) {
    alert('Error opening user media: ' + error);
}

/**
 * Initializes the media recording functionality, asks for rights for webcam access.
 */
function init() {
    var constraints = {
        audio: false,
        video: {
            width: 640,
            height: 480,
            frameRate: 20
        }
    };

    if (userMedia()) {
        navigator.getUserMedia(constraints, onMediaSuccess, onMediaError);
    } else {
        alert('No access to user media sources supported.');
    }
};

function handleBlob(blob) {
    console.log('Sending', blob.size, 'bytes');

    // ... send to server ...
}

function startRecording(stream, handleBlob) {
    console.log('Starting recording.');
    mediaRecorder = new MediaStreamRecorder(stream);
    mediaRecorder.mimeType = 'video/webm';
    mediaRecorder.width = 640;
    mediaRecorder.height = 480;

    mediaRecorder.ondataavailable = function (blob) {
        handleBlob(blob);
    };

    mediaRecorder.start(1000); // generates ondataavailable events
    console.log('Recording started.');
}

使用Chrome中的getUserMedia录制HTML5视频时，防止视频帧速率发生变化

0 个答案: