D'FusionのWebページのスナップショットを撮る

D'Fusion @Home Webで作成したWeb用のコンテンツのスナップショット、つまりスクリーンキャプチャを撮ってみます。

まあ、それだけのことです....。

ただ、スナップショットの画像をブラウザで見ようとすると、ちょっとした工夫が必要です。

D'FusionのLuaコードを使って撮った画像はＰＣのローカルに保存されます。これをそのまま見ようとしてもセキュリティ上の理由で直には見られません。

HTML5のFile APIを使っても同じ理由で、一度閲覧用のダイアログを開くなど、どこかで人間系の介在が必要になります。

手間です。

で、ここではLuaのファイルアップロードのコードで、画像をサーバーに上げておいて、これを見るようにしました。

作り方

コンテンツは以下で使ったものを流用。

TOTAL IMMERSION のD'Fusionで作ったARコンテンツをWebで公開してみる

手順はこうです。

１：トラキングに成功したら、スナップショットのボタンをクリック。
２：Lua側でスナップショットを撮る
３：画像が出来たら、サーバーに上げる
４：サーバーに上がったら、imgタグのソースに画像のURLを指定する

この手順を実現する上で使用するコードはSATCHのサンプルで以下の2つを使います。

testSnapshot
testUploadFile

【D'Fusion側でSnaoShot】

[変数宣言]

	local targetDirectory = ""
	if (getOSType() == "android") then 
	    targetDirectory = "/sdcard"
	else
	    targetDirectory = getUserAppDataDirectory()   
	end

	local targetJpg = ""
	local mainView = RenderTarget(scene:getMainView())
	local snapname = "";




	[実行関数]
	targetJpg = targetDirectory .. "DFusion_" .. snapname .. ".jpg"                 
	mainView:dump(targetJpg);

【D'Fusion側でFileUpload】

ファイルをアップロードするためにはサーバーが必要です。

testUploadFileに書かれているように、サーバー側に以下のservaredataをアップロードしておきます。

Scenario.serverdata.orig/testUploadFile内の、uploadsフォルダーとuploader.phpファイルを使います。

uploader.phpでは、１つ修正しておく項目があります。

修正なしで使うと、アップされた画像データには拡張子がつきません。

ここではJPGファイルでスナップショットを撮るとして以下の行を修正して拡張子を付けておきます。

$target_path = $target_path . basename( $_FILES['uploadedfile']['name']);
↓
$target_path = $target_path . basename( $_FILES['uploadedfile']['name']) . ".jpg";

アップロードされたファイルはuploadsフォルダーに格納されます。

[変数宣言]

local URI = "http://example.com"
local new_url = ""



[実行関数]

local function file_upload(filename)
    local targetDistant = URI .. "/uploader.php"
    
    local id = webInterface:startUploadFileAsMultipartFormData( targetDistant, filename, "uploadedfile", "application/octet-stream" )
    
    if ( id > 0 ) then
        local finish = false
        repeat
            local status = webInterface:getPostDataStatus( id )
            if status==TI_DLFINISHED then 
                msg = "Upload finsihed successfully"
                
                finish = true
            elseif status==TI_DLFAILED or status==TI_CANCELED then
                msg = "Error: Upload failed."
                
                finish = true
                failed = true
            else
                coroutine.yield()
            end
        until finish
        new_url = webInterface:releasePostData(id)
        msg = "Newurl: " .. new_url
    else
        msg = "Error:Failed to start upload."
        
        failed = true
    end
    
    webInterface:execJScript("uploadinfo",msg)
end

TOP

サンプル

以下のようなサンプルサイトを作ってみました。

Webカメラを準備（基本的にはたいてのWebカメラでＯＫ）。

D'FusionのWebページのスナップショットを撮って確認 (Opera・Safariは未対応)

初回アクセス時にプラグインをインストールするようメッセージダイアログが出ます。

常識的なことしか書いてませんので、適当にインストールしてください。

プラグインがあればロードが開始されます。

ロードが完了してカメラ画面になったら、トラッキング画像を別Windowで開きます。

Webカメラをトラッキング画像に向けます。

バラが表示され、informationパネルが更新されます。

太い青枠がカメラ画面です。

SnapShotはトラッキングが成功した場合、有効です。

SnapShotのボタンをクリック。

ローカルに画像が保存され、同時にサーバーへ転送されます。

Windowsの場合

C:\Documents and Settings\＜ユーザー名＞\Application Data

に保存されます。

スナップショットの画像表示に変わります（太い赤枠の部分）。

画面下の「Camera Image」や「SnapShot Image」と書かれたボタンをクリックすると入れ替わります。

TOP