關(guān)于html5調(diào)用音視頻等多媒體硬件的API已經(jīng)很成熟，不過(guò)一直找不到機(jī)會(huì)把這些硬件轉(zhuǎn)化為實(shí)際的應(yīng)用場(chǎng)景，不過(guò)近年來(lái)隨著iot和AI的浪潮，我覺(jué)得軟硬結(jié)合的時(shí)機(jī)已經(jīng)成熟。那我們就提前熟悉下怎么操作這些多媒體硬件吧，首先圖像識(shí)別是其中最熱門的應(yīng)用場(chǎng)景，首先實(shí)現(xiàn)調(diào)用攝像頭以及截圖。

demo的效果請(qǐng)看：攝像頭截圖

API兼容性

核心的api就是navigator.MediaDevices，從caniuse可看出，PC端除了IE，已經(jīng)沒(méi)多大問(wèn)題。移動(dòng)端新版本瀏覽器也支持，同時(shí)很多項(xiàng)目都已經(jīng)轉(zhuǎn)向小程序，加上移動(dòng)端一向緊跟最新標(biāo)準(zhǔn)，問(wèn)題也不大。接著就是支持度就更好的video標(biāo)簽。最后還有canvas，支持度就更加樂(lè)觀了。

硬件的獲取

使用到的api：enumerateDevices，它返回的是一個(gè)promise，結(jié)果就是設(shè)備列表。設(shè)備的對(duì)象屬性主要包括 deviceId，groupId，kind。其中deviceId，groupId 是設(shè)備的標(biāo)記，可以通過(guò)這兩個(gè)id調(diào)用所屬的硬件。而kind 顧名思義就是硬件類型了。有了enumerateDevices就可以遍歷硬件，同時(shí)可以實(shí)現(xiàn)選擇對(duì)應(yīng)的硬件并調(diào)用。

//遍歷多媒體硬件
navigator.mediaDevices.enumerateDevices().then(function (devices) {
  console.log(devices);
  /*
  {
    deviceId: ""
    groupId: "8cac2d9a9e5d30a7bfc5a33b9971a3d40a850f7b0f6634b7f41f7dbe1de0a519"
    kind: "audioinput"
    label: ""
  } []
  */
});

調(diào)用攝像頭

接著開始調(diào)用對(duì)應(yīng)的硬件，這里會(huì)使用到另一個(gè)api，getUserMedia，同樣它返回的也是一個(gè)promise，結(jié)果是一個(gè)視頻流。有了視頻流就好辦了，把stream設(shè)置到video的srcObject，馬上一個(gè)視頻監(jiān)控的應(yīng)用就出來(lái)了。

getUserMedia的參數(shù)設(shè)置比較復(fù)雜，具體可參考MDN里面的文檔 getUserMedia，我這里設(shè)置的是對(duì)應(yīng)的攝像頭及視頻的尺寸。loadedmetadata事件在元數(shù)據(jù)（metadata）被加載完成后觸發(fā)視頻播放。

// 調(diào)用攝像頭，并將流導(dǎo)入video
navigator.mediaDevices.getUserMedia({ 
  video: { groupId, width: 800, height: 600 }
}).then(function (stream) {
    video.srcObject = stream;
    mediaTrack = stream.getTracks()[0];
    video.onloadedmetadata = function (e) {
      video.play();
    };
})
.catch(console.log);

視頻的截圖

最后就是截取視頻畫面了，這就用到了canvas的drawImage，這個(gè)api不僅支持把canvas對(duì)象和image對(duì)象渲染進(jìn)畫布，同時(shí)還支持video對(duì)象，這就完美解決了我們的需求，核心代碼如下：

//寫入畫布，并轉(zhuǎn)換為base64
ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
const imgURL = canvas.toDataURL('image/jpeg');

根據(jù)需求我們可以把圖片數(shù)據(jù)轉(zhuǎn)換為流或二進(jìn)制，我這里轉(zhuǎn)換為base64，拿到了數(shù)據(jù)就可以發(fā)揮想象了，tensorflow，機(jī)器學(xué)習(xí)，模式識(shí)別，大把的應(yīng)用場(chǎng)景。

到此這篇關(guān)于html5調(diào)用攝像頭截圖的文章就介紹到這了,更多相關(guān)html5調(diào)用攝像頭內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

最新評(píng)論