HTML5 camera Sample for Firefox
<!doctype html>
<html>
<head>
<title>html5 capture test</title>
</head>
<body>
<video autoplay id="myVideo"></video>
<img src="" id="myImg">
<canvas style="display: none;" id="myCanvas"></canvas>
<button id="capture" onclick="snapshot()">snapshot</button>
<script>
var video = document.getElementById("myVideo");
var canvas = document.getElementById("myCanvas");
var img = document.getElementById("myImg");
var ctx = canvas.getContext('2d');
var localMediaStream = null;
var snapshot = function () {
if (localMediaStream) {
canvas.width = video.videoWidth;
canvas.height = video.videoHeight;
img.width = video.videoWidth;
img.height = video.videoHeight;
ctx.drawImage(video, 0, 0);
document.getElementById("myImg").src = canvas.toDataURL('image/png');
}
};
navigator.mozGetUserMedia(
{video: true},
function (stream) {
video.src = window.URL.createObjectURL(stream);
localMediaStream = stream;
video.play();
},
function () {
alert('your browser does not support getUserMedia');
}
);
</script>
</body>
</html> 相关推荐
wusiye 2020-10-23
表格的现在还是较为常用的一种标签，但不是用来布局，常见处理、显示表格式数据。在HTML网页中，要想创建表格，就需要使用表格相关的标签。<table> <tr> <td>单元格内的文字</td> ...
gufudhn 2020-08-09
nercon 2020-08-01
swiftwwj 2020-07-21
nercon 2020-07-16
饮马天涯 2020-07-05
Lophole 2020-06-28
gufudhn 2020-06-12
csstpeixun 2020-06-11
huzijia 2020-06-09
WebVincent 2020-06-06
行吟阁 2020-05-30
qsdnet我想学编程 2020-05-26
gufudhn 2020-05-25
qsdnet我想学编程 2020-05-19
suixinsuoyu 2020-05-15
HSdiana 2020-05-15
PioneerFan 2020-05-15