最近在MDN上學習svg的時候，看到了WebRTC。很有意思嘛，瀏覽器也可以調(diào)用攝像頭了。發(fā)現(xiàn)瀏覽器可以做的事情好多好多，不僅僅是提交表單和瀏覽網(wǎng)頁。
2010年5月，Google 以6,820萬美元收購 VoIP 軟件開發(fā)商 Global IP Solutions 的 GIPS 引擎，將其開源并改為名為“WebRTC”。隨即 WebRTC 被納入萬維網(wǎng)聯(lián)盟的 W3C 推薦標準。2014年7月1日，WebRTC 瀏覽器 API 標準的1.0版由 W3C 發(fā)布。WebRTC 是一個由 Google、Mozilla和 Opera 主導的開源項目，通過在瀏覽器中調(diào)用簡單的 JavaScript API 和標準的 HTML5 標簽，瀏覽器、手機平臺還有其他設備可通過一個通用的協(xié)議進行實時通信。
什么是WebRTC
WebRTC 是Web Real-Time Communications的縮寫，是一個由 Google、Mozilla和 Opera 主導的開源項目，通過在瀏覽器中調(diào)用簡單的 JavaScript API 和標準的 HTML5 標簽，瀏覽器、手機平臺還有其他設備可通過一個通用的協(xié)議進行實時通信。
歷史及兼容性
- 2010年，Google開源WebRTC。
- 2014年，WebRTC瀏覽器API標準1.0版發(fā)布。
- 2017年5 月4號，WebRTC的API標準1.1穩(wěn)定版發(fā)布。
預備一下，學習API
getUserMedia
這個接口會請求用戶的允許使用攝像頭或者麥克風， 返回是一個promise，返回值就是媒體流。
navigator.mediaDevices.getUserMedia({audio: true, video: true})
RTCPeerConnection
使用RTCPeerConnection時，需要加前綴?？梢允褂?a target="_blank" rel="nofollow">Adapter.js來處理不同瀏覽器間的差異性。它提供了點對點的通信，可以保持、監(jiān)視并且關(guān)掉連接，并且可以進行信號處理，編碼解碼，安全保證和控制帶寬。
RTCDataChannel
RTCDataChannel允許點對點的雙向通信，和WebSockets的API相同，但是比其時延小。
getStats
getStats是統(tǒng)計方法，可以統(tǒng)計WebRTC會話的相關(guān)信息。
video 標簽
| 屬性 | 意義 | 取值 | 備注 |
|---|---|---|---|
| autoplay | 自動播放 | autoplay=“false”不能取消自動播放，需要去掉autoplay屬性 | |
| buffered | 一個只讀屬性，返回TimeRanges對象，這個對象返回的是訪問這個屬性時，瀏覽器已經(jīng)緩存的媒體的時間范圍 | TimeRanges有兩個方法start，end，查詢起始時間和終點時間 | |
| controls | 進度條等控制組件的顯示 | ||
| height | video標簽的高度 | ||
| width | video標簽的寬度 | ||
| src | 視頻資源的Url | source標簽也可以用來設定視頻資源Url，和src同樣的效果 | |
| preload | 預加載 | 1.‘none’，不盡興預加載。 2. ‘metadata’， 指返回video的metadata信息，例如長度等。 3.‘a(chǎn)uto’， 視頻預加載。這個值的默認值各個瀏覽器不同，推薦設定成metadata。 | preload屬性和autoplay屬性同時設定時，autoplay屬性優(yōu)先級更高，即設定autoplay，preload設為none時，會按照autoplay的邏輯執(zhí)行，忽略preload |
| poster | 視頻下載時顯示的圖片 | 不論視頻是否預加載，設定這個值后，在視頻播放前就顯示這個圖片 | |
| loop | 是否循環(huán)播放視頻 | ||
| muted | 播放視頻時是否靜音 | ||
| playsinline | 在iphone手機上，如果加了這個屬性，那么在播放時，可以不進入到全屏，如果不加的話，播放時會進入全屏模式 |
如上圖所示，HTMLVideoElement繼承自HTMLMediaElement。所以HTMLVideoElement有play方法，可以控制video的播放。
開始實戰(zhàn)
拍照
1. 用video標簽顯示獲得的視頻流
2. canvas 繪制video截圖
const video = document.querySelector('#video')
const canvas = document.querySelector('#canvas')
const photo = document.querySelector('#img')
navigator.mediaDevices.getUserMedia({video:true}).then(stream=>{
video.srcObject = stream
video.play()
})
function take () {
const context = canvas.getContext('2d');
context.drawImage(video, 0, 0, '200', '300');
var data = canvas.toDataURL('image/png');
photo.setAttribute('src', data);
}
