用Electron实现支持动态下发视频资源的类OBS推流解决方案-CSDN博客

本文链接：https://blog.csdn.net/zhuoyuedelan/article/details/142721994

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推流的架构，就可以稳定运行了。