Как получить UserMedia и записать видео, смешивая mp3 с javascript? mp3 может воспроизводить паузы и останавливаться - PullRequest
Новая
       134

Как получить UserMedia и записать видео, смешивая mp3 с javascript? mp3 может воспроизводить паузы и останавливаться

0 голосов
/ 15 марта 2020

Я использую getUserMedia и mediaRecorder API для записи видео с веб-камеры.

Я использую chrome версию 80.

Как getUserMedia и записать видео, смешивая mp3 с javascript? mp3 может воспроизводить паузы и останавливаться

Я не знаю, как смешивать mp3 с видеопотоком в прямом эфире.

Когда я удаляю Track и addTrack, я останавливаюсь на MediaRecorder, сбой.

show Ошибка: не удалось выполнить «останов» для «MediaRecorder»: состояние MediaRecorder «неактивно».

мой код на codepen: https://codepen.io/zhishaofei3/pen/eYNrYGj

и простые коды: 

function getFileBuffer(filepath) {
  return fetch(filepath, {method: 'GET'}).then(response => response.arrayBuffer())
}

function mp3play() {
  getFileBuffer('song.mp3')
  .then(buffer => context.decodeAudioData(buffer))
  .then(buffer => {
    console.log(buffer)
    const source = context.createBufferSource()
    source.buffer = buffer
    let volume = context.createGain()
    volume.gain.value = 1
    source.connect(volume)
    dest = context.createMediaStreamDestination()
    volume.connect(dest)
    // volume.connect(context.destination)
    source.start(0)

    const _audioTrack = stream.getAudioTracks();
    if (_audioTrack.length > 0) {
      _audioTrack[0].stop();
      stream.removeTrack(_audioTrack[0]);
    }

    console.log(dest.stream)
    console.log(dest.stream.getAudioTracks()[0])
    stream.addTrack(dest.stream.getAudioTracks()[0])
  })
}

спасибо!

1 Ответ

1 голос
/ 15 марта 2020

Многие контейнеры не поддерживают добавление / удаление таких дорожек, и сомнительно, что Media Recorder API вообще поддерживает это. Это необычная вещь.

Вам нужно создать поток, который вы собираетесь записать, до создания экземпляра Media Recorder со всеми желаемыми треками. Поэтому вам необходимо выполнить действия в следующем порядке:

  1. Настройте свой AudioContext.
  2. Позвоните getUserMedia(). (И пока вы это делаете, установите audio: false в своих ограничениях. Не нужно открывать микрофон, если вы его не используете.)
  3. videoStream.getVideoTracks() и dest.stream.getAudioTracks(), чтобы получить все дорожки.
  4. Создайте новый MediaStream с этими дорожками. new MediaStream([audioTrack, videoTrack])

Теперь запустите ваш MediaRecorder на этом новом MediaStream, и вы получите то, что хотите.

...