webrtc 調用攝像頭並實時在瀏覽器中顯示圖像


WebRTC,名稱源自網頁實時通信(Web Real-Time Communication)的縮寫,是一個支持網頁瀏覽器進行實時語音對話或視頻對話的技術,是谷歌2010年以6820萬美元收購Global IP Solutions公司而獲得的一項技術。2011年5月開放了工程的源代碼,在行業內得到了廣泛的支持和應用,成為下一代視頻通話的標准。有了webrtc操作攝像頭就簡單多了,不用引入任何js包,幾行代碼就可以實現了。

1.創建一個html文件代碼如下:

 

 

核心js代碼:

      //web rtc 調用攝像頭(兼容性寫法(谷歌、火狐、ie))

    navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;

      //調用成功會回調返回一個stream流 video:true 表示采集視頻,audio:true 表示采集聲音,反之就都不采集。

    navigator.getUserMedia({video:true,audio:false},function(stream){

       //將采集到的視頻信息顯示在video標簽中

    video.srcObject = stream; 

    },console.log) 

2.運行這個html文件你就可以看到效果了。

3.總結: 有的東西看是簡單,長時間不用就忘了,有的東西想起來很復雜,其實做起來就覺得沒那么難了,我之前也覺得用js調用攝像頭很復雜,有了這個東西,幾行代碼就搞定了。

參考: https://www.jianshu.com/p/1ddfa72de165


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM