用navigator对象访问设备摄像头

因为手机浏览器一般都会禁止js脚本访问设备，所以这个网页只能在(比较新的)电脑浏览器上正常工作。后端照旧是用flask，这里就不啰嗦了，直接上网页代码：

<body><video id = "video" autoplay style = "width: 480px; height: 320px"></video><div><button id = "capture">拍照</button></div><canvas id = "canvas" width = "480" height = "320"></canvas>
</body>
</html>
<script>// 顾名思义，用CSS3选择器选择网页元素var video = document.querySelector("#video");var canvas = document.querySelector("canvas");// 制造一个二维画布对象var context = canvas.getContext("2d");// constraints是一个控制参数的{video:, audio:}对象，success是成功加载摄像机的数据流后的回调函数，error用来报错function capturePicture(constraints, success, error){if(navigator.mediaDevices.getUserMedia){// .then包含成功后要执行的代码块，.catch用来处理异常navigator.mediaDevices.getUserMedia(constraints).then(success).catch(error);}}function success(stream){var compatibleURL = window.URL || window.webkitURL;console.log(stream);// 将video对象的引用对象变成数据流video.srcObject = stream;video.play(); }function error(err){console.log("访问媒体信息失败：", err.name, ", ",err.message);}capturePicture({video: {width:480, height:320}}, success, error);// 声明一个监听函数用来绘制图像document.querySelector("#capture").addEventListener("click", () => {context.drawImage(video, 0, 0, 480, 320);});
</script>

用navigator对象访问设备摄像头相关推荐

纯JavaScript实现的调用设备摄像头并拍照的功能
这篇文章本来不在Jerry计划内的,咱们SAP中国研究院今天已经正式上班了,Jerry也回到工作岗位开始搬砖了. 今天一位同事问我关于本文标题描述的功能如何实现,Jerry在网上随便搜了一下,类似的例 ...
Navigator对象
Navigator对象 Navigator对象表示用户代理的状态和标识,其允许脚本查询它和注册自己进行一些活动,可以使用只读的window.navigator属性取得实例化的navigator对象的引 ...
使用JS判断访问设备是电脑还是手机
一.前言有时在编写前端页面视图时,需要根据用户不同的访问设备(手机或电脑)对页面设置不同显示样式或跳转到不同的页面.可以使用JS代码获取Navigator对象的userAgent属性,通过对该属性值 ...
BOM系列之Navigator对象
文章の目录 1.Navigator是什么 2.属性 2.1.buildID 2.1.1.概述 2.1.2.语法 2.1.3.返回值 2.2.clipboard 2.2.1.概述 2.2.2.语法 2. ...
html5调用设备摄像头，实现二维码扫描
html5调用设备摄像头,实现二维码扫描最近在做一个签到系统,由于我直接使用了纯网页,因此调用摄像头进行扫码成了大问题.经过几番费力的百度终于找到解决方法. 主要用到MediaDevices.get ...
PHP和js判断访问设备是否是微信浏览器实例
PHP和js判断访问设备是否是微信浏览器实例,代码非常精简,适合新手学习. js判断是否是微信浏览器: function is_weixin() { var ua = window.navigator ...
JS判断访问设备(userAgent)加载不同页面 JS判断客户端操作系统类型(platform)
//平台.设备和操作系统var system ={win : false,mac : false,xll : false};//检测平台var p = navigator.platform;syste ...
Navigator 对象，能够清楚地知道浏览器的相关信息
Navigator 对象属性 appCodeName属性功能:返回浏览器的代码名.该属性是一个只读的字符串. 语法:navigator.appCodeName 总结:在所有以Netscape代码为基 ...
window.location对象、window.navigator对象、window.history对象
location 对象是 window 对象给我们提供了一个location属性用于获取或设置窗体的URL,并且可以用于解析URL.因为这个属性返回的是一个对象,所以我们将这个属性也称为locatio ...

用navigator对象访问设备摄像头

用navigator对象访问设备摄像头相关推荐

最新文章

热门文章