利用 Javascript + canvas 实现多个视频渲染成一个新视频。

風雲 (ID: 3)

头衔：论坛版主

等级：大天使

积分：1632
发帖：72 篇
来自：保密
注册：2022/3/30 15:28:53
造访：2024/12/21 22:25:57

[ 第 1 楼 ]

<!doctype html><html lang="zh"><head>
<meta charset="utf-8" />
<title>视频合成测试</title>
</head><body>
<input type="button" value="合成视频" onclick="testMerge()" />
<p class="tips"></p>
</body><script type="text/javascript">

function testMerge() {
	ffmpeg.merge([
		"https://qxtechdata.qiuxinkaifa.com/vslicing/202412/20/551002001-010010103112/551002001-010010103112-1734703572840_1734703572840_1734703578840.mp4",
		"https://qxtechdata.qiuxinkaifa.com/vslicing/202412/20/551002001-010010103112/551002001-010010103112-1734702882880_1734702882880_1734702888880.mp4"
	]).then(res => {
		console.log(res);
		var tips = document.querySelector(".tips") || 0;
		tips.innerHTML = "";
		var tv = document.createElement("video");
		tv.src = URL.createObjectURL(res);
		tv.volume = 0.1; tv.controls = true;
		tips.appendChild(tv).play();
	});
}

var ffmpeg = new function() {
	var tips = document.querySelector(".tips") || 0;
	function report(msg) { tips.innerHTML = msg; }

this.merge = async function(arr) {
		// 创建音频串流器（将多个音频流串成一个音频流）
		var act = new AudioContext;
		var dest = act.createMediaStreamDestination();
		// 创建 canvas 画布
		var cvs = document.createElement("canvas");
		cvs.width = 640; cvs.height = 640 * 16 / 9;
		var ctx = cvs.getContext("2d");
		// 创建媒体录制器
		var stream = cvs.captureStream(24);
		var rec = new MediaRecorder(stream, { mimeType: "video/webm" });

// 绘制背景图
		report("正在绘制背景图……");
		var img = new Image;
		var svg = new Blob([ '<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500"><text y="425" x="250" text-anchor="middle" font-size="500">🌇</text></svg>' ], { type: "image/svg+xml" });
		await new Promise(ok => {
			img.onload = () => ok(0);
			img.src = URL.createObjectURL(svg);
		});
		ctx.drawImage(img, 0, 0, cvs.width, cvs.height);

report("正在统计视频总时长……");
		var tvs = new Array, times = 0;
		for(var x of arr) {
			var tv = document.createElement("video");
			var dur = await new Promise(ok => {
				tv.onloadeddata = () => ok(tv.duration);
				tv.onerror = () => ok(0);
				tv.crossOrigin = "anonymous";
				tv.src = x;
			});
			if(!dur) continue;
			// 音频串流
			act.createMediaElementSource(tv).connect(dest);
			times += dur; tvs.push(tv);
			report("已加载视频 " + times.toFixed(0) + " 秒");
		}

// 将串流音频合并到录制中，然后开始录制
		dest.stream.getAudioTracks().forEach(x => stream.addTrack(x));
		rec.start();	// stream 的音频和视频轨道都确定了，开始录制

// 绘制视频帧
		var vid, isend;
		function drawFrame() {
			if(isend) return rec.stop();
			if(vid) ctx.drawImage(vid, 0, 300, 640, 360);
			requestAnimationFrame(drawFrame);
		}
		drawFrame();

// 上报进度
		times = times.toFixed(0) - 0;
		tips.innerHTML = `<progress value="0" max="${times}"></progress> `;
		var gress = tips.firstChild || 0;
		var str = tips.lastChild || 0;
		var stime = 0, timer = setInterval(() => {
			gress.value = ++stime;
			str.data = " 合成中，剩余 " + (times - stime) + " 秒";
			if(stime >= times) clearInterval(timer);
		}, 1000);

// 开始录制视频
		for(var x of tvs) {
			vid = x;
			await new Promise(ok => {
				x.onended = () => ok(0);
				x.play();
			});
		}

// 返回视频 blob
		return new Promise(ok => {
			rec.ondataavailable = e => ok(e.data);
			isend = true;	// 设置停止录制标识
		});
	};
};

</script></html>

[您可以先修改代码再运行]

2024/12/21 11:50:01

IP：已设置保密

風雲 (ID: 3)

头衔：论坛版主

等级：大天使

积分：1632
发帖：72 篇
来自：保密
注册：2022/3/30 15:28:53
造访：2024/12/21 22:25:57

[ 第 2 楼 ]

一开始直接将 video 的音频流添加到 cvs.captureStream() 后发现录制故障，后面确定是 MediaRecord 开始录制后不允许 trackers 有变动，包括 video.src 变更也会导致音频轨道发生改变，从而中断当前录制。

MediaRecorder 默认的视频编码是 video/webm，音频默认是 opus（Chrome 系默认仅支持 opus），也可以改成 mp4 格式（vp8,vp9,avc1,hev1），例如想使用 h264 编码格式，可以设置为 { mimeType: "video/mp4;codecs=avc1,opus" }

2024/12/21 12:05:59

IP：已设置保密

pojin (ID: 2)

等级：风云使者

积分：318
发帖：2 篇
来自：保密
注册：2022/3/30 11:42:27
造访：2024/12/21 22:23:34

[ 第 3 楼 ]

运行不了啊

2024/12/21 22:23:36

IP：已设置保密

風雲 (ID: 3)

头衔：论坛版主

等级：大天使

积分：1632
发帖：72 篇
来自：保密
注册：2022/3/30 15:28:53
造访：2024/12/21 22:25:57

[ 第 4 楼 ]

什么浏览器？我在 Edge 上开发的。
然后，在微信里面打开，合成时可能需要每隔5秒点击一次空白的地方，否则 video 标签会因为缺少点击事件无法触发自动播放，录制就会卡那里。

2024/12/21 22:25:57

IP：已设置保密