通過瀏覽器調用攝像頭失敗:NotSupportedError Only secure origins are allowed
錯誤報告
NotSupportedError Only secure origins are allowed (see: https://goo.gl/Y0ZkNV).
[Deprecation] getUserMedia() no longer works on insecure origins. To use this feature, you should consider switching your
application to a secure origin, such as HTTPS. See https://goo.gl/rStTGz for more details.
錯誤原因
新發布的Webkit內核的瀏覽器(chrome谷歌瀏覽器、QQ瀏覽器)控制臺會有這個提示,基于安全隱私問題,現在Webkit內核的瀏覽器共享視頻、語音、經緯度坐標等必須通過https形式訪問!也就是說須將http訪問形式改造成https,如果項目/產品是基于通過Webkit內核的瀏覽器訪問,可以參考 久久經驗網 此前發布的經驗分享:
經測試,IE瀏覽器、Firefox火狐瀏覽器均能正常調用。下面分享調用攝像頭的程序測試代碼(參考自segmentfault,作者wangsidney)。
程序代碼
HTML代碼
當前瀏覽器不支持video
拍照
Javascript代碼
//訪問用戶媒體設備的兼容方法
function getUserMedia(constrains,success,error){
if(navigator.mediaDevices.getUserMedia){
//最新標準API
navigator.mediaDevices.getUserMedia(constrains).then(success).catch(error);
} else if (navigator.webkitGetUserMedia){
//webkit內核瀏覽器
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");
//成功的回調函數
function success(stream){
//兼容webkit內核瀏覽器
var CompatibleURL = window.URL || window.webkitURL;
//將視頻流設置為video元素的源
video.src = CompatibleURL.createObjectURL(stream);
//播放視頻
video.play();
}
//異常的回調函數
function error(error){
console.log("訪問用戶媒體設備失敗:",error.name,error.message);//訪問用戶媒體設備失敗: NotFoundError The object can not be found here.
}
if (navigator.mediaDevices.getUserMedia || navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia){
//調用用戶媒體設備,訪問攝像頭
getUserMedia(
{
video:{width:480,height:320}
},
success,
error
);
} else {
alert("你的瀏覽器不支持訪問用戶媒體設備");
}
//注冊拍照按鈕的單擊事件
document.getElementById("capture").addEventListener("click",function(){
//繪制畫面
context.drawImage(video,0,0,480,320);
});
失敗回調函數errorCallback的參數error,可能的異常有:
AbortError:硬件問題
NotAllowedError:用戶拒絕了當前的瀏覽器實例的訪問請求;或者用戶拒絕了當前會話的訪問;或者用戶在全局范圍內拒絕了所有媒體訪問請求。
NotFoundError:找不到滿足請求參數的媒體類型。
NotReadableError:操作系統上某個硬件、瀏覽器或者網頁層面發生的錯誤導致設備無法被訪問。
OverConstrainedError:指定的要求無法被設備滿足。
SecurityError:安全錯誤,在getUserMedia() 被調用的 Document上面,使用設備媒體被禁止。這個機制是否開啟或者關閉取決于單個用戶的偏好設置。
TypeError:類型錯誤,constraints對象未設置[空],或者都被設置為false。