MediaSource canvas 轉視頻帶音頻

Question

嗨團隊我是 MediaSource 相關內容的新手。

問題：canvas 的音頻支持使用 mediasource 進行流媒體到視頻的轉換。

詳細信息：當使用 MediaSource 從 canvas 中轉 stream 時，我正在嘗試支持對視頻的音頻支持。

代碼詳情：

const mediaSource = new MediaSource();
mediaSource.addEventListener('sourceopen', handleSourceOpen, false);
let mediaRecorder;
let recordedBlobs;
let sourceBuffer;

const canvas = document.querySelector('canvas');
var ctx = canvas.getContext('2d');

const video = document.querySelector('video');


function handleSourceOpen(event) {
  console.log('MediaSource opened');
  sourceBuffer = mediaSource.addSourceBuffer('video/webm; codecs="vp8"');
  console.log('Source buffer: ', sourceBuffer);
}

function handleDataAvailable(event) {
  if (event.data && event.data.size > 0) {
    recordedBlobs.push(event.data);
  }
}

function handleStop(event) {
  console.log('Recorder stopped: ', event);
  const superBuffer = new Blob(recordedBlobs, {type: 'video/webm'});
  video.src = window.URL.createObjectURL(superBuffer);
}

function startRecording() {
  let options = {mimeType: 'video/webm'};
  recordedBlobs = [];
  try {
    mediaRecorder = new MediaRecorder(stream, options);
  } catch (e0) {
    console.log('Unable to create MediaRecorder with options Object: ', e0);
    try {
      options = {mimeType: 'video/webm,codecs=vp9'};
      mediaRecorder = new MediaRecorder(stream, options);
    } catch (e1) {
      console.log('Unable to create MediaRecorder with options Object: ', e1);
      try {
        options = 'video/vp8'; // Chrome 47
        mediaRecorder = new MediaRecorder(stream, options);
      } catch (e2) {
        alert('MediaRecorder is not supported by this browser.\n\n' +
          'Try Firefox 29 or later, or Chrome 47 or later, ' +
          'with Enable experimental Web Platform features enabled from chrome://flags.');
        console.error('Exception while creating MediaRecorder:', e2);
        return;
      }
    }
  }
  console.log('Created MediaRecorder', mediaRecorder, 'with options', options);
  recordButton.textContent = 'Stop Recording';
  mediaRecorder.onstop = handleStop;
  mediaRecorder.ondataavailable = handleDataAvailable;
  mediaRecorder.start(100); // collect 100ms of data
  console.log('MediaRecorder started', mediaRecorder);
}

function stopRecording() {
  mediaRecorder.stop();
  console.log('Recorded Blobs: ', recordedBlobs);
  video.controls = true;
}

function play() {
  video.play();
}

在上面的代碼中，當您開始錄制並在 canvan 中執行任何活動並停止錄制時，它將為視頻標簽創建視頻，但是沒有音頻我也想添加音頻，有什么技巧可以解決這個問題嗎？

Answer 1

您沒有向我們展示stream的來源，但我假設您使用的是 Canvas captureStream 。 你也沒有解釋你的音頻來自哪里，但是不管你怎么做，你最終也會得到一個 stream 。

您需要做的是獲取兩個流的軌道並形成另一個 stream。 像這樣的東西：

const stream = new MediaStream([
  ...canvasStream.getVideoTracks(),
  ...audioStream.getAudioTracks()
]);

然后，將這個新的 stream 傳遞到您的 MediaRecorder。