WebRTC打開本地攝像頭

本文使用WebRTC的功能，打開電腦上的攝像頭，并且把攝像頭預覽到的圖像顯示出來。

純網頁實現，能支持除IE外的多數瀏覽器。手機瀏覽器也可用。

引入依賴

我們需要引入adapter-latest.js

這個WebRTC adapter曾是WebRTC中的一部分，但現在被移出來了。

我們會用到它提供的功能。

html

我們在界面上先擺放一些控件。

video 用來顯示預覽的視頻

兩個button用來控制開啟和關閉

再放幾個顯示信息的地方

js

先設置一下，我們只使用視頻

const constraints = window.constraints = { audio: false, video: true };

在網頁上顯示一些信息，便于調試。

function showErrMsg(msg, error) { const errorElement = document.querySelector('#errorMsg'); errorElement.innerHTML += `

${msg}

`; if (typeof error !== 'undefined') { console.error(error); } } function showMsg(msg) { const msgEle = document.querySelector('#tipMsg'); msgEle.innerHTML += `

-> ${msg}

`; console.log(msg); }

完整代碼在main.js中。css可自行定義。

打開攝像頭

要打開攝像頭，使用MediaDevices.getUserMedia()方法

async function openCamera(e) { try { showMsg('正在打開攝像頭'); const stream = await navigator.mediaDevices.getUserMedia(constraints); showMsg('獲取到了stream'); gotStream(stream); e.target.disabled = true; } catch (err) { onErr(err); }

MediaDevices.getUserMedia()方法在用戶允許后，按照請求，拿到stream。

stream可以包含視頻或音頻。前面的設定里，我們只使用視頻。

如果用戶拒絕了使用攝像頭申請，或者申請的媒體不可用，即表現為被拒絕。

用戶拒絕會報NotAllowedError，找不到符合要求的設備會報NotFoundError DOMException。

方法的文檔MediaDevices.getUserMedia()

顯示視頻

獲取到stream后，讓video顯示視頻

function gotStream(stream) { const videoEle = document.querySelector('video'); const videoTracks = stream.getVideoTracks(); showMsg(`正在使用的設備: ${videoTracks[0].label}`); window.stream = stream; videoEle.srcObject = stream; }

document.querySelector('video')直接獲取html上的video控件。

把stream直接交給videoEle.srcObject。

停止視頻流

要停止視頻，我們可以從video元素入手，拿到stream，然后把里面的track停掉。

function stopVideo(e) { showMsg("停止視頻"); const videoElem = document.querySelector('video'); const stream = videoElem.srcObject; document.querySelector('#showVideo').disabled = false; // 允許開啟 if(stream == null) { return; } const tracks = stream.getTracks(); tracks.forEach(function(track) { track.stop(); }); videoElem.srcObject = null; }

stream.getTracks()方法拿到所有的軌道（track），遍歷一遍全部關掉。

最后，把videoElem.srcObject設置為null，它與前面的stream解除關聯，方便將它釋放。

參考 MediaStreamTrack-stop

小結

示例使用的WebRTC的功能。顯示的是本地攝像頭的視頻，不涉及傳輸。拿到視頻流后交給video來顯示。

getUserMedia是示例中最關鍵的方法。以后的示例都會用到它。

參考

webrtc-adapter github

效果預覽

完整的效果請參考 open-camera

http://an.rustfisher.com/webrtc/web-samples/getUserMedia-open-camera/open-camera.html

web前端

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。