什么是webrtc疗认？
借助 WebRTC，您可以將實(shí)時(shí)通信功能添加到基于開放標(biāo)準(zhǔn)運(yùn)行的應(yīng)用程序只搁。它支持在對(duì)等點(diǎn)之間發(fā)送視頻赤兴、語音和通用數(shù)據(jù)妖滔，允許開發(fā)人員構(gòu)建強(qiáng)大的語音和視頻通信解決方案.
重點(diǎn): 點(diǎn)對(duì)點(diǎn)發(fā)送視頻、語音和數(shù)據(jù)桶良。
如何在瀏覽器中使用webrtc座舍？
瀏覽器中可以通過一下方法判斷當(dāng)前瀏覽器是否支持webrtc
window.RTCPeerConnection || window.mozRTCPeerConnection || window.webkitRTCPeerConnection
簡(jiǎn)單的Demo
先從最簡(jiǎn)單的例子開始，我們?cè)谝粋€(gè)網(wǎng)頁中陨帆，通過兩個(gè)RTCPeerConnection對(duì)象來建立一個(gè)連接曲秉，一個(gè)RTCPeerConnection(pc_pub)對(duì)象發(fā)送視頻和語音，另一個(gè)RTCPeerConnection(pc_sub)對(duì)象接收視頻和語音疲牵。
效果
此處使用了Safri的虛擬攝像頭承二。可以避免使用真實(shí)攝像頭還要露臉的尷尬纲爸『ヰ可以看到左側(cè)是本地采集的畫面，右側(cè)是接收到的視頻畫面缩焦。中間有大概幾十毫秒的延遲读虏。
流程
在上面的流程圖中，pub_pc表示推流的對(duì)象(PeerConnection)袁滥， sub_pc表示訂閱的對(duì)象(PeerConnection)盖桥。
通過getUserMedia方法來請(qǐng)求使用本地設(shè)備
左側(cè)的VideoElement只是用來顯示推流內(nèi)容(本地預(yù)覽)，是否顯示都不影響推流效果题翻。
總結(jié)
先嘗試跑通這個(gè)簡(jiǎn)單的Demo揩徊，可以看從頁面中看到本地預(yù)覽、推拉流的效果嵌赠。如果你是第一次接觸webrtc塑荒，上面的流程中有很多看不懂的名字和方法可以先忽略它們。
代碼
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>webrtc連接</title>
</head>
<body>
<video id="localStream" style="width: 320px; height: 240px;" autoplay muted></video>
<video id="remoteStream" style="width: 320px; height: 240px;" autoplay muted> </video>
<button id="deviceBtn">打開本地?cái)z像頭</button>
<button id="startBtn">建立連接</button>
<script>
let localStream = null;
let localVideo = document.getElementById("localStream");
let remoteVideo = document.getElementById("remoteStream")
let deviceBtn = document.getElementById("deviceBtn");
let startBtn = document.getElementById("startBtn");
let pc_pub = new RTCPeerConnection();
let pc_sub = new RTCPeerConnection();
deviceBtn.addEventListener("click", () => {
navigator.mediaDevices.getUserMedia({ video: true }).then((mediastream) => {
localStream = mediastream;
localVideo.srcObject = mediastream;
})
})
startBtn.addEventListener("click", () => {
pc_pub.addTrack(localStream.getVideoTracks()[0], localStream);
pc_pub.createOffer().then((offer) => {
pc_pub.setLocalDescription(offer).then(() => {
pc_sub.setRemoteDescription(offer).then(() => {
pc_sub.createAnswer().then((answer) => {
pc_sub.setLocalDescription(answer).then(() => {
pc_pub.setRemoteDescription(answer).then(() => {
})
})
})
})
})
})
})
pc_pub.addEventListener('icecandidate', (event) => {
if (event.candidate) {
pc_sub.addIceCandidate(event.candidate);
}
})
pc_sub.addEventListener('icecandidate', (event) => {
if (event.candidate) {
pc_pub.addIceCandidate(event.candidate);
}
})
pc_sub.addEventListener('track', (event) => {
remoteVideo.srcObject = event.streams[0];
})
</script>
</body>
其他
如果你也是專注前端多媒體或者對(duì)前端多媒體感興趣姜挺，可以搜索微信公眾號(hào)"前端多媒體"
