技術背景
衆所周知浏覽器從出現至今隻能實作基于http協定對伺服器端html内容進行無狀态請求，無法實作雙向通信。但在如今網際網路高度發達的時代有太多的應用想通過浏覽器實作點對點通訊，進而實作基于浏覽器的聊天室、直播室等需求，谷歌2010年以6820萬美元收購Global IP Solutions公司而獲得的一項技術。2011年5月開放了工程的源代碼，在行業内得到了廣泛的支援和應用，成為下一代視訊通話的标準。WebRTC源自網頁實時通信(Web Real-Time Communication)的縮寫，是一個支援網頁浏覽器進行實時語音對話或視訊對話的技術。
WebRtc概念
WebRTC是一個開源項目，旨在使得浏覽器能為實時通信（RTC）提供簡單的JavaScript接口。說的簡單明了一點就是讓浏覽器提供JS的即時通信接口。這個接口所創立的信道并不是像WebSocket一樣，打通一個浏覽器與WebSocket伺服器之間的通信，而是通過一系列的信令，建立一個浏覽器與浏覽器之間（peer-to-peer）的信道，這個信道可以發送任何資料，而不需要經過伺服器。并且WebRTC通過實作MediaStream，通過浏覽器調用裝置的攝像頭、話筒，使得浏覽器之間可以傳遞音頻和視訊
相容性
Chrome、Opera、Firefox和Edge浏覽器支援WebRTC技術。
主要API
- MediaStream: 從裝置擷取資料流，比如說攝像頭和麥克風。
- RTCPeerConnection: 音視訊通話，包括裝置加密和帶寬管理
- RTCDataChannel: p2p通信
簡單執行個體
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
<title>WebRTC 加載本地攝像頭</title>
<script src="../js/lib/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
(function($) {
$.fn.video = function(msc, streamAction) {
const setting = {
video: true,
audio: false
};
jQuery.extend(setting, msc);
this.get(0).addEventListener('loadedmetadata', function() {
console.log("視訊加載完成");
});
navigator.mediaDevices.getUserMedia(setting)
.then(stream => {
this.get(0).srcObject = stream;
if(typeof(streamAction) == "function") {
streamAction(stream);
}
}).catch(e => console.log('navigator.getUserMedia error: ', e));
}
})(jQuery);
</script>
<script type="text/javascript">
$(function() {
$("#localVideo").video({video: true});
})
</script>
</head>
<body>
<h1>WebRTC 加載本地攝像頭</h1>
<video id="localVideo" autoplay playsinline></video>
</body>
</html>
運作結果
WebRTC實踐曆程:
1. WebRTC實踐簡介
2. WebRTC實踐擷取視訊流
3. WebRTC實踐傳輸視訊流
4. WebRTC實踐信令服務
5. WebRTC實踐點對點通信
6. WebRTC實踐視訊聊天室
7. WebRTC實踐總結
![RTSP、RTP、RTCP協定簡介什麼是RTSPRTSP是如何工作的RTP/RTCPRTCP如何保證RTP的傳輸品質？SRTP[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)