原生js 调用电脑摄像头完成拍照

人脸登录新发版1.0x

免费开源，保姆级别教程人脸登录地址

1 ，完成拍照后可转换成base64码，你可以对当前base64码进行操作，当初我就利用这个功能点完成前端的人脸登录的，拿到base码后你可以post传入后台，将当前base64码转换成图片，之后调用百度api,或者腾讯api人脸识别进行对比
2，上代码

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><video id="video" width="500" height="500"></video><canvas id="canvas" width="500" height="500"></canvas><a href="javascript:saveFile(filename)" onclick="dd()">点击我</a><div id="box"></div></body><script>//用来匹配不同的浏览器function getUserMedia(constraints,success,error){if(navigator.mediaDevices.getUserMedia){navigator.mediaDevices.getUserMedia(constraints).then(success).catch(error);}else if (navigator.webkitGetUserMedia) {navigator.webkitGetUserMedia(constraints,success,error);}else if (navigator.mozGetUserMedia) {navigator.mozGetUserMedia(constraints,success,error);}else if (navigator.getUserMedia) {navigator.getUserMedia(constraints,success,error)}}let video = document.getElementById('video');let canvas = document.getElementById('canvas');let context = canvas.getContext('2d');//成功回调function success(stream){video.srcObject = stream;video.play();}//失败回调function error(error) {console.log("访问用户媒体失败");}//开启摄像头if (navigator.mediaDevices.getUserMedia || navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia) {getUserMedia({video:{width:500,height:500}},success,error)}else {alert("不支持");}//实现拍照的功能function dd(){context.drawImage(video,0,0,500,500);}//下面的代码是保存canvas标签里的图片并且将其按一定的规则重命名var type = 'jpg';var _fixType = function(type) {type = type.toLowerCase().replace(/jpg/i, 'jpeg');var r = type.match(/png|jpeg|bmp|gif/)[0];return 'image/' + r;};var saveFile = function(filename){//获取canvas标签里的图片内容var imgData = document.getElementById('canvas').toDataURL(type);imgData = imgData.replace(_fixType(type),'image/octet-stream');var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');save_link.href = imgData; //base64码save_link.download = filename;//图片名称var divbox=document.getElementById("box");divbox.innerText=imgData;var event = document.createEvent('MouseEvents');event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);save_link.dispatchEvent(event);};// 下载后的文件名规则var filename =11111+ '.' + type;</script>
</html>

原生js 调用电脑摄像头完成拍照相关推荐

原生js调用手机拍照功能
原生js调用手机拍照功能此功能主要用于混合App开发时手机拍照上传图片的功能! 话不多说直接上代码! 注:此代码在浏览器中运行时会报错,必须打开调试功能在手机上运行才可以! // html部分 // ...
原生JS调用打印预览页面并实现打印文件流图片（亲测有效）
在工作中我们经常会遇到使用浏览器预览打印页面并实现文件打印,那么如何才能够在打印预览页面中显示图片呢?希望看完这篇文章对您有所帮助! 1. 原生JS调用打印预览页面 2. 在打印预览页面加载图片使用 ...
摄像头网页服务器,js调用本地摄像头拍照并上传到web服务器
[实例简介] js调用本地摄像头拍照并上传到web服务器.后台使用java实现图片的接收和存储,上传的图片默认保存到项目下的images文件夹中. [实例截图] [核心代码] MyCamera └── ...
java 调用电脑摄像头并拍照
java 调用电脑摄像头 1 在myeclipse中新建一个项目,然后我们需要引用以下三个依赖包 2 在项目下创建一个类运行main方法后会弹出一个窗体(这个相当是java版的WCF) 2 JAVA ...
Python 微信机器人：调用电脑摄像头时时监控功能实现演示，调用电脑摄像头进行拍照并保存
我想要做的就是用微信遥控电脑,电脑拍照后用微信进行接收.这样我就能时时监测到电脑摄像头范围内的景象了. 我们需要的是 VideoCapture 库,获取方式如下: lfd.uci.edu下载然后直接 ...
原生js调用json方法
原文链接 Ajax基础 ajax:无刷新数据读取,读取服务器上的信息 HTTP请求方法: GET:用于获取数据,如浏览帖子 ajax.judgeXmlHttpRequest('get', 'index ...
JS调用本地摄像头拍照（兼容各大浏览器及IE8+）
最近做的项目遇到了个难题,使用video+canvas+getUserMedia()写的调用本地摄像头拍照不兼容IE. 原因:IE8及以下不支持HTML5标签:video和canvas:IE11及以下 ...
html5 调用摄像头支持IE,JS调用本地摄像头拍照（兼容各大浏览器及IE8+）
最近做的项目遇到了个难题,使用video+canvas+getUserMedia()写的调用本地摄像头拍照不兼容IE. 原因:IE8及以下不支持HTML5标签:video和canvas:IE11及以下 ...
原生Js调用Fetch Api请求接口（新的Ajax解决方案）
Fetch Api Fetch Api是新的ajax解决方案,Fetch会返回Promise:Fetch不是ajax的进一步封装,而是原生js,没有使用XMLHttpRequest对象. 前端与后端交 ...

原生js 调用电脑摄像头完成拍照

原生js 调用电脑摄像头完成拍照

人脸登录新发版1.0x

原生js 调用电脑摄像头完成拍照相关推荐

最新文章

热门文章