引言

在前面的文章中已經實現了本地模擬一對一聊天和現實網路中一對一的視訊聊天了，這篇文章在前面的網路一對一聊天的基礎上進行改造，實現聊天的同時可以隨意切換螢幕分享和自己攝像頭畫面

實現思路

1. 首先建立一對一視訊通話基礎
2. 在本地用主動觸發操作獲取螢幕分享流並儲存一份在本地
3. 獲取到螢幕分享流之後將PeerConnection中的視訊流資訊更改，移除本地攝像頭流，繫結螢幕分享流
4. 新的流繫結完成之後，重新和對面建立新的通訊連線，即重新建立offer，對面監聽offer以及傳送響應
5. 切換本地攝像頭畫面和螢幕分享流原理都一樣，就是將繫結在peerConnection中的媒體資訊更改，然後重新建立連結

演示

線上體驗

想要體驗的評論體驗，完善程式碼後全部開源

具體程式碼

其他建立視訊通話的基礎程式碼不再展示，去看我前面的文章即可

• 建立視訊分享流

//分享螢幕
        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;
        },
 

最後

• 關注我的公眾號及時獲取最新文章更新