h5中如何实现微信视频聊天中画中画模式媒体流？

引言

在微信中合别人视频聊天的过程中，视频显示的模式一般都是画中画模式，同时可以切换主画面和次画面，那么如何在web端实现这种效果呢？

效果预览

实现思路（基于webrtc）

• 思路①
• 使用ffmpeg合流
• 获取前段媒体流之后，创建临时url，将不同流的url合并输出到另一个url流，然后显示输出
• 使用这种需要调用本地ffmpeg插件，一般都有第三方的插件
• 思路②
• 使用开源合流node插件video-stream-merger
• 初始状态指定合流媒体
• 在video标签加上监听事件，监听点击小画面的位置坐标，利用点击事件切换主画面和次画面

代码

• 准备条件(npm包github地址：https://github.com/t-mullen/video-stream-merger)

//安装npm 包，引入js
npm install npm install video-stream-merger
--------------
var VideoStreamMerger = require('video-stream-merger')

• 本地记录主次画面媒体流

 localStream: null,//主画面媒体流
 remoteStream:null,// 此画面媒体流
 merger:null,//合成流

• 建立通信后，监听远程流加入，然后开始合并

....
that.pc.onaddstream = (event) => {
console.log("监听到视频加入 onaddstream",event)
// that.createEleVideo(event.stream,that.remoteAccount)
that.remoteStream = event.stream
that.mergerVideo(that.localStream,that.remoteStream);
};
....
-------------
//合并流
mergerVideo(A,B){
        const that = this;
        that.merger = new VideoStreamMerger();
        //A为主画面 B为此画面，具体位置可以通过下面x,y调整，大小也可以调整
        that.merger.addStream(A, {
          x: 0,
          y: 0,
          width: that.merger.width,
          height: that.merger.height,
          mute: true
        });
        that.merger.addStream(B, {
          x: 0,
          y: 0,
          width: 200,
          height: 200,
          mute: false
        });
        that.merger.start();
        console.log("merger.result",that.merger.result);
        //重新赋值合成流
        let video = document.querySelector('#sucA');
        // 旧的浏览器可能没有srcObject
        if ("srcObject" in video) {
          video.srcObject = that.merger.result;
        } else {
          video.src = window.URL.createObjectURL(that.merger.result);
        }
},

• 实现主次画面调整(实质上就是将合流参数更改重新合流)

//点击切换
changeFrame(e){
        const that = this;
        if(that.merger){
          let x = e.offsetX;
          let y = e.offsetY;
          if(x < 112 && y < 112){
            that.mergerVideo(that.remoteStream,that.localStream);
          }
        }
},

最后

• 求赞求关注，有问题请留言
• 文章来源公众号： 苏克分享