js 调用摄像头拍照

本文主要介绍，js+canvas+video ，调用本地摄像头，实现拍照效果，代码如下，供大家参考学习

<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><video width="200px" id="video" height="150px"></video><canvas width="200px" id="canvas" height="150px"></canvas><p><button id="start">打开摄像头</button><button id="snap">截取图像</button><button id="close">关闭摄像头</button></p>
</body>
<script>// 声明变量var canvas = document.getElementById('canvas'),context = canvas.getContext('2d'),video = document.getElementById("video"),snap = document.getElementById("snap"),close = document.getElementById("close"),start = document.getElementById("start"),MediaStreamTrack;// 点击打开摄像头start.addEventListener('click', function () {if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {navigator.mediaDevices.getUserMedia({video: true,// audio: true}).then(function (stream) {console.log(stream);MediaStreamTrack=typeof stream.stop==='function'?stream:stream.getTracks()[1];try{video.src=window.URL.createObjectURL(stream);}catch(e){  video.srcObject = stream;}video.play();}).catch(function(err){console.log(err);});}else if(navigator.getMedia){navigator.getMedia({video: true}).then(function (stream) {console.log(stream);MediaStreamTrack=stream.getTracks()[1];video.src=(window.webkitURL).createObjectURL(stream);video.play();}).catch(function(err){console.log(err);});}});// 截图snap.addEventListener('click', function () {context.drawImage(video, 0, 0,200,150);});// 关闭按钮close.addEventListener('click', function () {MediaStreamTrack && MediaStreamTrack.stop();});
</script>
</html>

js 调用摄像头拍照相关推荐

微信js调用摄像头拍照上传_微信JSSDK实现打开摄像头拍照再将相片保存到服务器...
在微信端打开手机摄像头拍照,将拍照图片保存到服务器上需要使用到微信的JSSDK接口,主要使用到了拍照或从手机相册中选图接口(chooseImage),上传图片接口(uploadImage) 参考资料: ...
js调用摄像头拍照并访问后端代码
1.先上效果(注意我的摄像头是打开的这里获取的是实时的视频流): 图略,太丑了决定删了 2.index.html <!-- Copyright (c) 2018 ml5This software ...
JS调用摄像头拍照，上传图片并显示到前端页面
本文实例为大家分享了JS实现截取视频画面的具体代码,供大家参考,具体内容如下: index.jsp 展示界面,按钮点击拍照,将拍照图片显示 <img id="showImage_img ...
jquery.webcam.js实现调用摄像头拍照兼容各个浏览器
jquery.webcam.js实现调用摄像头拍照兼容各个浏览器 1.demo 可直接复制使用,需要在环境里运行. 2.所需 js 文件和 swf 控件可在官方博客下载,地址http://www.xa ...
h5调用摄像头+拍照+上传图片-----h5+js+ajax
敬请关注博客,后期不断更新优质博文,谢谢项目中需要用到调用摄像头拍照并上传照片到后台,特此记录:如有不足,望广大同行们批评指出. 1,前端页面 visitor/touch/touchIndex/li ...
js 如何调用摄像头拍照
今天业务逻辑需要人脸验证,需要通过调用摄像头获取人脸来调用接口做对比,所以学习了一下js关于调用摄像头拍照.主要通过video调用摄像头和canvas截取画面. 话不多说直接上代码: <!DOC ...
原生js调用手机拍照功能
原生js调用手机拍照功能此功能主要用于混合App开发时手机拍照上传图片的功能! 话不多说直接上代码! 注:此代码在浏览器中运行时会报错,必须打开调试功能在手机上运行才可以! // html部分 // ...
vue实现PC端调用摄像头拍照人脸录入、移动端调用手机前置摄像头人脸录入、及图片旋转矫正、压缩上传base64格式/文件格式
PC端调用摄像头拍照上传base64格式到后台,这个没什么花里胡哨的骚操作,直接看代码 (canvas + video) <template><div><!--开启摄像头 ...
JavaFX调用摄像头拍照
JavaFX初体验初谈JavaFx 普通页面的实现 JavaFX调用摄像头拍照安装Scene Builder 背景: 最近有做一个web项目用JavaFx做成客户端的需求,从第一次听说JavaFx ...
js调用摄像头并截图
js调用摄像头并截图 <!DOCTYPE html> <html><head><meta charset="utf-8"><t ...

js 调用摄像头拍照

js 调用摄像头拍照相关推荐

最新文章

热门文章