无法使用我的代码初始化网络摄像头（html /js/css）答案

【问题标题】：cannot initialize webcam with my code (html /js/css)无法使用我的代码初始化网络摄像头（html /js/css）
【发布时间】：2013-12-04 20:16:30
【问题描述】：

我正在尝试通过我的 html 使 ebcam 工作，但它不起作用。框架在那里。但我不能让它工作。网络摄像头没有打开，甚至没有弹出询问我是否要允许我的 wbcam 打开....

我错过了什么吗？像插件一样让它工作？ ○ 还是我的代码有错误？

这里是html：

<!doctype html>

<head>
</head>
<body>
<link href="css.css" rel="stylesheet" />
<script src="js.js"></script>

<video id="video"></video>
<button id="startbutton">Take photo</button>
<canvas id="canvas"></canvas>
<img src="http://placekitten.com/g/200/150" id="photo" alt="photo">

</body>

这是CSS：

html {
    background: #111111;
    height: 100%;
    background: linear-gradient( #333, #000);
}
canvas {
    display: none;
}
video, img, #startbutton {
    display: block;
    float: left;
    border: 10px solid #fff;
    border-radius: 10px;
}
#startbutton {
    background: green;
    border: none;
    color: #fff;
    margin: 100px 20px 20px 20px;
    padding: 10px 20px;
    font-size: 20px;
}
#container {
    overflow: hidden;
    width: 880px;
    margin: 20px auto;
}/

这里是js：

// JavaScript Document
(function() {

  var streaming = false,
      video        = document.querySelector('#video'),
      cover        = document.querySelector('#cover'),
      canvas       = document.querySelector('#canvas'),
      photo        = document.querySelector('#photo'),
      startbutton  = document.querySelector('#startbutton'),
      width = 200,
      height = 0;

  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 ? vendorURL.createObjectURL(stream) : stream;
      }
      video.play();
    },
    function(err) {
      console.log("An error occured! " + err);
    }
  );

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

  function takepicture() {
    canvas.width = width;
    canvas.height = height;
    canvas.getContext('2d').drawImage(video, 0, 0, width, height);
    var data = canvas.toDataURL('image/png');
    photo.setAttribute('src', data);
  }

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

})();

【问题讨论】：

标签： javascript html css webcam

【解决方案1】：

它确实要求访问并显示我的网络摄像头： http://fiddle.jshell.net/e4Hf9/

不知道这里发生了什么，也许你有缓存问题。尝试隐身/私人浏览到您的问题页面

【讨论】：

【解决方案2】：

使用 Mozilla 的教程 Taking webcam photos 仔细检查您的代码
确保您的项目已正确部署在您的服务器上，例如 apache。并通过 xx.xx.xx.xx:port/your_page 访问您的页面

如果你直接双击打开你的代码文件是不行的。

【讨论】：