關于html5呼叫音視頻等多媒體硬體的API已經很成熟，不過一直找不到機會把這些硬體轉化為實際的應用場景，不過近年來隨著iot和AI的浪潮，我覺得軟硬結合的時機已經成熟，那我們就提前熟悉下怎么操作這些多媒體硬體吧，首先影像識別是其中最熱門的應用場景，首先實作呼叫攝像頭以及截圖，
demo的效果請看：攝像頭截圖
API兼容性
核心的api就是navigator.MediaDevices，從caniuse可看出，PC端除了IE，已經沒多大問題，移動端新版本瀏覽器也支持，同時很多專案都已經轉向小程式，加上移動端一向緊跟最新標準，問題也不大，接著就是支持度就更好的video標簽，最后還有canvas，支持度就更加樂觀了，
硬體的獲取
使用到的api：enumerateDevices，它回傳的是一個promise，結果就是設備串列，設備的物件屬性主要包括 deviceId，groupId，kind，其中deviceId，groupId 是設備的標記，可以通過這兩個id呼叫所屬的硬體，而kind 顧名思義就是硬體型別了，有了enumerateDevices就可以遍歷硬體，同時可以實作選擇對應的硬體并呼叫，
//遍歷多媒體硬體
navigator.mediaDevices.enumerateDevices().then(function (devices) {
console.log(devices);
/*
{
deviceId: ""
groupId: "8cac2d9a9e5d30a7bfc5a33b9971a3d40a850f7b0f6634b7f41f7dbe1de0a519"
kind: "audioinput"
label: ""
} []
*/
});
呼叫攝像頭
接著開始呼叫對應的硬體，這里會使用到另一個api，getUserMedia，同樣它回傳的也是一個promise，結果是一個視頻流，有了視頻流就好辦了，把stream設定到video的srcObject，馬上一個視頻監控的應用就出來了，
getUserMedia的引數設定比較復雜，具體可參考MDN里面的檔案 getUserMedia，我這里設定的是對應的攝像頭及視頻的尺寸，loadedmetadata事件在元資料（metadata）被加載完成后觸發視頻播放，
// 呼叫攝像頭，并將流匯入video
navigator.mediaDevices.getUserMedia({
video: { groupId, width: 800, height: 600 }
}).then(function (stream) {
video.srcObject = stream;
mediaTrack = stream.getTracks()[0];
video.onloadedmetadata = https://www.cnblogs.com/edwardloveyou/archive/2021/12/26/function (e) {
video.play();
};
})
.catch(console.log);
視頻的截圖
最后就是截取視頻畫面了，這就用到了canvas的drawImage，這個api不僅支持把canvas物件和image物件渲染進畫布，同時還支持video物件，這就完美解決了我們的需求，核心代碼如下：
//寫入畫布，并轉換為base64
ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
const imgURL = canvas.toDataURL('image/jpeg');
根據需求我們可以把圖片資料轉換為流或二進制，我這里轉換為base64，拿到了資料就可以發揮想象了，tensorflow，機器學習，模式識別，大把的應用場景，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/393866.html
標籤：其他
上一篇：面向物件編程 原型鏈 繼承