HTML5いろいろ

メディアデバイス編

メディアデバイスとは

カメラやマイクのこと
以前はブラウザプラグインやFlash等を使う必要があった
HTML5でAPIがうんぬんかんぬん

とっかかりとなるAPI

Navigator.getUserMedia

プロンプトを表示し、ユーザにカメラやマイクといったメディアデバイスの
使用を許すかどうかを尋ねます。
ユーザが許可した場合、LocalMediaStream オブジェクトを引数に
successCallbackが呼ばれます。

だそうです。

気になる人のための参考リンク

おためし

テスト(カメラが起動されます)

サンプルコード

// マイクを使うかカメラを使うかのパラメータ
var constraints = { audio: false, video: true };

// 今の時点ではベンダ毎のが欲しいようです
navigator.webkitGetUserMedia(constraints, function(localMediaStream) {
    // successCallback
    var video = document.querySelector('#testVideo');
    video.src = window.URL.createObjectURL(localMediaStream);
},function(code) {
    // errorCallback
    alert('Media error');
});

注意

getUserMedia() no longer works on insecure origins. To use this feature, you should consider switching your application to a secure origin, such as HTTPS. See https://goo.gl/rStTGz for more details.

httpsを使用しなければいけない？

次のおためし

テスト(スナップショット)

サンプルコード

var video = document.querySelector('#testVideo');
var canvas = document.querySelector('#testCanvas');
var ctx = canvas.getContext('2d');
ctx.drawImage(video, 0, 0, 480, 360);

さらに

var url = ctx.canvas.toDataURL("image/jpeg");
$.ajax({
	type: "POST",
	url: "/postImage",
	data: {imgBase : url},
	dataType: "json"
});

こんな雰囲気で画像を送信することもできるらしい

なお、サーバサイドには

imgBase=data%3Aimage%2Fjpeg%3Bbase64%2C%2F9j%2F4AAQSkZJRgABAQAAAQABAAD%2F2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUG(以下略

といった形でデータがくるのでデコードしてあげる必要がある

ここまで

終わりに

サンプルアプリ

こんなのもあるらしい