时间戳

首页 > 解决方案 > MediaSource 画布到带音频的视频转换

javascript - MediaSource 画布到带音频的视频转换

问题描述

嗨团队我是 MediaSource 相关内容的新手。

问题：使用 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 中执行任何活动并停止录制时，它将为视频标签创建视频，但是没有音频我也想添加音频，有什么技巧可以解决这个问题吗？

标签： javascripthtmlhtml5-canvaswebrtcmedia-source

解决方案

您没有向我们展示stream来自哪里，但我假设您正在使用 Canvas captureStream。你也没有解释你的音频来自哪里，但是不管你怎么做，你最终也会得到一个流。

您需要做的是获取两个流的轨道并形成另一个流。像这样的东西：

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

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

推荐阅读