在HTML里加载摄像头的方法

为什么需要加载摄像头

随着技术的不断进步，摄像头已经成为人们日常生活中必不可少的设备之一。在物联网的时代，通过摄像头可以实现远程监控、视频通话、安防等多种功能。在前端开发中，我们也会用到摄像头。比如：直播、人脸识别等。而在HTML中如何加载摄像头呢？

HTML的媒体标签

在HTML中，有一些媒体标签可以用来加载音频、视频、图片等文件。而这些标签可以用来加载摄像头，可以实现前端对摄像头的控制。

1. video标签

<video>标签可以用来加载视频，它支持MPEG-4、H.264和WebM等多种视频类型。同时，<video>标签也可以用来加载摄像头。

<video autoplay>
    <source src="http://example.com/example.mp4" type="video/mp4">
</video>

在<video>标签中，我们可以通过<source>标签来引入摄像头的视频流。这里建议使用实时视频流服务商提供的API来获取视频流。例如我们可以使用WebRTC提供的API获取视频流。

2. canvas标签

使用<canvas>标签可以将图片或视频流绘制在画布上。以下代码使用WebRTC API获取视频流并在Canvas标签上绘制动态图像。

<video autoplay="true" id="videoElement"></video>
<canvas id="canvas"></canvas>
<script>
var video = document.querySelector("#videoElement");
var canvas = document.querySelector("#canvas");
var ctx = canvas.getContext("2d");
navigator.mediaDevices.getUserMedia({ video: true })
  .then(function(stream) {
    video.srcObject = stream;
  })
  .catch(function(err) {
    console.log("An error occurred: " + err);
  });
video.addEventListener("canplay", function() {
    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 paintToCanvas() {
  requestAnimationFrame(paintToCanvas);
  ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
}
</script>

上述代码中通过MediaDevices.getUserMedia()方法获取设备摄像头，将视频流赋值给video标签，同时在画布上绘制出动态图像。

剩余问题

虽然在HTML中可以使用以上标签来加载摄像头视频流，但是在不同的浏览器中还存在兼容性问题。例如：很多老旧的浏览器并不支持WebRTC，同时一些浏览器也不支持video和canvas标签中调用摄像头。解决这些问题需要依赖于Polyfill或其他的兼容方案。