如何在使用 JavaScript 录制视频时录制背景音乐

Question

我想在移动设备上录制没有麦克风权限的视频和背景音乐。

它就像抖音一样。

我知道如何通过媒体记录器录制流。

但是MediaRecorder只能录制一个流，我不知道如何在流中混合音乐。

我的代码：

record = (renderer, fps = 25, ms = 3000, mediaElement) => new Promise(resolve => {
if (this.recording) {
resolve(false);
}
this.recording = true;
try {
const stream = mediaElement.captureStream(fps);
const recorder = new MediaRecorder(stream);
const chunks = [];
recorder.ondataavailable = e => chunks.push(e.data);
recorder.onstop = () => resolve(new Blob(chunks));
recorder.start();
setTimeout(() => recorder.stop(), ms);
} catch (err) {
console.log('failed to record', err);
resolve(false);
}
this.recording = false;
});

感谢您的赞赏。

Answer 1

我找到了答案。 需要将音频源更改为流并将其混合为一个流。 它有效！

record = (stream, fps = 25, ms = 3000) => new Promise(resolve => {
if (this.recording) {
resolve(false);
}
this.recording = true;
try {
const audio = new Audio();
audio.src = require('someMusic.mp3');
const context = new AudioContext();
const backgroundMusic = context.createMediaElementSource(audio);
audio.volume = 0.8;
audio.play();
const mixedOutput = context.createMediaStreamDestination();
backgroundMusic.connect(mixedOutput);
const videoTrack = stream.getVideoTracks()[0];
const mixedTracks = mixedOutput.stream.getAudioTracks()[0];
const streamN = new MediaStream([mixedTracks, videoTrack]);
const recorder = new MediaRecorder(streamN);
const chunks = [];
recorder.ondataavailable = e => chunks.push(e.data);
recorder.onstop = () => resolve(new Blob(chunks));
recorder.start();
setTimeout(() => recorder.stop(), ms);
} catch (err) {
console.log('failed to record', err);
resolve(false);
}
this.recording = false;
});