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

引言

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

效果预览

实现思路(基于webrtc)

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

代码

  • 准备条件(npmgithub地址: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);
          }
        }
},

最后

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