getUserMedia()

Navigator.getUserMediaメソッドはカメラやマイクから音声や動画の画像を取得するためのメソッドです。

ブラウザにより先行実装が行われていて執筆時点(2014年6月)ではGoogleChrome、Opera、Firefoxの最新ブラウザで利用ができます。

ブラウザベンダーよりwebkitGetUserMediaやmozGetUserMediaといったベンダープリフィックスを付けた形で実装されていますのでまずは以下のようにして実装差分を吸収する必要があります。

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

3つの引数を指定することができ、1つめに取得するメディアやメディアの状態を指定できるconstraints(制約などの意味の英語)、2つめにメディア取得に成功した場合に実行されるsuccessCallback、3つめにメディア取得に失敗した場合に実行されるerrorCallbackが指定できます。

navigator.getUserMedia(constraints,successCallback,errorCallback)

constraintsの単純な指定ではvideoやaudioに対してtrue or falseを指定することで取得するメディアを指定できます。

navigator.getUserMedia({
	video:true,
	audio:true
},successCallback,errorCallback)

また、videoではmandatoryとして、maxWidth、minWidth、maxHeight、minHeight、maxFrameRate、minFrameRateが指定できます。ただし、執筆時点の最新バージョンであるGoogle Chrome 35では動作しますがFirefox30でもこの指定は無視されます。また、W3Cが指定する仕様とは異なる実装のため、近い将来に変更される可能性があります。

navigator.getUserMedia({
	video:{
		mandatory: {
			maxWidth: 180,
			maxHeight: 100, 
			maxFrameRate:1
		}
	},
	audio:true
},successCallback,errorCallback)

メディア接続に成功した場合には、successCallbackにてMediaStreamオブジェクトを取得することができます。MediaStreamオブジェクトはBolbデータの為、URL.createObjectURL()を利用してvideo要素やaudio要素のsrc属性に指定することが可能です。

navigator.getUserMedia(constraints,function(mediaStream){
	document.getElementById("myVideo").src = URL.createObjectURL(mediaStream);
},errorCallback)

参考URL

Media Capture and Streams - HTML5 API - W3C

登録日 : 2014年06月17日最終更新日 : 2014年6月20日

JavaScript リファレンス

getUserMedia()

参考URL

同じカテゴリー(Media)のエントリー

検索

スポンサードリンク

バージョン

リファレンス