H5调用手机摄像头，实时拍照上传（旧）

已于 2022-04-15 10:24:17 修改
阅读量3.9w 收藏 48
点赞数 4
分类专栏： CSS 3 文章标签： 前端框架
于 2018-07-05 16:55:11 首次发布
本文为CSDN博主原创文章，不允许其他平台转载。擅自转载至其他平台，严肃追究！
本文链接：https://blog.csdn.net/qq_35393869/article/details/80924677
版权

H5调用手机摄像头，完成拍照，实时上传（旧）

项目开发中，偶尔会遇到网页中调用手机摄像头，通过相册选择或直接实时拍照的方式，完成图片上传的功能型需求。

  • 今天，就通过一个小的案例，演示一下完整的实现流程【效果截图省略】。
  • 仅供参考，代码年限久远，请联系博主获取最新资源。

案例全部代码，示下：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<link rel="stylesheet" href="statics/css/udy_css/mui.min.css">
	<link rel="stylesheet" href="statics/css/udy_css/change_info.css">
	<title>修改资料</title>
	<!--[if lte IE 8]>
		<script type="text/javascript">alert("您的浏览器版本较低，请升级版本以获得更好的体验！");</script>
	<![endif]-->
	<style>
		body{line-height: 0;}img{border: none;}
		.mui-input-group .mui-input-row.bd0:after{height: 0;}
		.mui-input-group .mui-input-row.bd0{border-bottom: #c8c7cc 1px solid;}
		.mui-card{position: relative;border:#c8c7cc 1px dotted;padding: 8px;-webkit-box-shadow:none;box-shadow: none;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;margin-bottom: 30px;}
		/*图片背景*/
		.mui-card-header:after{height: 0;}
		.camerabox{width: 100%;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;}
		.beforecamera{padding: 0;margin:0;margin-top: 20px;border:none;}
		.beforecamera .mui-card-header{width:100%;text-align: center;}
		.beforecamera .mui-card-header>div{width: 100%;height:100%;font-weight: normal;color: #09f;}
		/*提交按钮*/
		.mui-btn{height: 50px;box-sizing: border-box;line-height: 50px;padding: 0;font-size: 16px;}
		/*图形按钮*/
		.fileInpBtn{
        	position:absolute;left:2;top: 0;
        	width:100%;height:100%;
        	cursor:pointer;
        	filter:alpha(opacity:0);opacity:0;
        	border-color: orange;
        }
        /*.camerabox{
        	position:absolute;left:2;top: 0;
        	border-color: red;
        }*/
	</style>
</head>

<body>
	<header class="mui-bar mui-bar-nav">
		<a class="mui-icon mui-icon-left-nav mui-pull-left" href="javascript:history.go(-1);"></a>
		<h1 class="mui-title">修改资料</h1>
	</header>
	<div class="mui-content">
		<form class="mui-input-group" action="" method="post" name="">
			
			<div class="mui-input-row">
				<label>姓名</label>
				<input type="text" class="mui-input-clear" placeholder="仅限中文">
			</div>	
			<div class="mui-input-row">
				<label>手机号码</label>
				<input type="text" class="mui-input-clear" placeholder="输入11位手机号码">
			</div>
			<div class="mui-input-row bd0">
				<label>身份证号码</label>
				<input type="text" class="mui-input-clear" placeholder="输入15或18位身份证号码">
			</div>
			
			
			<div class="mui-card beforecamera">
				<div class="mui-card-header">
					<div>请拍摄证件实体，并录入信息</div>
				</div>
			</div>
			<!--身份证主页-->			
			<div class="mui-card">
				<div class="mui-card-content">
					<img class="camerabox" id="newImage" src="statics/images/udy_images/idcard_home.png" />
					<input class="fileInpBtn" id="fileInpBtn" type="file"  onchange="showPicture(this)" accept="image/*"  multiple> 
				</div>
			</div>
			<!--身份证副页-->	
			<div class="mui-card">
				<div class="mui-card-content">
					<img class="camerabox" id="newImage2" src="statics/images/udy_images/idcard_vice.png" />
					<input class="fileInpBtn" id="fileInpBtn2" type="file"  onchange="showPicture2(this)" accept="image/*"  multiple> 
				</div>
			</div>
			<!--毕业证主页-->	
			<div class="mui-card">
				<div class="mui-card-content">
					<img class="camerabox" id="newImage3" src="statics/images/udy_images/gradution_home.png" />
					<input class="fileInpBtn" id="fileInpBtn3" type="file"  onchange="showPicture3(this)" accept="image/*"  multiple> 
				</div>
			</div>
			<!--其他证件-->	
			<div class="mui-card">
				<div class="mui-card-content">
					<img class="camerabox" id="newImage4" src="statics/images/udy_images/othercard_home.png" />
					<input class="fileInpBtn" id="fileInpBtn4" type="file"  onchange="showPicture4(this)" accept="image/*"  multiple> 
				</div>
			</div>
						
			
			<div class="mui-button-row" style="height: auto;padding: 20px;">
				<!--提交按钮-->
				<button type="submit" class="mui-btn mui-btn-block mui-btn-primary" onclick="return true;">确认无误，立即修改</button>&nbsp;&nbsp;
				<button type="button" class="mui-btn mui-btn-block mui-btn-danger" onclick="javascript:history.go(-1);">取消</button>
				
			</div>
		</form>
	</div>
	
	
	<script src="statics/js/udy_js/mui.min.js"></script>
	<script>
		function showPicture(imgFile){
			alert("url地址："+window.URL.createObjectURL(imgFile.files[0]));
			/*获取上传文件的路径，并赋给img标签*/
			document.getElementById("newImage").src = window.URL.createObjectURL(imgFile.files[0]);
		}
		
		function showPicture2(imgFile2){
			alert("url地址2："+window.URL.createObjectURL(imgFile2.files[0]));
			/*获取上传文件的路径，并赋给img标签*/
			document.getElementById("newImage2").src = window.URL.createObjectURL(imgFile2.files[0]);
		}
		
		function showPicture3(imgFile3){
			alert("url地址3："+window.URL.createObjectURL(imgFile3.files[0]));
			/*获取上传文件的路径，并赋给img标签*/
			document.getElementById("newImage3").src = window.URL.createObjectURL(imgFile3.files[0]);
		}
		
		function showPicture4(imgFile4){
			alert("url地址4："+window.URL.createObjectURL(imgFile4.files[0]));
			/*获取上传文件的路径，并赋给img标签*/
			document.getElementById("newImage4").src = window.URL.createObjectURL(imgFile4.files[0]);
		}
	</script>
</body>
</html>
注意：
  1. 使用了代码调用手机相机：
    <input type ="file" accept="image/*" multiple>
    使用前，注意事项，如下：
  2. 代码中的img标签的id类，对应input type ="file"的点击事件，以及页面底部的js函数，都是一 一对应的关系！
  3. 代码中，对于不同浏览器的兼容不同，手机中内置浏览器和其他厂商的浏览器.apk，对于手机相机的权限（开启陀螺仪权限）不尽相同。
  4. 这其中差异性取决于手机型号版本的差异性、浏览器的差异性、浏览器权限的差异性等多个因素。

以上就是关于“ H5调用手机摄像头，实时拍照上传 ” 的全部内容。

草巾冒小子
关注
  • 4
    点赞
  • 踩
  • 48
    收藏
    觉得还不错? 一键收藏
  • 7
    评论
专栏目录
H5实现调用本地摄像头实现实时视频以及拍照功能
翾的博客
11-14 8万+
效果这是柚子皮…博主就穿个小背心就不露脸了…getUserMedia APIHTML 5 的getUserMedia API提供了访问媒体的能力, 基于该特性, 开发者可以不依赖任何浏览器插件下去访问视频和音频等设备.旧版API : navigator.getUserMedia 新版API : navigator.mediaDevices.getUserMedia旧版语法: getUserMedi
手机端 vant 列表直接拍照, 传参 对应数据 id
最新发布
懒虫的博客
06-06 164
手机端 vant 列表直接拍照, 传参 对应数据 id。
H5 页面通过navigator.mediaDevices.getUserMedia调用手机摄像头拍照上传
weixin_46600931的博客
11-09 5808
注：使用navigator.mediaDevices.getUserMedia 需要使用https请求协议否者视为不安全，无法访问，开发阶段需要将启动改为https 在package.json中。注意切换摄像头时要注意，一定要像关闭摄像头不然会有问题在部分手机上。需求： 某知名化妆品牌，要做个在线问卷调查。授权，默认前置，切换后置。
移动端H5实现拍照功能的两种方法
qq_17189095的博客
07-17 6364
移动端H5实现拍照功能的两种方法。
h5端调用手机摄像头实现扫一扫功能
zxc123401的博客
12-26 2678
h5调用摄像头实现扫一扫
h5页面使用js实现图片上传（安卓用户也可拍摄、相册二选一）
山有木兮木有枝 心悦君兮君不知
09-14 4406
H5实现图片拍照上传
H5调用摄像头扫码详解
达拉崩巴斑得贝迪卜多比鲁翁_
08-26 6029
是一项实时通讯技术，它允许网络应用或者站点，在不借助中间媒介的情况下，建立浏览器之间 点对点的连接，实现视频流和（或）音频流或者其他任意数据的传输。WebRTC包含的这些标准使用户在无需安装任何插件或者第三方的软件的情况下，创建 点对点的数据分享和电话会议成为可能。重要接口接口：是一个媒体内容的流.。一个流包含几个轨道，比如视频和音频轨道。...
vue H5页面调用手机相机拍照/图片上传
wwf1225的博客
12-20 1109
拍照
h5调起手机拍照功能
weixin_42125810的博客
02-13 851
最近做了h5调起手机拍照功能，记录一下
H5调用摄像头和扫一扫功能，亲测可用
05-24
1. 拍照主要使用 navigator.mediaDevices.getUserMedia 2. 扫一扫有两种实现方式： a. zepto + qrcode 通过相册图片解析 b. html5-qrcode 通过拍照... 说明: H5调用摄像头要在Https 协议下，PC端和手机端都要测试。
H5实现web调用摄像头在线照相
11-20
以下是对"H5实现web调用摄像头在线照相"这一主题的详细解释。 首先，我们要了解HTML5中的MediaDevices接口，这是实现在线照相功能的核心。MediaDevices接口提供了一系列方法来获取用户的音频、视频输入源，其中包括...
HTML5调用手机摄像头拍照的实现思路及代码
12-14
小编将思路提供给了大家，学编程最重要的是实践，我这虽然有完善的代码，但是希望大家都可以自己写出属于自己的代码 HTML5 The Media Capture API提供了对摄像头的可编程访问，用户可以直接用getUserMedia获得摄像头提供的视频流。但实际上用html5调用手机摄像头存在很多问题： 1）谷歌的发布的Chrome到了21版本后，才新增了一个用于高质量视频音频通讯的getUserMedia API，该API允许Web应用程序访问摄像头和麦克风,其他手机浏览器只有opera支持html5调用本地拍照功能 2）两个浏览器均不支持访问多个摄像头：chrome不支持访问后置摄像头，pe
HTML5调用手机摄像头拍照
04-01
HTML5 The Media Capture API提供了对摄像头的可编程访问，用户可以直接用getUserMedia获得摄像头提供的视频流。具体内容参考： http://blog.sina.com.cn/s/blog_4ad7c2540101lnak.html
基于html5、JS实现的拍照上传图片
01-26
原理：调出摄像头，拍照保存到画布，将图片URi传送到后台
Html5调用手机摄像头并实现人脸识别的实现
12-12
混合App开发，原生壳子+webApp，在web部分调用原生摄像头功能并且在网页指定区域显示摄像头内容，同时可以手动拍照并进行人脸识别，将识别结果显示在网页上。 技术栈 vue、Html5、video标签、Android、IOS、百度AI ...
H5调用摄像头和扫一扫功能测
08-29
1. 拍照主要使用 navigator.mediaDevices.getUserMedia 2. 扫一扫有两种实现方式： a. zepto + qrcode 通过相册图片解析 b. html5-qrcode 通过拍照解析...说明: H5调用摄像头要在Https 协议下，PC端和手机端都要测试。
H5页面通过浏览器调用摄像头拍照
热门推荐
chen_ai_tao的博客
05-09 1万+
H5页面通过浏览器调用摄像头拍照
H5实现移动端拍照、照片数量限制、图片压缩、上传图片功能（代码完整，即写即用）
wangchaohpu的博客
04-02 569
1）readerfile，返回base64的图片。（3）接收压缩后的base64照片，组装前端。CSS代码（style.css）（1）拍照、相册选择。（4）其他用到的函数。
h5调用手机摄像头h5详细代码
05-16
以下是调用手机摄像头的H5代码： ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>调用摄像头</title> </head> <body> <video id="video" width="640" height="480" autoplay></video> <button id="snap">拍照</button> <canvas id="canvas" width="640" height="480"></canvas> <script> var video = document.getElementById('video'); var canvas = document.getElementById('canvas'); var snap = document.getElementById('snap'); var ctx = canvas.getContext('2d'); // 调用摄像头 navigator.mediaDevices.getUserMedia({ video: true, audio: false }) .then(function(stream) { video.srcObject = stream; video.play(); }) .catch(function(err) { console.log('调用摄像头失败', err); }); // 拍照 snap.addEventListener('click', function() { ctx.drawImage(video, 0, 0, canvas.width, canvas.height); }); </script> </body> </html> ``` 以上代码会在网页中显示一个视频区域和一个拍照按钮。当用户点击拍照按钮时，会在canvas中生成一张截图。 需要注意的是，getUserMedia() 方法需要在 HTTPS 网站上才能调用成功。如果需要在本地测试，可以使用 localhost 或者使用工具生成 HTTPS 证书。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 7
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值