webrtc打造群视频聊天系列之聊天和屏幕分享随意切换

技术交流
1

引言

在前面的文章中已经实现了本地模拟一对一聊天和现实网路中一对一的视频聊天了，这篇文章在前面的网络一对一聊天的基础上进行改造，实现聊天的同时可以随意切换屏幕分享和自己摄像头画面

实现思路

  1. 首先建立一对一视频通话基础
  2. 在本地用主动触发操作获取屏幕分享流并保存一份在本地
  3. 获取到屏幕分享流之后将PeerConnection中的视频流信息更改，移除本地摄像头流，绑定屏幕分享流
  4. 新的流绑定完成之后，重新和对面建立新的通讯连接，即重新创建offer，对面监听offer以及发送响应
  5. 切换本地摄像头画面和屏幕分享流原理都一样，就是将绑定在peerConnection中的媒体信息更改，然后重新建立链接

演示

1374×667

在线体验

想要体验的评论体验，完善代码后全部开源

具体代码

其他建立视频通话的基础代码不再展示，去看我前面的文章即可

  • 创建视频分享流
//分享屏幕
        shareScreenStream(){
            const that = this;
            const displayMediaStreamConstraints = {
                video: {
                    cursor: "always"
                },
                audio: true
            };
			//获取分享窗口流
            if (navigator.mediaDevices.getDisplayMedia) {
                navigator.mediaDevices.getDisplayMedia(displayMediaStreamConstraints).then(function (mediaStream) {
                    console.log("mediaStream", mediaStream)
                    that.shareStream = mediaStream;
					//移除本地摄像头流媒体
                    that.pc.removeStream(that.localStream)
					//添加屏幕分享流
                    that.pc.addStream(mediaStream)
					//重新发送offer建立通讯
                    that.onCreateOffer();
					//改变本地视频窗口信息为屏幕分享信息
                    let video = document.querySelector('#local');
                    if ("srcObject" in video) {
                        video.srcObject = that.shareStream;
                    } else {
                        video.src = window.URL.createObjectURL(that.shareStream);
                        video.volume = 0
                    }
                    // eslint-disable-next-line no-unused-vars
                    video.onloadedmetadata = function(e) {
                        video.play();
                    };
                    that.isLocalStream = false;
                }).catch(error=>{
                    console.log("error",error)
                    that.$message.error("媒体设备获取异常")
                });
            } else {
                console.log("navigator.mediaDevices.getDisplayMedia  false");
                that.$message.error("浏览器不不支持")
            }
  • 切换流
 		//切回本地摄像头
        changeLocalStream(){
            const that = this;
			//移除视频分享流
            that.pc.removeStream(that.shareStream)
			//添加本地摄像头流
            that.pc.addStream(that.localStream)
			//重新建立链接
            that.onCreateOffer();
			//切换本地媒体展示
            that.nativeMedia();
            that.isLocalStream = true;
        },

最后

  • 关注我的公众号及时获取最新文章更新
    苏克分享
1 个赞