Multicast Streaming in Flash Player 10.1 revisited

Yesterday a student from my class ask me to help him solve a problem that was getting when testing Tom Krcha’s example files of his Multicast Streaming tutorial. Here’s the fix.

Yesterday a student from my class ask me to help him solve a problem that was getting when testing Tom Krcha’s example files of his Multicast Streaming tutorial, the files he was using were the same included in Tom’s tutorial except for the Stratus Developer Key so after looking at the video tutorial included and testing the examples files You’ll get this error:

?View Code ACTIONSCRIPT3
1
2
3
4
5
Error: Error #2154: The NetStream Object is invalid.  This may be due to a failed NetConnection.
	at flash.net::NetStream/invoke()
	at flash.net::NetStream/attachCamera()
	at Broadcaster/setupStream()[C:\Users\Dave\Adobe Flash Builder 4\Broadcaster\src\Broadcaster.mxml:67]
	at Broadcaster/netStatus()[C:\Users\Dave\Adobe Flash Builder 4\Broadcaster\src\Broadcaster.mxml:50]

The error is pretty descriptive and what is saying is that was the NetStream was not getting the Camera signal or received a null value when trying to attach it.

The reason that this was happening is because in the NetStatusEvent Listener inside the switch statement we are using the event.info.code = “NetConnection.Connect.Success”; both for the Connection and the Stream

?View Code ACTIONSCRIPT3
1
2
netConnection.addEventListener(NetStatusEvent.NET_STATUS, netStatus);
stream.addEventListener(NetStatusEvent.NET_STATUS, netStatus);
?View Code ACTIONSCRIPT3
1
2
3
4
5
6
7
8
9
10
private function netStatus(event:NetStatusEvent):void{
	   writeText(event.info.code);
 
	   switch(event.info.code){
	            case "NetConnection.Connect.Success":
		    setupStream();
                    break;
		}
 
}

And on the setupStream() function we are trying to attach the camera and thats what throws the error cause we are using the “NetConnection.Connect.Success” to call this function.

?View Code ACTIONSCRIPT3
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
private function setupStream():void
{
      var groupspec:GroupSpecifier = new GroupSpecifier("myGroup/multicastOne");
      groupspec.serverChannelEnabled = true;
      groupspec.multicastEnabled = true;
 
      stream = new NetStream(netConnection,groupspec.groupspecWithAuthorizations());
      stream.addEventListener(NetStatusEvent.NET_STATUS, netStatus);
 
       var cam:Camera = Camera.getCamera();
 
       stream.attachCamera(cam);
       stream.publish("multicast");
 
	video.attachCamera(cam);
}

The fix is pretty straightforward all You have to do is include a case for the event.info.code: “NetStream.Connect.Success” and thats where we attach the camera to our stream.

?View Code ACTIONSCRIPT3
1
2
3
4
5
6
7
8
9
10
11
switch(event.info.code){
	case "NetConnection.Connect.Success":
	        setupStream();
	break;
	case "NetStream.Connect.Success":
	        var cam:Camera = Camera.getCamera();
	        stream.attachCamera(cam);
	        stream.publish("multicast");
	        video.attachCamera(cam);
	break;
}

And our setupStream() function will only define the GroupSpecifier and the NetStream:

?View Code ACTIONSCRIPT3
1
2
3
4
5
6
7
8
private function setupStream():void{	
	var groupspec:GroupSpecifier = new GroupSpecifier("myGroup/multicastOne");
	groupspec.serverChannelEnabled = true;
	groupspec.multicastEnabled = true;
 
	stream = new NetStream(netConnection,groupspec.groupspecWithAuthorizations());
	stream.addEventListener(NetStatusEvent.NET_STATUS, netStatus);
}

Attaching camera / microphone after NetStream is connected, prevents you from following:

?View Code ACTIONSCRIPT3
1
Error #2154: The NetStream Object is invalid. This may be due to a failed NetConnection.

Click here to open my example, or here to download the flex project.

You should see Your Broadcaster and your Receiver getting along just fine.

Processing.js Experiment

Over the last few weeks when I wasn’t working or fighting hackers on my blog (If You follow me on Twitter you know what I mean), I had the chance to give Processing.js a try.

Over the last few weeks when I wasn’t working or fighting hackers on my blog (If You follow me on Twitter you know what I mean), I had the chance to give Processing.js a try, Processingjs is a port of the Processing programming language,and it lets You program images, interactions and animations for the web without using Flash or Java applets, it uses JavaScript to draw shapes and manipulate images on the HTML5 canvas element (You’ll need a browser that supports it …cough..IE…cough…ISSUE 15), so if you like building data visualizations, creating user-interfaces and developing web-based games Processing.js might be your thing.
So I decided to do a simple test and boy it was really simple to implement existing Processing sketches.
Here’s a little 3 steps explanation on how I did that experiment;

Step Number 1.-

First things first in order to play with Processing.js you’ll need to download and include it inside the tag of your html file.

?View Code HTML4STRICT
1
 <script src="script/js/processing-js/processing-0.9.6.min.js" type="text/javascript"><!--mce:0--></script>

Step Number 2.-

Now on the body tag You’ll need to open up a new canvas tag, and that’s where the processing.js will be running.

?View Code HTML4STRICT
1
You need a <a href="http://www.google.com/chrome" target="_blank">modern browser</a> to view this.

So what’s going on here ? You need to tell the canvas the location of the sketch that you’ll be running (in this case the worms.pjs file), in the datasrc attribute and a explaining text in case the user’s browser dont support HTML5 yet other way all they’ll see is a blank screen.

Step Number 3.-

The actual Processing.js that will display those playfull worms on Your HTML, if you’ve used Processing before you’ll notice that there’s actually nothing diffrent form what You do in a regular Processing sketch and if you copy and paste this in the Processing enviroment it will run as any other sketch.

?View Code JAVASCRIPT
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
Mover[] movers = new Mover[30];
 
void setup() {
  size(viewportwidth,viewportheight);
  smooth();
  background(0);
  // Initializing all the elements of the array
  for (int i = 0; i < movers.length; i++) {
    movers[i] = new Mover(); 
  }
}
 
void draw() {
  noStroke();
  fill(10,0);
  rect(0,0,width,height);
 
  // Calling functions of all of the objects in the array.
  for (int i = 0; i < movers.length; i++) {
    movers[i].update();
    movers[i].checkEdges();
    movers[i].display(); 
  }
}
 
class Mover {
 
  PVector location;
  PVector velocity;
  PVector acceleration;
  float topspeed;
 
  Mover() {
    location = new PVector(random(width),random(height));
    velocity = new PVector(0,0);
    topspeed = 4;
  }
 
  void update() {
 
    // Our algorithm for calculating acceleration:
    PVector mouse = new PVector(mouseX,mouseY);
    PVector dir = PVector.sub(mouse,location);  // Find vector pointing towards mouse
    dir.normalize();     // Normalize
    dir.mult(0.5);       // Scale 
    acceleration = dir;  // Set to acceleration
 
    // Motion 101!  Velocity changes by acceleration.  Location changes by velocity.
    velocity.add(acceleration);
    velocity.limit(topspeed);
    location.add(velocity);
  }
 
  void display() {
    stroke(0);
    fill(175);
    ellipse(location.x,location.y,16,16);
  }
 
  void checkEdges() {
 
    if (location.x > width) {
      location.x = 0;
    } else if (location.x < 0) {
      location.x = width;
    }
 
    if (location.y > height) {
      location.y = 0;
    }  else if (location.y < 0) {
      location.y = height;
    }
 
  }
 
}

So that’s it You may open your html file in the browser and will see a nice animated wormy things chasing your mouse across the screen.

Hope this little explaings helps You get started with Processing.js, I’ll be doing a little more of experimentation with it myself and tell You how it goes.

Until next time See You.