HTML5调用笔记本或手机摄像头

最新推荐文章于 2024-04-22 07:30:40 发布

沪php攻城师

最新推荐文章于 2024-04-22 07:30:40 发布

阅读量3.6k

点赞数

分类专栏： HTML/CSS JS 文章标签： JS chrome firefox HTML5

本文链接：https://blog.csdn.net/jzh2004/article/details/8721524

版权

JS 同时被 2 个专栏收录

7 篇文章 1 订阅

订阅专栏

HTML/CSS

4 篇文章 0 订阅

订阅专栏

网上找了些文章测试了下，到现在为止还是很多浏览器不支持，所以也没有什么实用价值啊。

以下代码在笔记本电脑浏览器chrome25,irefox19上测试通过（FF需要在地址栏输入about:config ，把media.navigator.enabled 值设置为 true）。

在安卓手机上用opera HD浏览器测试通过，安卓自带浏览器和QQ浏览器和360浏览器不成功。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>测试摄像头</title>
<style>
#video { border: 1px solid #ccc; display:inline-block; }
#canvas { border: 1px solid #ccc; display:inline-block;}
#take_photo{background-color:orange;width:100px;height:30px;border:0px;}
</style>
</head>

<body>
<video id="video" width="480" height="320" autoplay></video>
<canvas id="canvas" width="480" height="320"></canvas>
<input id="take_photo" name="take_photo" value="拍照" type="button" />
</body>
</html>

<script type="text/javascript">
window.URL = window.URL || window.webkitURL || window.mozURL || window.msURL;
window.addEventListener("DOMContentLoaded", function() {
	var canvas = document.getElementById("canvas"),//画布容器
	context = canvas.getContext("2d"),//创建绘画对象
	video = document.getElementById("video"),//视频容器
	videoobj = {"video": true },
	errback = function(error) {
		console.log("error", error.code);
	};
	if(navigator.getUserMedia) {
		navigator.getUserMedia(videoobj, function( stream) {
			video.src = stream;
		}, errback);
	} else if (navigator.webkitGetUserMedia) {//chrome
		navigator.webkitGetUserMedia(videoobj,function(stream) {
			video.src = window.URL.createObjectURL(stream) || stream;
		} , errback)
	}
	else if (navigator.mozGetUserMedia) {//firefox
		navigator.mozGetUserMedia(videoobj,function(stream) {
			video.src = window.URL.createObjectURL(stream) || stream;
		} , errback)
	}
	else if (navigator.msGetUserMedia) {//IE
		navigator.msGetUserMedia(videoobj,function(stream) {
			video.src = window.URL.createObjectURL(stream) || stream;
		} , errback)
	}
	video.play();
	document.getElementById("take_photo").addEventListener("click", function(){
		context.drawImage(video, 0, 0, 480, 320);//视频截屏
	});
}, false);
</script>

沪php攻城师

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
HTML5调用笔记本或手机摄像头

网上找了些文章测试了下，到现在为止还是很多浏览器不支持，所以也没有什么实用价值啊。以下代码在笔记本电脑浏览器chrome25,irefox19上测试通过（FF需要在地址栏输入about:config ，把media.navigator.enabled 值设置为 true）。在安卓手机上用opera HD浏览器测试通过，安卓自带浏览器和QQ浏览器和360浏览器不成功。
复制链接

扫一扫