Question

我正在将图像流记录在屏幕外的画布上，然后尝试下载记录的数据。每当我下载结果视频时，它都是零字节。

当我呼叫mediaRecorder.stop()时，mediaRecorder.ondataavailable会触发，但是data属性为空-它记录为Blob(0) {size: 0, type: "video/webm"}。

我读了littlebird's answer to this issue，他建议需要启用Chrome的实验性Web平台功能。在chrome：// flags中启用此功能后，我仍然遇到问题。

我的代码粘贴在下面。这在2017年3月我最初编写它时就起作用了，但是现在我尝试再次运行它时遇到了错误。我以为Chrome中的某些内容必须进行了更改，但我一直无法追踪任何内容。

this._createMediaRecorder = function(frame) {
  var newMediaRecorder;

  // Create hidden canvas to draw to
  newHiddenCanvas = document.createElement("canvas");
  newHiddenCanvas.setAttribute('id', frame + Date.now());

  newHiddenCanvas.width = DEPTHWIDTH;
  newHiddenCanvas.height = DEPTHHEIGHT;

  newHiddenContext = hiddenCanvas.getContext("2d");
  newHiddenContext.fillRect(0, 0, newHiddenCanvas.width, newHiddenCanvas.height);

  // Add canvas to hidden div
  myDiv.appendChild(newHiddenCanvas);

  // Create media recorder, add canvas to recorder
  newMediaRecorder = new MediaRecorder(newHiddenCanvas.captureStream());
  newMediaRecorder.canvas = newHiddenCanvas;

  var mediaChunks = [];

  newMediaRecorder.onstop = function (e) {

      // The video as a blob
      var blobVideo = new Blob(mediaChunks, { 'type' : 'video/webm' });

      // Download the video 
      var url = URL.createObjectURL(blobVideo);
      var a = document.createElement('a');
      document.body.appendChild(a);
      a.style = 'display: none';
      a.href = url;
      a.download = frame + Date.now() + '.webm';
      a.click();
      window.URL.revokeObjectURL(url);

      // Reset media chunks
      mediaChunks.length = 0;    

  }.bind(this);

  // When video data is available
  newMediaRecorder.ondataavailable = function(e) {
    mediaChunks.push(e.data); // This returns Blob(0) {size: 0, type: "video/webm"}
  };

  // Start recording
  newMediaRecorder.start();
  return newMediaRecorder;
};

Answer 1

在Mac chrome浏览器上遇到相同的问题（MediaRecorder.ondataavailable Blob（0）{大小：0，键入：“ video / webm”}）。

但是，相同的代码在Windows chrome上可以正常工作。

尝试在Chrome上启用Chrome的实验性Web平台功能，但没有运气。无法确定为什么使用Chrome在Mac OS上无法运行相同代码的原因。

const mediaSource = new MediaSource();
mediaSource.addEventListener('sourceopen', handleSourceOpen, false);
let mediaRecorder;
let recordedBlobs;
let sourceBuffer;
const errorMsgElement = document.querySelector('span#errorMsg');
const recordedVideo = document.querySelector('video#recorded');
const recordButton = document.querySelector('button#record');
recordButton.addEventListener('click', () => {
    if (recordButton.textContent === 'Start Recording') {
        startRecording();
    } else {
        stopRecording();
        recordButton.textContent = 'Start Recording';
        downloadButton.disabled = false;
    }
});
const downloadButton = document.querySelector('button#download');
downloadButton.addEventListener('click', () => {
    const blob = new Blob(recordedBlobs, { type: 'video/mp4; "codecs=vp9,opus"' });
    const url = window.URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.style.display = 'none';
    a.href = url;
    a.download = 'recordedvideo.mp4';
    document.body.appendChild(a);
    a.click();
    setTimeout(() => {
        document.body.removeChild(a);
        window.URL.revokeObjectURL(url);
    }, 100);
});
function handleSourceOpen() {
    sourceBuffer = mediaSource.addSourceBuffer('video/webm;codecs=vp9,opus');
}
function handleDataAvailable(event) {
    if (event.data && event.data.size > 0) {
        recordedBlobs.push(event.data);
    }
}
function startRecording() {
    recordedBlobs = [];
    let options = {
        mimeType: 'video/webm;codecs=vp9,opus',
        bitsPerSecond: 1421000
    };
    if (window.stream) {
        if (!MediaRecorder.isTypeSupported(options.mimeType)) {
            console.error(`${options.mimeType} is not Supported`);
            errorMsgElement.innerHTML = `${options.mimeType} is not Supported`;
            options = { mimeType: 'video/webm;codecs=vp9,opus' };
            if (!MediaRecorder.isTypeSupported(options.mimeType)) {
                console.error(`${options.mimeType} is not Supported`);
                errorMsgElement.innerHTML = `${options.mimeType} is not Supported`;
                options = { mimeType: 'video/webm;codecs=vp9,opus' };
                if (!MediaRecorder.isTypeSupported(options.mimeType)) {
                    console.error(`${options.mimeType} is not Supported`);
                    errorMsgElement.innerHTML = `${options.mimeType} is not Supported`;
                    options = { mimeType: '' };
                }
            }
        }
    }
    try {
        mediaRecorder = new MediaRecorder(window.stream, options);
        let constraints = {
            frameRate: 25,
            width: 1280,
            height: 720
        };
        mediaRecorder.stream.getVideoTracks()[0].applyConstraints(constraints);
    } catch (e) {
        console.error('Exception while creating MediaRecorder:', e);
        errorMsgElement.innerHTML = `Exception while creating MediaRecorder: ${JSON.stringify(e)}`;
        return;
    }
    recordButton.textContent = 'Stop Recording';
    downloadButton.disabled = true;
    mediaRecorder.onstop = (event) => {
    };
    mediaRecorder.ondataavailable = handleDataAvailable;
    mediaRecorder.start(); 
}
function stopRecording() {
    mediaRecorder.stop();
}
function handleSuccess(stream) {
    recordButton.disabled = false;
    window.stream = stream;
}
async function init() {
    try {
        var vi = document.querySelector('iframe[#xyz_iframe]').contentDocument.body.querySelector('video[autoplay]');
        var stream;
        stream = vi.captureStream();
        handleSuccess(stream);
    } catch (e) {
        console.error('navigator.getUserMedia error:', e);
        errorMsgElement.innerHTML = `navigator.getUserMedia error:${e.toString()}`;
    }
}
document.querySelector('button#start').addEventListener('click', async () => {
    await init();
});

Answer 2

从os x Safari浏览器打开视频呼叫器时出现此错误。当视频呼叫者来自Firefox时，效果很好。

但是如果呼叫者来自os x safari，并且我正在用firefox录音，则效果很好。

MediaRecorder.ondataavailable数据返回0

2 个答案: