浏览器拍照

最新推荐文章于 2023-12-26 23:09:40 发布
最新推荐文章于 2023-12-26 23:09:40 发布
阅读量762 收藏 1
点赞数 1
分类专栏： 浏览器功能 文章标签： html html5 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47251938/article/details/119038380
版权

浏览器调用电脑摄像头进行拍照

效果图：

取景
成像
保存

   

实现原理=>

开启摄像头获取流，video加载实时影像，利用canvas绘画video的影像，canvas生成图片，转文件流上传或下载

实现拍照功能的主要三个要素：

1： navigator.mediaDevices.getUserMedia()  获取浏览器摄像头权限（包括录音设备）；

2：成功获取权限后，createObjectURL生成本地url赋值给video，开始播放视频；

3：点击拍照时，触发canvas对video的画面进行绘画。

有几种无法拍照的情况：

1：IE浏览器不支持navigator属性

2：访问路径为IP地址时

        浏览器有机制，在访问路径不安全时是不可以使用navigator属性的

        只有访问地址为localhost，https，file才可以

 3：摄像头被占用

下面贴出完整代码：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>拍照</title>
	<style>
		body{
			background: #B3B3B3
		}
		#cellphone{
			height: 575px;
			width: 310px;
			border-radius: 35px;
			border: 1px solid #000;
			margin:40px auto;
			background: #000;
		}
		#camera_content{
			margin: 20px,3px,0px,3px;
			width: 300px;
			height: 300px;
			margin: auto;
			background: #fff
		}
		.Water_drop{
			margin: auto;
			width: 166px;
			height: 20px;
			border: 1px solid #000;
			border-top: 0px;
			border-bottom-right-radius: 10px;
			border-bottom-left-radius: 10px;
			padding-top: 16px;
			background: #fff
		}
		.telephone_receiver{
			width: 125px;
			height: 6px;
			border-radius: 3px;
			border: 1px solid #000;
			margin-left: 5px;
			float: left
			
		}
		.camera{
			width: 8px;
			height: 8px;
			border-radius: 4px;
			border: 1px solid #000;
			float: left;
			margin-left: 5px
		}
		.flashlight{
			width: 8px;
			height: 8px;
			border-radius: 4px;
			margin-left: 5px;
			border: 1px solid #000;
			float: left
		}
		#setting{
			width: 308px;
			margin-top: 10px;
			margin-bottom: 16px
			
		}
		#setting i{
			display: inline-block;
			font-size: 35px;
			margin-left: 40px;
			color: #D8D8D8
		
		}
		#keystroke{
			width: 308px;
			margin-top: 32px;
		}
		#Photo_album,#btu{
			width: 70px;
			height: 70px;
			border: 1px solid #A7A7A7;
			border-radius: 35px;
			margin-left: 27px;
			float: left;
			background: #fff;
			cursor: pointer;
			
		}
		#btu{
			line-height: 70px;
			text-align:center;
			font-size: 26px;
			font-family: LiSu;
		}
		#Make_sure{
			width: 70px;
			height: 45px;
			border-radius: 25px;
			background: #fff;
			cursor: pointer;
			float: right;
			font-family: LiSu;
			margin-right: 20px;
			line-height: 45px;
			text-align:center;
			font-size: 20px;
			display: none
			
		}
		#Photo_album>img{
			width: 70px;
			height: 70px;
			border-radius: 35px;
		}
		#btu{
			margin-top: 38px;
		}
		#btu:active{
			margin-left: 30px;
			margin-top: 41px;
			width: 64px;
			height: 64px;
			border-radius: 32px;
		}
	</style>
</head>

<body>
	<div id="cellphone">
		<div class="Water_drop">
			<div class="camera"></div>
			<div class="telephone_receiver"></div>
			<div class="flashlight"></div>
		</div>
		<div id="setting">
			<i>♩</i>
			<i>♪</i>
			<i>♫</i>
			<i>♬</i>
		</div>
		<div id="camera_content">
			<video id="video" style="object-fit:cover;" height="300" width="300" autoplay></video>
			<canvas style="display:none;" id="canvas" height="300" width="300"></canvas>
		</div>
		<div id="keystroke">
			<div id="Photo_album">
				<img src="1564667419970.jpeg" id="Photo_al" alt="">
			</div>
			<div id="btu"></div>
			<div id="Make_sure">确定</div>
		</div>
		
	</div>	

	<script>
		//绑定id元素
		var cellphone = document.getElementById("cellphone"),
			camera_content = document.getElementById("camera_content"),
			video = document.getElementById("video"),
			canvas = document.getElementById("canvas"),
			content = canvas.getContext("2d"),
			Photo_album = document.getElementById("Photo_album"),
			Photo_al = document.getElementById("Photo_al"),
			btu = document.getElementById("btu"),
			Make_sure = document.getElementById("Make_sure"),
			Photo_album = document.getElementById("Photo_album"),
			imgbox,
			iden=true;
		//禁用右键
		cellphone.oncontextmenu = function(){
			return false;
		}

		//调用摄像头
		var constraints = {video: {width: 300,height:300}};
		navigator.mediaDevices.getUserMedia(constraints)
			.then(function(success){
				if("srcObject" in video){
					video.srcObject = success
				}else{
					video.src = window.URL.createObjectURL(success);
				}
                //流加载完毕后开始播放
				video.onloadedmetadata = function () {
					video.play();
				};
			})
			.catch(function(err){
				var Error = err.toString().split(":")[0];
				if(Error=="NotFoundError"){
					alert("检测不到摄像头！")
				}else if(Error=="NotAllowedError"){
					alert("请允许浏览器调用摄像头")
				}else{
					alert("请查看摄像头是否被占用！")
				}			
			})
		//==============按钮功能==============
		
		//拍照按钮 iden=true：拍照  false：重拍
		btu.onclick = function(){
			if(iden){
				Make_sure.style.display = "block"
				btu.innerHTML="重拍"
				iden=false;
				
				//拍照成功，生成图片
				//使用canvas进行绘图
				content.drawImage(video,0,0,300,300)
				
				// 将画布转成base64编码
				var image = canvas.toDataURL('image/jpg');
				
			
				//生成一张图片
				var img = new Image();
				//设置属性和src
				img.id = "imgbox";
				img.src = image;
				video.style.display="none"
				//将图片放到html中
				camera_content.append(img);
				imgbox = document.getElementById("imgbox");
				
				
			}else{
				imgbox.remove();//删除照片
				Make_sure.style.display = "none"
				btu.innerHTML=""
				iden=true;
				//重拍
				video.style.display="block"
			}
		}
		//确认
		Make_sure.onclick = function(){
			Photo_al.src = imgbox.src;
			imgbox.remove();//删除照片
			Make_sure.style.display = "none"
			iden=true;
			btu.innerHTML=""
			video.style.display="block";
			
		}
		
		//==============按钮功能==============
		
		
	
		

	
	</script>
</body>
</html>

尚稻山
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
通用浏览器调用摄像头拍照
07-01
通过浏览器调用摄像头拍摄，支持ie与非ie
安全浏览器照相机
weixin_43908479的博客
08-27 2350
安全浏览器照相机 安全浏览器相机可以在浏览网页的时候使用相机，不错过任何一个关键瞬间。 浏览器透明度可调，相机可5倍放大，在拍照取证、交通事故、文档学习中，都可以边上网，边拍照，方便灵活。 功能 浏览器：带有拍照功能的浏览器。 相册：App内建相册，照片不传入手机相册。 设置：相关功能设置 应用场景： 安全浏览器相机可以在浏览网页的时候使用相机，不错过任何一个关键瞬间。 浏览器透明度可调，相机可5倍放大，在拍照取证、交通事故、文档学习中，都可以边上网，边拍照，方便灵活。 ...
[WebRTC 02]如何使用浏览器给自己拍照
猫小妖的专栏
07-27 527
一、基础概念 1.音视频播放器播放原理 按照一定的时间间隔连续地播放从音视频文件中解码后的视频帧，每个视频帧直接的时间间隔非常小，小到人眼无法分辨，视觉上将一帧帧连起来就变成了动画。 2.帧的分类 1）非编码帧：非编码帧（没有被编码或者被解码后的帧），从摄像头获取的本身就是非编码帧，每一帧就是一幅独立的图像。格式一般是YUV、RGB。 2）编码帧：经过编码器（H264/H265、VP8/...
浏览器拍照控件
05-22
VB6开发的IE浏览器插件，调用Windows自带的avicap32.dll库，实现摄像头的拍照功能。
Web前端之浏览器拍照实现-浏览器原生API实现全像素拍照（不同于论坛大多数的拍照方法）
Three_ST的博客
07-07 1662
浏览器拍照 上面一篇是利用mediaStream获取视频流，通过视频流截图实现拍照功能，但是问题是像素和画质较差，对于有较高要求的场景不能满足，因此继续搜索相关资料 ，这方面的权威肯定是MDN，因此在MDN上搜素能够实现拍照的API，终于在搜素过程中发现了一个实验性功能，只有chromium webkit内核的浏览器才支持该功能。 ImageCapture() constructor 这个就是本次要讨论的功能，这个API能够调用相机实现拍照,也是从mediaStream中获取视屏流，但是这个是为了显示当前传
webcamjs兼容多浏览器调用摄像头拍照上传，兼容H5和flash
07-21
WebcamJS是一个强大的JavaScript库，专门设计用于在各种浏览器中实现摄像头拍照并上传的功能。它不仅支持HTML5的WebRTC接口，还通过Flash提供对老式浏览器的兼容性，包括Internet Explorer 8、9、10、11以及Edge。...
浏览器调取摄像头在线拍照,采集照片
05-06
总的来说，实现浏览器调用摄像头在线拍照并采集照片涉及HTML5的`<input type="file">`和`navigator.mediaDevices.getUserMedia`，JavaScript的`canvas`操作，以及可能的Java后端处理。通过合理的代码设计和兼容性...
js浏览器调用摄像头拍照
03-10
以上就是使用JavaScript和Canvas实现浏览器调用摄像头拍照功能的基本步骤和关键知识点。在实际开发中，还需要考虑兼容性问题，对于不支持这些特性的旧版浏览器，可能需要使用Flash或其他技术作为备选方案。同时，...
js通过浏览器调用摄像头并实现拍照
githubcurry
05-08 2625
生成图片是通过canvas画到网页上 <!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">
网页照相机——将网页拍照成图片
weixin_33814685的博客
05-25 682
2019独角兽企业重金招聘Python工程师标准>>> ...
在线打开PC摄像头并拍照
09-15
使用C#编写的Activex插件，在打开PC端的摄像头设备，该摄像头不能被占用，使用360等浏览器时需打开兼容模式，并允许Activex运行
QQ浏览噐怎么拍照识题 QQ浏览器拍照识题教程介绍说明
yisago的博客
06-24 2817
QQ浏览噐在最近推出了拍照识题的服务，有不少感兴趣的用户想知道应该怎么使用该功能。那么下面小编就为大家介绍了QQ浏览器拍照识题的方法，希望对你有所帮助。 QQ浏览器拍照识题的步骤： 1、现在进入了QQ浏览噐页面后，要是想使用拍照识题功能的话，用户需要下拉首页进入“识你所见”界面进行操作设置。 QQ浏览噐怎么拍照识题 QQ浏览器拍照识题教程介绍说明 2、接下来从“识你所见”的页面里选择“题目”选项，就可以开始使用手机拍照进行题目的搜索了。 QQ浏览噐怎么拍照识题 QQ浏览器拍照识题教程介绍说明 3、而在此之后
html5 调用摄像头 支持IE,JS调用本地摄像头拍照（兼容各大浏览器及IE8+）
weixin_32459553的博客
06-04 1976
最近做的项目遇到了个难题，使用video+canvas+getUserMedia()写的调用本地摄像头拍照不兼容IE。原因：IE8及以下不支持HTML5标签：video和canvas；IE11及以下所有版本，包括Edge都不支持getUserMedia()。所以，这几天在网上各种搜，发现想要兼容IE浏览器就只能使用Flash。解决方案方案一flash+as3.0+swfobject实现摄像头拍照方...
老版本浏览器调用本地摄像头拍照
qq_38652744的博客
03-25 350
// html <video autoplay playsinline id="video" width="400"></video> <canvas id="canvas" width="400" height="300" style="display: none;"></canvas> // js var video = $("#video")[0]; var deviceId; // 摄像头id var constraints = { .
使用C#实现一个可以预览图片，并且可以对图片进行自由裁剪预览的照相客户端
C_AJing的博客
01-22 907
一、前言 最近系统需要优化照相客户端，最开始的拍照客户端是使用浏览器插件实现的，不过兼容性不太好，然后使用java写了一款客户端，感觉还是有点臃肿，最近优化系统，决定重新使用C#实现了一个拍照客户端。 二、功能演示： 启动拍照客户端： 客户端启动以后，会默认选择第一个照相设备打开，你可以自由选择照相设备，如果是后插入照相设备，点击【刷新】按钮即可。 拍照： 点击【拍照】按钮，会进入刚刚拍摄的照片的预览界面，左侧是原图，右侧默认是原图按照一寸照片的缩放。如果你想裁剪图片，可以拖动红色的矩形框，然后
功能问题：如何在H5中实现拍照功能？3步搞定！
最新发布
m0_74802419的博客
12-26 1359
今天我们聊一聊，一个非常有趣且重要的问题，如何用原生js实现拍照功能？ 这时候，有的朋友会说，为什么要用原生js实现呀，这么麻烦还要自己动脑子，直接用第三方库多好呀。
H5页面通过浏览器调用摄像头拍照
chen_ai_tao的博客
05-09 1万+
H5页面通过浏览器调用摄像头拍照
js调用摄像头拍照并兼容ie浏览器
qq_41038309的博客
07-21 1044
jquery-webcam-plugin插件官方说是同时兼容谷歌、ie等浏览器，但是实际开发中我发现在谷歌浏览器并能用；设置完浏览器底部会有Relaunch按钮，点击重新启动浏览器(一定要记得重新启动浏览器)，就可以实现http协议下正常启动摄像头了（前提摄像头是允许模式下）想在ie浏览器中正常调用摄像头并拍照，可以借用jquery-webcam-plugin插件。3、在摄像头和麦克风一栏，点击进入“站点的摄像头和麦克风设置管理界面”，将需要访问摄像头的网站的https访问模式和其他模式都设置为允许。
HTML5调用摄像头实现拍照功能（兼容各大主流浏览器）
热门推荐
laijieyao的专栏
11-18 3万+
HTML5实现摄像头调用并拍照，兼容各大浏览器，需要的来拿
h5实现录制适配拍照功能兼容所有浏览器
06-13
要实现录制视频并兼容所有浏览器，可以使用MediaRecorder API。这个API在现代浏览器中得到支持，但在一些旧版本的浏览器中可能不支持。为了让它兼容所有浏览器，可以使用一个polyfill库，比如`@webcomponents/...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值