Question

您好，我是MediaSource相关内容的新手。

问题：使用媒体源将画布从流媒体转换为视频的音频支持。

详细信息：使用MediaSource从画布中缓冲流时，我尝试支持对视频的音频支持。

代码详细信息：

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的来源，但是我认为您使用的是画布captureStream。您也没有说明音频的来源，但是无论如何，您最终都会得到一个音频流。

您需要做的是跟踪两个流的轨迹并形成另一个流。像这样：

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

然后，将此新流传递到MediaRecorder。

MediaSource画布到音频的视频转换

1 个答案: