ブラウザで3D写真を撮影・表示

3D写真Webアプリcyc.cam

iOS Safariでも次のバージョン11.0からWebでカメラを使えるようになるという話を聞いたので、以前から作りたかった、3D写真を撮影・表示するWebアプリcyc.camを作ってみた。Android Chromeで動作確認しているが、iOS Safari 11.0でも動く（はず）。

https://t.co/E0eK0rhzIJ 3D photography web application using HTML5 technologies. #cyccam https://t.co/Gc13p6cEJg

— Horo Tsuyoshi (@horo) 2017年8月17日

Androidで利用する場合、ServiceWorkerを使ってオフラインでも使えるようになっていたり、Web Share APIを使って他のアプリにシェアできたりするので、Add to homescreenでホームスクリーンから起動した場合、一見すると、ネイティブアプリと区別できないくらいになっていると思う。

画像を連続で複数枚撮影して、スマホの傾き（デスクトップだとマウスの動き）に合わせて切り替えているだけだが、結構それっぽく見えて面白い。

Motion JPEG

3D写真データをシェアする際に、Motion JPEGという複数のJPEGファイルを一つにまとめたデータ形式でサーバーにアップロードしている。

サーバーからダウンロードしたMotion JPEGファイルをブラウザ側で複数のJPEGファイルに分割するために、こちらのstack overflowの記事を参考にした。JPEGファイルのヘッダにファイルサイズの情報は入っていなくて、ファイルサイズを知るためにデータをすべて舐める必要があるのは知らなかった。

3D写真表示ライブラリcycimg

せっかくなので、Web上で簡単に3D写真を表示できるライブラリcycimgを作った。こちらのデモページのようにimgタグのcycimgというアトリビュートにMotion JPEGファイルを指定すると、自動的に3D写真を表示することができる。

<script src="./cycimg_min.js" async></script>
<div>
  <img src='./sample.jpeg' cycimg='./sample.mjpeg'>
</div>

Motion JPEGファイルは複数のJPEGファイルをcatコマンドで結合するだけで作成できるので、もしWebで3D写真を表示することに興味がある方は使っていただければ幸いです。