使用Navigator.getUserMedia
可以做到在主流瀏覽器中獲取用戶攝像頭數據,麥克風數據,我研究了一下,發現在ios、安卓微信瀏覽器中都不行。而在安卓6.0.1自帶瀏覽器中可以,iOS Safari不支持,mac Safari不支持,兼容性還是太差,所以還是棄用了。但是我研究的結果還是保存一下,萬一以後微信瀏覽器支持了呢?
以下是我研究的結果:
關於這個api的參數說明: MDN:https://developer.mozilla.org/en-US/docs/Web/API/Navigator/getUserMedia W3C:http://w3c.github.io/mediacapture-main/#widl-NavigatorUserMedia-getUserMedia-void-MediaStreamConstraints-constraints-NavigatorUserMediaSuccessCallback-successCallback-NavigatorUserMediaErrorCallback-errorCallback
方法需要3個參數:
constraints
,指明需要獲取什麼類型的數據successCallback
, 數據獲取成功後回調的方法(只會被調用一次,但是如果把回調時的視頻流放到video標籤中,視頻會實時更新)errorCallback
,接口調用失敗後回調的方法
我主要想知道第一個參數裏的情況,因爲很多國內的教程裏都只是這樣:{video : true}
,我還想知道如果要錄音頻、使用後置攝像頭該怎麼辦。這個問題在https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia#Parameters 能找到答案,我複製一下。
constraints
- 如果單純指定需要什麼類型的媒體,只要這樣就行
{ audio: true, video: true }
,這個表示需要視頻和音頻。應該也只支持這兩種了,我看了MDN和W3c,都沒發現第三種 - 以下把video參數寫成object格式的,在chrome中都會報錯
Uncaught TypeError: Failed to execute 'webkitGetUserMedia' on 'Navigator': Malformed constraints object.
,然而這些用法真的是MDN和W3C標準,不知道chrome爲什麼不支持。然而在chrome中有特殊的使用後置攝像頭的方法,參考:http://blog.csdn.net/journey191/article/details/40744015,這個參考裏的方法我測過,安卓6.0.1的確可以用後置攝像頭。 - 如果要指定視頻的寬高可以這樣 { audio: true, video: { width: 1280, height: 720 } }
- 還可以用
min
,max
,或者ideal (即如果支持,就用這個)
{ audio: true, video: { width: { min: 1024, ideal: 1280, max: 1920 }, height: { min: 776, ideal: 720, max: 1080 } } } - 如果要指定前後攝像頭 { audio: true, video: { facingMode: "user" } }//如果有前置攝像頭的話使用前置攝像頭(我身邊的機器都有前置,所以沒測試沒有的情況) { audio: true, video: { facingMode: { exact: "environment" } } }//如果有後置攝像頭的話使用後置