摘要:失敗回調(diào)函數(shù)的參數(shù),可能的異常有硬件問(wèn)題用戶拒絕了當(dāng)前的瀏覽器實(shí)例的訪問(wèn)請(qǐng)求或者用戶拒絕了當(dāng)前會(huì)話的訪問(wèn)或者用戶在全局范圍內(nèi)拒絕了所有媒體訪問(wèn)請(qǐng)求。
getUserMedia API簡(jiǎn)介
HTML5的getUserMedia API為用戶提供訪問(wèn)硬件設(shè)備媒體(攝像頭、視頻、音頻、地理位置等)的接口,基于該接口,開(kāi)發(fā)者可以在不依賴任何瀏覽器插件的條件下訪問(wèn)硬件媒體設(shè)備。
getUserMedia API最初是navigator.getUserMedia,目前已被最新Web標(biāo)準(zhǔn)廢除,變更為navigator.mediaDevices.getUserMedia(),但瀏覽器支持情況不如舊版API普及。
MediaDevices.getUserMedia()方法提示用戶允許使用一個(gè)視頻和/或一個(gè)音頻輸入設(shè)備,例如相機(jī)或屏幕共享和/或麥克風(fēng)。如果用戶給予許可,就返回一個(gè)Promise對(duì)象,MediaStream對(duì)象作為此Promise對(duì)象的Resolved[成功]狀態(tài)的回調(diào)函數(shù)參數(shù),相應(yīng)的,如果用戶拒絕了許可,或者沒(méi)有媒體可用的情況下PermissionDeniedError或者NotFoundError作為此Promise的Rejected[失?。轄顟B(tài)的回調(diào)函數(shù)參數(shù)。注意,由于用戶不會(huì)被要求必須作出允許或者拒絕的選擇,所以返回的Promise對(duì)象可能既不會(huì)觸發(fā)resolve也不會(huì)觸發(fā) reject。
navigator.mediaDevices.getUserMedia(constraints) .then(function(mediaStream) { ... }) .catch(function(error) { ... })參數(shù)
containers:指定請(qǐng)求的媒體類型,主要包含video和audio,必須至少一個(gè)類型或者兩個(gè)同時(shí)可以被指定。如果瀏覽器無(wú)法找到指定的媒體類型或者無(wú)法滿足相對(duì)應(yīng)的參數(shù)要求,那么返回的Promise對(duì)象就會(huì)處于rejected[失敗]狀態(tài),NotFoundError作為rejected[失敗]回調(diào)的參數(shù)。
【例】同時(shí)請(qǐng)求不帶任何參數(shù)的音頻和視頻:
{ audio: true, video: true }
【例】使用1280x720的攝像頭分辨率:
{ audio: true, video: { width: 1280, height: 720 } }
【例】要求獲取最低為1280x720的分辨率:
{ audio: true, video: { width: { min: 1024, ideal: 1280, max: 1920 }, height: { min: 776, ideal: 720, max: 1080 } } }
當(dāng)請(qǐng)求包含一個(gè)ideal(應(yīng)用最理想的)值時(shí),這個(gè)值有著更高的權(quán)重,意味著瀏覽器會(huì)先嘗試找到最接近指定的理想值的設(shè)定或者攝像頭(如果設(shè)備擁有不止一個(gè)攝像頭)。
【例】?jī)?yōu)先使用前置攝像頭(如果有的話):
{ audio: true, video: { facingMode: "user" } }
【例】強(qiáng)制使用后置攝像頭:
{ audio: true, video: { facingMode: { exact: "environment" } } }
成功回調(diào)函數(shù)seccessCallback的參數(shù)stream:stream是MediaStream的對(duì)象,表示媒體內(nèi)容的數(shù)據(jù)流,可以通過(guò)URL.createObjectURL轉(zhuǎn)換后設(shè)置為Video或Audio元素的src屬性來(lái)使用,部分較新的瀏覽器也可以直接設(shè)置為srcObject屬性來(lái)使用。
失敗回調(diào)函數(shù)errorCallback的參數(shù)error,可能的異常有:
AbortError:硬件問(wèn)題
NotAllowedError:用戶拒絕了當(dāng)前的瀏覽器實(shí)例的訪問(wèn)請(qǐng)求;或者用戶拒絕了當(dāng)前會(huì)話的訪問(wèn);或者用戶在全局范圍內(nèi)拒絕了所有媒體訪問(wèn)請(qǐng)求。
NotFoundError:找不到滿足請(qǐng)求參數(shù)的媒體類型。
NotReadableError:操作系統(tǒng)上某個(gè)硬件、瀏覽器或者網(wǎng)頁(yè)層面發(fā)生的錯(cuò)誤導(dǎo)致設(shè)備無(wú)法被訪問(wèn)。
OverConstrainedError:指定的要求無(wú)法被設(shè)備滿足。
SecurityError:安全錯(cuò)誤,在getUserMedia() 被調(diào)用的 Document
上面,使用設(shè)備媒體被禁止。這個(gè)機(jī)制是否開(kāi)啟或者關(guān)閉取決于單個(gè)用戶的偏好設(shè)置。
TypeError:類型錯(cuò)誤,constraints對(duì)象未設(shè)置[空],或者都被設(shè)置為false。
示例:HTML 5調(diào)用媒體設(shè)備攝像頭這個(gè)例子中,請(qǐng)求訪問(wèn)用戶硬件設(shè)備的攝像頭,并把視頻流通過(guò)Video元素顯示出來(lái)。網(wǎng)頁(yè)中提供一個(gè)"拍照"的按鈕,通過(guò)Canvas將Video的畫面截取并繪制,核心代碼如下:
HTML
JavaScript
//訪問(wèn)用戶媒體設(shè)備的兼容方法 function getUserMedia(constrains,success,error){ if(navigator.mediaDevices.getUserMedia){ //最新標(biāo)準(zhǔn)API navigator.mediaDevices.getUserMedia(constrains).then(success).catch(error); } else if (navigator.webkitGetUserMedia){ //webkit內(nèi)核瀏覽器 navigator.webkitGetUserMedia(constrains).then(success).catch(error); } else if (navigator.mozGetUserMedia){ //Firefox瀏覽器 navagator.mozGetUserMedia(constrains).then(success).catch(error); } else if (navigator.getUserMedia){ //舊版API navigator.getUserMedia(constrains).then(success).catch(error); } } var video = document.getElementById("video"); var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d"); //成功的回調(diào)函數(shù) function success(stream){ //兼容webkit內(nèi)核瀏覽器 var CompatibleURL = window.URL || window.webkitURL; //將視頻流設(shè)置為video元素的源 video.src = CompatibleURL.createObjectURL(stream); //播放視頻 video.play(); } //異常的回調(diào)函數(shù) function error(error){ console.log("訪問(wèn)用戶媒體設(shè)備失敗:",error.name,error.message); } if (navigator.mediaDevices.getUserMedia || navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia){ //調(diào)用用戶媒體設(shè)備,訪問(wèn)攝像頭 getUserMedia({ video:{width:480,height:320} },success,error); } else { alert("你的瀏覽器不支持訪問(wèn)用戶媒體設(shè)備"); } //注冊(cè)拍照按鈕的單擊事件 document.getElementById("capture").addEventListener("click",function(){ //繪制畫面 context.drawImage(video,0,0,480,320); });進(jìn)階
對(duì)本示例進(jìn)行功能加強(qiáng),比如使用CSS 3 的濾鏡實(shí)現(xiàn)模糊、黑白等效果。
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/51449.html
摘要:失敗回調(diào)函數(shù)的參數(shù),可能的異常有硬件問(wèn)題用戶拒絕了當(dāng)前的瀏覽器實(shí)例的訪問(wèn)請(qǐng)求或者用戶拒絕了當(dāng)前會(huì)話的訪問(wèn)或者用戶在全局范圍內(nèi)拒絕了所有媒體訪問(wèn)請(qǐng)求。 getUserMedia API簡(jiǎn)介 HTML5的getUserMedia API為用戶提供訪問(wèn)硬件設(shè)備媒體(攝像頭、視頻、音頻、地理位置等)的接口,基于該接口,開(kāi)發(fā)者可以在不依賴任何瀏覽器插件的條件下訪問(wèn)硬件媒體設(shè)備。 getUserM...
閱讀 2964·2021-10-15 09:41
閱讀 1620·2021-09-22 15:56
閱讀 2104·2021-08-10 09:43
閱讀 3273·2019-08-30 13:56
閱讀 1779·2019-08-30 12:47
閱讀 648·2019-08-30 11:17
閱讀 2770·2019-08-30 11:09
閱讀 2193·2019-08-29 16:19