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でローカルサーバーを構築»

このエントリーのトラックバックURL
コメント

こんにちは。
getUserMediaなのですが、紹介されているものから仕様が変わってます。

まずAPIが navigator.mediaDevices.getUserMedia() へと移動し、さらにPromiseベースになりました。ですので成功時・失敗時のコールバックはそれぞれ、新gUM()の返すPromiseオブジェクトに対し、.then(), .catch() で処理するようになっています。constraintsの設定はそのままで、第一引数に取ります。

新APIのほうはすでにChrome, Edge, Firefoxで実装済みなので、そちらを紹介するのはいかがでしょうか(お手間かけてすみません)。

また、仕様というより実装なのですが、Chromeの実装が47から変更になり、HTTPS以下でなければエラーを出すようになりました。なので現行版のChromeでは、Codepenのリンクをクリックしても動いていません。

というわけでフォークさせてもらい、新しいAPIを使い、またHTTPSに誘導するpenをつくってみました。ご参考までに。
http://codepen.io/myakura/pen/BjoMLN

投稿者:myakura | 2015年12月14日 22:00

CodePenのデモですがchromeの場合、以下のようにhttpsでないと動作しなかったりしませんか?
https://codepen.io/to-r/details/bEGWrv/

投稿者:cyokodog | 2015年12月15日 23:40
コメントを投稿