2015年4月30日木曜日

(4)Spring Boot で Web アプリケーションを開発:WebRTC を使って写真を撮る

WebRTC(Web Real-Time Communications)フレームワークを使うことで、ブラウザにプラグインを追加することなく、ハードウェアのカメラやマイクにアクセスすることができます。現時点で、WebRTC を使うための getUserMedia() API は Chrome 21+、Opera 18+、Firefox 17+ でサポートされていますが、残念ながら Safari や iOS のブラウザでは使用できません。

今回は、WebRTC を使って Spring Boot Web アプリで写真を撮り、画像をデータベースに保存する方法を説明します。「(2)Spring Boot で Web アプリケーションを開発:データベースアクセス」のコードに対して以下の変更を行います。

モデルの変更
User エンティティにユーザーの画像データを Base64 文字列として保存するためのフィールドを追加します。
com.itrane.spbootdemo.model.User.java:

ビューの変更
上で追加した jpegString の画像データをビューに表示できるように userForm.html を次のように変更します。
src/resources/templates/views/userForm.html:

<input hidden="true" id="base" th:field="*{jpegString}" type="text" />
は、カメラから取り込んだ画像をBase64形式で保存するためのものです。
<img th:src="@{'data:image/jpeg;base64,'+*{jpegString}}" 
            width="160" height="120" id="userPhoto" />
は、User の jpegString の内容を画像として表示します。
<div th:with="nestFrag='camera-area',modalFooter='form-modal-footer',modalLg='false'" 
    th:include="fragment/fragModal :: create-modal"></div>
の部分は、ユーザーの写真(id="userPhoto")がクリックされた時にカメラ映像を表示するための Bootstrap モーダルを表すフラグメントを読み込みます。
以下は、camera-area, form-modal-footer, create-modal の各フラグメントの内容です。
src/resources/templates/fragment/fragModal.html:
上記コードで重要な部分は、camera-area フラグメントの video 要素と canvas 要素です。この video 要素にカメラの映像が表示され、クリックした時点のスナップショットが canvas に描画されます。getUserMedia() API を使って、この処理を行う javascript コードを以下に示します。
src/resources/static/js/userForm.js:

navigator.getUserMedia({video: true, audio: false},
  ...
の部分は、getUserMedia() API により、ハードウェアのウェブカメラにアクセスします。アクセスに成功すると
video.src = window.URL.createObjectURL(stream);
により、video 要素のソースとして、カメラを設定します。そして、video 要素をクリックすると takeSnapshot() 関数を実行して、カメラの映像を canvas に描画します。

結果を確認する
アプリケーションを起動して、http://localhost:9000/ にアクセスして、メニューから保守/ユーザー一覧を選択し、1番目のユーザーを編集します。
(画面1)ユーザー編集フォーム:まだユーザーの写真データは登録されていないので、画像は表示されません:

上の画面で写真の表示エリアをクリックすると、次の画面が表示されます。
(画面2)カメラを使っていいか許可を求めるダイアログが表示されます:


上の画面で"許可"ボタンを押します。
(画面3)カメラ映像のモーダルが表示されます。カメラ映像の表示域をクリックすると、スナップショットが得られます:

スナップショットが気に入ったら、"保存"ボタンを押します。
(画面4)スナップショットがユーザー編集フォームに表示されます:

ソースコード: GitHub SpBootDemo_b3_a

0 件のコメント: