GPSと動画を組み合わせたサンプル - PHP,MySQL,Flex,JSな日々＋イラストとか

Android の myTracks で現在位置と時間を記録したものとAndroidの動画撮影機能とを組み合わせてみました。

こんな感じ
http://moeten.info/flex/20101229_mapMovieTest/bin-release/Main.html
AndroidのmyTracksはいろいろな形式で書き出しが可能ですが、今回は比較的扱いやすそうなGPX形式でトライしてみました。
ドライブレコーダーとして遊びたいですね〜。あとは船とか旅行とかで。
ソースはこちら

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
                xmlns:controls="com.google.maps.controls.*"
                minWidth="955" minHeight="600" layout="absolute">
    <mx:Script>
        <![CDATA[
            import com.google.maps.LatLng;
            import com.google.maps.MapMouseEvent;
            import com.google.maps.controls.ZoomControl;
            import com.google.maps.overlays.Marker;
            import com.google.maps.overlays.Polyline;
            import com.google.maps.overlays.PolylineOptions;
            import com.google.maps.styles.StrokeStyle;
            import mx.collections.ArrayCollection;
            import mx.rpc.events.ResultEvent;
            private function onMapReady(e:Event ):void{
                var zoom:ZoomControl = new ZoomControl();
                map.addControl( zoom );
                hts.send();
            }
            private var time_arr:Array = new Array();
            protected function hts_resultHandler(event:ResultEvent):void
            {
                namespace ns = "http://www.topografix.com/GPX/1/0";
                use namespace ns;
                var cnt:int = 0;
                var center:LatLng;
                var old_latlng:LatLng;
                for each (var item:XML in hts.lastResult.ns::["trk"]["trkseg"]["trkpt"] ) {
                    if( cnt == 0  ){
                        center = new LatLng( item.attribute("lat" ) ,  item.attribute("lon" ) );
                    }
                    var ymd:String = (String(item.time).split("T"))[0];
                    var hms:String = (String(item.time).split("T"))[1].replace("Z" , "" );
                    var ymd_arr:Array = ymd.split("-");
                    var hms_arr:Array = hms.split(":");
                    var date:Date = new Date( int( ymd_arr[0] ) , int( ymd_arr[1] ) -1 , int( ymd_arr[2] ) , int( hms_arr[0] ) , int( hms_arr[1] ) , int( hms_arr[2] ) );
                    time_arr[cnt] = date.time;
                    var latlng:LatLng = new LatLng( item.attribute("lat" ) ,  item.attribute("lon" ) );
                    setMarker( cnt , latlng  );
                    if( cnt != 0 ){
                        var polyline:Polyline = new Polyline( [ old_latlng, latlng ],
                            new PolylineOptions({
                                strokeStyle: new StrokeStyle({
                                    color: 0xFF0000,
                                    thickness: 4,
                                    alpha: 0.7
                                })
                            })
                        );
                        map.addOverlay( polyline );
                    }
                    old_latlng = new LatLng( item.attribute("lat" ) ,  item.attribute("lon" ) );
                    cnt ++;
                }
                map.setCenter( center , 18 );
            }
            //アイコンの作成
            private function setMarker( myid:int , latlng:LatLng ):void{
                var marker:Marker = new Marker( latlng );
                marker.addEventListener(MapMouseEvent.CLICK , function():void{
                    vd.playheadTime = vd.totalTime * ( time_arr[myid] -  time_arr[0] )/ ( time_arr[ time_arr.length-1 ] - time_arr[0] ) ;
                    vd.play();
                });
                map.addOverlay(marker);
            }
        ]]>
    </mx:Script>
    <mx:HTTPService id="hts" resultFormat="e4x" url="assets/gps.gpx" result="hts_resultHandler(event)"/>
    <maps:Map xmlns:maps="com.google.maps.*" id="map" mapevent_mapready="onMapReady(event)" width="100%" height="100%"
              key="ABQIAAAAqo7EY3mBNBkyzrKst6uulRTmk3SD0QkswU8g_oWSt8kZIhRxRxRqF4ut6YiIpGulomMoyJuSg6kvJQ" sensor="false"/>
    <mx:VideoDisplay id="vd" x="10" y="10" width="218" height="116" source="assets/movie_6.f4v"/>
    <mx:TextArea id="myLog" x="10" y="138" text="{vd.playheadTime}"/>
</mx:Application>

参考になるページ

GPX - Wikipedia: GPX形式について
e4x の落とし穴 | エントリー | _level0.KAYAC | flash ActionScript blog: namespace付きの場合の処理。以外とめんどいので知っておきたい。
QName クラスの続き - akihiro kamijo: namespaceの扱いや要素へのアクセス。
Google Maps API for Flash オーバーレイ - Google Maps API for Flash - Google Code: Google Map Flash版
Google Maps API for Flash イベント - Google Maps API for Flash - Google Code: Google Map にラインを引く
Date - ActionScript 3.0 コンポーネントリファレンスガイド: 日付クラス。monthだけマイナス１になるのに注意する。
VideoDisplay覚え書き (godagoda.net): ビデオを指定した時間から再生する。