MotoJapan's Tech-Memo

技術めも

【Javascript】Webカメラを起動&撮影する 【お家IT#3】

本件の実装の一部
motojapan.hateblo.jp

Webアプリ上でHTML+JSでWebカメラを動作させたい。
私の場合、それほど特殊なWebカメラの使い方をするわけでもないし、こういった類の記事は山のようにあるので自分が参考にした記事をメモ。

カメラ起動

今回はWebRTC(Web Real Time Communications)でカメラを起動する。
キーワードはUserMedia。

参考にした記事①

シンプルなサンプルコード
html5experts.jp
html5experts.jp

参考にした記事②

HTML5 での映像と音声の取得(細かい説明で一番良い)
https://www.html5rocks.com/ja/tutorials/getusermedia/intro/

カメラ撮影

カメラのプレビューを押す or 撮影トリガー(テキストやボタン)を押し、videoタグの画像をcanvasに保存には下記

<!-- HTML -->
<!-- カメラの準備 -->
<video id="camera" width="720px" autoplay></video>
<!-- 記録用canvas -->
<canvas id="canvas"></canvas>
<!-- 記録用img -->
<img id="img">
<!-- 撮影トリガー 1-->
<a id="rec" href="#">TAKE PICTURE</a>
<!-- 撮影トリガー 2-->
<input type="button" value="REC" onclick="take_picture()">
//Javascript
//video element
var video = document.getElementById('camera');

//video element(プレビュー画面)をクリックして撮影
video.addEventListener("click", function() {
    take_picture()
});

//テキストクリック撮影(撮影トリガー 1)
$("#rec").click(function() {
    take_picture()
});

//撮影関数
function take_picture() {
    //videoのstreamをcanvasに書き出す方法
    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');
    //videoの縦幅横幅を取得
    var w = video.offsetWidth;
    var h = video.offsetHeight;    
    canvas.setAttribute("width", w);
    canvas.setAttribute("height", h);
    ctx.drawImage(video, 0, 0, w, h);

    //canvasを更にimgに書き出す方法
    var img = document.getElementById('img');
    img.src = canvas.toDataURL('image/png');
}

とりあえず参考資料を使うと、explorerでは動いた。

下記エラーでchromeだと見事に動かない。

[Deprecation] 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.

chromeセキュアな通信(HTTPS, SSL)じゃないとカメラ起動できないとのこと。
ということで次回は、flaskサーバーをHTTPSします。