MediaSource Canvas для преобразования видео со звуком

Привет, команда, я новичок в материалах, связанных с 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 и останавливаете запись, он создает видео для тега видео, но без звука я также хочу добавить звук, есть ли какой-нибудь трюк, чтобы решить эту проблему?


javascript html webrtc html5-canvas media-source
person Damodhar    schedule 12.05.2020    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Вы не показали нам, откуда берется stream, но я предполагаю, что вы используете Canvas captureStream. Вы также не объяснили, откуда берется ваш звук, но, как бы вы это ни делали, у вас тоже будет поток для этого.

Что вам нужно сделать, так это взять следы двух потоков и сформировать другой поток. Что-то вроде этого:

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

Затем передайте этот новый поток в MediaRecorder.

person Brad    schedule 13.05.2020
comment
вчера я сделал это, используя метод add addTrack. но спасибо за ваш вклад - person Damodhar; 13.05.2020