The Problem

Unfortunately, in using OSMF, we were constantly seeing incorrect bitrates being reported for the current stream. It was obvious that it was playing a 1400kbps stream when OSMF was telling us that it was a 300kbps stream. If you have ever worked with video at a low level in Flash, you will know that you can never expect events to fire exactly how you want. That turned out to be the case here. OSMF internally was looking only for NetStream.Play.TransitionComplete code being fired in for a onPlayStatus event. Well good luck with that. You can simply do a seek at the start of a video right before it does a transition, or do a few seeks while it is transitioning and you’ll never see that get fired off.

The Solution

Although the onPlayStatus handler doesn’t always fire, a NetStatusEvent event with a NetStream.Play.Start code does fire when a new bitrate begins. Therefore if you introspect the details property (which gives you the stream name) of the info object in that event and the stream is different than the current bitrate, you can concur that the bitrate has switched. One quirk here is that in some cases a NetStream.Play.Start can fire with event.info.details being null, so you have to watch out for that.

So how can you apply this to OSMF? Given OSMF is so black boxed, the error has to be fixed in a core class. To make it simple, we only touched a single function onNetStatus in org.osmf.net.NetStreamDynamicStreamTrait.

we added a var definition at the top of the function

var index:int;

we added an additional case statement

case NetStreamCodes.NETSTREAM_PLAY_START:
	if(event.info.details)
	{  // don't try to grab the index if there is no stream name
		index = dsResource.indexFromName(event.info.details);
 
                // if starting a stream that is not the current index, let the system know that it is transitioning
		if(index != this.currentIndex)
		{
			inSetSwitching = true;
			setSwitching(true, index);
			inSetSwitching = false;
		}
                // notify the system that the stream has transitioned
		setSwitching(false, index);
	}
	break;

within the transition start statement, we put a lock on the system to only indicate a stream was switching if the index was changing

	index = dsResource.indexFromName(event.info.details);
	if(index != this.currentIndex)
		setSwitching(true, index);

So there you go, correct bitrate reporting with OSMF. Hopefully someone on the team will see this and they fix the issue in the core vs us having to mod their code. Hope this helps someone.

[UPDATE 2-16]
To be clear, this really is a bug with the Flash Player and FMS. The Flash Player itself is not firing the onPlayStatus event with a NetStream.Play.TransitionComplete code. This would effect any non OSMF player as well that relied only on that code to determine what stream was switched to. The bug with OSMF is that it just doesn’t account for this quirk. Also, this happens in all OSMF versions that I’m aware of. We were using 1.5.

We rarely have ActionScript 2 based projects these days at Dreamsocket, but a few still pop up now and again. Most of the time when they do it is because the project had some limitation that required it to be ActionScript 2. Recently we had two projects that had this type of limitation. One was using ScaleForm, a C++ Flash implementation which is typically used to create UIs for games (on platforms like the PS3, XBOX, etc). In our case we were creating a UI for a set top box platform. The other was for a random banner ad that needed to play nice in foreign environments. In both cases we turned to our as3for2 framework.

What is as3for2?

The moment ActionScript 3 came out, it was clear the new language was much simpler and cleaner to work with. Having a lot of large ActionScript 2 projects at the time that we wanted to port, we created a framework that wrapped ActionScript 2 to emulate the new ActionScript 3 objects and interfaces. It enabled us to slowly port chunks of code over to the point we just had to change a few syntax points and the code was now running atop ActionScript 3. That definitely was helpful but it was more of a short term transitional usage of the framework. Where it has been invaluable are projects like the ones mentioned above where we have to step back in time because of limitations that won’t allow us to use ActionScript 3. The sad thing is we’ve sat on this code base for about 5 years without sharing it. I guess it is better late than never. So today we are releasing the framework under an MIT license for anyone who still has to dabble in ActionScript 2.

What is in the framework?

- AS3 style event framework with bubbling, priorities, scoping, phases, formal events
- display package with DisplayObject, Graphics, Sprite, Stage, etc that hold the same AS3 APIs
- NetStream, NetConnection, SoundTransform
- Timer

Where do I get it?

All the code is up on https://github.com/dreamsocket/actionscript-as3for2. So go grab it now! It may be something useful on a project, fun for a stroll down memory lane, or educational as you port things over to JavaScript.

Obviously with all the upcoming phones, tablets, and connected TVs this has an even higher impact on a video applications experience. At Dreamsocket we’ve been fortunate enough to be an early adopter with projects on these platforms. From developing video player’s tailored for Android phones to creating Cartoon Network and Adult Swim’s GoogleTV apps, we’ve been able to see the impact this new change has, in addition to figuring out the best way to integrate it into existing applications.

All that said, the one thing that really struck us was how unique the new StageVideo API is. I say unique because it is a completely new API and is completely different than working with the Video object. I understand the differences, however do you really need to force someone to go back and recode everything just to use it? I know it forces a user to explicitly think and spend time putting StageVideo into an app, but why? It should be EASY. I mean really EASY.

Enter StageVideoProxy. We wanted to go into all of our video applications and simply swap out a Video object reference for a new Class that would use StageVideo if present and fallback to using a standard Video object if it failed. By having a simple class that extended Video, we could just swap out the instance and proxy all the calls to StageVideo when it was available. This made it EXTREMELY easy to retro fit any existing application with StageVideo functionality. In addition, we kept all 10.2 API references in places that would not get called in players below 10.2, making the code backwards compatible.

Super right? Well we did find a few limitations. First, StageVideo doesn’t really have a way to clear the video, so we had set the size to 0 width and 0 height to “clear” it. Second, we don’t really know depth of display objects vs other display objects easily, so we don’t have a way to determine z depth for the videos. The second step doesn’t really matter though, given the implementation currently only supports a single StageVideo instance. I’d like to add support for multi videos, but I’m still unclear on how many I can have and what dictates that. I understand how to know when they are there and when you hit your limit, but I’d still like to fully understand it before I add it in.

Regardless, this is super useful code so merry nerdmas! Here you go in all its MIT licensed glory

/**
* Copyright (c) 2010 Dreamsocket Incorporated.
* All rights reserved.
*
* Permission is hereby granted, free of charge, to any person
* obtaining a copy of this software and associated documentation
* files (the "Software"), to deal in the Software without
* restriction, including without limitation the rights to use,
* copy, modify, merge, publish, distribute, sublicense, and/or sell
* copies of the Software, and to permit persons to whom the
* Software is furnished to do so, subject to the following
* conditions:
*
* The above copyright notice and this permission notice shall be
* included in all copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
* EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
* OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
* NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
* HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
* WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
* FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
* OTHER DEALINGS IN THE SOFTWARE.
**/
 
 
package com.dreamsocket.media 
{
	import flash.events.Event;
	import flash.events.StageVideoEvent;
	import flash.events.StageVideoAvailabilityEvent;
	import flash.events.VideoEvent;
	import flash.geom.Rectangle;
	import flash.media.StageVideo;
	import flash.media.StageVideoAvailability;
	import flash.media.Video;
	import flash.net.NetStream;
 
	public class StageVideoProxy extends Video
	{
		protected var m_netStream:NetStream;
		protected var m_stageVideo:Object;
 
 
		public function StageVideoProxy (p_width:int = 320, p_height:int = 240)
		{
			super(p_width, p_height);
 
			this.addEventListener(Event.ADDED_TO_STAGE, this.onAddedToStage);
			this.addEventListener(Event.REMOVED_FROM_STAGE, this.onRemovedFromStage);
		}
 
 
		override public function set height(p_value:Number):void
		{
			if(p_value != this.height)
			{
				super.height = p_value;
				this.layoutView();
			}
		}
 
 
		override public function get videoHeight():int
		{
			return this.m_stageVideo ? this.m_stageVideo.videoHeight : super.videoHeight;
		}
 
 
		override public function get videoWidth():int
		{
			return this.m_stageVideo ? this.m_stageVideo.videoWidth : super.videoWidth;
		}
 
 
		override public function set width(p_value:Number):void
		{
			if(p_value != this.width)
			{
				super.width = p_value;
				this.layoutView();
			}
		}
 
 
		override public function set x(p_value:Number):void
		{
			if(p_value != this.x)
			{
				super.x = p_value;
				this.layoutView();
			}
		}
 
 
		override public function set y(p_value:Number):void
		{
			if(p_value != this.y)
			{
				super.y = p_value;
				this.layoutView();
			}
		}
 
 
		override public function attachNetStream(p_stream:NetStream):void
		{
			if(p_stream != this.m_netStream)
			{
				this.m_netStream = p_stream;
				this.teardownStream();
				this.setupStageVideo();
			}
		}
 
		protected function setupSpriteVideo():void
		{		
			this.m_stageVideo = null;
			super.attachNetStream(this.m_netStream);		
		}
 
 
		protected function setupStageVideo():void
		{	// only setup the view when video is on stage and there is a netstream attached
			// this helps prevent as much as possible the time when a StageVideo is initialized
			if(!this.stage || !this.m_netStream) return;
 
			try
			{
				if(!this.m_stageVideo && this.stage.stageVideos.length >= 1)
				{
					this.m_stageVideo = this.stage.stageVideos[0];
					this.m_stageVideo.addEventListener(StageVideoEvent.RENDER_STATE, this.onRenderStateChanged);
					this.layoutView();
				}
 
				if(this.m_stageVideo)
				{
					this.m_stageVideo.attachNetStream(this.m_netStream);
				}
				else
				{
					this.setupSpriteVideo();
				}
			}
			catch(error:Error)
			{
				this.setupSpriteVideo();
			}
		}
 
 
		protected function teardownStream():void
		{	
			try
			{
				if(this.m_stageVideo)
				{
					this.m_stageVideo.viewPort = new Rectangle(this.x, this.y, 0, 0);
					this.m_stageVideo.attachNetStream(null);
				}
				else if(this.m_netStream)
				{
					super.attachNetStream(null);
					this.clear();
				}
 
			}
			catch(error:Error){}
		}	
 
 
		protected function layoutView():void
		{
			if(this.m_stageVideo)
				this.m_stageVideo.viewPort = new Rectangle(this.x, this.y, this.width, this.height);
		}
 
 
		protected function onAddedToStage(p_event:Event):void
		{
			//this.stage.addEventListener(StageVideoAvailabilityEvent.STAGE_VIDEO_AVAILABILITY, this.onStageVideoAvailabilityChanged);
			this.setupStageVideo();
			this.layoutView();
		}
 
 
		protected function onRemovedFromStage(p_event:Event):void
		{	
			//this.stage.removeEventListener(StageVideoAvailabilityEvent.STAGE_VIDEO_AVAILABILITY, this.onStageVideoAvailabilityChanged);
			this.teardownStream();
		}
 
 
		protected function onRenderStateChanged(p_event:Event):void
		{
			switch(StageVideoEvent(p_event).status)
			{
				case VideoEvent.RENDER_STATUS_UNAVAILABLE: 
					this.teardownStream();
					this.setupStageVideo();
					break;
			}
		}
 
 
		protected function onStageVideoAvailabilityChanged(p_event:Event):void
		{
			this.teardownStream();
			this.setupStageVideo();
		}
	}
}

The tablet seemed to be a niche product until Steve Jobs came along and said the iPad was the most revolutionary computing device since the personal PC. Most of the vocal web responded with shock in thinking Steve and finally fallen off his rocker. Had he finally come out with a flop for Apple? or was he on to something?

If you step back for a moment and look at what the tablet represents, you realize it is definitely the next step in casual mass web consumption. Why do I say that? Take your average Joe Somebody internet user, he is very different than your vocal web user. Your vocal web user, which is probably you if you are reading this entry, publishes the web, they don’t consume it. They use their computer heavily to enter complex data and interact with everything digital. Joe Somebody on the other end consumes the web. He just uses it to view content. Though he may publish content to it as well, it is simple content (email, video, photos, etc.). Therefore Joe doesn’t need a complex device to interact with what he consumes or publishes. In fact, the simpler the device and more convenient the better. A tablet is much easier to use than a lap top. It is smaller, it doesn’t have to be opened and situated on a surface, and it is simpler to interact with. Try using either in a small environment like a plane (in Coach) and the differences will stand out dramatically.

Here they come

Even though the vocal web was somewhat dismissive of the iPad, device manufacturers understood what was going on.
The message is simple – Mass markets will ditch their PCs and laptops for tablets once they realize the convenience.

In Q4 of 2010, we are now seeing what the device manufacturers are responding with. The tablets are coming in like the waves of a hurricane. So we are all left to sift thru device after device wondering which one will be our initial purchase. A devices true success over another completely depends on what it feels like to interact with it versus another. Joe Somebody doesn’t care what software is running on the system or what runs and what doesn’t. He just wants it to be a beautiful experience. The better the device feels in his hand, the smoother/faster it appears to run, the more of his content that he can consume, the elegance of the interface and how easy it is to use all play into this experience. The device that does it the best will win.

iPad vs the competition

The iPad is nice, Apple focuses on experience first and they were the first to really put their stamp on this space so they have a lead. However, it all boils down to experience. If someone beats Apple at this game they win. With a ton of competition sitting in the distance, will someone come along and grab the pie? Android tablets are marching in like a CGI scene in Star Wars, but the Android OS still feels like a nerd put Linux on a touch screen. Don’t get me wrong, I’m a nerd, I like the under pinnings of the OS, but PLEASE Google use your $ and get some serious UI and interaction designers. Oddly, the one that seems to stand above the others is BlackBerry’s Playbook. You have to ask yourself, really? I mean BlackBerry the BlackBerry who seems primarily focused on business? Oddly enough, yes. The device is smaller, thinner, faster, and its interface seems like a visual motion masterpiece. You can read the specs and it seemingly dwarfs the iPad, but at the end of that day that doesn’t matter to a mass market. Probably the only specifications they ever read are on food containers. Point blank, it seems like a nicer experience. Sitting across from Martha Stewart at a conference who could probably be a decent gauge for for Sally Somebody, her reactions seemed to agree. When the Playbook was presented, her interest peaked and her questions went flying. Consumers want pretty things that are a joy to use. Apple gets it, now even the suits at BlackBerry get it. Given the amount of mobile and tablet work we are doing at Dreamsocket, you can bet we’ll have a stockpile of play toys. It is fitting that the Playbook tops our list for the most anticipated device. However, in the end only time will tell and the device that feels the best will win.

What some of you may not know or though of, is that you can actually embed JavaScript libraries into your SWF and have your SWF write those libs to the pages DOM. We’ve been using this technique for a while. However, when someone asked for a reference on the subject, I searched the web and didn’t find one. So here we are .

This technique is quite simple. The basics of it are that you embed the JavaScript library using the embed syntax, then create a Class that references it when instantiated, instantiate that class, get the string representation of the instance, and send that string to the page to be embedded using a JavaScript eval statement.

To illustrate this, lets create a JavaScript file called hello.js which has a single function hello that throws an JS alert.

Hello.js

function hello()
{
     alert("hello");
}

Now lets create the ActionScript file that embeds the JS into a SWF, writes it to the page, and calls the hello function in the lib.

package 
{
	import flash.display.Sprite;
	import flash.external.ExternalInterface;
 
	public class EmbeddedJavaScriptExample extends Sprite
	{
		// embed the JavaScript into the SWF
		[Embed(source="hello.js", mimeType="application/octet-stream")]
		// create a class that can instantiate the JavaScript for embedding
		private static const HelloJS:Class;
 
		public function EmbeddedJavaScriptExample()
		{
			if (ExternalInterface.available)
			{
				// embed the JavaScript to the page
				ExternalInterface.call("eval", new HelloJS().toString());
 
				// the embedded JavaScript has a function call named hello
				// now that it has been embedded to the page call it
				ExternalInterface.call("hello");
			}
		}
	}
}

You can download the full example here.

Pretty nifty eh? Hope this shows you a neat little trick to use in distributing some of your SWF/JS libraries.

Bear on a Wire Trailer from bearzo on Vimeo.

The Game

Our first IPhone game, previously code named Poor Bear is officially available in the app store today under the name Bear on a Wire. For those of you who followed the progression of the game on our site (1, 2, 3, 4) know that this game didn’t start with designs, requirements, deadlines, or the promise of gold bars. Instead it was built on the premise that we could make something fun that we molded just how we wanted it. That mold shifted and turned over time. Even at the starting gate, we didn’t even know what type of game we were making. The game really grew organically and took on a life of its own. I’m personally blown away with the outcome, especially considering this was Chad’s (the developer) first game and he went into it not knowing Objective C. The design is a work of art as well. However, for those of you know Trevor (the designer), know that you could expect nothing less. Words can’t do justice to what 1 designer and 1 developer have done with this game. It is simply amazing and even though it is our own game, none of us can stop playing. That was the point though. We built something we loved. We hope you will too!

Support Us

We appreciate any support you can give us. For those with an IPhone grab the game now, rate it, and review it!
APP STORE: http://itunes.com/app/bearonawire

For those wanting to get the word out. Here are some links to blog, twitter, AIM, tell someone on a subway, etc. We will have flyers too that you can print and post on bathroom walls, telephone polls, and anywhere in eyes view.
SHARE THE BEAR!

APP STORE: http://itunes.com/app/bearonawire
SITE: http://bearonawire.com
TWITTER: http://twitter.com/bearonawire
VIMEO: http://www.vimeo.com/6367707
YOUTUBE: http://www.youtube.com/dreamsocket

Press Release

Dreamsocket & TVM Studio are excited to announce they have just released Bear On A Wire.

URL: http://bearonawire.com/

Apple app store link: http://itunes.com/app/bearonawire

About the game:
Our green hero, Bearzo, has had it! No more performing for “THE MAN” day in and day out. What! Do you think he is some kind of dancing bear? NO… he is a high wire bear, and it’s time for him to make his great escape from the Big Top. He loves his fans and his work, but he just wants to be free and feel his scarf blow in the wind as he shreds wire with the most insane moves ever attempted … on a Moped… on top of high voltage power lines. Get ready to feel the power of the 49cc, two stroke, and single cylinder stallion!

As you tear off on the wire, try to balance Bearzo and keep him from fallingdown into the 1.21 gigawatts that alternate through the wires below him (Ah, the smell of burnt bear hair). While balancing on the wire, acquire crazy mad points by using the different stunt key combinations to generate some MOPED MAYHEM (ECO..ECo..eco) Bearzo’s stunts include no hands, half twist, full twist, bear buck, back roll, front roll, jump roll, grinder, spin roll, spin buck, spin buck grinder, coat tail, coat tail kick, and the next to impossible coat tail kick spin grinder. Combine these stunts with full flips, double flips… triple flips…? Now you are just being crazy! Collect coins and rack up even more points. I know…you never saw collectable coins coming. Don’t get caught hibernating b/c it’s about to get all GRIZZLY up in here!

Get pumped for BEAR ON A WIRE.

The meeting starts at 6:30 and is at
Echo Eleven’s offices
3525 Piedmont Rd NE
Building 7, Suite 400
Atlanta, GA 30305

The meetup site has more details. Definitely come out if you can, it looks to be a great meeting! If you do, make sure to RSVP as it looks like the list is pretty large right now.

The new license model:

• $99 – Individual
• $350 – Small Business (2 – 20 employees)
• $895 – Midsize Business (21 -50 employees)
• $1895 – Large Business (51+ employees)

To see all the details of the change and why we did it, check the post over on our site.

If you haven’t checked out or grabbed your copy of the product, now is a great time!

Anyone that saw our earlier post on the as2api source code changes, some of the capabilites that allowed us to selectively clean up the ActionScript 2 code base are in that post. Good times .

Stay tuned for more goodies!