ブラウザから遠隔操作で気になるアイツを射撃！

Flex Red5

ブラウザから遠隔操作で気になるアイツを射撃！
マウス操作でカメラの移動ができます。あと射撃も。

＃しかもこのミサイルが楽天だと５００円！
実際の動作ムービーはこちら
操作画面

動作画面

簡単な説明

概念図

キャノン砲を動かすプログラム

こちらのプログラムでコマンドラインからキャノン砲を操作することができます。

cannon.exe 0

引数リスト

0 ↑
1 →
2 ↓
3 ←
4 ファイアー

あとはこのプログラムをPHPを使用して呼び出してあげればＯＫ。
コマンド渡しは「http://yourserver/index.php?command=3」とか。

<?php
if( $_GET['command'] != "" ){
    $command = escapeshellcmd( $_GET['command'] );
    $commandList = array(
                         "up"    => 0,
                         "right" => 1,
                         "down"  => 2,
                         "left"  => 3,
                         "fire"  => 4
                         );
    $cmd = "cannon.exe {$commandList[$command]}";
    exec( $cmd );
}
echo $cmd;
exit;
?>

とりあえずはキャノン砲がコマンドラインで動くようにできればＯＫ
それだけでも十分たのしい（＾−＾）
さらにスナイパーっぽくするためにＷｅｂカメラをキャノン砲に取り付けてビデオ映像をRed5を使用してストリーミング配信するとそれっぽくなります。
ストリーミング配信の記事はこの辺を参考にしてみてください。
Red5でチャットや動画ライブストリミング配信とかやってみたよ
家からコタツでぬくぬっくしながら遠隔地を攻撃できるのはおもしろい（＾−＾）
値段も安いのでRed5の勉強がてら遊ぶといいかも？
参考リンク

いろんなソースコードはこちら
サーバーストリーミング

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
    layout="absolute"
    creationComplete="init()"
    backgroundAlpha="1" backgroundColor="0xffffff">
<mx:Script>
<![CDATA[
private var nc:NetConnection;
private var ns:NetStream;
private var cam:Camera;
private var mic:Microphone;
private function init():void{
    nc = new NetConnection();
    nc.client = new CustomClient();
    nc.connect("rtmp://localhost/oflaDemo");
    nc.addEventListener(NetStatusEvent.NET_STATUS,onNetStatus);
    nc.addEventListener(SecurityErrorEvent.SECURITY_ERROR,onSecurityError);
    setupCameraMic();
}
private function onNetStatus(evt:NetStatusEvent):void {
    //trace( "onNetstatus" );
    switch(evt.info.code) {
        case "NetConnection.Connect.Success":
            ns = new NetStream( nc );
            trace("Success");
            break;
        case "NetConnection.Connect.Closed":
            trace("Closed");
            break;
        case "NetConnection.Connect.Failed":
            trace("Failed");
            break;
        case "NetConnection.Connect.Rejected":
            trace("Rejected");
            break;
            default:
    }
}
private function onSecurityError(evt:SecurityErrorEvent):void {
    trace("Security Error");
}
private function broadcastClick():void{
    ns.attachCamera(cam);
    ns.attachAudio(mic);
    //ns.publish( "red5BroadcastDemo" , "record" );
    ns.publish( "red5BroadcastDemo" , "live" );
    playButton.enabled = false;
    stopButton.enabled = true;
}
private function stopClick():void{
    ns.close();
    playButton.enabled = true;
    stopButton.enabled = false;
}
private function setupCameraMic():void{
    cam = Camera.getCamera();
    cam.setMode(320, 240, 30);
    cam.setQuality(0,90);
    mic = Microphone.getMicrophone();
    mic.rate = 44;
    if(cam != null) {
        videoContainer.attachCamera(cam);
    }
}
]]>
</mx:Script>
    <mx:Canvas x="42" y="27" width="338" height="260"
        backgroundAlpha="0.5" backgroundColor="0xffffff"
        dropShadowColor="0x000000" dropShadowEnabled="true"
        cornerRadius="10" borderColor="0xffccff" borderStyle="solid" borderThickness="3"
        >
        <mx:VideoDisplay id="videoContainer" x="6" y="7" width="320" height="240"/>
    </mx:Canvas>
    <mx:Canvas x="216" y="304" width="164" height="44"
        backgroundAlpha="0.5" backgroundColor="0xffffff"
        dropShadowColor="0x000000" dropShadowEnabled="true"
        cornerRadius="10" borderColor="0xffccff" borderStyle="solid" borderThickness="3"
        >
        <mx:Button id="playButton" x="9" y="8" label="broadcast" click="broadcastClick()"/>
        <mx:Button id="stopButton" x="100" y="8" label="stop" click="stopClick()" enabled="false"/>
    </mx:Canvas>
</mx:Application>

コマンド受け渡し用

<?php
if( $_GET['command'] != "" ){
    $command = escapeshellcmd( $_GET['command'] );
    $commandList = array(
                         "up"    => 0,
                         "right" => 1,
                         "down"  => 2,
                         "left"  => 3,
                         "fire"  => 4
                         );
    $cmd = "cannon.exe {$commandList[$command]}";
    exec( $cmd );
}
echo $cmd;
exit;
?>

クライアント（射撃用）

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
    backgroundAlpha="1" backgroundColor="0xffffff" backgroundGradientColors="[0xcccccc,0x000000]"
    creationComplete="init()" xmlns:media="flash.media.*">
<mx:Script>
<![CDATA[
import mx.core.UIComponent;
private var nc:NetConnection;
private var ns:NetStream;
private var cam:Camera;
private var mic:Microphone;
private function init():void{
    nc = new NetConnection();
    nc.client = new CustomClient();
    nc.connect("rtmp://yourserver/oflaDemo");
    nc.addEventListener(NetStatusEvent.NET_STATUS,onNetStatus);
    nc.addEventListener(SecurityErrorEvent.SECURITY_ERROR,onSecurityError);
}
private function onNetStatus(evt:NetStatusEvent):void {
    //trace( "onNetstatus" );
    switch(evt.info.code) {
        case "NetConnection.Connect.Success":
            setupCameraMic();
            trace("Success");
            break;
        case "NetConnection.Connect.Closed":
            trace("Closed");
            break;
        case "NetConnection.Connect.Failed":
            trace("Failed");
            break;
        case "NetConnection.Connect.Rejected":
            trace("Rejected");
            break;
            default:
    }
}
private function onSecurityError(evt:SecurityErrorEvent):void {
    trace("Security Error");
}
private function setupCameraMic():void{
    ns = new NetStream( nc );
    ns.client = new CustomClient();
    var video:Video = new Video();
    video.attachNetStream(ns);
    ns.play("red5BroadcastDemo" , -1 );
//    ns.play("red5BroadcastDemo.flv");
    myVideoContainer.addChild(video);
}
private function onMetaData(data:Object):void{
}
private function onClick(str:String):void{
    hts.send({"command":str});
}
]]>
</mx:Script>
<mx:Style>
Button {
   paddingLeft: 6;
   paddingRight: 5;
   paddingTop: 5;
   paddingBottom: 5;
   highlightAlphas: 0.58, 0.83;
   fillAlphas: 0.6, 0.61, 0.6, 0.65;
   fillColors: #ffffff, #666666, #ffffff, #eeeeee;
   fontSize:16;
}
</mx:Style>
<mx:HTTPService id="hts" url="http://yourserver/command.php" resultFormat="text"/>
<mx:Text text="{hts.lastResult}"/>
<media:Video id="myVideo" width="320" height="240"/>
    <mx:Canvas x="33" y="40" width="344" height="492"
        backgroundAlpha="0.5" backgroundColor="0x666666"
        dropShadowColor="0x000000" dropShadowEnabled="true"
        cornerRadius="10" borderColor="0x000000" borderStyle="solid" borderThickness="3"
        >
        <mx:VideoDisplay id="myVideoContainer" width="320" height="240" x="10" y="10"/>
        <mx:Canvas x="57" y="300" width="224" height="158">
            <mx:Button x="0" y="57" label="←" left="10" verticalCenter="0" click="onClick('left')"/>
            <mx:Button x="78" y="110" label="↓" bottom="10" horizontalCenter="0" click="onClick('down')"/>
            <mx:Button x="161" y="57" label="→" right="10" verticalCenter="0" click="onClick('right')"/>
            <mx:Button x="78" y="10" label="↑" top="10" horizontalCenter="0" click="onClick('up')"/>
            <mx:Button x="78" y="57" label="FIRE!" verticalCenter="0" horizontalCenter="0" click="onClick('fire')"/>
        </mx:Canvas>
        <mx:Image x="78.5" y="38" source="@Embed('target.png')"/>
        <mx:Image x="10" y="10" source="@Embed('targetCover.png')"/>
        <mx:Button x="25" y="258" label="マニュアルモード"/>
        <mx:Button x="170" y="258" label="オートモード" width="137"/>
    </mx:Canvas>
</mx:Application>