WebRTC 第一彈
存取相機 / Basic getUserMedia
4 min readFeb 25, 2020
我對於網路及時影像聲音傳輸非常好奇, 也很有興趣. 而 WebRTC 是驅動這一切的技術. 所以就大量瀏覽這方面的技術文章. 現在有一點初步心得, 所以打算發表一系列的文章, 最後做出一個實用的 APP. 這一篇會談到擷取網路攝影機並將串流顯示在網頁上的技術.
WebAPI
navigator.mediaDevice.getUserMedia(options) 是一個 promise , 這個 API 可以存取網路攝影機並且把影像指定給 video 標籤播放. option 是一個物件, 可以讓開發者填入 audio , video 的屬性.
步驟
- 首先建立專案, 用
VS Code開啟 - 建立
index.html檔案 - 在檔案內任一位置輸入
!符號, 按Tab快速產生模板
HTML
在 <body></body>區塊添加 <video id="videoStream" autoplay playsinline> , 攝影機讀取到的影像必須在 <video> 標籤播放
CSS
這只是一個 Demo, 我用一個 <div id="box"></div>把串流和按鈕包起來, 放在網頁正中間, 方便各種裝置操作.
#box {
position: relative;
}#getVideoBtn {
position: absolute;
left: 0;
bottom: 15px;
}#closeVideoBtn {
position: absolute;
right: 0;
bottom: 15px;
}
Script
讀取 <video> 標籤
const videoStream = document.querySelector('#videoStream')設置 options 物件
const options = {
audio: true,
vidoe: true
}啟動攝影機
使用 async/await 取得影像, 必須用函式表達 :
init()
async function init() {
try {
const stream =
await navigator.mediaDevices.getUserMedia(options)
videoStream.srcObject = stream
} catch {
console.log(`an error occurred`)
}
}使用原生 promise API 取得影像
navigator.mediaDevices.getUserMedia(options)
.then(stream => {
videoStream.srcObject = stream
})
.catch(err => console.log(`an error occurred`))終端機輸入 live-server --port=4501 執行網頁
關閉攝影機
- 把
<video>當參數放進stopStreamVideo()就能關閉攝影機 - tracks 是陣列, 內含聲音和影像兩個軌道, 用迴圈關掉所有軌道
function stopStreamedVideo(videoElem) {
const stream = videoElem.srcObject
const tracks = stream.getTracks() tracks.forEach(track => track.stop())
videoElem.srcObject = null
}
呈現結果
心得
其實在網頁上顯示網路攝影機的影像並不困難, 只要了解工作原理, 看得程式碼, 並且實際操作, 很快就能上手. 下一個章節要談如何拍照.
