Labels

HTML 5 - CORS, Web RTC (Part-IV)

In today's article, we will look at below HTML 5 features:

  1. CORS - Cross Origin Resource Sharing
  2. Web Real Time Interactivity (RTC)

1. CORS - Cross Origin Resource Sharing
    • Allows restricted/blocks access to resource from another domain depending on the server configuration
    • IE uses XDomainRequest object
    • All other browsers: XMLHttpRequest object
    • Example

      • //setup
        function createCORSRequest(method, url) {
          var xhr = new XMLHttpRequest();

          if ("withCredentials" in xhr) {
            //only XMLHttpRequest2 object has withCredentials property
            xhr.open(method, url, true);
          } else if (typeof XDomainRequest != "undefined") {
            //Browser is IE
            xhr = XDomainRequest();
            xhr.open(method, url);
          } else {
            xhr = null;
          }
          return xhr;
        }

        //call
        var xhr = createCORSRequest("GET", apiUrl);
        if (!xhr) {
          throw new Error("xhr not supported");
        } else {
          //request is loaded
          xhr.onload = function () {
            var text = xhr.responseText;
          };

          xhr.onerror = function () {
            //Error
          };

          xhr.send();
        }


2. Web Real Time Interactivity (RTC)
    • Supports Browser to browser calling, P2P file sharing, video chat etc.
    • Available for Chrome, Opera, Mozilla Firefox only
    • APIs
      • MediaStream: 
        • Synchronised streams of media
        • Get access to user's camera & microphone.
      • RTCPeerConnection: Video or Audio calling facility
      • RTCDataChannel: Peer to peer communication
    • Example:
      • MediaStream

        • function hasGetUserMedia() {
            return !!(
              navigator.getUserMedia ||
              navigator.webKitGetUserMedia ||
              navigator.mozGetUserMedia ||
              navigator.msGetUserMedia
            );
          }

          var video = document.querySelector("video");
          if (hasGetUserMedia()) {
            navigator.getUserMedia(
              { video: true, audio: true },
              function (localMediaStream) {
                video.src = window.URL.createObjectURL(localMediaStream);

                video.onloadedmetadata = function (e) {
                  //doesnt fire in chrome when used with getUserMedia
                };
              },
              errorCallback
            );
            var errorCallback = function (e) {
              //error
            };
          } else {
            //not supported
            video.src = falbackurl;
          }


Labels:

Comments

Post a Comment

Popular Posts