博客

如何在HTML5上使用JavaScript整合网络摄像头

  • Post category:jquery

如何在HTML5上使用JavaScript整合网络摄像头

HTML5提供了WebRTC API，可以用于实时通信，其中包括使用网络摄像头的能力。我们可以使用JavaScript和HTML5创建一个简单的摄像头应用程序，以下是整合网络摄像头的完整攻略。

1.检查浏览器支持情况

在使用摄像头前，我们需要检查浏览器是否支持WebRTC API。可以通过以下JavaScript代码检查浏览器是否支持getUserMedia()函数：

if(navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
  // 支持getUserMedia函数
} else {
  // 不支持getUserMedia函数
}
  1. 获取摄像头流媒体

使用JavaScript的getUserMedia函数可以获取摄像头的流媒体，代码如下:

navigator.mediaDevices.getUserMedia({ video: true })
  .then(function(stream) {
    // 渲染视频流
    var video = document.querySelector('video');
    video.srcObject = stream;
    video.onloadedmetadata = function(e) {
      video.play();
    };
  })
  .catch(function(err) {
    console.log(err.name + ": " + err.message);
  });

上面的代码可以获取到摄像头流媒体，并将摄像头流媒体渲染到video元素上。这将会在页面上创建一个视频画面（video element）。

3.截屏并显示

我们可以通过Canvas将摄像头流媒体绘制到画布（canvas）上，在画布上截取一张图像，然后将图像作为图像（image）元素显示在HTML上。

var canvas = document.querySelector('canvas');
var video = document.querySelector('video');

navigator.mediaDevices.getUserMedia({ video: true })
  .then(function(stream) {
    video.srcObject = stream;
    video.onloadedmetadata = function(e) {
      video.play();
      // 将视频流绘制到canvas上
      var ctx = canvas.getContext('2d');
      ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
      // 将canvas转换为图像
      var img = new Image();
      img.src = canvas.toDataURL('image/png');
      // 将图像显示在html上
      document.body.appendChild(img);
    };
  })
  .catch(function(err) {
    console.log(err.name + ": " + err.message);
  });

上述代码将实时的摄像头数据渲染到canvas上，然后获取到画布上的图像（image），最后将它显示在HTML上。

4.完整示例

接下来是一个完整的示例代码，它可以通过浏览器渲染实时视频并截取屏幕的图像：

<html>
<head>
    <title>Web Camera</title>
</head>
<body>
    <canvas width="640" height="480"></canvas>
    <script>
        var canvas = document.querySelector('canvas');
        var video = document.createElement('video');
        video.autoplay = true;

        navigator.mediaDevices.getUserMedia({ video: true })
           .then(function(stream) {
                   video.srcObject = stream;
                   video.onloadedmetadata = function(e) {
                        video.play();
                        var ctx = canvas.getContext('2d');
                        ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
                        var img = new Image();
                        img.src = canvas.toDataURL('image/png');
                        document.body.appendChild(img);
                   };
           })
           .catch(function(err) {
                   console.log(err.name + ": " + err.message);
           });
    </script>
</body>
</html>

运行上述代码后，会在页面上看到一个大小为640×480像素的canvas元素，上面显示实时视频，并且在画布上截取闪烁的屏幕图像。

Tags: