Jitsi-Meet 基于 MultiStreamsMixer 修改前端混流

简介

Jitsi 是一套基于 Java 开发的开源视频会议系统，可以实现在线视频会议，文档共享和即时消息的分享；它支持网络视频会议，使用 SFU 模式实现视频路由器功能；它支持SIP帐号注册电话呼叫。不仅支持单机本地安装方式，还支持云平台安装。

但是呢它的默认客户端只支持文档或者摄像头单独推流，就是只能同时显示一个，查了 issue 和它的官方论坛，发现居然没有人做过！

所以就只能自己动手了，目的就是实现客户端的文档+摄像头混流上传。

MultiStreamsMixer

要混流自然不能手动硬刚了，先 github 遛一圈，找到一个开源混流库 MultiStreamsMixer，官方 Demo 相当容易：

screenStream.fullcanvas = true;
screenStream.width = screen.width; // or 3840
screenStream.height = screen.height; // or 2160 

cameraStream.width = parseInt((20 / 100) * screenStream.width);
cameraStream.height = parseInt((20 / 100) * screenStream.height);
cameraStream.top = screenStream.height - cameraStream.height;
cameraStream.left = screenStream.width - cameraStream.width;

var mixer = new MultiStreamsMixer([screenStream, cameraStream]);

rtcPeerConnection.addStream(audioMixer.getMixedStream());

mixer.frameInterval = 1;
mixer.startDrawingFrames();

剩下的就是修改 Jitsi-Meet 源码加重新编译了。

Jitsi-Meet

找到视频聊天切换文档对应的事件 conference.js/toggleScreenSharing，一步一步往下跟，可以发现最容易的改动最小的点就是 _switchToScreenSharing 了，在此处实现混流然后替换到大窗口就可以了：

_switchToScreenSharing(options = {}) {
    ...

    return this._createDesktopTrack(options)
        .then(stream => {
            if (this.localVideo && this.localVideo.getOriginalStream) {
                const s1 = stream.getOriginalStream();
                const s2 = this.localVideo.getOriginalStream();

                ...

                const mixer = new MultiStreamsMixer([ s1, s2 ]); stream._setStream(mixer.getMixedStream());

                mixer.frameInterval = 1;
                mixer.startDrawingFrames();
                this.useVideoStream(stream, false);
            } else {
                this.useVideoStream(stream);
            }

        })
    ...
},

在此处判断一下当前窗口有没有正在推流，如果有就混合后再推，如果没有就保持老逻辑即可，注意混流时一定不要释放前一个视频流。

All Done !!!

最简单的修改就这么多了，为了优化体验还有些界面啥的优化就不贴了。