資訊專欄INFORMATION COLUMN
摘要：之前在微博看到了的文章通過獲取攝像頭影像，了解到了這個，覺得挺有意思的，于是親自試驗了一番，做了倆簡單的小。簡介在的文章中，介紹的是這個，然而我在上查到的是這個已經(jīng)被廢棄了，取而代之的是。
之前在微博看到了@HeeroLaw的文章《通過WebRTC獲取攝像頭影像》，了解到了getUserMedia這個API，覺得挺有意思的，于是親自試驗了一番，做了倆簡單的小DEMO。
getUserMedia簡介在@HeeroLaw的文章中，介紹的是navigator.getUserMedia這個API，然而我在MDN上查到的是這個API已經(jīng)被廢棄了，取而代之的是MediaDevices.getUserMedia。
mediaDevices也是掛在navigator對象下面的，調(diào)用方法如下：
navigator.mediaDevices.getUserMedia(myConstraints).then(function(mediaStream) {
/* use the stream */
}).catch(function(err) {
/* handle the error */
});
其中myConstraints參數(shù)是一個對象，可以指定需要調(diào)用的外部媒體設(shè)備，目前只有攝像頭和麥克風(fēng):
// 同時啟用麥克風(fēng)和攝像頭
var myConstraints = { audio: true, video: true }
更為詳細(xì)的參數(shù)介紹，例如視頻尺寸以及攝像頭和幀率等，請參見MediaDevices.getUserMedia()參數(shù)
需要注意的是，getUserMedia不支持在非安全的頁面內(nèi)調(diào)用，需要https支持，在開發(fā)階段則需要使用localhost域來，分別訪問百度和新浪微博然后打開控制臺輸入下面的代碼進(jìn)行測試:
navigator.mediaDevices.getUserMedia({video:true}).then((stream) => console.log(Object.prototype.toString.call(stream))).catch(error => {console.error(error)})
另外同一域名下首次調(diào)用此API需要征求用戶同意。
攝像頭案例創(chuàng)建一個video標(biāo)簽
調(diào)用getUserMedia將數(shù)據(jù)顯示到video標(biāo)簽
var video = document.querySelector("#video")
var myConstraints = {
video: {
facingMode: "user" // 優(yōu)先調(diào)用前置攝像頭
}
}
navigator.mediaDevices.getUserMedia(myConstraints).then((stream) => {
// createObjectURL是個非常有用的API，諸位可以多研究研究
video.src = window.URL.createObjectURL(stream)
video.play()
}, (error) => {
console.error(error.name || error)
})
查看在線DEMO
麥克風(fēng)案例因為純粹用一個audio標(biāo)簽來播放麥克風(fēng)拾取到的聲音顯得太沒特色了，于是我用到了以前寫的一個音頻可視化庫Vudio.js，代碼如下:
創(chuàng)建一個canvas來顯示音頻波形圖
通過Vudio.js和getUserMedia來顯示麥克風(fēng)拾取到的音頻的波形
var canvas = document.querySelector("#canvas")
navigator.mediaDevices.getUserMedia({
audio: true
}).then((stream) => {
// 調(diào)用Vudio
var vudio = new Vudio(stream, canvas, {
accuracy: 256,
width: 1024,
height: 200,
waveform: {
fadeSide: false,
maxHeight: 200,
verticalAlign: "middle",
horizontalAlign: "center",
color: "#2980b9"
}
})
vudio.dance()
}).catch((error) => {
console.error(error.name || error)
})
查看在線DEMO
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/84866.html
摘要：失敗回調(diào)函數(shù)的參數(shù)，可能的異常有硬件問題用戶拒絕了當(dāng)前的瀏覽器實例的訪問請求或者用戶拒絕了當(dāng)前會話的訪問或者用戶在全局范圍內(nèi)拒絕了所有媒體訪問請求。 getUserMedia API簡介 HTML5的getUserMedia API為用戶提供訪問硬件設(shè)備媒體（攝像頭、視頻、音頻、地理位置等）的接口，基于該接口，開發(fā)者可以在不依賴任何瀏覽器插件的條件下訪問硬件媒體設(shè)備。 getUserM...
摘要：失敗回調(diào)函數(shù)的參數(shù)，可能的異常有硬件問題用戶拒絕了當(dāng)前的瀏覽器實例的訪問請求或者用戶拒絕了當(dāng)前會話的訪問或者用戶在全局范圍內(nèi)拒絕了所有媒體訪問請求。 getUserMedia API簡介 HTML5的getUserMedia API為用戶提供訪問硬件設(shè)備媒體（攝像頭、視頻、音頻、地理位置等）的接口，基于該接口，開發(fā)者可以在不依賴任何瀏覽器插件的條件下訪問硬件媒體設(shè)備。 getUserM...
摘要：實現(xiàn)手機拍照功能，純書寫先上圖為主，再做詳細(xì)講解需要注意的是這里的攝像頭是主要是通過瀏覽器中的一個叫做屬性在代碼運行時打開頁面自動開啟不明白直接上代碼的提供了訪問媒體的能力基于該特性開發(fā)者可以不依賴任何瀏覽器插件下去訪問視頻和音頻等設(shè)備如不 實現(xiàn)手機拍照功能，純JS書寫 First： 先上圖為主，再做詳細(xì)講解： showImg(https://segmentfault.com/img/...
閱讀 1866·2021-11-18 10:02
閱讀 3584·2021-11-16 11:45
閱讀 1882·2021-09-10 10:51
閱讀 2192·2019-08-30 15:43
閱讀 1432·2019-08-30 11:23
閱讀 1542·2019-08-29 11:07
閱讀 1957·2019-08-23 17:05
閱讀 1563·2019-08-23 16:14
