服務器項目前端調用攝像頭失敗,瀏覽器調用攝像頭失敗:NotSupportedError Only secure origins are allowed...

通過瀏覽器調用攝像頭失敗: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。

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/534516.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/534516.shtml
英文地址,請注明出處:http://en.pswp.cn/news/534516.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

greenplum 存儲過程_揭秘!Greenplum并行執行引擎到底是如何工作的?

《深入淺出Greenplum內核》系列直播以每月一場的速度持續推出中。在第一場《架構解讀》直播里,我們了解了Greenplum的整體架構、存儲管理、索引、查詢執行、事務與日志等內容。今天(5月22日),第二場《Greenplum內核揭秘之執行引擎》也順利播出啦&#xf…

倩女幽魂服務器維護時間,9月5日在線維護公告

親愛的玩家:《倩女幽魂》手游將于本周四上午進行在線更新,更新期間無需停服,玩家可照常進行游戲。歡迎您屆時體驗本周放出的全新內容,祝全體玩家游戲愉快!本周四在線更新內容如下:系統1.跨服隊伍和團隊功能…

區塊鏈是什么通俗解釋_區塊鏈是什么?如何用一句話通俗解釋區塊鏈

站長之家(Chinaz.com)注:很多人可能跟小編一樣,為了搞懂區塊鏈的概念,看了無數篇文章,但是很多說的都是大概念。雖然每個字都看得懂,但是連在一起就看不懂了。那么,區塊鏈到底是什么東西呢?如何用一句話通…

和push的區別_還沒有理解let 和 const的用法和區別嗎,幾百字讓你立馬搞懂

本文主要講解ES6中變量的相關操作,變量的命名, 講解 var、 let 、 const 三者的區別正文ES6中的 let 和 const 都是用來聲明變量的, 他們與 var 有所區別let 命令我們都知道在for循環中,我們命名的變量 i 一般都只是為了在這個循環…

深度學習分類類別不平衡_「圖像分類」 關于圖像分類中類別不平衡那些事

作者&編輯 | 郭冰洋1 簡介小伙伴們在利用公共數據集動手搭建圖像分類模型時,有沒有注意到這樣一個問題呢——每個數據集不同類別的樣本數目幾乎都是一樣的。這是因為不同類別的樣例數目差異較小,對分類器的性能影響不大,可以在避免其他因…

vue設置多選框默認勾選_Vue實現全選和反選即Vue復選框增加全選功能

導語:Vue中單選下拉框開發起來非常簡單,直接select包裹一個帶v-for的option即可但是當我們想做個帶多選的下拉框該怎么辦呢?最簡方法是什么?比如下面這個圖:如果網上搜的話,搜的是一堆帶children的 ,那種是遍歷tree的思想,和多選下拉框不是一回事,而且寫起來復雜看不懂源碼再…

pyqt5 下拉 多頁 點擊_PyQt5實戰——自定義翻頁控件實現

分頁控件效果圖一、環境要求python解釋器:python3.7.4依賴:PyQt5、sys模塊二、思路分析1、布局:”上一頁“、”下一頁“等button、edit及label控件采用水平布局,使用該布局填充主控件QWidget2、類繼承關系:主界面繼承自…

三種平攤分析的方法分別為_干貨|電工必須學會的三極管電路分析方法

三極管有靜態和動態兩種工作狀態。未加信號時三極管的直流工作狀態稱為靜態,此時各極電流稱為靜態電流,給三極管加入交流信號之后的工作電流稱為動態工作電流,這時三極管是交流工作狀態,即動態。一個完整的三極管電路分析有四步&a…

休眠后gpio狀態_淺談Digi XBee模塊的休眠模式

淺談Digi XBee模塊的休眠模式2020-3-25Digi XBee S2C模塊,如果僅連接電源線可以測得,在待機情況下,大約是10.5mA左右的電流,在休眠時的功耗可以低到0.5uA。可以知道,休眠幾乎不耗電。在Spec上標的待機功耗會比實測只接…

xodo上的筆記不見了_一起來“終極筆記名場面批發市場”進貨嗎

俗話說得好,誰都逃不過“真香定律”,三天不見小筆記,想他。不對,不應該叫小筆記,應該叫粉絲起的名字——“【瓶邪黑花】《終極筆記》(原著風/連載)”下面請接受來自粉絲的瘋狂打call~自上周《終極筆記》播出&#xff0…

python3學習筆記 雨痕_Python 3 學習筆記:數字和布爾

數字基本類型整數在 Python 編程中,整數就是數學意義上的整數,包括正整數、負整數和零,且它的位數是任意的。根據表示方法的不同,可以分為:二進制整數八進制整數十進制整數十六進制整數浮點數浮點數,即數學…

不越獄換壁紙_那些不舍得換的手機插畫壁紙,你還差幾張?

酷愛收藏美作的微課菌可以大展拳腳了!分享3位自己收藏的畫師作品,絕對每一張都讓你舍不得換,手機可以扔,壁紙得先拷貝存起來!開始吧!!多圖預警!NO.1:Atey Ghailan&#x…

程序員績效總結_年終總結怎么寫?

每年這時候,都有必要寫一下一年的個人工作總結。年終總結或工作總結是個挺重要的事。寫好的話,有助于說明自己的工作績效,績效好可以多拿年終獎,還有機會爭取晉升。另外,一年下來的個人生活也需要總結,這一…

線程停止繼續_線程不是你想中斷就能中斷

這是我2021年的第2篇原創文章,原汁原味的技術之路盡在Jerrycodes為什么不強制停止如何用 interrupt 停止線程sleep 期間能否感受到中斷停止線程的方式有幾種總結啟動線程需要調用 Thread 類的 start() 方法,并在 run() 方法中定義需要執行的任務。啟動一…

倒序查10條數據_10 | 怎么給字符串字段加索引?

現在,幾乎所有的系統都支持郵箱登錄,如何在郵箱這樣的字段上建立合理的索引,是我們今天要討論的問題。假設,你現在維護一個支持郵箱登錄的系統,用戶表是這么定義的:mysql> create table SUser( ID bigin…

保留小數點后三位_【Meta分析】Stata制作森林圖時,如何保留三位小數?

系統評價/Meta分析指全面收集所有相關研究并逐個進行嚴格評價和分析,再用定性或定量合成的方法對資料進行處理得出綜合結論的研究方法。在指導學員的過程中發現初學者在學習過程中常常會碰到許多共性問題,本公眾號特此開設專欄解答,希望能夠和…

android自動計步_Android計步模塊實例代碼(類似微信運動)

最近在項目中研究計步模塊,每天0點開始記錄當天的步數,類似微信運動。碰到了不少坑今天有時間整理出來給大家看看。做之前在google、baidu、github上搜了個遍沒找到好的,大多數都是需要在后臺存活,需要后臺Service。對于現在的各大…

python井字棋ai_實現AI下井字棋的alpha-beta剪枝算法(python實現)

代碼參考自中國大學mooc上人工智能與信息社會陳斌老師的算法,我在原來的基礎上增加了玩家輸入的異常捕獲 AlphaBeta剪枝算法是對Minimax方法的優化,能夠極大提高搜索樹的效率,如果對這個算法感興趣的可以去參考相關資料。 當正確理解AlphaBet…

Redis小計(2)

目錄 1.exists命令 2.del命令 3.expire/pexpire命令 4.ttl命令 5.redis對于key過期的刪除策略 1.exists命令 exists X1 X2 X3 X4:返回四個key存在的個數。 2.del命令 del X1 X2:刪除key。 3.expire/pexpire命令 給key設置超時時間。 expire key…

unity 彩帶粒子_iOS動畫開發----粒子系統---彩帶效果

參考博文地址:http://my.oschina.net/u/2340880/blog/485095?fromerrbgjLq4Mw一、粒子發射器iOS中的粒子效果有兩部分組成,一部分為發射器,設置例子發射的宏觀屬性,另一部分是粒子單元,用于設置相應的粒子屬性。粒子發射器是基于…