Question

我测试了很多css属性，使我的网络摄像头全屏显示，但是我没有得到正确的结果。有时高度会溢出。我也试过了对象，但没有得到正确的结果。

在此处分享我的代码。https://jsfiddle.net/jn6payn6/#&togetherjs=Sc8JuHsSfU

CSS代码

video{
  width: 100%;
  min-height: 100%;
  margin:0 auto;
  transform: rotateY(180deg);
}
img{
  position: relative;
  top: 50%;
  transform: rotateY(180deg); 
    }

HTML code：

  <video autoplay></video>

Javascript代码：

 (function() {
'use strict';
var video = document.querySelector('video')
  , canvas;

/**
 *  generates a still frame image from the stream in the <video>
 *  appends the image to the <body>
 */

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;
    });
}
 })();

需要帮助！

如何使用javascript使用WebRTC使我的网络摄像头全屏显示

0 个答案: