Camera Access如何在HTML和JS中工作?

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Camera Access如何在HTML和JS中工作?相关的知识,希望对你有一定的参考价值。

我正在寻找一种方法在浏览器中实现网络摄像头,并在用户单击按钮时拍摄相机的快照。有一个在线资源似乎使用下面的代码,但我无法理解以下行。有人可以解释一下吗?

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

如果需要,整个代码如下。

编辑:事实上另一个相关的问题,navigator.getMedia代表什么,它是如何工作的?

(function() {
  // Default Width set and height to be based on aspect ratio
  // Change to width/height of device (detect)
  var width = 320;
  var height = 0;

  //Status of stream
  var streaming = false;
  //Refers to <video> element
  var video = null;
  //Refers to <canvas> element
  var canvas = null;
  //Refers to <img> element
  var photo = null;
  //Refers to <button> element for trigger
  var startbutton = null;

  function startup() {
    video = document.getElementById('video');
    canvas = document.getElementById('canvas');
    photo = document.getElementById('photo');
    startbutton = document.getElementById('startbutton');

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

    navigator.getMedia({
        video: true,
        audio: false
      },
      function(stream) {
        if (navigator.mozGetUserMedia) {
          video.mozSrcObject = stream;
        } else {
          var vendorURL = window.URL || window.webkitURL;
          video.src = vendorURL.createObjectURL(stream);
        }
        video.play();
      },
      function(err) {
        console.log("An error occured! " + err);
      }
    );

    video.addEventListener('canplay', function(ev) {
      if (!streaming) {
        height = video.videoHeight / (video.videoWidth / width);

        // Firefox currently has a bug where the height can't be read from
        // the video, so we will make assumptions if this happens.

        if (isNaN(height)) {
          height = width / (4 / 3);
        }

        video.setAttribute('width', width);
        video.setAttribute('height', height);
        canvas.setAttribute('width', width);
        canvas.setAttribute('height', height);
        streaming = true;
      }
    }, false);

    startbutton.addEventListener('click', function(ev) {
      takepicture();
      ev.preventDefault();
    }, false);

    clearphoto();
  }

  // Fill the photo with an indication that none has been
  // captured.

  function clearphoto() {
    var context = canvas.getContext('2d');
    context.fillStyle = "#AAA";
    context.fillRect(0, 0, canvas.width, canvas.height);

    var data = canvas.toDataURL('image/png');
    photo.setAttribute('src', data);
  }

  // Capture a photo by fetching the current contents of the video
  // and drawing it into a canvas, then converting that to a PNG
  // format data URL. By drawing it on an offscreen canvas and then
  // drawing that to the screen, we can change its size and/or apply
  // other changes before drawing it.

  function takepicture() {
    var context = canvas.getContext('2d');
    if (width && height) {
      canvas.width = width;
      canvas.height = height;
      context.drawImage(video, 0, 0, width, height);

      var data = canvas.toDataURL('image/png');
      photo.setAttribute('src', data);
    } else {
      clearphoto();
    }
  }

  // Set up our event listener to run the startup process
  // once loading is complete.
  window.addEventListener('load', startup, false);
})();
<!doctype html>
<html>

<head>
  <script src="Camera.js"></script>
</head>

<body>
  <div>
    <div class="camera">
      <video id="video">Video stream not available.</video>
      <button id="startbutton">Take photo</button>
    </div>

    <canvas id="canvas"></canvas>

    <div class="output">
      <img id="photo" alt="The screen capture will appear in this box.">
    </div>

  </div>
</body>

</html>
答案

您显示的代码只是为旧版浏览器实现向后兼容性。

navigator.getUserMedia()函数标准化之前,每个主要的浏览器都有自己的功能,他们常常用浏览器前缀命名扩展函数:webkit用于基于WebKit的浏览器(Chrome和Safari),moz用于Mozilla Firefox,和ms用于Microsoft浏览器。

逻辑OR运算符||从左到右计算其操作数,返回第一个具有truthy值的操作数。

所以这段代码的作用是尝试使用navigator.getUserMedia()(如果它存在的话)(它将在现代浏览器中使用)。如果没有,它会尝试将每个特定于浏览器的旧功能作为后备。

另一答案

好吧,代码本身正在验证每个案例:

    navigator.getUserMedia ||
    navigator.webkitGetUserMedia ||
    navigator.mozGetUserMedia ||
    navigator.msGetUserMedia

它将返回第一个var,它不是null或undefined,然后将被分配给navigator.getMedia。我想这个代码是为了确保它能够在多个不同的浏览器和版本中运行。如果我错了请指正

以上是关于Camera Access如何在HTML和JS中工作?的主要内容,如果未能解决你的问题,请参考以下文章

如何让 GLTFLoader 在三个 js 中工作

无法让 DLookup 函数在 Access 2013 中工作

html5+js:<input type=file capture=camera>的分辨率或大小

会话如何在 Express.js 和 Node.js 中工作?

获取在 HTML 页面中工作但不在 JS 中工作 [重复]

toastr.js 如何在 Aurelia 和 Typescript 中工作?