getUserMedia APIを利用してウェブカムの情報をvideo要素に表示する

getUserMedia APIを利用してウェブカムの情報をvideo要素に表示する

本エントリーは「to-R JavaScript Advent Calendar 2015」4日目のエントリー、getUserMedia APIを利用してウェブカムの情報をvideo要素に表示する方法について解説を行います、最終的にはWebRTCを利用したビデオチャットの作成まで解説する予定です。

コメント欄に仕様変更の補足を頂きましたのでそちらをご覧ください

getUserMedia APIとは?

getUserMedia APIとはPCに接続されたウェブカムやマイクなどの情報にJavaScriptでアクセスするための機能です。

取得した情報はMediaStreamと呼ばれるデータ形式で、video要素などにはめ込むことでウェブカムの情報をWebサイト内で表示することができます。

どうやって取得?

navigator.getUserMediaというメソッドで簡単に取得できます。navigator.getUserMediaはベンダープリフィックスが付いているブラウザがほとんどなので最初にベンダープリフィックスの有無を吸収します。

次にnavigator.getUserMediaは3個の引数(1個目が取得する情報の設定、2個目が取得成功時の処理、3個目が取得失敗時の処理)を指定できます。

成功時に引数として渡ってくるMediaStreamをURL.createObjectURL()でvideoのsrc属性に指定すれば再生されます。

<video id="myVideo"></video>
<script>
//ベンダープリフィックスの有無を吸収
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
  
//MediaStreamの取得
navigator.getUserMedia({
    video: true,
    audio: true
},
function(mediaStream) {
    //MediaStreamの設定
    var myVideo = document.getElementById("myVideo")
    myVideo.src = URL.createObjectURL(mediaStream);
    myVideo.play();
},
function(error) {
    console.log("error",error);
});
</script>

動作は以下のページで見れます。移動後カメラへのアクセスを許可してもらったら表示されるようになります。
(ChromeとFirefoxのみ)

https://codepen.io/to-r/details/bEGWrv/

次回はnode.jsとExpressの解説を行います。

関連エントリー

5分でわかるWebRTCの仕組み - html5minutes vol.01

スポンサードリンク

«jQuery 3.0時代のコーディングお作法 / unwrap()編 | メイン | node.jsのExpressでローカルサーバーを構築»