js调用设备摄像头的方法

作者：东都花神时间：2024-04-17 09:46:46　

本文实例为大家分享了js调用设备摄像头的具体代码，供大家参考，具体内容如下

使用getUserMedia这个API来获取摄像头的权限
兼容chrome和火狐，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协议下才能生效，建议使用火狐查看。

来源：https://blog.csdn.net/qq_33988065/article/details/78992413

标签：js,摄像头

投稿

js调用设备摄像头的方法

猜你喜欢

golang中defer的使用规则详解

在应用环境中如何构造最优的数据库模式

asp连接SQL和Access数据代码(asp里的随机函数)

使用python matplotlib 画图导入到word中如何保证分辨率

python二维图制作的实例代码

python jieba分词并统计词频后输出结果到Excel和txt文档方法

用代码帮你了解Python基础(3)

.NET Core、Xamarin、.NET Standard和.NET Framework四者之间的区别介绍

如何在浏览器地址栏显示自己的Favicons.ico图标

Dreamweaver使用快技法十三则

Python实现文字pdf转换图片pdf效果

jsp/javascript打印九九乘法表代码

解决python3 HTMLTestRunner测试报告中文乱码的问题

Python基于Logistic回归建模计算某银行在降低贷款拖欠率的数据示例

基于win2003虚拟机中apache服务器的访问

django修改models重建数据库的操作

html风格tooltip效果的实现

Python约瑟夫生者死者小游戏实例讲解

使用XMLhttp生成html页面

JavaScript日期工具类DateUtils定义与用法示例