title: how to make my webcam streaming full screen with WebRTC using javascript
body: <p>I have tested many css properties to make my webcam streaming full screen but i am not getting proper results.
  Sometimes the height gets overflow.
  I tried object-fit also, but did not get proper result.</p>
  
  <p>Sharing my code here .<a href="https://jsfiddle.net/jn6payn6/#&amp;togetherjs=Sc8JuHsSfU" rel="nofollow noreferrer">https://jsfiddle.net/jn6payn6/#&amp;togetherjs=Sc8JuHsSfU</a> </p>
  
  <p>CSS-code   </p>
  
  <pre><code>video{
    width: 100%;
    min-height: 100%;
    margin:0 auto;
    transform: rotateY(180deg);
  }
  img{
    position: relative;
    top: 50%;
    transform: rotateY(180deg); 
      }   
  </code></pre>
  
  <p>HTML code:</p>
  
  <pre><code>  &lt;video autoplay&gt;&lt;/video&gt;
  </code></pre>
  
  <p>Javascript code:</p>
  
  <pre><code> (function() {
  'use strict';
  var video = document.querySelector('video')
    , canvas;
  
  /**
   *  generates a still frame image from the stream in the &lt;video&gt;
   *  appends the image to the &lt;body&gt;
   */
  
  function takeSnapshot() {
    var img = document.querySelector('img') || document.createElement('img');
    var context;
    var width = video.offsetWidth
      , height = video.offsetHeight;
  
  
    canvas = canvas || document.createElement('canvas');
    canvas.width = width;
    canvas.height = height;
  
    context = canvas.getContext('2d');
    context.drawImage(video, 0, 0, width, height);
  
    img.src = canvas.toDataURL('image/png');
    document.body.appendChild(img);
  }
  
  // use MediaDevices API
  // docs: https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia
  if (navigator.mediaDevices) {
    // access the web cam
    navigator.mediaDevices.getUserMedia({video: true})
    // permission granted:
      .then(function(stream) {
        video.srcObject = stream;
        video.addEventListener('click', takeSnapshot);
      })
      // permission denied:
      .catch(function(error) {
        document.body.textContent = 'Could not access the camera. Error: ' + error.name;
      });
  }
   })();
  </code></pre>
  
  <p>Need help!</p>