Sending photos through WebRTC & How to build data channel

Sending photos through WebRTC is really a strange part of my job.And here are some notes and tips about this part.
The main  aim of sending photo is to send the contents of photos.The contents will be a quite  long string.We can not understand the string .And some time we can divide the entire string into many small parts.Then send those small strings via data channel.

Here I have some misunderstanding of the P2P.Socket is not the data channel.Actually we only use socket to build P2P connection —WebRTC connection—- and then we don’t need it any more.
After the connection has been built,we begin to use data channel to send data .

When we build WebRTC connection,we also need to build data channel.
Here is an example:

  pc = new RTCPeerConnection(configuration);
   sendChannel = pc.createDataChannel(“sendDataChannel”,
                {reliable: false});
As what has be showed above, A new data channel is essential once we define a new WebRTC connection.Using pc.createDataChannel to define a data channel.

   sendData = function(data){
            sendChannel.send(JSON.stringify(data));
         
    },

At this part,we define a function called sendData in order to use the sendchannel. Every time we want to send data through data channel we need to call this function.

When we want to send the data of photos via data channel,the first thing we need to do is to build a canvas.
Canvas is a place where we can store the photo temporarily.It is essential and we should define the width and height of the canvas appropriately.
All those thing can be done inside onload function.
eg:
 var image= new Image();
image.src=…..;
image.onload =function(){
  …….
}

Usually we will give the width and height of the photo to canvas.
eg:
   var tmpimagecanvas = document.createElement(‘canvas’);
                                        tmpimagecanvas.width = image.width;
                                        tmpimagecanvas.height=image.height;

If we don’t define the value of the width and height,the canvas cannot get the photo correctly.
Some time it can only get one part of the photo because  the size of canvas is not correct.
Then use the code as followed

eg:
  var context = tmpimagecanvas.getContext(‘2d’);
  context.drawImage(image,0,0);

it will give the contents of the photo to the canvas.
We can use toDataURL to check the contents of photo.
eg:

               var photoDataBeforeSending = tmpimagecanvas.toDataURL(“image/jpeg”);
               console.log(“Photo Data Before Sending   ” + photoDataBeforeSending);

When we want to send the contents via webRTC,remember the size of data channel is limited.
Therefore,we need to divide the whole photo into small parts.
eg:

imageSelected = function(data){

            var canvas = data.canvas;
            var imageWidth=data.imageWidth;
            var imageHeight=data.imageHeight;
            var delay = 10;//se the time of sending interval
            var charSlice = 10000;
            var terminator = “n”;
            //console.log(“HELLO : ” + canvas.getContext(‘2d’).getImageData(0,0,50, 50).data[0]);
            var data = canvas.toDataURL(“image/jpeg”);
            console.log(“DATA: ” + data);
            var dataSent = 0;
            var intervalID = 0;

            intervalID = setInterval(function(){
                var slideEndIndex = dataSent + charSlice;
                if (slideEndIndex > data.length) {
                    slideEndIndex = data.length;
                }
               // sendChannel.send(data.slice(dataSent, slideEndIndex));

                console.log(“dataslice-” + data.slice(dataSent, slideEndIndex));

                sandbox.notify({
                    type: “mobileControl-send-data”,
                    data: {type:”imageDataPacketSent”,
                        dataslice: data.slice(dataSent, slideEndIndex)},//send one part of photo
                        imageWidth: imageWidth,
                        imageHeight: imageHeight
                });
                dataSent = slideEndIndex;
                if (dataSent + 1 >= data.length) {//check whether the entire photo has been sent or not
                    //trace(“All data chunks sent.”);
                    //sendChannel.send(“n”);
                    sandbox.notify({
                        type: “mobileControl-send-data”,
                        data: {type:”imageDataPacketSent”,
                            dataslice: “n”,
                            imageWidth: imageWidth,
                            imageHeight: imageHeight

                        }
                    });
                    clearInterval(intervalID);
                }
            }, delay);
},

Once we receive those strings ,we need to integrate those strings.

eg:
processImageData= function(dataslice,width,height){
            if (dataslice == “n”){
                /*var img = new Image();
                img.onload = function(){
                    //put image data into canvas here
                    //canvasctx.drawImage(img,0,0);
                }
                img.src = imgdata;*/

                sandbox.notify({
                    type: “mobileControl-draw-Tool-Setup-upload-file”,
                    data: {
                        “imgData”:imgdata,
                        “imageWidth”:width,
                        “imageHeight”:height
                    }
                });
                console.log(“ImgData  ” + imgdata);
                imgdata=””;//
            }
            else {
                imgdata += dataslice;
            }
            console.log(“DATASLICETEST: ” + imgdata);
 },

Then we create a new canvas and give the content of the photo to the new canvas and show it at the correct position on the screen.

Working Note:WebRTC II JSEP

WebRTC applications need to do several things;
1.get streaming audio,video or other data
2.get network information such as IP addresses and ports, and exchange this with other WebRTC clients to enable connection
3.report errors and initiate or close sessions
4.exchange information about media and client capability
5.communicate streaming audio,video or data

MediaStream
The MediaStream API is one part of the webRTC.
Each MediaStream has an input,which might be a media stream generated by navigator.getUserMedia().

example:

navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;

var constraints = {audio: false, video: true};
var video = document.querySelector(“video”);

function successCallback(stream) {
  window.stream = stream; // stream available to console
  if (window.URL) {
    video.src = window.URL.createObjectURL(stream);
  } else {
    video.src = stream;
  }
  video.play();
}

function errorCallback(error){
  console.log(“navigator.getUserMedia error: “, error);
}

navigator.getUserMedia(constraints,successCallback,errorCallback);

It will take 3 parameters:
1.a constraints object
2.a success callback,which is passed a MediaStream
3.an error callback

The way to exchange the data and the offer/answer architecture is called JSEP,JavaScript Session Establishment Protocol.

Working Note:WebRTC

WebRTC is a real-time communication technique without  plugins.
This link is some basic knowledge about it : http://www.html5rocks.com/en/tutorials/webrtc/basics/#toc-disruptive

Quick start

It seems this webRTC is especial for web video communication.
RTC: Real Time Communication

Right now,getUserMedia seem to be an important thing in webRTC.It is available in Chrome Opera and FireFox.

This website can be used as a free video communication.
https://apprtc.appspot.com

To be continue…

Basic Knowledge of Regular Expression

Recently I begin  to figure regular expression is really useful but hard to remember.
So this is just a tip for reviewing some basic knowledge about  javascript RegExp.

First  here is a link of W3school http://www.w3schools.com/jsref/jsref_obj_regexp.asp

And this link is for tesing http://www.regular-expressions.info/javascriptexample.html

if we want to find “test” in the string “give us a test and ” we can just use the javascript regex like this:

regex=test or regex =bt[a-z]+b or bt[a-z]{3}b  or bt[a-z]{1,3}

First one will directly find the result of “test”. The second one will find a string with the beginning of t and followed by at least one letter between a-z. The third one is to find a string beginning with t and followed by 3 letters.  The last one is to  find a string beginning with t and follow by some letters. The number of letters is  1 or 2 or 3.

Beside the most important thing when we try to avoid deadly command in webpage is to check whether this is a “;” or not.
Because “;” will give the right to use another command.
When we want to execute linux  command by using node.js,we need to be more careful about the security problem.Sometimes, there will be a error message like”fail to find the command”.
The best way to solve it is to use the direct path.For example: $which ssmtp
And it will show the path of that command ,then :/usr/bin/ssmtp ” + inviteEmail + ” </home/msg.txt
The command will be executed successfully.

And by the way,when we want to use regex in javascript, we should add “//”.
For example, “regex = /;/; “

Class and functions in PHP

Today,I had a very interesting experience about PHP.
Here is a question about FizzBuzz:
Fizz Buzz
The aim of this test is to implement the FizzBuzz problem.
FizzBuzz is defined for the “natural numbers” (numbers greater than zero) as:
When divisible by 3, you should return “Fizz”.
When divisible by 5, you should return “Buzz”.
When divisible by both 3 and 5, you should return “FizzBuzz”.
When divisible by neither, you should return the number itself.
The test is expected to take around 10 minutes. When you are ready to take it, please follow the link below:
This test will require you to solve the exercise in the Php programming language.

Actually this is an easy question. The only thing you need is if and elseif.

However,when I clicked the link of this question. I realized that I was wrong.

The test program requires a class of PHP. To be honest ,this is the first time I know that class is important in PHP program. In my undergraduate study I never had an opportunity to use class in PHP.

As a result,I had to google some information about class and finally completed the exercise after 1 hour…

Here is some tips about this question:

1.class in PHP

some time we will use class to solve problem. It is common to use a class like that:
$fizzbuzz=fizz(10);
10 is the value of input and fizz() will return a value to $fizzbuzz.

2. __construct()

This is a really common function. You can not use it as a normal function in class. The main responsibility for this function is to declare values.
For example:

function _construct($number){
    $this->number=$number;

3.Magic methods
Today I have to use one of the magic methods:_tostring()
This function is used when the class is treated as a string.That is to say,we can only return values in string type.
Here is an example:

function _tostring(){
   echo ‘Hello,world!’;
}

Sometimes we have to use it to return some integer.Then we will have to use another important point. We need to change the integer into string.
For example:

echo (string)$number;

Actually,this exercise is really useful and I have learned a lot from it,although
I may have lost the opportunity for interview…

Shell commands under linux is interesting

I began to learn some basic knowledge about shell especially bash. At first it is strange but it is really important.Besides I also need to review Java because I may have to use Java to get a summer holiday job in the future.

How to use Issh

I have got the account of CSE, that is to say I could use lads in my university. It was easy to  active the Yellow FORM of CSE and finally receive my password.Then I tried to connect my ipad to CSE’s computer.As it was the first time I knew Issh ,it was a totally disaster at beginning. I had to google almost everything about ssh and ‘how to use issh’. Fortunately,I got it.
The following is the process of how to use Issh
Image
As u can see,this is the interface of issh and the first thing we need to do is clicking the Add Configuration
Image
Here we can see,there is a list which should be filled with.The first one is Description,and you could just write down whatever you like because it is just a mark.Next step is to write the host.Host is the aim computer and you should figure out the IP of the aim computer.
Port should be default for beginer and login is your user name.Password is the last step.
Then click the save button.
Image
you will find your configuration in the middle,click it
Image
successfully!now you could  try a command ,what about top?
Image
commands are really usefully~