js实现调用摄像头拍照功能

<!DOCTYPE html>
<html lang="en">
<head><!-- 样式部分可以忽略 --><style>* {padding: 0;margin: 0;}div {width: 100vw;height: 100vh;display: flex;justify-content: center;align-items: center;}.btn {width: 100px;height: 50px;border-radius: 10px;background: #ff9900;line-height: 50px;text-align: center;color: #fff;box-shadow: 0 0 10px #999;}video, canvas {width: 300px;height: 300px;border: 5px solid #000;border-radius: 10px;margin-left: 5px;}</style>
</head>
<body><div><div id="play" class="btn">开启摄像</div><div id="take" class="btn">拍照</div><video id="video"></video><!-- 尽量在canvas标签上设置宽高 --><canvas id="canvas" width="300px" height="300px"></canvas></div><script>// 开启摄像document.getElementById('play').onclick = () => {let constraints = {// video属性设置video: {width: 300,height: 300},// audio属性设置audio: true}navigator.mediaDevices.getUserMedia(constraints).then(mediaStream => {// 成功返回promise对象，接收一个mediaStream参数与video标签进行对接document.getElementById('video').srcObject = mediaStreamdocument.getElementById('video').play()})// 失败就失败了}// 拍照、canvas绘制document.getElementById('take').onclick = () => {let ctx = document.getElementById("canvas").getContext('2d')ctx.drawImage(document.getElementById("video"), 0, 0, 300, 300)}</script>
</body>
</html>

js实现调用摄像头拍照功能相关推荐

js 如何调用摄像头拍照
今天业务逻辑需要人脸验证,需要通过调用摄像头获取人脸来调用接口做对比,所以学习了一下js关于调用摄像头拍照.主要通过video调用摄像头和canvas截取画面. 话不多说直接上代码: <!DOC ...
jquery.webcam.js实现调用摄像头拍照兼容各个浏览器
jquery.webcam.js实现调用摄像头拍照兼容各个浏览器 1.demo 可直接复制使用,需要在环境里运行. 2.所需 js 文件和 swf 控件可在官方博客下载,地址http://www.xa ...
h5前端调用android拍照功能,H5中，嵌入式webview中，调用摄像头拍照功能的实现
参考资料: 1.https://github.com/robnyman/robnyman.github.com/tree/master/camera-api[老外写的demo] 2.https://w ...
初识二维码第二十讲二维码解码程序的组件之一摄像头拍照功能
初识二维码第二十讲二维码解码程序的组件之一摄像头拍照功能解码程序的第一个环节是通过摄像头这个硬件,得到二维码的图片. 对摄像头的工作原理来说,简单的描述如下:1是从摄像头得到模拟信号, ...
react调用摄像头拍照
React调用摄像头拍照场景在一些移动app的个人登陆页面往往有头像的地方,我们可以根据自己的喜好随意的更换我们的头像.那么在react-native的项目中如果轻松的实现这一功能,下面有一些简单的 ...
原生js调用手机拍照功能
原生js调用手机拍照功能此功能主要用于混合App开发时手机拍照上传图片的功能! 话不多说直接上代码! 注:此代码在浏览器中运行时会报错,必须打开调试功能在手机上运行才可以! // html部分 // ...
Ionic系列——调用摄像头拍照和选择图库照片功能的实现
2019独角兽企业重金招聘Python工程师标准>>> 1.需求描述最近要做一个功能就是调用摄像头拍照,然后上传照片的功能,或者直接打开图库选择照片然后上传. 2.准备 ①.添加插 ...
h5调用摄像头+拍照+上传图片-----h5+js+ajax
敬请关注博客,后期不断更新优质博文,谢谢项目中需要用到调用摄像头拍照并上传照片到后台,特此记录:如有不足,望广大同行们批评指出. 1,前端页面 visitor/touch/touchIndex/li ...
pc 和手机调用摄像头拍照获取照片好用
前端何如在代码中使用摄像头拍照功能 demo 部署服务器可以测试 <!DOCTYPE html> <html lang="en"><head>& ...
JavaFX调用摄像头拍照
JavaFX初体验初谈JavaFx 普通页面的实现 JavaFX调用摄像头拍照安装Scene Builder 背景: 最近有做一个web项目用JavaFx做成客户端的需求,从第一次听说JavaFx ...

js实现调用摄像头拍照功能

js实现调用摄像头拍照功能

js实现调用摄像头拍照功能相关推荐

最新文章

热门文章