本文使用WebRTC的功能澎媒，打開電腦上的攝像頭琅绅，并且把攝像頭預(yù)覽到的圖像顯示出來樊诺。
純網(wǎng)頁實(shí)現(xiàn)仗考，能支持除IE外的多數(shù)瀏覽器。手機(jī)瀏覽器也可用词爬。
引入依賴
我們需要引入adapter-latest.js
<script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
這個(gè)WebRTC adapter曾是WebRTC中的一部分秃嗜，但現(xiàn)在被移出來了。
我們會(huì)用到它提供的功能顿膨。
html
我們在界面上先擺放一些控件锅锨。
<div id="container">
<video id="video-local" autoplay playsinline></video>
<button id="showVideo">打開攝像頭</button>
<button id="stopVideo">關(guān)閉攝像頭</button>
<p>顯示攝像頭預(yù)覽的內(nèi)容，網(wǎng)頁上由元素video來呈現(xiàn)恋沃。</p>
<p>點(diǎn)擊打開攝像頭按鈕后必搞，瀏覽器會(huì)詢問是否允許，請點(diǎn)擊“允許”囊咏。</p>
<div id="errorMsg"></div>
<div id="tipMsg"></div>
</div>
- video 用來顯示預(yù)覽的視頻
- 兩個(gè)button用來控制開啟和關(guān)閉
- 再放幾個(gè)顯示信息的地方
js
先設(shè)置一下恕洲，我們只使用視頻
const constraints = window.constraints = {
audio: false,
video: true
};
在網(wǎng)頁上顯示一些信息，便于調(diào)試梅割。
function showErrMsg(msg, error) {
const errorElement = document.querySelector('#errorMsg');
errorElement.innerHTML += `<p>${msg}</p>`;
if (typeof error !== 'undefined') {
console.error(error);
}
}
function showMsg(msg) {
const msgEle = document.querySelector('#tipMsg');
msgEle.innerHTML += `<p>-> ${msg}</p>`;
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可以包含視頻或音頻刃榨。前面的設(shè)定里弹砚，我們只使用視頻。
如果用戶拒絕了使用攝像頭申請喇澡，或者申請的媒體不可用迅栅，即表現(xiàn)為被拒絕。
用戶拒絕會(huì)報(bào)NotAllowedError晴玖，找不到符合要求的設(shè)備會(huì)報(bào)NotFoundError DOMException读存。
方法的文檔MediaDevices.getUserMedia()
顯示視頻
獲取到stream后，讓video顯示視頻
function gotStream(stream) {
const videoEle = document.querySelector('video');
const videoTracks = stream.getVideoTracks();
showMsg(`正在使用的設(shè)備: ${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）蹂安，遍歷一遍全部關(guān)掉椭迎。
最后，把videoElem.srcObject設(shè)置為null田盈，它與前面的stream解除關(guān)聯(lián)畜号，方便將它釋放。
小結(jié)
示例使用的WebRTC的功能允瞧。顯示的是本地?cái)z像頭的視頻简软，不涉及傳輸。拿到視頻流后交給video來顯示述暂。
getUserMedia是示例中最關(guān)鍵的方法痹升。以后的示例都會(huì)用到它。
參考
效果預(yù)覽
完整的效果請參考
open-camera
