大家好,今天這篇文章主要是通過一段簡單的html與js代碼通過瀏覽器來訪問攝像頭
一:創(chuàng)建一個html文件(用于捕獲音視頻數(shù)據(jù))
源碼如下:
簡單介紹一下視頻標(biāo)簽的含義
1.autoplay:表示當(dāng)頁面加載時可以自動播放視頻
2.playsinline:表示在HTML5頁面內(nèi)播放視頻,而不是使用系統(tǒng)播放器播放視頻
緊接著我們加載了js代碼(通過這段代碼我們將獲得視頻數(shù)據(jù))
源碼如下:
介紹幾個API,首先附上webrtc 文檔的官方介紹,鏈接附在文章后面
1.getUserMedia():請求Camera
? 這個API會返回一個Promise對象,通過這個對象,我們可以獲得MediaStream對象,就可以從音視頻設(shè)備中獲取音視頻數(shù)據(jù)了。該方法有MediaStreamConstraints類型的一個參數(shù),這個參數(shù)的主要作用是指定MediaStream包含哪些類型的媒體軌,并且為媒體軌設(shè)置一些限制
2.gotLocalMediaStream:參數(shù)為MediaStream對象,這個對象存放著上一個API采集到的音視頻軌。作為視頻源賦值給h5的video標(biāo)簽的srcObject屬性
效果圖如下:
參考:https://developer.mozilla.org/zh-CN/docs/Glossary/WebRTC