Two javascript functions for displaying video image with robot

A French student asked me a question about how to display the video. He used the system to send message on the Aldebaran community site. I write this article for answering his question. The followings are two javascript functions "GetVideoImages()" and "DrawImage()" for displaying the video images that the robot get with his camera.  "Ibot" is an object on my javascript file. If you have another question, please use the aldebaran message system.

 1     ///////////////////////////////////////////////////
 2     // Display Video Images
 3     ////////////////////////////////////////////////////
 4     Ibot.session = null;
 5     Ibot.displayVideo = false;
 6     Ibot.savedSubscriberID = null;
 7
 8     Ibot.getVideoImages = function(ipaddress){
 9         $("#subMenu").fadeOut("fast");
10         Ibot.newConnect(ipaddress, function (ret,session) {
11             Ibot.session = session;
12             if (ret === "success") {
13                 Ibot.session.service("ALVideoDevice").done(function (vdev) {
14                     var fps = 1; // frame number
15                     var subID = "subscriberID";
16                     vdev.subscribeCamera(subID, 0, 1, 11, fps).done(function (subscriberID) {
17                         $("#videoStop").unbind();
18                         $("#videoStop").click(function(){
19                             Ibot.displayVideo = false;
20                             vdev.unsubscribe(subscriberID);
21                         });
22                         $("#dialogOK").unbind();
23                         $("#dialogOK").click(function () {
24                             Ibot.displayVideo = false;
25                             vdev.unsubscribe(subscriberID);
26                             $("#mdialog").fadeOut("fast");
27                             $("#glayLayer").fadeOut("fast");
28                         });
29                         var delay = 1000/fps;// interval for timer
30                         $( 'input[name="fpsValue"]:radio' ).change( function() {
31                             Ibot.showConfirm("Network is too slow. It is possible for the robot to stop.",function(ret){
32                                 if(ret === "OK"){
33                                     var newFps = $(this).val(); // value
34                                     Ibot.showAlert("Change frame rate. newrate = " + newFps);
35                                     fps = parseInt(newFps);
36                                     vdev.setFrameRate(subscriberID, fps);
37                                     delay = 1000 / fps;
38                                 }else{
39                                     $('input[name="fpsValue"]').val(["1"]);
40                                     fps = 1;
41                                     vdev.setFrameRate(subscriberID, fps);
42                                     delay = 1000 / fps;
43                                 }
44                             });
45                         });
46                         var canvas = $("#videocanvas");
47                         var context = canvas[0].getContext('2d');
48                         var img = context.createImageData(320, 240);
49                         var timer; //timer
50                         Ibot.displayVideo = true;
51                         var loop = function () {
52                             Ibot.drawImage(subscriberID, vdev,context,img);
53                             clearTimeout(timer);
54                             if(Ibot.displayVideo){
55                                 timer = setTimeout(loop, delay);
56                             }else{
57                             }
58                         };
59                         // loop start
60                         loop();
61                     }).fail(function(){
62                         Ibot.showAlert("Fail to subsctibe");
63                     });
64                 }).fail(function(){
65                     Ibot.showAlert("Fail to start video device.");
66                 });
67             } else {
68                 Ibot.showAlert("Fail to connect to the robot.");
69             }
70         });
71     };
72
73     Ibot.drawImage = function(subscriberID,vdev,context,img){
74         vdev.getImageRemote(subscriberID).done(function (video) {
75             var arrayBuf = Ibot.Base64_To_ArrayBuffer(video[6]);
76             var tpx = 320 * 240;
77             var uint8array = new Uint8Array(arrayBuf);
78             for (var j = 0; j < tpx; j++) {
79                 img.data[j * 4] = uint8array[j * 3];
80                 img.data[j * 4 + 1] = uint8array[j * 3 + 1];
81                 img.data[j * 4 + 2] = uint8array[j * 3 + 2];
82                 img.data[j * 4 + 3] = 200;
83             }
84             context.putImageData(img, 0, 0);
85             vdev.releaseImage(subscriberID);
86         }).fail(function (error) {
87             Ibot.displayVideo = false;
88             vdev.unsubscribe(subscriberID);
89             Ibot.showAlert("Fail to get video image. error = " + error);
90         });
91     };
92
93

(You can see a the youtube video at the following address.

Sorry, I say comments in Japanese.)