重新连接断开的视频元素音频节点
重新连接断开的视频元素音频节点
提问于 2021-02-15 04:19:53
我正在录制一个画布流(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。
我得到的问题是在我录制了视频并重置流之后。
视频元素的音频节点已断开连接。
有没有简单的方法可以把它重新连接回来？因为视频元素中的视频将不再播放，除非我将其静音。
回答 1
Stack Overflow用户
发布于 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中，它会停止捕获视频的音频，但希望他们能尽快修复它。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/66199745
复制相关文章
相似问题
腾讯云开发者
