Cross domain Request

As it known to all, javascript has one- domain policy.That is to say we cannot directly send request to another website.

There are 2 methods to solve this situation

1. Using jsonp in ajax.

 $.ajax({
            type:”GET”,
            url :yahooURL,
            dataType:”jsonp”,
            jsonp: false,
            success: function(response){

                var wind = window.open(“”, “popupWindow”, “width=600,height=600,scrollbars=yes”);
                wind.document.write(response);
            }
});
Jsonp is the only type in ajax that  allow cross domain request.But the problem is that the response data type must be jsonp as well.

2.CORS

CORS also use XMLHttpRequest to send request.
The problem is that if we want to use CORS we need to set the sever side.
However ,sometime we can not set the config file on the server side.

There is  another way to do it .link :
http://code.tutsplus.com/tutorials/quick-tip-cross-domain-ajax-request-with-yql-and-jquery–net-10225

Working Notes:iptables

This command is special for building rules.And it is very useful command when it comes to networking.I will use it to set the firewall.

To list NAT rules:

iptables -t nat -L

iptables -t nat -L -n -v | grep ‘something’

iptables -t nat -L -n -v

For other attributes,click this link:

http://www.linuxhomenetworking.com/wiki/index.php/Quick_HOWTO_:_Ch14_:_Linux_Firewalls_Using_iptables#.UwpzI_SSws0

About the Linux command ls

When we use the ls command ,there are a lot of things we need to understand.
Firstly, the output of the ls command:

As what is showed above,in the middle of the photo,there are 2 columns.First word is the user ownership  of this file,and the second one is the  group ownership  of this file.
If we want to change the user,do it like this:
chown  user directory
change the group:
chown :group directory

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.