H5 调用摄像头进行拍照

如果人生是一个圆,那么总会有一个人是你最终的切线。

注意: 必须使用https哦~

功能点

拍照
- 微信内置浏览器 (iPhone13 Pro)
- QQ内置浏览器 (小米 Mix3)
- QQ内置浏览器 (iPhone13 Pro)
- 自带浏览器 (小米 Mix3)
- 自带浏览器 (iPhone13 Pro)
保存图片
- 微信内置浏览器 (iPhone13 Pro)
- QQ内置浏览器 (小米 Mix3)
- QQ内置浏览器 (iPhone13 Pro)
- 自带浏览器 (小米 Mix3)
- 自带浏览器 (iPhone13 Pro)

写法上没有做很多兼容性的处理，大概写了一下逻辑。

效果

代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><script src="https://unpkg.com/vconsole@latest/dist/vconsole.min.js"></script><style>body {margin: 0;}html,body,video,canvas {width: 100%;height: 100%;}.take-photo,.save-photo {width: 70px;height: 70px;background-image: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);border-radius: 50%;position: absolute;left: 50%;bottom: 120px;transform: translateX(-50%);}.save-photo {background-image: linear-gradient(120deg, #d4fc79 0%, #96e6a1 100%);}.save-photo:active,.take-photo:active {opacity: .7;}</style>
</head><body><video></video><canvas></canvas><div class="take-photo"></div><div class="save-photo"></div><script>let vConsole = new window.VConsole();let video = document.querySelector('video');let canvas = document.querySelector("canvas");let taskPhoto = document.querySelector('.take-photo')let savePhoto = document.querySelector('.save-photo')canvas.hidden = true;taskPhoto.hidden = true;savePhoto.hidden = true;if (navigator.mediaDevices.getUserMedia) {// facingMode: "user" 前置摄像头// facingMode: { exact: "environment" } 强制使用后置摄像头let constraints = { audio: false, video: { width: document.body.clientHeight, height: document.body.clientWidth, facingMode: { exact: "environment" } } };navigator.mediaDevices.getUserMedia(constraints).then(function (mediaStream) {video.setAttribute('autoplay', '');video.setAttribute('muted', '');video.setAttribute('playsinline', '');video.srcObject = mediaStream;taskPhoto.hidden = false;}).catch(function (err) { console.log(err.name + ": " + err.message); }); // 总是在最后检查错误} else console.log("您的浏览器不支持");taskPhoto.addEventListener('click', () => {let c = canvas.getContext('2d');canvas.width = video.clientWidth;canvas.height = video.clientHeight;c.drawImage(video, 0, 0, video.clientWidth, video.clientHeight);video.pause();canvas.hidden = false;savePhoto.hidden = false;taskPhoto.hidden = true;})savePhoto.addEventListener('click', () => {let a = document.createElement('a');a.href = canvas.toDataURL()a.download = "照片.png";a.click();savePhoto.hidden = true;canvas.hidden = true;taskPhoto.hidden = false;video.play();});</script>
</body></html>

H5 调用摄像头进行拍照相关推荐

Atititjs h5调用摄像头视频聊天拍照功能相机功能录像attilax总结
分享一下我老师大神的人工智能教程!零基础,通俗易懂!http://blog.csdn.net/jiangjunshow 也欢迎大家转载本篇文章.分享知识,造福人民,实现我们中华民族伟大复兴! Atit ...
摄像头自建html直播,html5调用摄像头实现拍照
html5调用摄像头实现拍照拍照 var video=document.getElementById("video"); var context=canvas.getContex ...
在网页中调用摄像头实现拍照上传 - 高拍仪二次开发
在网页中调用摄像头实现拍照上传高拍仪二次开发在一些公共部门的办事处,比如银行.护照办理中心.税务等,我们可能会注意到办公桌上摆着这样一台机器.办公人员用它拍摄各种证件.文件.表格,有时候还 ...
c++ 二次开发良田高拍仪_在网页中调用摄像头实现拍照上传 - 高拍仪二次开发...
来源于 https://blog.csdn.net/weixin_40659738/article/details/78252562 在网页中调用摄像头实现拍照上传高拍仪二次开发在一些公共部门的 ...
Python+opencv调用摄像头实现拍照并保存
Python+opencv调用摄像头实现拍照并保存安装 OpenCV库详细源码注意事项安装 OpenCV库 pip install opencv-python 详细源码调用外接摄像头实现拍照 ...
Python进阶，使用 opencv 调用摄像头进行拍照
opencv 支持 Python 版本的模块叫作 opencv-p hon ,可直接使用 pip install opencv-python 令进行安装,但常常会因为网络等问题导致失 ...
vue中如何调用ios摄像头_如何使用Vue2.0调用摄像头进行拍照
这次给大家带来如何使用Vue2.0调用摄像头进行拍照,使用Vue2.0调用摄像头进行拍照的注意事项有哪些,下面就是实战案例,一起来看一下. import {Exif} from './exif.js' ...
chrome摄像头java_Chrome 谷歌浏览器调用摄像头并拍照上传 java示例
html页面: html5调用摄像头实现拍照拍照 var video=document.getElementById("video"); var context=canvas.g ...
h5调用摄像头+拍照+上传图片-----h5+js+ajax
敬请关注博客,后期不断更新优质博文,谢谢项目中需要用到调用摄像头拍照并上传照片到后台,特此记录:如有不足,望广大同行们批评指出. 1,前端页面 visitor/touch/touchIndex/li ...
用html5和javascript调用摄像头实现拍照功能
在机缘巧合之下,了解到用HTML5和javascript调用摄像头来实现拍照功能,今天就把大致原理写下来.页面布局很简单,就是一个input标签,两个HTML5元素video.canvas和一个but ...

H5 调用摄像头进行拍照

功能点

效果

代码

H5 调用摄像头进行拍照相关推荐

最新文章

热门文章