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端能运行更多拥有强大功能的开源软件,用户打开网页,就能使用计算机的一切功能。