JavaScript如何调用摄像头

如何使用浏览器调用摄像头

在JavaScript中使用浏览器调用摄像头会使用到以下方法：navigator.getUserMedia({video:true,audio:false},success,error)
参数1:是一个对象包含摄像头和麦克风{video:true,audio:false}
true表示开启，false表示关闭
参数2:调用成功回调success
参数3:调用失败回调error

需求：

调用摄像头和麦克风
video视频标签显示摄像头图像
将摄像头捕获的图像放置在页面canvas标签

实现：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script><style>video{width: 300px;height: 300px;border: 1px solid #ccc;}canvas{width: 300px;height: 300px;border: 1px solid red;}</style><title>Document</title>
</head>
<body><video autoplay id='video'></video><canvas id="output"></canvas>
</body>
</html>
<script>//var video = document.getElementById('video')//var back = document.getElementById('output')var video = $("#video").get(0)var back = $("#output").get(0)//console.log(back,video)var backcontext = back.getContext('2d')function draw() {backcontext.drawImage(video,0,0,back.width,back.height)try{backcontext.drawImage(video,0,0,back.width,back.height)}catch(e){if(e.name == "NS_ERROR_NOT_AVAILABLE"){return setInterval(draw,200)}else{throw e}}setTimeout(draw,200)}var success = function(stream){console.log('摄像头开启成功')//videoUrl = window.URL.createObjectURL(stream)//video.src = videoUrlvideo.srcObject = streamdraw()}var error = (error)=>{alert('调用失败')}navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedianavigator.getUserMedia({video:true,audio:false},success,error)
</script>

效果图：

JavaScript如何调用摄像头相关推荐

JavaScript实现调用摄像头完成拍照取图重命名并下载或上传
环境条件具有内置摄像头或外设摄像头 Vue + Element + axios(环境不同可自行修改,本文主要为逻辑,除展示的上传控件其他与js基本无异) 全文 <template>& ...
HTML5+JavaScript调用摄像头拍照或者摄像
调用摄像头拍照或者摄像有多种方法,之前介绍过两种: HTML5 <input type="file">标签直接调用:https://blog.csdn.net/qq_2 ...
用html5和javascript调用摄像头实现拍照功能
在机缘巧合之下,了解到用HTML5和javascript调用摄像头来实现拍照功能,今天就把大致原理写下来.页面布局很简单,就是一个input标签,两个HTML5元素video.canvas和一个but ...
【javascript】浏览器调用摄像头扫二维码踩坑记录
前言最近做一个项目需要用浏览器调用摄像头扫二维码,然后就踩了几个坑记录下. 踩坑记录我一开始发现了zxing这个库,他分为https://www.npmjs.com/package/@zxing/ ...
js调用摄像头并截图
js调用摄像头并截图 <!DOCTYPE html> <html><head><meta charset="utf-8"><t ...
在网页中调用摄像头实现拍照上传 - 高拍仪二次开发
在网页中调用摄像头实现拍照上传高拍仪二次开发在一些公共部门的办事处,比如银行.护照办理中心.税务等,我们可能会注意到办公桌上摆着这样一台机器.办公人员用它拍摄各种证件.文件.表格,有时候还 ...
c++ 二次开发良田高拍仪_在网页中调用摄像头实现拍照上传 - 高拍仪二次开发...
来源于 https://blog.csdn.net/weixin_40659738/article/details/78252562 在网页中调用摄像头实现拍照上传高拍仪二次开发在一些公共部门的 ...
mui教程2——窗口管理、调用相册、调用摄像头、调用重力感应、微信朋友圈界面（仿制）分析
一.窗口管理 1,页面初始化在app开发中,若要使用HTML5+扩展api,必须等plusready事件发生后才能正常使用,mui将该事件封装成了mui.plusReady()方法,涉及到HTML5 ...
HTML5调用摄像头录制视频
HTML5调用摄像头录制视频不支持ie,ie下不支持webrtc,无法使用navigator.getUserMedia调用摄像头 <!DOCTYPE html> <html> ...
服务器项目前端调用摄像头失败,浏览器调用摄像头失败：NotSupportedError Only secure origins are allowed...
通过浏览器调用摄像头失败:NotSupportedError Only secure origins are allowed 错误报告 NotSupportedError Only secure or ...

JavaScript如何调用摄像头

如何使用浏览器调用摄像头

JavaScript如何调用摄像头相关推荐

最新文章

热门文章