js调用用户媒体设备, 访问摄像头，进行拍照

最新推荐文章于 2024-04-26 16:47:03 发布
最新推荐文章于 2024-04-26 16:47:03 发布
阅读量1k 收藏
点赞数
分类专栏： JavaScript 文章标签： javascript html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jinxiumeihappy/article/details/105533623
版权 
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>调用本地摄像头拍照</title>
</head>
<body>
	<video id="video" width="480" height="320" controls>
	</video>
	<div>
		<button id="capture">拍照</button>
	</div>
	<canvas id="canvas" width="480" height="320"></canvas>
	<script>
	let video = document.getElementById('video');
	let canvas = document.getElementById('canvas');
	let context = canvas.getContext('2d');
	if (navigator.mediaDevices.getUserMedia || navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia){
		//调用用户媒体设备, 访问摄像头
		getUserMedia({video : {width: 480, height: 320}}, success, error);
	} else {
		alert('不支持访问用户媒体');
	}
	document.getElementById('capture').addEventListener('click', function () {
		context.drawImage(video, 0, 0, 480, 320);
	})
	
	//访问用户媒体设备的兼容方法
	function getUserMedia(constraints, success, error) {
		if (navigator.mediaDevices.getUserMedia) {
			//最新的标准API
			navigator.mediaDevices.getUserMedia(constraints).then(success).catch(error);
		} else if (navigator.webkitGetUserMedia) {
			//webkit核心浏览器
			navigator.webkitGetUserMedia(constraints,success, error)
		} else if (navigator.mozGetUserMedia) {
			//firfox浏览器
			navigator.mozGetUserMedia(constraints, success, error);
		} else if (navigator.getUserMedia) {
			//旧版API
			navigator.getUserMedia(constraints, success, error);
		}
	}
	
	function success(stream) {
		//兼容webkit核心浏览器
		let CompatibleURL = window.URL || window.webkitURL;
		//将视频流设置为video元素的源
		console.log(stream);
		
		//video.src = CompatibleURL.createObjectURL(stream);
		video.srcObject = stream;
		video.play();
	}
	
	function error(error) {
		console.log(`访问用户媒体设备失败${error.name}, ${error.message}`);
	}
	</script>
</body>
</html>

 

夫妻IT录
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
PC端html调用摄像头拍照 JS调用摄像头实时显示及拍照
05-19
PC端JS调用摄像头实时显示及拍照, 纯html实现。 方便好用，不需要任何操作。简单容易，点开即用。
解决谷歌浏览器在非https下限制获取多媒体对象（音视频）的解决方式
当幸福来敲门的专栏
05-12 1587
1、浏览器输入：chrome://flags/ 2、输入你要允许的域名地址或ip端口地址（如下图）
苹果手机通过getUserMedia唤起摄像头，出现黑屏问题
qq_43753654的博客
01-29 535
h5页面，使用浏览器提供的navigator.mediaDevices.getUserMedia方法，唤起摄像头，然后进行视频通话。
JS调用媒体设备失败 --- getUserMedia undefine 问题（各浏览器配置方法）（转）
xionghao009的专栏
11-17 2280
JS调用媒体设备失败 --- getUserMedia undefine 问题（各浏览器配置方法）
解决javascript调用设备摄像头时video标签出项黑屏现象
weixin_43221121的博客
04-18 5658
出现原因 MediaStream对象的active属性问题 接口的active 只读属性MediaStream返回一个布尔值，true 如果流当前处于活动状态; 否则，它返回false。如果流中的至少一个不在该状态，则认为该流是活动MediaStreamTrack的MediaStreamTrack.ended。每个曲目结束后，流的active属性就会变为false。 解决方法 在video...
如何解决navigator.mediaDevices.getUserMedia兼容问题
刘杨造梦的博客
09-23 4647
/ 一些浏览器根本没实现它 - 那么就返回一个error到promise的reject来保持一个统一的接口。// 调用用户媒体设备，访问摄像头、录音、console.log("访问用户媒体设备失败：", error.name, error.message);// 因为这样可能会覆盖已有的属性。// 否则，为老的navigator.getUserMedia方法包裹一个Promise。// 首先，如果有getUserMedia的话，就获得它。// 最新标准API、// 成功的回调函数。// 异常的回调函数。
windows共享文件夹端口_#文件#iPhone和Windows电脑互传文件
weixin_39945795的博客
10-23 599
很多时候，在电脑操作时，会经常使用到手机了的照片视频或者其他文件，相信很多人都是使用QQ、微信或者百度云等等其他软件来传输文件到电脑下面介绍一种使用iPhone自带软件#文件#传输文件到电脑中第一步：在Windows电脑新建一个文件夹，右键设置文件夹属性，点击共享，点击高级共享，然后设置everyone(所有人)共享即可，如下图操作即可第二步，查找自己电脑连接网络的IP地址，win+R输入cmd，...
H5 页面通过navigator.mediaDevices.getUserMedia调用手机摄像头拍照上传
weixin_46600931的博客
11-09 5529
注：使用navigator.mediaDevices.getUserMedia 需要使用https请求协议否者视为不安全，无法访问，开发阶段需要将启动改为https 在package.json中。注意切换摄像头时要注意，一定要像关闭摄像头不然会有问题在部分手机上。需求： 某知名化妆品牌，要做个在线问卷调查。授权，默认前置，切换后置。
【bootstraptable】JS访问用户媒体设备摄像头，进行拍照保存
哂笑年少°
09-25 657
【bootstraptable】JS访问用户媒体设备摄像头，进行拍照上传并保存。
vue&h5获取手机前置摄像头（安卓&ios），input capture属性和navigator.mediaDevices
Nine_91的博客
08-05 8053
解决安调用前置摄像头无效，以及 navigator.mediaDevices使用注意事项
js获取媒体设备
学吧
07-20 897
获取所有媒体设备 navigator.mediaDevices.enumerateDevices().then(devices => console.log(devices)) 数据格式 // 0: InputDeviceInfo // deviceId: “default” // groupId: “442cf7db8781dbca8c853971405d76e05b4cc0c2cb6ec26bbba1b0e202f8cf5c” // kind: “audioinput” // la
Vue2.0实现调用摄像头进行拍照功能 exif.js实现图片上传功能
10-18
主要为大家详细介绍了Vue2.0实现调用摄像头进行拍照功能，以及图片上传功能引用exif.js，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
js调用当前设备摄像头
12-09
使用js调用当前设备摄像头，可用做操作前人脸验证、人员确认、临时拍照、持续录像，所有例子在demos文件中均有案例。
js+flash调用本地/usb摄像头拍照上传
12-13
直接以“file:///D:/”等开头会显示没有webcam对象，要使用xammp或者Apache等将文件放置服务器目录，经过服务器打开即可正常使用
vue快速入门（四十六）Router的安装与使用
最新发布
不起眼小菜菜的博客
04-26 420
步骤很详细，直接上教程……
vue2---修饰符
weixin_45503872的博客
04-24 1011
此时有一个问题，如果我们设置了系统修饰符，并不希望有其他的按键组合，比如我们设置ctrl修饰符，此时如果按住ctrl和其他键，然后再点击鼠标，此时也会触发事件监听，所以我需要使用其他的修饰符来设置精确匹配事件。此时People的data返回的是一个对象，不是一个地址，每一个实例拿到的都是个独立，个体的对象，互相不会数据冲突，这个就是vue组件data为什么是函数的原因。data是一个函数，返回的是一个对象，目的是为了让每个组件数据隔离，这个是JavaScript的原理，并不是vue去设计的。
vue 实现级联选择器功能
清音的博客
04-22 529
数组包含了级联选择器的数据源，其中每个对象表示一个选项，包括。组件来实现级联选择器功能,下面是一个示例代码，演示如何使用。组件初始化级联选择器，并设置默认值为单位。对象用于指定数据结构中的属性名，以便。上，可以在初始化时选中指定的值。使用 Element UI 的。中设置初始选中值为单位。组件正确地解析数据。
Redux 状态持久化之 redux-persist 使用示例
笔记、经验、日常分享
04-24 307
同vuex一样，redux中的状态会在刷新浏览器后状态又恢复到初始状态，有些数据想在浏览器刷新后仍然是在最新的状态，不会丢失，就需要借助一些插件实现。本文通过 redux-persist 插件来实现Redux状态的持久化。
vue-manage-system 更新，后台管理系统开发更简单
林鑫
04-22 419
近期进行了一次版本升级，主要是支持了更多功能、升级依赖版本和优化样式，并且上线了网站，大部分功能都有文档或者使用示例，更加适合新手上手开发，只需要根据实际业务简单修改，就可以完成产品需求。
js调用摄像头拍照录像
03-23
在JavaScript中，可以通过使用WebRTC（Web实时通信）技术来调用摄像头进行拍照和录像。以下是一种常见的实现方式： 1. 首先，需要在HTML文件中创建一个video元素，用于显示摄像头捕获的视频流： ```html <video id="videoElement" autoplay></video> ``` 2. 接下来，在JavaScript中获取video元素，并使用getUserMedia方法请求用户授权访问摄像头： ```javascript const videoElement = document.getElementById('videoElement'); navigator.mediaDevices.getUserMedia({ video: true }) .then(stream => { videoElement.srcObject = stream; }) .catch(error => { console.error('Error accessing camera:', error); }); ``` 3. 现在，摄像头的视频流已经显示在video元素中了。如果要拍照，可以使用canvas元素将当前视频帧绘制到画布上，并将画布内容保存为图像： ```javascript const canvas = document.createElement('canvas'); const context = canvas.getContext('2d'); // 在canvas上绘制当前视频帧 context.drawImage(videoElement, 0, 0, canvas.width, canvas.height); // 将画布内容保存为图像 const image = canvas.toDataURL('image/png'); ``` 4. 如果要录制视频，可以使用MediaRecorder API。首先，创建一个MediaRecorder对象，并指定要录制的媒体流： ```javascript const mediaRecorder = new MediaRecorder(stream); ``` 然后，定义一个数组用于存储录制的视频数据块： ```javascript const chunks = []; // 监听数据可用事件，将数据块添加到数组中 mediaRecorder.addEventListener('dataavailable', event => { chunks.push(event.data); }); ``` 接着，开始录制： ```javascript mediaRecorder.start(); ``` 最后，停止录制并将数据块合并为完整的视频文件： ```javascript mediaRecorder.stop(); mediaRecorder.addEventListener('stop', () => { const videoBlob = new Blob(chunks, { type: 'video/webm' }); const videoUrl = URL.createObjectURL(videoBlob); // 可以将videoUrl赋值给video元素的src属性，以播放录制的视频 }); ```

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值