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