JavaScript：使用 MediaRecorder 记录来自 <video> 的流但失败答案

【问题标题】：JavaScript: Use MediaRecorder to record streams from <video> but failedJavaScript：使用 MediaRecorder 记录来自 <video> 的流但失败
【发布时间】：2021-07-01 07:33:04
【问题描述】：

我正在尝试从标签中录制部分视频，将其保存以备后用。并且找到了这篇文章：Recording a media element，里面描述了一个方法，先调用stream = video.captureStream()，然后用new MediaRecord(stream)获取记录器。

我已经在一些演示中进行了测试，如果 stream 来自用户的设备（例如麦克风），MediaRecorder 可以正常工作。但是，当涉及到媒体元素时，我的 FireFox 浏览器会抛出异常：MediaRecorder.start: The MediaStream's isolation properties disallow access from MediaRecorder。

那么你知道如何处理它吗？

浏览器：火狐

页面（包括js文件）存储在本地。

<video> 标签的src 属性可以是来自本地存储的文件，也可以是来自 Internet 的 url。

代码sn-ps：

let chunks = [];

let getCaptureStream = function () {
    let stream;
    const fps = 0;
    if (video.captureStream) {
      console.log("use captureStream");
      stream = video.captureStream(fps);
    } else if (video.mozCaptureStream) {
        console.log("use mozCaptureStream");
      stream = video.mozCaptureStream(fps);
    } else {
      console.error('Stream capture is not supported');
      stream = null;
    }
    return stream;
}

video.addEventListener('play', () => {
    let stream = getCaptureStream();
    const mediaRecorder = new MediaRecorder(stream);
    mediaRecorder.onstop = function() {
        const newVideo = document.createElement('video');
        newVideo.setAttribute('controls', '');
        newVideo.controls = true;
        const blob = new Blob(chunks);
        chunks = [];
        const videoURL = window.URL.createObjectURL(blob, { 'type' : 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"' });
        newVideo.src = videoURL;
        document.body.appendChild(video);
    }
    mediaRecorder.ondataavailable = function(e) {
        chunks.push(e.data);
      }
      
    stopButton.onclick = function() {
        mediaRecorder.stop()
    }

    mediaRecorder.start(); // This is the line triggers exception.
  });

【问题讨论】：

标签： javascript video mediaelement multimedia

【解决方案1】：

我自己找到了解决方案。

当我转向 Chrome 时，它显示 CORS 问题限制了我甚至无法播放原始视频。所以我猜这是因为阻止MediaRecorder 访问MediaStreams 的安全策略。因此，我使用this page 的指令将本地文件部署到本地服务器。之后，MediaRecorder 开始工作。希望对有需要的人有所帮助。

不过，the official document 似乎并未过多提及媒体元素的隔离属性。因此，欢迎任何想法或进一步解释。

【讨论】：