<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML5调用手机摄像头,仅仅支持OPPOHD浏览器</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>