title: 用Electron实现支持动态下发视频资源的类OBS推流解决方案
tags:
- 个人成长
categories: - 杂谈
最近在研发数字人相关的项目，基于Electron实现了类似OBS的推流效果，很好玩，也有一些技术难点，本文分享一波。
我查阅了很多博客，虽然有一些ffmpeg推流的方案，但都是浅尝辄止。
本文的方案，可以在Web层实时查看ffmpeg推流的效果，并可以借助fabric.js实时编辑推流画面，实现复杂的展示效果，也支持服务端动态下发视频资源，在前端进行定制化实时推流合成，极大减轻服务端的负担。
首先是采样视频流的方案
软件的Node.js层通过CDN获取实时生成的视频片段，将视频缓存到用户本计算机，将视频路径转换为file:// 开头的路径，Web层可以通过<Video />标签直接播放视频，借助fabric.js可以将<Video />轻易绘制到canvas画板上，然后我们对画板进行采样，获取文档的视频流.
以下代码，可以对canvas进行每秒20帧的采样，获取的视频流，存储在videoTrack
const canvasStream = canvas.captureStream(20);
const videoTrack = canvasStream.getVideoTracks()[0];
我们还可以借助fabric.js在canvas绘制gif动图，各类自定义字体，各种类型图片，为视频添加丰富的多媒体元素，进一步丰富视频流的效果。
然后是采样音频流的方案
我们可以通过<Video />标签，对正在播放的视频进行采样，生成稳定的音频流，由于我们要不断切换视频，直接采集<Video />的音频流，会遇到音频流中断，音视频流合并出错的情况。
我们需要使用 createGain() 生成一个gainNode管道进行汇流 (在视频采样中，其实Canvas本身也是承担了类似gainNode汇流的功能)，这个gainNode管道可以随时接受<Video /> 音频流的汇入和断开。
为了后续为gainNode扩展更多的功能（比如调节音量，加入背景混音），我们不直接使用gainNode作为最终音轨, 我们可以另外创建一个finalAudioTrack作为最终音轨，将gainNode汇入finalAudioTrack即可
const audioContext = new AudioContext();
const gainNode = audioContext.createGain();
let audioSource = null;
const handleVideoChange = (video) => {
// 断开前一次的连接
if (audioSource) {
audioSource.disconnect(gainNode);
}
// 获取 video 的音频轨道并连接到目标节点
const audioTrack = video.captureStream().getAudioTracks()[0];
// 创建新的 MediaStreamAudioSourceNode 对象
audioSource = audioContext.createMediaStreamSource(new MediaStream([audioTrack]));
// 连接到增益节点
audioSource.connect(gainNode);
};
const destination = audioContext.createMediaStreamDestination();
const finalAudioTrack = destination.stream.getAudioTracks()[0];
//<video id="videoA" controls>
// <source src="path/to/your/video.mp4" type="video/mp4">
// Your browser does not support the video tag.
//</video>
// 获取页面上id为videoA 的视频元素
const videoA = document.getElementById('videoA');
// 在videoA切换src后, 调用以下函数
handleVideoChange(videoA);
将视频轨道和音频轨道合成并推流给Electron Node.js层的ffmpeg
使用MediaStream对音视频流进行合并后，我们可以获取到包含实时音视频流信息的combinedStream
const combinedStream = new MediaStream([
videoTrack,
finalAudioTrack,
]);
对combinedStream启动录制，并推流给Electron 的 Node.js层
// 创建一个 MediaRecorder 实例，设置 timeslice 参数为 1000ms
const mediaRecorder = new MediaRecorder(combinedStream, { timeslice: 1000 });
// 当有数据可用时触发该事件
mediaRecorder.ondataavailable = function (e) {
if (e.data.size > 0) {
const reader = new FileReader();
// 当文件读取完成后触发该事件
reader.onloadend = () => {
const arrayBuffer = reader.result;
try {
// 如果 window.electron 存在，则发送帧数据
if (window.electron) {
console.log("==sendFrame==", arrayBuffer.byteLength);
window.electron.sendFrame(arrayBuffer);
}
} catch (error) {
console.error("==sendFrame error==", error);
}
};
// 读取 Blob 数据并将其转换为 ArrayBuffer
reader.readAsArrayBuffer(e.data);
}
};
// 开始录制，每 1000ms 收集一次数据
mediaRecorder.start(1000);
Electron 的Node.js层接收数据流，并发送给ffmpeg进行推流
以下是精简后的代码，我们使用new PassThrough()创建了一个管道，管道入口接收数据，出口将数据输出给ffmpeg
const pathToFfmpeg = require("ffmpeg-static");
const videoStreams = new PassThrough();
const serverUrl = "rtmp://********"
// 构建 ffmpeg输出文件命令
const ffmpegArgs = [
"-fflags",
"+genpts",
"-re",
"-r",
"20", // 设置输入帧率
"-i",
"pipe:0", // 从标准输入读取视频数据
"-c:v",
"libx264", // 使用软件编码器
"-preset",
"ultrafast", // 使用更高效的预设
"-tune",
"zerolatency", // 低延迟调优
"-maxrate",
"2500k", // 降低视频码率
"-bufsize",
"1000k", // 调整缓冲区大小
"-pix_fmt",
"yuv420p",
"-g",
"20", // 调整 GOP 大小
"-c:a",
"aac", // 音频编码器
"-b:a",
"128k", // 音频码率
"-ac",
"2",
"-ar",
"48000", // 音频采样率
"-f",
"flv", // 输出格式
serverUrl, // 输出 URL
];
const ffmpegCommands = spawn(pathToFfmpeg, ffmpegArgs)
function sendFrame(sendFrame){
videoStreams.write(Buffer.from(arrayBuffer));
videoStreams.pipe(ffmpegCommands.stdin);
}
完成以上设置后，仿OBS的前端Canvas和ffmpge推流的架构，就可以稳定运行了。
小结
ffmpeg作为老牌的经典开源软件，功能强大，在实现ffmpeg推流的过程中，我也遇到了很多问题，比如视频流或音频流只要有一个断流，ffmpeg就会立刻停止推流，而且无法支持动态添加视频文件，这些工程上的问题，都要通过外层的逻辑封装去解决。
前端技术日新月异，其实本文提到的技术方案，配合 https://github.com/ffmpegwasm/ffmpeg.wasm 在纯Web端也能实现大部分，希望浏览器开放更多的能力，在Web端能运行更多拥有强大功能的开源软件，用户打开网页，就能使用计算机的一切功能。
