カメラをJSで操作し写真を撮影するTweetHTML5ではPCやスマホのデバイスの機能をJavaScriptから直接利用することができるようになりました。今回はカメラを操作し、デジカメのような要領で静止画を撮影する簡単なサンプルを作ってみたいと思います。カメラの映像が向かって左側に写り続け、良いタイミングで下にある「シャッター」ボタンをクリックすると、右側に撮影した静止画が表示されます。ボタンをクリックするとシャッター音も再生されます。以下のページから実際にサンプルを実行できます。Testhttps://miku3.net/html5/camera/camera.htmlmiku3.net初回のアクセス時にWebブラウザから、このサイトにカメラの操作を許可して良いか聞かれますので「許可」ボタンをクリックしてください。「ブロック」ボタンを押すと設定を変更するのにメニューの少し深いところに潜る必要がありますのでご注意を。大まかな原理navigator.mediaDevices.getUserMedia()が、引数として渡した連想配列の内容に従ってカメラからの映像をストリームとして持ってきてくれます。このストリームを<video>要素にそのまま流し込んでいます。「シャッター」ボタンをクリックすると、押した瞬間の<video>の内容を画像として取り出し、<canvas>にそのまま貼り付けているだけです。サンプルではボタンをクリックすると一瞬止まりますが、その方がデジカメ感があるため演出として付けているだけで、不要であればvideo.pause();からsetTimeout()あたりのコードを削除すれば処理その物は一瞬で終わります。カメラが存在しない場合は?navigator.mediaDevices.getUserMedia()が例外を発生、.catch()で捕捉されます。ここではフロントカメラを指定していますが、もしリアカメラを指定しリアカメラがない機器の場合は同様にエラーが返される可能性があります。オプション特に指定しない単に映像と音に対し利用するかどうかBooleanで指定するだけです。};解像度の最小値と最大値サンプルのようにwidth,heightの値を固定することもできますが、minで最小値、maxで最大値を指定することもできます。};またidealという指定もできます。直訳すると「理想」という意味ですが、idealで指定した解像度になるべく近い映像を返すよう努力してくれます。自宅警備がてらゲームのお仕事や講師などしてご飯を食べてます。ご質問やリクエストなどお気軽に。メールアドレスの入力は任意です。書き込みが反映されるまで時間がかかります。コメントデータの処理方法の詳細はこちらをご覧ください。ブログをメールで購読メールアドレスを記入して購読すれば、更新をメールで受信できます。