是否可以将 MediaRecorder API 与 html5 视频一起使用？

Question

我想记录视频标签，以便可以将 blob 数据流式传输到 websocket 服务器，但是，当我尝试启动 mediaRecorder 时，出现以下错误：

MediaRecorder 无法启动，因为没有可用的音频或视频轨道。

是否可以将 html5 视频标签中的音频/视频轨道添加到媒体流中？

<script>
var video = document.getElementById('video');
var mediaStream = video.captureStream(30);
var mediaRecorder = new MediaRecorder(
            mediaStream,
            {
                mimeType: 'video/webm;codecs=h264',
                videoBitsPerSecond: 3000000
            }
        );

fileElem.onchange = function () {
            var file = fileElem.files[0],
                canplay = !!video.canPlayType(file.type).replace("no", ""),
                isaudio = file.type.indexOf("audio/") === 0 && file.type !== "audio/mpegurl";
            video.src = URL.createObjectURL(file);
            video.play();
            mediaRecorder.start(1000); // Start recording, and dump data every second
        };
</script>

<p id="choice" class="info"><input type="file" id="file"> File type: <span id="ftype"></span></p>
<video width="640" height="360" id="video" src="" controls="false"></video>

Answer 1

是否可以将 MediaRecorder API 与 html5 视频一起使用？

是的，但是您需要在拥有元数据MediaRecorder后进行初始化。HTMLVideoElement.readyState

Here is a sample, but it only works if the video source is from the same origin (since captureStream cannot capture from element with cross-origin data)

Note: In this sample, I use onloadedmetadata to initialize MediaRecorder after the video got metadata.

var mainVideo = document.getElementById("mainVideo"),
  displayVideo = document.getElementById("displayVideo"),
  videoData = [],
  mediaRecorder;

var btnStart = document.getElementById("btnStart"),
  btnStop = document.getElementById("btnStop"),
  btnResult = document.getElementById("btnResult");

var initMediaRecorder = function() {
  // Record with 25 fps
  mediaRecorder = new MediaRecorder(mainVideo.captureStream(25));

  mediaRecorder.ondataavailable = function(e) {
    videoData.push(e.data);
  };
}

function startCapture() {
  videoData = [];
  mediaRecorder.start();

  // Buttons 'disabled' state
  btnStart.setAttribute('disabled', 'disabled');
  btnStop.removeAttribute('disabled');
  btnResult.setAttribute('disabled', 'disabled');
};

function endCapture() {
  mediaRecorder.stop();

  // Buttons 'disabled' state
  btnStart.removeAttribute('disabled');
  btnStop.setAttribute('disabled', 'disabled');
  btnResult.removeAttribute('disabled');
};

function showCapture() {
  return new Promise(resolve => {
    setTimeout(() => {
      // Wrapping this in setTimeout, so its processed in the next RAF
      var blob = new Blob(videoData, {
          'type': 'video/mp4'
        }),
        videoUrl = window.URL.createObjectURL(blob);

      displayVideo.src = videoUrl;
      resolve();
    }, 0);
  });
};

video {
  max-width: 300px;
  max-height: 300px;
  display: block;
  margin: 10px 0;
}

<video id="mainVideo" playsinline="" webkit-playsinline="1" controls="1" onloadedmetadata="initMediaRecorder()">
    <source src="sampleVideo.mp4" type="video/mp4">
  </video>

<button id="btnStart" onclick="startCapture()"> Start </button>
<button id="btnStop" disabled='disabled' onclick="endCapture()"> Stop </button>
<button id="btnResult" disabled='disabled' onclick="showCapture()"> Show Result </button>

<video id="displayVideo" playsinline="" webkit-playsinline="1" controls="1"></video>