javascript - 从浏览器访问相机

Question

是否可以从浏览器访问相机（Apple 内置）？

最佳解决方案是客户端 javascript。希望避免使用 Java 或 Flash。

score 17 · Accepted Answer

HTML5 规范确实允许访问网络摄像头，但最后我检查了一下，它还远未最终确定，并且浏览器支持非常非常少。

这是一个帮助您入门的链接：http: //www.html5rocks.com/en/tutorials/getusermedia/intro/

如果您希望它跨浏览器工作，您可能必须使用 Flash。

W3草案

score 17 · Accepted Answer

自 2017 年起，WebKit 宣布在 Safari 上支持 WebRTC

现在您可以使用video标准的 javascript WebRTC访问它们

例如

var video = document.createElement('video');
video.setAttribute('playsinline', '');
video.setAttribute('autoplay', '');
video.setAttribute('muted', '');
video.style.width = '200px';
video.style.height = '200px';

/* Setting up the constraint */
var facingMode = "user"; // Can be 'user' or 'environment' to access back or front camera (NEAT!)
var constraints = {
  audio: false,
  video: {
   facingMode: facingMode
  }
};

/* Stream it to video element */
navigator.mediaDevices.getUserMedia(constraints).then(function success(stream) {
  video.srcObject = stream;
});

玩一玩吧。

score 6 · Accepted Answer

Danny Markov 有一个非常酷的解决方案。它使用 navigator.getUserMedia 方法并且应该在现代浏览器中工作。我已经用 Firefox 和 Chrome 成功地测试了它。IE 没有工作：

这是一个演示：

https://tutorialzine.github.io/pwa-photobooth/

链接到 Danny Markovs 描述页面：

http://tutorialzine.com/2016/09/everything-you-should-know-about-progressive-web-apps/

链接到 GitHub：

https://github.com/tutorialzine/pwa-photobooth/

score 3 · Accepted Answer

3

可以使用 HTML5。

http://www.html5rocks.com/en/tutorials/getusermedia/intro/

于 2012-08-19T06:53:29.393 回答

score 2 · Accepted Answer

您可以为此使用 HTML5：

<video autoplay></video>
<script>
  var onFailSoHard = function(e) {
    console.log('Reeeejected!', e);
  };

  // Not showing vendor prefixes.
  navigator.getUserMedia({video: true, audio: true}, function(localMediaStream) {
    var video = document.querySelector('video');
    video.src = window.URL.createObjectURL(localMediaStream);

    // Note: onloadedmetadata doesn't fire in Chrome when using it with getUserMedia.
    // See crbug.com/110938.
    video.onloadedmetadata = function(e) {
      // Ready to go. Do some stuff.
    };
  }, onFailSoHard);
</script>

资源

score 1 · Accepted Answer

视频教程：使用 HTML5 和 appMobi API 访问相机将对您有所帮助。

也可以试试这个getUserMedia方法（Opera 12支持）

在此处输入图像描述

score 1 · Accepted Answer

是的，可以从浏览器访问相机，以下是对我有用的代码

<html><head>
</head><body>
    <video src="" ></video>
    <br />
<button id='flipCamera'>Flip</button>
</body>
<script>
  var front = false;
var video = document.querySelector('video');
  document.getElementById('flipCamera').onclick = function() { front = !front; };
  var constraints = { video: { facingMode: (front? "user" : "environment"), width: 640, height: 480  } };
  navigator.mediaDevices.getUserMedia(constraints)
  .then(function(mediaStream) {
    video.srcObject = mediaStream;
    video.onloadedmetadata = function(e) {
    video.play();
};
})
.catch(function(err) { console.log(err.name + ": " + err.message); })
</script></html>

score 0 · Accepted Answer

**简单的JAVASCRIPT香草**

var video = document.querySelector("#videoElement");

if (navigator.mediaDevices.getUserMedia) {
    navigator.mediaDevices.getUserMedia({ video: true })
        .then(function (stream) {
            video.srcObject = stream;
        })
        .catch(function (err0r) {
            console.log("Something went wrong!");
        });
}

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="stuff, to, help, search, engines, not" name="keywords">
<meta content="What this page is about." name="description">
<meta content="Display Webcam Stream" name="title">
<title>Display Webcam Stream</title>
<style>
  #container{
   align-self: center;
   margin-left: 350px;
   align-items: center;
   justify-content: center;
position: relative;
    width: 1000px;
    height: 1000px;
       background-color: black;
       padding: 3px;
  }
  #videoElement{
    transform: rotate(90deg);
   align-self: center;
   height: 50a0px;
   left: 20;
   width: 700px;
   position:absolute;
   padding: 1px;
   top: 120px;
  }
</style>
</head>
  
<body>
<div id="container">
    <video autoplay="true" id="videoElement">
    </video>
</div>
<script src="index.js">

</script>
</body>
</html>

score 0 · Accepted Answer

    <style type="text/css">
        #container {
            margin: 0px auto;
            width: 500px;
            height: 375px;
            border: 10px #333 solid;
        }

        #videoElement {
          width: 500px;
          height: 375px;
          background-color: #777;
        }
    </style>    
<div id="container">
            <video autoplay="true" id="videoElement"></video>
        </div>
        <script type="text/javascript">
          var video = document.querySelector("#videoElement");
          navigator.getUserMedia = navigator.getUserMedia||navigator.webkitGetUserMedia||navigator.mozGetUserMedia||navigator.msGetUserMedia||navigator.oGetUserMedia;
    
          if(navigator.getUserMedia) {
            navigator.getUserMedia({video:true}, handleVideo, videoError);
          }
    
          function handleVideo(stream) {
            video.srcObject=stream;
            video.play();
          }
    
          function videoError(e) {
    
          }
        </script>

javascript - 从浏览器访问相机

9 回答 9

Related

Reference