如何解决重新连接断开的视频元素音频节点
我正在录制一个画布流 (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);
然后我使用网络音频 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,outputcanvas.width,outputcanvas.height);
一切正常,我可以将录制的视频和音频很好地输出到 mp4。
我遇到的问题是在我录制视频并重置流之后。
视频元素的音频节点已断开连接。
有没有一种简单的方法可以重新连接它?因为除非我将其静音,否则视频元素中的视频甚至不会再播放。
解决方法
这确实是 httr
API 的一个大流程,元素无法检索其图形。
这不会被修复,因为现在有更好的方法将 HTMLMediaElement 连接到 AudioContext:createMediaElementSource
。
您可以从返回的 MediaStream 创建一个 MediaStreamSource,但在您的情况下,您甚至不再需要 AudioContext,只需直接获取音轨:
HTMLMediaElement.captureStream
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);
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 }
然而,此 API 尚未随处可用,而且存在很多问题。例如在当前的 Firefox 中,它会停止捕获视频的音频,但希望他们能尽快修复它。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。