javascript - 是否可以將 MediaRecorder API 與 html5 視頻一起使用？

我想錄製 video 標籤，以便我可以將 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>

答案＃1

可以將 MediaRecorder API 與 HTML5 視頻一起使用嗎？

是的，然而你需要在 HTMLVideoElement.readyState 擁有 metadata 後初始化 MediaRecorder。

這是一個範例，但它僅在影片來源 來自相同來源 時有效（因為 captureStream 無法捕捉含有跨來源資料的元素）

注意： 在此範例中，我使用 onloadedmetadata 在影片獲取元資料後初始化 MediaRecorder。

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>