Lab 5

Today we are actually going to apply some of Web API

We're going to look at some of these APIs, mostly

  • Camera (no actual API available, but WebRTC just gives us access camera, so...)
  • Web Audio (if you've heard of the <audio> element, we're going to use something even better

If we have the time, we're going to look at some more stuff

And also, clone this repo: https://github.com/shovon/iat381-lab6.git

Camera

Browsers don't provide a camera API, but WebRTC provides access to a camera, as well as the video stream that comes straight out of the camera

        var video = document.getElementsByTagName('video')[0];

        navigator.getMedia = (
          navigator.getUserMedia ||
          navigator.webkitGetUserMedia ||
          navigator.mozGetUserMedia ||
          navigator.msGetUserMedia
        );

        navigator.getMedia(
          {
            video: true,
            audio: false
          },
          function(stream) {
            if (navigator.mozGetUserMedia) {
              // Wohoo, Firefox is awesome! No need of asking the browser to
              // create a video stream server. Just grab the stream directly!
              video.mozSrcObject = stream;
            } else {
              var vendorURL = window.URL || window.webkitURL;

              // Ask the browser to create a video stream server, generate a URL
              // and use that URL to grab the video stream.
              video.src = vendorURL.createObjectURL(stream);
            }
            video.play();
          },
          function(err) {
            console.log("An error occured! " + err);
          }
        );
      
        var canvas = document.createElement("canvas");
        canvas.width = video.videoWidth;
        canvas.height = video.videoHeight;

        canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);

        var img = document.createElement();
        img.src = canvas.toDataURL();

Web Audio

Play and record audio

on a lot of browsers (especially mobile browsers) <audio> tags don't autoplay. The Web Audio API is here to save the day

        var audioCtx = new (window.AudioContext || window.webkitAudioContext)();

        var xhr = new XMLHttpRequest();

        xhr.open('GET', 'audio.wav', true);
        xhr.responseType = 'arraybuffer';
        xhr.onload = function () {
          var source = audioCtx.createBufferSource();
          audioCtx.decodeAudioData(xhr.response, function (buffer) {
            source.buffer = buffer;
            source.loop = true;
            source.connect(audioCtx.destination);
            source.start();
          });
        }
        xhr.send();
      
        navigator.getMedia(
          {
            video: false,
            audio: true
          },
          function(stream) {
            var microphone = audioCtx.createMediaStreamSource(stream);
            microphone.connect(audioCtx.destination);
          },
          function(err) {
            console.log("An error occured! " + err);
          }
        );

Other examples

Device motion

        window.ondevicemotion = function(event) {
          var rotationX = event.rotationRate.alpha;
          var rotationY = event.rotationRate.beta;
          var rotationZ = event.rotationRate.gamma;
        };

Geolocation

        navigator.geolocation.getCurrentPosition(function(position) {
          // position.coords.latitude
          // position.coords.longitude
        });

More at https://developer.mozilla.org/en-US/docs/WebAPI