H5利用JS调用摄像头实现拍照效果

首先不说废话，直接上代码的测试效果

利用canvas画布将视频当前帧转换成图片的实例，其中用到了 mediaDevices.getUserMedia 方法。该方法提示用户允许使用媒体输入，产生包含所请求类型的媒体轨道。包括视频轨道（由诸如照相机，视频记录设备，屏幕共享服务等的硬件或虚拟视频源产生），音频轨道（类似地，由物理或虚拟音频源，如麦克风，A / D转换器等），以及其他可能的轨道类型。

它返回一个 Promise 解析为一个 MediaStream 对象。用户如果拒绝许可，或者匹配媒体不可用，则请求会被拒绝，抛出 PermissionDeniedError 或 NotFoundError 错误。
注意：该方法只适用于本地和 https 请求，http 会提示没有权限，报 PermissionDeniedError 错误。
代码如下:

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>test</title><meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"><meta name="keywords" content="test"><meta name="description" content="test"><link rel="shortcut icon" href="favicon.ico"><style>#camera{float: left;margin: 20px;}#contentHolder{width: 300px;height: 300px;margin-bottom: 10px;}#btn_snap{margin: 0 auto;border: 1px solid #f0f0f0;background: #5CACEE;color: #FFF;width: 100px;height: 36px;line-height: 36px;border-radius: 8px;text-align: center;cursor: pointer;cursor: pointer;/*禁止选择*/-webkit-touch-callout: none; /* iOS Safari */-webkit-user-select: none; /* Chrome/Safari/Opera */-khtml-user-select: none; /* Konqueror */-moz-user-select: none; /* Firefox */-ms-user-select: none; /* Internet Explorer/Edge */user-select: none; /* Non-prefixed version, currently not supported by any browser */}#imgBoxxx{width: 200px;margin: 60px 20px 20px;}
</style>
</head><body><div id="camera"><div id="contentHolder"><video id="video" width="300" height="300" autoplay></video><canvas style="display:none;" id="canvas" width="300" height="300"></canvas></div><div id="btn_snap">拍照</div>
</div></body>
<script>var canvas = document.getElementById("canvas"),pzBtn = document.getElementById("btn_snap"),context = canvas.getContext("2d"),video = document.getElementById("video");alert('该页面会调用您的摄像头')// 旧版本浏览器可能根本不支持mediaDevices，我们首先设置一个空对象if (navigator.mediaDevices === undefined) {navigator.mediaDevices = {};}// 一些浏览器实现了部分mediaDevices，我们不能只分配一个对象// 使用getUserMedia，因为它会覆盖现有的属性。// 这里，如果缺少getUserMedia属性，就添加它。if (navigator.mediaDevices.getUserMedia === undefined) {navigator.mediaDevices.getUserMedia = function (constraints) {// 首先获取现存的getUserMedia(如果存在)var getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia;// 有些浏览器不支持，会返回错误信息// 保持接口一致if (!getUserMedia) {return Promise.reject(new Error('getUserMedia is not implemented in this browser'));}//否则，使用Promise将调用包装到旧的navigator.getUserMediareturn new Promise(function (resolve, reject) {getUserMedia.call(navigator, constraints, resolve, reject);});}}var constraints = { audio: false, video: {width: 720,height:720} }navigator.mediaDevices.getUserMedia(constraints).then(function (stream) {var video = document.querySelector('video');// 旧的浏览器可能没有srcObjectif ("srcObject" in video) {video.srcObject = stream;} else {//避免在新的浏览器中使用它，因为它正在被弃用。video.src = window.URL.createObjectURL(stream);}video.onloadedmetadata = function (e) {video.play();};}).catch(function (err) {console.log(err.name + ": " + err.message);});pzBtn.addEventListener("click", function () {// 点击，canvas画图context.drawImage(video, 0, 0, 300, 300);// 获取图片base64链接var image = canvas.toDataURL('image/png');// 定义一个imgvar img = new Image();//设置属性和srcimg.id = "imgBoxxx";img.src = image;//将图片添加到页面中document.body.appendChild(img);// base64转文件function dataURLtoFile(dataurl, filename) {var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);while (n--) {u8arr[n] = bstr.charCodeAt(n);}return new File([u8arr], filename, {type: mime});}console.log(dataURLtoFile(image, 'aa.png'));});
</script>
</html>

H5利用JS调用摄像头实现拍照效果相关推荐

Html-网页调用摄像头并拍照效果
给大家分享一个web端,网页调取摄像头并拍照保存照片的代码,感觉挺有意思的,代码是我面向百度编程找到的.... 以下是效果图,主要就是用到了强大的JS 代码 <!DOCTYPE html> ...
用js调用摄像头实现拍照功能兼容到ie8
最近公司要求做个项目刷脸登陆要求既能兼容高版本浏览器,又要能兼容到ie8及ie以上,欧米噶,虽然ie让我脑壳疼,但是还是得解决,在网上看了很多资料,最终选用jquery.webcam来实现ie的拍照 ...
Node.js 通过https服务器利用js调用网络摄像头
前言最近写了一个js调用摄像头的代码,整体实现是非常简单,但是放到服务器上,通过外网访问后就会出现一个警告我们需要通过js调用摄像头,但在此之前我们需要创建一个https服务器.所以,这篇博文就是 ...
利用JS调用手机摄像头小功能源码
介绍: 一个小功能源码,利用JS调用手机摄像头,当访问网址后就能拍摄照片,前提是客户端给了权限. 1.由于系统安全机制,ios系统必须使用自带的Safari浏览器(或者第三方APP调用的是Safari ...
前端js调用摄像头进行录像并传到后端
js调用摄像头录像并传到后端参考自https://juejin.im/entry/5b91e8e7f265da0ac55e2cd6?tdsourcetag=s_pcqq_aiomsg 项目要求前端h ...
原生js 调用电脑摄像头完成拍照
原生js 调用电脑摄像头完成拍照人脸登录新发版1.0x 免费开源,保姆级别教程人脸登录地址 1 ,完成拍照后可转换成base64码,你可以对当前base64码进行操作,当初我就利用这个功能点完成前端 ...
JS调用摄像头、实时视频流上传（一次不成功的试验）
JS调用摄像头.实时视频流上传(一次不成功的试验) 思路前端调用摄像头,获取视频流,从视频流中取一帧转图片,用websocket上传图片. 研究了一下发现了WebRTC这种技术,看到有博客说一些直播 ...
js调用摄像头并截图
js调用摄像头并截图 <!DOCTYPE html> <html><head><meta charset="utf-8"><t ...
vue中如何调用ios摄像头_如何使用Vue2.0调用摄像头进行拍照
这次给大家带来如何使用Vue2.0调用摄像头进行拍照,使用Vue2.0调用摄像头进行拍照的注意事项有哪些,下面就是实战案例,一起来看一下. import {Exif} from './exif.js' ...
摄像头自建html直播,html5调用摄像头实现拍照
html5调用摄像头实现拍照拍照 var video=document.getElementById("video"); var context=canvas.getContex ...

H5利用JS调用摄像头实现拍照效果

H5利用JS调用摄像头实现拍照效果相关推荐

最新文章

热门文章