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