Question

您好我正在使用适用于Chrome浏览器的相机API。但我的浏览器不支持navigation.getUserMedia。

为此分享一些代码。

这是我的HTML页面：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>getUserMedi</title>
<link rel="stylesheet" href="style.css">
 </head>
 <body>
 <div id="video-container">
  <video id="camera-stream" width="500" autoplay></video>
  </div>
  <script src="camera.js">
  </script>
  </body>
  </html>

现在我的CSS文件：

  body {
  background: #F7F7F7;
  margin: 0;
  padding: 0;
        }

   #video-container {
   margin: 2em auto 0;
   width: 500px;
   padding: 2em;
   background: white;
   -webkit-box-shadow: 0 1px 10px #D9D9D9;
   -moz-box-shadow: 0 1px 10px #D9D9D9;
   -ms-box-shadow: 0 1px 10px #D9D9D9;
   -o-box-shadow: 0 1px 10px #D9D9D9;
   box-shadow: 0 1px 10px #D9D9D9;
        }

这里是camera.js文件：

    window.onload = function() {

    // Normalize the various vendor prefixed versions of getUserMedia.
   navigator.getUserMedia = (navigator.getUserMedia ||
   navigator.webkitGetUserMedia ||
   navigator.mozGetUserMedia || 
   navigator.msGetUserMedia);

   if (navigator.getUserMedia) {
  // Request the camera.
   navigator.getUserMedia(
    // Constraints
    {
    video: true
    },

    // Success Callback
    function(localMediaStream) {
     // Get a reference to the video element on the page.
    var vid = document.getElementById('camera-stream');

    // Create an object URL for the video stream and use this 
    // to set the video source.
    vid.src = window.URL.createObjectURL(localMediaStream);
                 },

         // Error Callback
    function(err) {
    // Log the error to the console.
    console.log('The following error occurred when trying to use  
     getUserMedia: ' + err);           
              }
           );

        } else {
        alert('Sorry, your browser does not support getUserMedia');
            }
            };

此处我的相机无法开启。浏览器也不支持请澄清这个人。

Answer 1

首先，navigation.getUserMedia已过时，大多数浏览器不再支持。

在Mozilla.org网站上找到的新推荐API是navigator.mediaDevices.getUserMedia

请，您可以通过下面的URL阅读更多内容。

Media Devices

API For Camera Access

如何启用浏览器进行摄像头访问？

1 个答案: