我正在录制一个画布流(streamA),其中包含从视频元素导出并导入到outputcanvas元素的视频帧。
var video = document.createElement("VIDEO");
video.src = "test.mp4";
var outputcanvas = document.createElement("CANVAS");
outputcanvas.width = 1920;
outputcanvas.height = 1080;
var ctx = outputcanvas.getContext("2d");
var streamA = outputcanvas.captureStream(60);
然后使用web audio api将视频音频连接到流。
var source;
var dest;
var getContext = function() {
var ac = null;
if ( !window.AudioContext && !window.webkitAudioContext ) {
console.warn('Web Audio API not supported in this browser');
} else {
ac = new ( window.AudioContext || window.webkitAudioContext )();
}
return function() {
return ac;
};
}();
var audioCtx = getContext();
source = source || audioCtx.createMediaElementSource(video);
dest = dest || audioCtx.createMediaStreamDestination();
source.connect(dest);
var audioTrack = dest.stream.getAudioTracks();
streamA.addTrack(audioTrack[0]);
video.play(); //this is inside a request animation so each frame is copied to the canvas
ctx.drawImage(video,0,0,outputcanvas.width,outputcanvas.height);
一切运行良好,我可以将录制的视频和音频输出到mp4。
我得到的问题是在我录制了视频并重置流之后。
视频元素的音频节点已断开连接。
有没有简单的方法可以把它重新连接回来?因为视频元素中的视频将不再播放,除非我将其静音。
发布于 2021-02-15 15:23:48
对于createMediaElementSource
应用编程接口来说,这确实是一个很大的流程,元素无法找回它的图形。
这是无法修复的,因为现在有一种更好的方法将HTMLMediaElement连接到AudioContext:HTMLMediaElement.captureStream
。
您可以从返回的MediaStream创建一个MediaStreamSource,但在您的示例中,您甚至不再需要AudioContext,只需直接获取音轨:
const vid_url = "https://upload.wikimedia.org/wikipedia/commons/2/22/Volcano_Lava_Sample.webm";
const video = document.createElement("video");
video.crossOrigin = "anonymous";
video.src = vid_url;
document.body.append(video);
video.controls = true;
const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d");
const btn = document.getElementById("btn");
let recording = false;
btn.onclick = async (evt) => {
await video.play();
canvas.width = video.videoWidth;
canvas.height = video.videoHeight;
ctx.filter = "invert(1)";
const vid_stream = (video.captureStream ? video.captureStream() : video.mozCaptureStream());
const audio_track = vid_stream.getAudioTracks()[0];
vid_stream.getVideoTracks()[0].stop(); // no need to keep capturing video
recording = true;
drawToCanvas();
const canvas_track = canvas.captureStream().getVideoTracks()[0];
const merged_stream = new MediaStream([canvas_track, audio_track]);
const chunks = [];
const recorder = new MediaRecorder(merged_stream);
recorder.ondataavailable = ({ data }) => chunks.push(data);
recorder.onstop = (evt) => {
exportVid( chunks );
audio_track.stop();
canvas_track.stop();
recording = false;
};
recorder.start(1000);
btn.textContent = "stop recording";
btn.onclick = (evt) => recorder.stop();
// force recording at least 5 seconds
btn.disabled = true;
setTimeout(()=> btn.disabled = false, 5000);
};
function drawToCanvas() {
ctx.drawImage(video, 0, 0);
if( recording ) {
setTimeout(drawToCanvas, 40); // ~25FPS
}
}
function exportVid( data ) {
const output = document.createElement("video");
output.controls = true;
output.src = URL.createObjectURL(new Blob(data));
btn.replaceWith(output);
video.pause();
}
video { max-width: 49vw; max-height: 100vh }
<button id="btn">start recording</button>
然而,这个API并不是所有地方都可用,而且它有很多buggy。例如,在当前的Firefox中,它会停止捕获视频的音频,但希望他们能尽快修复它。
https://stackoverflow.com/questions/66199745
复制相似问题