Chụp hình bằng Webcam trên Website dùng Webcam jQuery Plugin

Nếu bạn muốn tạo một project về tuyển dụng. Cần chụp nhanh hình ảnh của các nhân viên để đưa vào CV. Thì bài viết này sẽ là một chia sẻ hữu ích cho bạn.

Trong bài viết này, tôi xin chia sẻ đoạn code để bạn có thể kết nối với Webcam, và Capture hình ảnh của Webcam để đưa vào vị trí mong muốn.


{tocify} $title={Table of Contents}

1. Thiết kế giao diện hiển thị

Nguyên liệu cần thiết
    • Một khung hiển thị hình ảnh lấy trực tiếp từ webcam
    • Một khung hiển thị hình ảnh chụp được
    • Một nút nhấn để ra lệnh chụp hình

Đây là đoạn code HTML đơn giản tôi đã tạo sẵn:
<!DOCTYPE html>
<html>
<head>
<title>Capture webcam image with PHP and jQuery - tips.vn</title>
<style type="text/css">
#results {
padding:5px;
border:1px solid;
background:#ccc;
}
</style>
</head>
<body>
<div class="container">
<h1 class="text-center">Capture webcam image with php and jquery - tips.vn</h1>
<div class="row">
<div class="col-md-6">
<div id="my_webcam"></div>
<br/>
<input type=button value="Take Snapshot" onClick="take_snapshot()">
<input type="hidden" name="image" class="image-target">
</div>
<div class="col-md-6">
<div id="results">Your captured image will appear here...</div>
</div>
</div>
</div>
</body>
</html>

2. Nhúng thư viện WebcamJS

Chèn các thư viện sau vào giữa cặp thẻ <head></head>:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/webcamjs/1.0.25/webcam.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" />

Tiếp theo, chúng ta cần khởi tạo Webcam, đặt chế độ chụp ảnh vào nút Take Snapshot và hiển thị hình ảnh mới chụp được lên khung result

Các bạn chèn đoạn code jQuery bên dưới vào trên thẻ </body> của trang web:
<script language="JavaScript">
Webcam.set({
width: 480,
height: 360,
image_format: 'jpeg',
jpeg_quality: 120
});

Webcam.attach( '#my_webcam' );

function take_snapshot() {
Webcam.snap( function(url) {
$(".image-target").val(url);
document.getElementById('results').innerHTML = '<img src="'+url+'"/>';
} );
}
</script>
Techzvn.Net

Thư viện thủ thuật Phần mềm - Windows - Android - IOS

Post a Comment

Previous Post Next Post

Thảo Luận

×Close