原生h5页面调用电脑摄像头谷歌浏览器测试可以

最新推荐文章于 2022-05-07 16:30:20 发布

yunchong_zhao

最新推荐文章于 2022-05-07 16:30:20 发布

阅读量906

点赞数 2

分类专栏： javascript 文章标签： javascript

本文链接：https://blog.csdn.net/yunchong_zhao/article/details/105997507

版权

javascript 专栏收录该内容

346 篇文章 16 订阅

订阅专栏

直接附上代码，请参考有一定的兼容性问题，兼容性的代码我就不附上了哈
提示哈可以使用try catch

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>h5调用电脑摄像头</title>
		<style>
			.live{
				height: 400px;
				width: 400px;
				margin: 0 auto;
			}
			#video{
				object-fit: fill;
			}
		</style>
	</head>
	<body>
		<div class="live">
			<video id="video" width="400px" height="400px"></video>
			<button id="open">打开摄像头</button>
		</div>
		<script>
			var video = document.getElementById('video');
			     function liveVideo(){
				        navigator.getUserMedia({
				          video: true
				        }, function(stream){
							video.srcObject=stream;  // 将获取到的视频流对象转换为地址
				          	video.play();
				        }, function(error){
				          console.log(error);
				        });
			      }
				document.getElementById('open').onclick=function(){
					liveVideo();
				}
		</script>
	</body>
</html>