在HTML中插入本地相机或摄像头

随着HTML5的发展，我们现在可以在浏览器中使用本地相机或摄像头来进行视频或图像捕捉。在这篇文章中，我们将详细介绍如何在HTML中插入本地相机或摄像头，并附带通俗易懂的代码案例，适合编程小白学习。

获取本地相机或摄像头

要在HTML中获取本地相机或摄像头，我们需要使用JavaScript的getUserMedia()函数。该函数可在支持HTML5的浏览器中使用。使用该函数时，浏览器将弹出一个权限请求对话框，询问用户是否允许访问其本地相机或摄像头。如果用户授权，该函数将返回一个MediaStream对象，可用于捕获视频或图像。

navigator.mediaDevices.getUserMedia({
  video: true,
  audio: false
})
.then(function(stream) {
  var video = document.querySelector('video');
  video.srcObject = stream;
  video.onloadedmetadata = function(e) {
    video.play();
  };
})
.catch(function(err) {
  console.log('访问摄像头失败: ' + err);
});

在上面的代码中，我们首先调用getUserMedia()函数来获取本地相机或摄像头。该函数的参数是一个包含video和audio属性的对象。在这个例子中，我们将video设置为true，audio设置为false，因为我们只需要视频而不需要音频。如果用户授权访问，该函数将返回一个MediaStream对象，该对象可用于捕获视频或图像。

接下来，我们将获取到的MediaStream对象分配给video元素的srcObject属性。最后，我们将video元素的onloadedmetadata事件处理程序设置为播放视频。

显示本地相机或摄像头

要在HTML中显示本地相机或摄像头，我们需要使用HTML5的video元素。video元素可用于播放音频或视频文件，也可用于捕获从摄像头或本地存储设备中获取的视频。要在HTML中插入video元素，请使用以下代码：

<video autoplay="true" id="videoElement"></video>

在上面的代码中，我们创建了一个video元素。我们将autoplay属性设置为true，以便在加载页面时自动播放视频。我们还将id设置为videoElement，以便在JavaScript中引用该元素。

完整代码示例

以下是完整代码示例：

navigator.mediaDevices.getUserMedia({
  video: true,
  audio: false
})
.then(function(stream) {
  var video = document.querySelector('#videoElement');
  video.srcObject = stream;
  video.onloadedmetadata = function(e) {
    video.play();
  };
})
.catch(function(err) {
  console.log('访问摄像头失败: ' + err);
});

<video autoplay="true" id="videoElement"></video>

希望这篇文章能够帮助你在HTML中插入本地相机或摄像头，并且能够更好地理解JavaScript的getUserMedia()函数。如果你有任何疑问或建议，请在评论区留言，我们将尽快回复。

本文为翻滚的胖子原创文章,转载无需和我联系,但请注明来自猿教程iskeys.com

• 上一篇： HTML中的表单自动填充和历史记录管理技巧
• 下一篇： HTML中的表单验证和提交处理技巧