車載動画とGoogleMapを連動させる


突然だが、車載動画は面白い。ドライブ時に録画したものを後で見るのも面白いし、酷道ラリーシリーズ等、他の人が撮影した動画を見るのも楽しい。

ただ動画を見るだけでも楽しいのだが、GPSロガーのデータを使って動画とGoogle Mapが連動するような仕組みを作ってみた。

まず最初に、実際に動くやつ

これです。スマホには対応してません。

スクリーンショット 2014-08-10 15.19.40

実は2012年頃にプロトタイプを作っていたので、今回はGPXファイルのアップロード部分を作っただけなのだけど。

動画の撮影と編集

gopro-focus自分の場合はGoProを使っているが、後で動画編集ソフトで読み込めるものであれば、どうやって撮影してもOK。

等速だと見るのにやたら時間がかかってしまうので、4倍〜20倍速に圧縮して、さらに他の車のプライバシー等のためにナンバープレートの処理をして、YouTubeにアップロードする。

GPSロガー

GPSロガー付きのドライブレコーダーもあるらしいけど、GoProにはついていないので、GPS TracksというiPhoneアプリを使ってロギングした。GPXフォーマットでログを保存、PC/Macに転送できるアプリであれば、他のアプリでもOKだけど、このアプリはDropbox連携ができたり、高度のグラフが見れたり、なかなかよい感じ。

IMG_3315

動画の再生とGoogle Mapを連動させる

YouTube動画とGoogle Mapをページ内に並べて、1秒ごとに動画の再生時刻とGPXデータを照合して、Google Map上の現在位置を更新する。ページに埋め込んだ動画の再生時刻はJavaScriptで参照できる。簡単。

動画ファイル内に地図をレンダリングしてしまう方が簡単でスムーズなのだけど、やはり地図は状況に応じて拡大縮小しながら見たいので、Google Mapを並べる方法をとった。

GPXデータはXMLなので、そのまま使うのはパースのコストが大きいのと、動画の再生速度変更、再生開始位置の微調整をしなければいけないので、独自形式に変換してDB内に保持させるようにした。

結論と今後

まだスムーズではない部分があるにせよ、割と手軽に動画と地図を連携できるようになったので、ひとまず満足。

再生開始位置の調整がUI的にわかりにくかったり、信号停止時などに動画側で「スキップ」した場合に対応できないので、今後そこらへんに対応しやすいUIを作れれば、他の人にも使ってもらえるようになるだろうか。

あとは、今後カメラ2台使って撮影すれば3D表示だったり、3台以上で再生時に視界を回転させたりできるようになって面白そうなので、お金を貯めてもう一台GoProを買おうかな。


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です