我正在开展一个项目,我想:
我已经能够通过调整此WebRTC演示代码在视频元素中显示画布记录:https://webrtc.github.io/samples/src/content/capture/canvas-record/
那就是说,我无法弄清楚如何在画布旁边录制视频的音频。是否可以从两个不同的源/元素创建包含MediaStreamTrack实例的MediaStream?
根据MediaStream API的规范,理论上应该有一些方法来实现这一目标: https://w3c.github.io/mediacapture-main/#introduction
“MediaStream API中的两个主要组件是MediaStreamTrack和MediaStream接口.MediaStreamTrack对象表示源自用户代理中的一个媒体源的单一类型的媒体,例如由网络摄像头产生的视频。 MediaStream用于将多个MediaStreamTrack对象组合成一个可以在媒体元素中记录或呈现的单元。“
答案 0 :(得分:18)
是否可以从两个不同的源/元素创建包含MediaStreamTrack实例的MediaStream?
是的,您可以使用MediaStream.addTrack()
方法执行此操作。
但Firefox只会在记录this bug之前将初始流的曲目用于记录器。
OP已经知道如何获得所有这些,但这是对未来读者的提醒:
要从画布中获取视频流轨道,您可以调用canvas.captureStream(framerate)
方法。
要从视频元素中获取音频streamTrack,您可以使用WebAudio API及其createMediaStreamDestination
方法。
这将返回包含我们的audioStream的MediaStreamDestination节点(dest
)。然后,您必须将从您的视频元素创建的MediaElementSource与此dest
相关联。
如果您需要向此流添加更多音轨,则应将所有这些来源连接到dest
。
现在我们有两个流,一个用于画布视频,另一个用于音频,我们可以在初始化new MediaRecorder(canvasStream)
之前使用canvasStream.addTrack(audioStream.getAudioTracks()[0])
。
这是一个完整的示例,现在只能在chrome中使用,可能很快就会在Firefox中修复错误:
var cStream,
aStream,
vid,
recorder,
analyser,
dataArray,
bufferLength,
chunks = [];
function clickHandler() {
this.textContent = 'stop recording';
cStream = canvas.captureStream(30);
cStream.addTrack(aStream.getAudioTracks()[0]);
recorder = new MediaRecorder(cStream);
recorder.start();
recorder.ondataavailable = saveChunks;
recorder.onstop = exportStream;
this.onclick = stopRecording;
};
function exportStream(e) {
if (chunks.length) {
var blob = new Blob(chunks)
var vidURL = URL.createObjectURL(blob);
var vid = document.createElement('video');
vid.controls = true;
vid.src = vidURL;
vid.onend = function() {
URL.revokeObjectURL(vidURL);
}
document.body.insertBefore(vid, canvas);
} else {
document.body.insertBefore(document.createTextNode('no data saved'), canvas);
}
}
function saveChunks(e) {
e.data.size && chunks.push(e.data);
}
function stopRecording() {
vid.pause();
this.parentNode.removeChild(this);
recorder.stop();
}
function initAudioStream(evt) {
var audioCtx = new AudioContext();
// create a stream from our AudioContext
var dest = audioCtx.createMediaStreamDestination();
aStream = dest.stream;
// connect our video element's output to the stream
var sourceNode = audioCtx.createMediaElementSource(this);
sourceNode.connect(dest)
// start the video
this.play();
// just for the fancy canvas drawings
analyser = audioCtx.createAnalyser();
sourceNode.connect(analyser);
analyser.fftSize = 2048;
bufferLength = analyser.frequencyBinCount;
dataArray = new Uint8Array(bufferLength);
analyser.getByteTimeDomainData(dataArray);
// output to our headphones
sourceNode.connect(audioCtx.destination)
startCanvasAnim();
rec.onclick = clickHandler;
rec.disabled = false;
};
var loadVideo = function() {
vid = document.createElement('video');
vid.crossOrigin = 'anonymous';
vid.oncanplay = initAudioStream;
vid.src = 'https://dl.dropboxusercontent.com/s/bch2j17v6ny4ako/movie720p.mp4';
}
function startCanvasAnim() {
// from MDN https://developer.mozilla.org/en/docs/Web/API/AnalyserNode#Examples
var canvasCtx = canvas.getContext('2d');
canvasCtx.fillStyle = 'rgb(200, 200, 200)';
canvasCtx.lineWidth = 2;
canvasCtx.strokeStyle = 'rgb(0, 0, 0)';
var draw = function() {
var drawVisual = requestAnimationFrame(draw);
analyser.getByteTimeDomainData(dataArray);
canvasCtx.fillRect(0, 0, canvas.width, canvas.height);
canvasCtx.beginPath();
var sliceWidth = canvas.width * 1.0 / bufferLength;
var x = 0;
for (var i = 0; i < bufferLength; i++) {
var v = dataArray[i] / 128.0;
var y = v * canvas.height / 2;
if (i === 0) {
canvasCtx.moveTo(x, y);
} else {
canvasCtx.lineTo(x, y);
}
x += sliceWidth;
}
canvasCtx.lineTo(canvas.width, canvas.height / 2);
canvasCtx.stroke();
};
draw();
}
loadVideo();
<canvas id="canvas" width="500" height="200"></canvas>
<button id="rec" disabled>record</button>
Ps :由于FF团队似乎需要一些时间来修复这个错误,所以这里有一个快速解决方法,可以让它在FF上运行。
您还可以使用new MediaStream([track1, track2])
混合两首曲目
但是,chrome目前是这个构造函数的前缀,但由于它确实支持addTrack
,所以它并不是真的需要,而且我们可以带来像丑陋的东西
var mixedStream = 'MediaStream' in window ?
new MediaStream([cStream.getVideoTracks()[0], aStream.getAudioTracks()[0]]) :
cStream;
recorder = new MediaRecorder(mixedStream);
答案 1 :(得分:2)
Kaiido的演示非常出色。对于那些只是在寻找tl; dr代码以将音频流添加到其现有画布流的人:
let videoOrAudioElement = /* your audio source element */;
// get the audio track:
let ctx = new AudioContext();
let dest = ctx.createMediaStreamDestination();
let sourceNode = ctx.createMediaElementSource(videoOrAudioElement);
sourceNode.connect(dest);
sourceNode.connect(ctx.destination);
let audioTrack = dest.stream.getAudioTracks()[0];
// add it to your canvas stream:
canvasStream.addTrack(audioTrack);
// use your canvas stream like you would normally:
let recorder = new MediaRecorder(canvasStream);
// ...