最近喜歡研究視頻流，所以思考了雙向通信socket，接下來我們就一起來看看本地如何實現(xiàn)雙向視頻通訊的功能吧~

客戶端獲取視頻流

首先思考如何獲取視頻流呢？

其實跟錄音的功能差不多，都是查詢電腦上是否有媒體設(shè)備，如果有錄音和錄像的設(shè)備，首先就需要授權(quán)，然后將視頻流通過socket傳輸給服務(wù)端。

獲取媒體設(shè)備

const stream = await navigator.mediaDevices.getUserMedia({audio: true,video: true
})

因為是打視頻的功能，那A客戶端本身也希望看到A的攝像頭，所以我們直接將其賦值給一個video標簽，就能看到圖像了.

<p>這是A頁面</p><div class="local-stream-page"><video autoplay controls muted id="elA"></video><button onclick="onStart()">打視頻給B頁面</button>
</div><script>try {const stream = await navigator.mediaDevices.getUserMedia({audio: true,video: true})if (videoElA) {videoElA.srcObject = stream // 在 video 標簽上播放媒體流}peerInit(stream) // 初始化連接} catch (error) {console.log('error：', error)}</script>

然后就是重要部分了，我們需要用到WebRTC的API

RTCPeerConnection

RTCPeerConnection是WebRTC API中的一個對象，用于建立和管理兩個或多個用戶之間的實時通信。它允許通過互聯(lián)網(wǎng)進行音頻和視頻通話，以及共享數(shù)據(jù)流。

RTCPeerConnection對象提供了一系列的方法和事件，用于配置、管理和控制媒體流的傳輸。它支持使用不同的技術(shù)，如ICE（Interactive Connectivity Establishment）和STUN（Session Traversal Utilities for NAT）來解決網(wǎng)絡(luò)地址轉(zhuǎn)換（NAT）問題，以便在防火墻后面的不同設(shè)備之間建立連接。

使用RTCPeerConnection對象，您可以創(chuàng)建媒體流并將其發(fā)送到其他設(shè)備，也可以接收來自其他設(shè)備的媒體流。它還支持使用SDP（Session Description Protocol）描述媒體會話的配置，以及通過ICE和STUN協(xié)議協(xié)商和轉(zhuǎn)發(fā)媒體數(shù)據(jù)包的路由。

const peerInit = stream => {// 1. 創(chuàng)建連接實例peerA = new RTCPeerConnection()// 2. 添加視頻流軌道stream.getTracks().forEach(track => {peerA.addTrack(track, stream)})// peerA 端peerA.onicecandidate = event => {if (event.candidate) {socketA.send(JSON.stringify({ type: 'candid', data: event.candidate })) // socketA發(fā)送數(shù)據(jù)}}// 檢測連接狀態(tài)peerA.onconnectionstatechange = event => {if (peerA.connectionState === 'connected') {console.log('對等連接成功！')}}// 互換sdp認證transSDP()
}

到這里我們發(fā)送數(shù)據(jù)部分就是這樣子啦，但是還不行，因為兩者通視頻，還需要SDP認證，什么是SDP認證呢？

SDP（Session Description Protocol）認證是指通過在SDP協(xié)議中添加特定的信息來驗證身份或其他屬性的方法。SDP協(xié)議是一種用于描述多媒體會話的信息協(xié)議，它包含了音頻、視頻等媒體的編碼格式、分辨率、網(wǎng)絡(luò)地址等信息，用于在通話雙方之間建立和維護媒體連接。

在SDP認證中，通過在SDP協(xié)議中添加特定的信息，如用戶名、會議ID等，雙方可以互相驗證身份。此外，還可以通過在SDP協(xié)議中包含數(shù)字簽名或加密信息等技術(shù)來增強認證的安全性。

SDP認證通常用于多媒體通信、視頻會議等應(yīng)用場景中，以確保通信的安全性和可信度。在SDP認證中，需要使用相應(yīng)的協(xié)議或算法來驗證SDP信息的來源和完整性，以確認身份或其他屬性的合法性。

互換SDP認證

// peerA 端
const transSDP = async () => {let offer = await peerA.createOffer()// 向 peerB 傳輸 offersocketA.send(JSON.stringify({ type: 'offer', data: offer }))// 接收 peerB 傳來的 answersocketA.onmessage = async evt => {let reader = new FileReader()reader.readAsText(evt.data, 'utf-8')reader.onload = async function() {let { type, data } = JSON.parse(reader.result)console.log(JSON.parse(reader.result), 111)if (type == 'answer') {await peerA.setLocalDescription(offer)await peerA.setRemoteDescription(data)}}}
}

這就是A客戶端的全部代碼啦~

放心,全部代碼文章末尾會給到.

node服務(wù)端socket傳輸

接下來我們來看看服務(wù)端是如何處理的.對了,這里必須說一下,兩個socket之間的通信,必須要靠服務(wù)端管理,所以這就是為什么一定要學node的原因😂

const WebSocket = require('ws');// 創(chuàng)建一個 WebSocket 服務(wù)器，監(jiān)聽 8080 端口
const wss = new WebSocket.Server({ port: 8000 });// 當有客戶端連接時，創(chuàng)建一個 WebSocket 并將其添加到客戶端列表中
wss.on('connection', function connection(ws) {console.log('Client connected');// 當客戶端發(fā)送消息時，將消息發(fā)送給所有客戶端ws.on('message', function incoming(message) {console.log('Received message:', message.toString('utf8')); // 接受的對象，客戶端發(fā)送的是字符串,Buffer// 將消息發(fā)送給所有客戶端wss.clients.forEach(function each(client) {if (client !== ws && client.readyState === WebSocket.OPEN) {client.send(message); // 客戶端接受的是blob格式數(shù)據(jù)}});});// 當客戶端斷開連接時，將其從客戶端列表中刪除ws.on('close', function close() {console.log('Client disconnected');});
});

服務(wù)端用到了ws依賴, 如何區(qū)分兩個不同的socket客戶端, 特別是在同一個服務(wù)器下,同一個端口,不同的頁面下,我發(fā)現(xiàn)必須要給兩個socket一個唯一的標識才能做到,所以這期就先出功能,后面再繼續(xù)補一下ws的源碼學習.

不過這里要區(qū)分清楚,這是將當前的client客戶端發(fā)送給處理自己以外的,其他所以socket客戶端,發(fā)送消息這里,就是一對多的關(guān)系哦.

客戶端接受視頻流

服務(wù)端處理完了,就進行下一個客戶端如何接受視頻流

剛剛的sdp認證,肯定不止止A頁面的事情,都說了是認證,那肯定通信雙方需要知曉.

這里有一個順序問題

1.首先是A頁面創(chuàng)建offer—createOffer

2.然后是B頁面設(shè)置遠程描述—setRemoteDescription

3.B頁面生成發(fā)送到A頁面的answer—createAnswer

4.B頁面設(shè)置本地描述—setLocalDescription

5.A頁面設(shè)置本地描述—setLocalDescription(傳參是A頁面的offer)

6.A頁面設(shè)備遠程描述–setRemoteDescription(傳參是B頁面的answer)

只要這上面6步都正常執(zhí)行,B頁面才能接收到A頁面的視頻流和音頻流

const transSDP = async () => {// 1. 創(chuàng)建 offerlet offer = await peerA.createOffer()await peerB.setRemoteDescription(offer)// 2. 創(chuàng)建 answerlet answer = await peerB.createAnswer()await peerB.setLocalDescription(answer)// 3. 發(fā)送端設(shè)置 SDPawait peerA.setLocalDescription(offer)await peerA.setRemoteDescription(answer)
}

加上socket之后就是這樣

不過既然是socket了,所以數(shù)據(jù)上要做轉(zhuǎn)換處理,接收到的是blob數(shù)據(jù)

// B接收A的消息
// peerB 端，接收 peerA 傳來的 offer
socketB.onmessage = evt => {// console.log(evt.data)handleBlobToText(evt.data)
}const handleBlobToText = (blob) => {let reader = new FileReader()reader.readAsText(blob, 'utf-8') // 接收到的是blob數(shù)據(jù)，先轉(zhuǎn)成文本reader.onload = async function() {console.log(reader.result)let { type, data } = JSON.parse(reader.result) // 文本轉(zhuǎn)對象console.log(JSON.parse(reader.result))if (type == 'offer') {await peerB.setRemoteDescription(data)console.log('2.然后是B頁面設(shè)置遠程描述', new Date().getTime())let answer = await peerB.createAnswer()console.log('3.B頁面生成發(fā)送到A頁面的answer', new Date().getTime())await peerB.setLocalDescription(answer)console.log('4.B頁面設(shè)置本地描述', new Date().getTime())// 向 peerA 傳輸 answersocketB.send(JSON.stringify({ type: 'answer', data: answer }))}if (type == 'candid') {peerB.addIceCandidate(data)}}
}socketB.onerror = function() {console.log('WebSocket error. Ready state:', socketB.readyState);
};

根據(jù)時間戳,就能發(fā)現(xiàn)這六步的順序.

將接收到的視頻流渲染到B頁面的video標簽中,這就能接受的A頁面的視頻流了.

const socketB = new WebSocket('ws://localhost:8000');const peerB = new RTCPeerConnection()
const videoElB = document.getElementById('elB')// 監(jiān)聽數(shù)據(jù)傳來
peerB.ontrack = async event => {const [remoteStream] = event.streamsvideoElB.srcObject = remoteStream
}

效果

這就是兩個頁面視頻通訊的結(jié)果如下：

全部源碼已經(jīng)上傳在GitHub上啦~

https://github.com/0522skylar/webRTC-video