当前位置:首页 > H5 > 正文内容

js调用摄像头拍照,js调用摄像头在线拍照,js调用电脑摄像头拍照

高老师9年前 (2018-01-07)H54549
<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>录制</title>
		<script src="js/jquery.min.js"></script>
	</head>

	<body>
		<video src="" id="video"></video>

		<button id="rec">开始录制</button>

		<button id="camera">拍照</button>
		<!--canvs绘制-->
		<canvas width="640" height="480" id="outrec"></canvas>
		<!--base64绘制-->
		<img id="imgvideo" width="640" height="480" src="" />

		<script type="text/javascript">
			var video = document.getElementById("video"); //视频dom元素

			//001.开启摄像头
			$('#rec').click(function() {
				//视频获取
				var Devicestate = navigator.mediaDevices.getUserMedia({
					audio: true,
					video: true
				})

				Devicestate.then(function(mediaStream) {

					video.src = window.URL.createObjectURL(mediaStream);
					console.log(mediaStream)
					video.onloadedmetadata = function(e) {
						video.play();
					};

				});

				//用户拒绝使用,或者没有摄像头
				Devicestate.catch(function(err) {
					console.log(err.name);
				});

			});

			//002.点击拍照按钮
			$('#camera').click(function() {
				//视频转换到canvs
				var outrec = document.getElementById("outrec");
				var outreccon = outrec.getContext("2d");
				outreccon.drawImage(video, 0, 0, 640, 480);

				var img = outrec.toDataURL("image/jpeg", 0.5)

				$('#imgvideo').attr('src', img);

			});
		</script>
	</body>

</html>

需要注意参考w3c查看兼容性,另外谷歌浏览器只允许https网页调用

扫描二维码推送至手机访问。

版权声明:本文由高久峰个人博客发布,如需转载请注明出处。

本文链接:https://blog.20230611.cn/post/264.html

分享给朋友:

“js调用摄像头拍照,js调用摄像头在线拍照,js调用电脑摄像头拍照” 的相关文章

百度地图,腾讯地图生成导航链接

百度地图,腾讯地图生成导航链接

https://3gimg.qq.com/lightmap/v1/marker/index.html?marker=coord:37.6767600000,112.7297800000&key=TKUBZ-D24AF-GJ4JY-JDVM2-IBYKK-KEBCU&referer=p...

websql的使用方法

websql的使用方法

<!--          三个核心方法          openDatabase:这个方法使用现有数据库或创建...

Javascript页面播放语音,Javascript语音读取页面的文字

Javascript页面播放语音,Javascript语音读取页面的文字

<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <script type...

ajax上传文件,formdata上传文件,ajax上传file文件,原生ajax上传文件,ajax上传图片,ajax上传文件formdata

ajax上传文件,formdata上传文件,ajax上传file文件,原生ajax上传文件,ajax上传图片,ajax上传文件formdata

通过FormData对象可以组装一组用 XMLHttpRequest发送请求的键/值对。它可以更灵活方便的发送表单数据,因为可以独立于表单使用。如果你把表单的编码类型设置为multipart/form-data ,则通过FormData传输的数据格式和表单通过submit() 方法传输的数据格式相同...

 js 工厂模式示例,js工厂模式原理

js 工厂模式示例,js工厂模式原理

查看文章前你需要了解以下2点://1.this指向的是windows对象,通过console.log(this)可以查看到对象包含所有的方法和属性//2.全局变量属于this对象的属性通过console.log(this)可以查看到对象包含我们设置的全局变量我们经常在创建相同结构的Js对象会重复的设...

 js对象冒充实现继承

js对象冒充实现继承

//构造函数 function Box(name,age){ this.name=name; this.age=age; this.run=function(){ return this.name+'--'+this.age; } } var&nbs...