JavaScript 调用设备摄像头实现指南
作者:木棉时间:2026-10-22 16:07:53浏览:226
本文介绍如何使用 JavaScript 的 getUserMedia API 获取设备摄像头权限并播放视频流。示例代码展示了配置音频和视频参数的方法,重点说明了 Chrome 需在 HTTPS 协议下运行,且 iOS 设备存在兼容性问题,建议开发者在测试时注意浏览器选择及协议要求。
JavaScript 调用摄像头概述
本文分享一段 JavaScript 调用设备摄像头的具体实现代码,供开发者参考。
核心功能依赖于 getUserMedia API 来获取摄像头的访问权限。该方案在 Chrome 和 Firefox 浏览器中兼容良好,但在 iOS 系统上不支持。
摄像头调用代码实现
以下是完整的源代码示例。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<video src=""></video>
<script type="text/javascript">
var opt = {
audio: true,
video: {
width: 375,
height: 603
}
};
navigator.mediaDevices.getUserMedia(opt)
.then(function(mediaStream) {
var video = document.querySelector('video');
video.srcObject = mediaStream;
video.onloadedmetadata = function(e) {
video.play();
};
})
.catch(function(err) {
console.log(err.name + ": " + err.message);
}); // always check for errors at the end.
</script>
</body>
</html>
运行环境与兼容性注意事项
需要注意的是,若使用 Chrome 浏览器查看代码,必须通过 HTTPS 协议访问才能生效;建议优先使用 Firefox 浏览器进行测试。
以上就是本文的全部内容,希望对各位的学习有所帮助,欢迎大家继续支持本站。
作者最新文章
JS合并多个数组的三种方法:concat、spread与flat
2026-11-05 17:39:45
JavaScript怎么准确判断数据类型:typeof、instanceof与Object.prototype.toString
2026-11-05 17:09:21
JS中将数组和对象混合组装为JSON字符串
2026-11-05 16:41:42
JS运算符优先级与结合性的区别是什么?
2026-11-05 13:22:02
JS Map怎么只遍历Key或Value
2026-11-05 13:00:36
