Trong bài viết này, tôi sẽ hướng dẫn cho bạn cách chụp hình từ video và hiển thị ra dạng hình ảnh.
Tham khảo cách kết nối với Webcam: Kết nối với WebCam bằng Html5
Bạn cần có 3 phần tử:
Sự kiện 'loadedmetadata': xảy ra khi meta data của video/audio được load. Meta data bao gồm: duration, dimemsions (video) và text tracks.
Tham khảo cách kết nối với Webcam: Kết nối với WebCam bằng Html5
Chuẩn bị
Bạn cần có 3 phần tử:
- Thẻ <video>: dùng để hiển thị hình ảnh từ webcam truyền đến.
- Thẻ <canvas>: dùng để lấy hình ảnh từ thẻ <video> khi bạn capture.
- Thẻ <img>: dùng để xuất hình từ Canvas
- Canvas là phần tử trên trang, nó không thực sự là hình ảnh, bạn không thể nhấp phải và lưu nó về máy tính.
- Bạn phải hiển thị đúng kích thước thực tế hình ảnh được chuyển từ webcam. Nếu bạn chỉ không đúng kích thước, hình ảnh sẽ bị xén bước.
Sự kiện 'loadedmetadata': xảy ra khi meta data của video/audio được load. Meta data bao gồm: duration, dimemsions (video) và text tracks.
Chương trình minh họa
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Index</title>
<link href="/Content/Site.css" rel="stylesheet" type="text/css" />
<script src="/Scripts/jquery-1.5.1.min.js" type="text/javascript"></script>
<script src="/Scripts/modernizr-1.7.min.js" type="text/javascript"></script>
<link href="/Content/themes/base/jquery.ui.all.css" rel="stylesheet" type="text/css" />
<script src="/Scripts/jquery-ui-1.8.11.js" type="text/javascript"></script>
</head>
<body>
<div style="margin-left: 100px; float:left">
<div>
<video id="sourcevid" autoplay width="480" height="360" onloadedmetadata="ResizeCanvas();">
Sorry, you're browser doesn't support video. Please try
<a href="http://snapshot.opera.com/labs/camera/">Opera</a>.
</video>
</div>
<div style="margin-left: 170px;">
<input type="button" value="Start" onclick="start()" class="button" >
<input type="button" value="Stop" onclick="stop()" class="button" >
<input type="button" value="Capture" onclick="snapshot()" class="button" >
</div>
</div>
<div style="margin-left: 100px;">
<img id="CaptureImage" src="" style="margin-left: 20px;" width="480" height="360">
<canvas id="tmpImage" style="margin-left: 20px; display: none;" width="480" height="360"></canvas>
</div>
<script type="text/javascript">
var ctx = null;
var canvas = document.getElementById("tmpImage");
var localMediaStream = null;
var video = document.querySelector('video');
function snapshot() {
if (localMediaStream) {
ctx.drawImage(video, 0, 0);
var img = document.getElementById('CaptureImage');
// "image/webp" works in Chrome 18. In other browsers, this will fall back to image/png.
img.src = canvas.toDataURL('image/webp');
}
}
function hasGetUserMedia() {
// Note: Opera builds are unprefixed.
return !!(navigator.getUserMedia || navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia || navigator.msGetUserMedia);
}
function onFailSoHard(){
}
function start() {
if (hasGetUserMedia()) {
if (navigator.webkitGetUserMedia)
navigator.getUserMedia = navigator.webkitGetUserMedia;
//var getUserMedia = navigator.webkitGetUserMedia || navigator.getUserMedia;
//var gumOptions = { video: true, toString: function () { return 'video'; } };
if (navigator.getUserMedia) {
navigator.getUserMedia({ video: true, audio: true }, function (stream) {
if (navigator.webkitGetUserMedia) {
video.src = window.webkitURL.createObjectURL(stream);
} else {
video.src = stream; // Opera
}
localMediaStream = stream;
}, onFailSoHard);
} else {
video.src = 'somevideo.webm'; // fallback.
}
}
}
function stop() {
video = document.getElementById('sourcevid');
video.src = "";
}
function ResizeCanvas() {
canvas.height = video.videoHeight;
canvas.width = video.videoWidth;
}
$(document).ready(function () {
$('.button').button();
ctx = canvas.getContext('2d');
});
</script>
</body>
</html>
Demo đầy đủ:
http://jsfiddle.net/anbinhtrong/XrtRf/embedded/result/
Hiện tại trên tablet, chỉ có phiên bản Opera 12 mới kết nối được Webcam
Trả lờiXóa