如何获取UserMedia并录制将mp3与javascript混合的视频？ mp3可以播放暂停和停止

Question

我正在使用getUserMedia和mediaRecorder API来录制来自网络摄像头的视频。

我正在使用chrome版本80。

[如何获取UserMedia并录制将mp3与javascript混合的视频？ mp3可以播放暂停和停止]

我不知道如何将mp3混合到实时视频流中。

[当我删除track和addTrack时，我停止在MediaRecorder上失败。

显示错误：无法在'MediaRecorder'上执行'stop'：MediaRecorder的状态为'inactive'。

我在代码笔上的代码：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])
  })
}

谢谢！

Answer 1

许多容器不支持那样的添加/删除曲目，而且Media Recorder API完全不支持。这是不寻常的事情。

在实例化Media Recorder之前，您需要创建要录制的流以及所需的所有曲目。因此，您需要按以下顺序进行操作：

1. 设置您的AudioContext。
2. 呼叫getUserMedia()。 （在使用它时，请在约束中设置audio: false。如果不使用麦克风，则无需打开麦克风。）
3. [videoStream.getVideoTracks()和dest.stream.getAudioTracks()以获取所有曲目。
4. 使用这些曲目创建一个新的MediaStream。 new MediaStream([audioTrack, videoTrack])

现在，在此新MediaStream上运行MediaRecorder，您将拥有所需的内容。