Live Web / WebRTC – Magnifying glass

I made a demo using WebRTC and drawImage() of canvas function. When a user click ‘take photo button, it will capture part of webcam as image and paste expanded version of it into background.

getuserimage_demo_1 getuserimage_demo_2

Click to demo site

<html>

<head>
  <style>
    body,
    html {
      height: 100%;
      margin: 0;
    }

    #imagefile {
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      height: 100%;
      background-image: url('https://i.ytimg.com/vi/7ZDC8IfVTdQ/maxresdefault.jpg');
      z-index: 1;
    }


    #thecanvas {
      position: absolute;
      margin:0;
      top: 0;
      left: 0px;
      width: 160px;
      height: 90px;
      z-index: 2;
    }

    #thevideo {
      position: absolute;
      margin:0;
      top: 0;
      left: 0;
      width: 160px;
      height: 90px;
      z-index: 3;
    }

    #sendbutton {
      position: absolute;
      top: 70px;
      left: 0px;
      margin: 0px;
      width: 160px;
      height: 20px;
      border-radius: none;
      background: yellow;
      color: black;
      font-size: 0.5em;
      border: none;
      z-index: 4;
      opacity : 0.5;
    }
  </style>

  <script src="/socket.io/socket.io.js"></script>
  <script>
    var socket = io.connect();

    socket.on('connect',
      function() {
        console.log("Connected");
      }

    );

    socket.on('image',
      function(data) {
        console.log("Got image");
        // document.getElementById('imagefile').src = data;
        document.getElementById('imagefile').style.backgroundImage = "url('" + data + "')";
      }
    );


    var initWebRTC = function() {

      var hdConstraints = {
      video: {
        mandatory: {
          minWidth: 1280,
          minHeight: 720
        }
      }
    };

      // These help with cross-browser functionality
      window.URL = window.URL || window.webkitURL || window.mozURL || window.msURL;
      navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia; // The video element on the page to display the webcam
      var video = document.getElementById('thevideo'); // if we have the method
      if (navigator.getUserMedia) {
        navigator.getUserMedia(hdConstraints,
          function(stream) {
            video.src = window.URL.createObjectURL(stream) || stream;
            video.play();
          },
          function(error) {
            alert("Failure " + error.code);
          }
        );
      }

      var thecanvas = document.getElementById('thecanvas');
      var thecontext = thecanvas.getContext('2d');

      var draw = function() {
        // thecontext.drawImage(video, randomPositionX, randomPositionY, video.width / 4, video.height / 4, 0, 0, video.width, video.height);
        var randomPositionX = Math.floor(Math.random() * (1280 - 160));
        var randomPositionY = Math.floor(Math.random() * (720 - 90));
        console.log(randomPositionX, randomPositionY)
        thecontext.drawImage(video, randomPositionX, randomPositionX, 160, 90, 0, 0, video.width, video.height);
        var dataUrl = thecanvas.toDataURL('image/webp', 1);

        socket.emit('image', dataUrl);
      };

      document.getElementById('sendbutton').addEventListener('click', draw);
    }

    window.addEventListener('load', initWebRTC);
  </script>
</head>

<body>

  <div id="imagefile">
    <div id="vidoewrapper">
      <video id="thevideo" width="320px" height="240px" autoplay></video>
      <button id="sendbutton">Take Photo</button>
    </div>
    <canvas id="thecanvas"></canvas>
  </div>


</body>

</html>

 

 

Leave a Reply

Your email address will not be published. Required fields are marked *