Pages

Streaming Video in FIVe3D with the OSMF player



To play the video click on the Red button, to pause click on the black button.
FIVe3D is an amazing vector based 3D engine closely integrated to the Actionscript 3.0 display scaffolding. Its light and has a very rapid processing response. It has become one of my favourite 3D APIs. Its close integration with the native Actionscript display architecture provides features that no other 3D API offers. One of these features is in the ability to deploy RTMP based streaming with outh the need to set server side raw data access permissions. This is based on another feature it offers viz the ability to add a native Sprite directly to its display stack. Both features are illustrated in this demo that uses an Open Source Media Framework player to stream video from FMS. In any other 3D API permissions will have to be set in FMS to allow client access to RTMP raw data. The retrieved data will be used to compose a bitmap that is used for the 3D objects material. FIVe3D dispenses with that. Here all that is needed is to add teh Sprite (in this case the OSMF player) to the FIVe3D scene3D and that's it. Mathieu Badimon had just ported a revised build of the FIVe3D API, you ca grab it on the FIVe3D repository. Thanks a lot Mathieu, I really appreciate your work :). Many thanks to the OSMF team for their continued work on this fantastic media display platform.
The code for this is as follows:

package
{
import flash.display.Sprite;
import flash.display.StageScaleMode;
import flash.events.*;

import net.badimon.five3D.display.Scene3D;
import net.badimon.five3D.display.Sprite2D;
import net.badimon.five3D.display.Sprite3D;

import org.osmf.display.MediaPlayerSprite;
import org.osmf.display.ScaleMode;
import org.osmf.media.URLResource;
import org.osmf.net.NetLoader;
import org.osmf.utils.FMSURL;
import org.osmf.video.VideoElement;



[SWF(width="640", height="360")]

public class OSFM_Player_v7 extends Sprite
{
private var $scene:Scene3D;
private var $sprite:MediaPlayerSprite

public function OSFM_Player_v7()
{
stage.scaleMode = StageScaleMode.NO_SCALE;

$scene = new Scene3D()
var box:Sprite3D = new Sprite3D()
box.graphics3D.beginFill(0xAF0000);
box.graphics3D.drawRoundRect(0, 320, 100, 30, 10, 10);
box.graphics3D.endFill();
box.buttonMode = true;
box.useHandCursor = true;
box.addEventListener(MouseEvent.CLICK, onControlPlayHandler)

var box_:Sprite3D = new Sprite3D()
box_.graphics3D.beginFill(0x000000);
box_.graphics3D.drawRoundRect(540, 320, 100, 30, 10, 10);
box_.graphics3D.endFill();
box_.buttonMode = true;
box_.useHandCursor = true;
box_.addEventListener(MouseEvent.CLICK, onControlPauseHandler)

$scene.x = 0
$scene.y = 0

var $2box:Sprite2D = new Sprite2D();
$2box.name = '$box'
$sprite = new MediaPlayerSprite();
$sprite.height = 360;
$sprite.width = 640;
$sprite.x = -320;
$sprite.y = -180;
$sprite.scaleMode = ScaleMode.LETTERBOX;
$sprite.mediaPlayer.autoPlay = false

$2box.addChild($sprite);
$2box.x = 320;
$2box.y = 180;
$scene.addChild($2box);

$scene.addChild(box);
$scene.addChild(box_);

// $sprite.element = new VideoElement(
// new NetLoader(),
// new URLResource(
// new URL( "http://mediapm.edgesuite.net/strobe/content/test/AFaerysTale_sylviaApostol_640_500_short.flv" )
// )
// );

$sprite.mediaPlayer.bufferTime = 5
$sprite.element = new VideoElement(
new NetLoader(),
new URLResource(
new FMSURL("rtmp://8yourownfmsuri",true)
)
);
addChild($scene)
addEventListener(Event.ENTER_FRAME, onEnterFrameHandler)
}


public function onControlPlayHandler(e:MouseEvent):void
{
$sprite.mediaPlayer.play()
}

public function onControlPauseHandler(e:MouseEvent):void
{
$sprite.mediaPlayer.pause()
}

public function onEnterFrameHandler(e:Event):void
{
var xdist:Number = mouseX - stage.stageWidth * 0.5
var ydist:Number = mouseY - stage.stageHeight * 0.5;
if ($sprite.mediaPlayer.playing)
{
$scene.getChildByName('$box').rotationY = ydist * 0.25;
$scene.getChildByName('$box').rotationX = xdist * 0.25;
}
}

}
}

aYo Binitie II

No comments:

Instagram