Html5: Chụp Hình Từ Camera - Nhật Ký Học Tập

Có thể bạn quan tâm

Chuyển đến nội dung chính

Html5: Chụp hình từ Camera

tháng 7 05, 2012 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

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

Bạn sẽ có thắc mắc: Tại sao chúng ta không lưu hình trực tiếp từ Canvas. Có 2 vấn đề:

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.

Mặc định, kích thước của canvas là rộng 300 pixel và cao 150 pixel. Để chỉ đúng kích thước canvas khi vừa load video, bạn sử dụng sự kiện 'loadedmetadata' của thẻ video 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/ Chia sẻ

Nhãn

Html5 Labels: Html5 Chia sẻ

Nhận xét

Án Bình Trọnglúc 11:20 6 tháng 7, 2012
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óaTrả lời

Thêm nhận xétTải thêm...

Đăng nhận xét

Bài đăng phổ biến từ blog này

[ASP.NET MVC] Authentication và Authorize

tháng 10 26, 2013 Một trong những vấn đề bảo mật cơ bản nhất là đảm bảo những người dùng hợp lệ truy cập vào hệ thống. ASP.NET đưa ra 2 khái niệm: Authentication và Authorize Authentication xác nhận bạn là ai. Ví dụ: Bạn có thể đăng nhập vào hệ thống bằng username và password hoặc bằng ssh. Authorization xác nhận những gì bạn có thể làm. Ví dụ: Bạn được phép truy cập vào website, đăng thông tin lên diễn đàn nhưng bạn không được phép truy cập vào trang mod và admin. Chia sẻ Đăng nhận xét Read more »

ASP.NET MVC: Cơ bản về Validation

tháng 8 24, 2012 Validation (chứng thực) là một tính năng quan trọng trong ASP.NET MVC và được phát triển trong một thời gian dài. Validation vắng mặt trong phiên bản đầu tiên của asp.net mvc và thật khó để tích hợp 1 framework validation của một bên thứ 3 vì không có khả năng mở rộng. ASP.NET MVC2 đã hỗ trợ framework validation do Microsoft phát triển, tên là Data Annotations. Và trong phiên bản 3, framework validation đã hỗ trợ tốt hơn việc xác thực phía máy khách, và đây là một xu hướng của việc phát triển ứng dụng web ngày nay. Chia sẻ 4 nhận xét Read more »

Tổng hợp một số kiến thức lập trình về Amibroker

tháng 10 31, 2020 Giới thiệu về Amibroker Amibroker theo developer Tomasz Janeczko được xây dựng dựa trên ngôn ngữ C. Vì vậy bộ code Amibroker Formula Language sử dụng có syntax khá tương đồng với C, ví dụ như câu lệnh #include để import hay cách gói các object, hàm trong các block {} và kết thúc câu lệnh bằng dấu “;”. AFL trong Amibroker là ngôn ngữ xử lý mảng (an array processing language). Nó hoạt động dựa trên các mảng (các dòng/vector) số liệu, khá giống với cách hoạt động của spreadsheet trên excel. Chia sẻ 11 nhận xét Read more »

Goals

AZ-104: Một số tài liệu ôn tập AZ-104 - Day 0

Nhãn

.NET
ADO.NET
AFL
AI
Algorithms
Android
Angular
Architecture
ASP.NET
ASP.NET Identity

Aspect-Oriented Programming (AOP)
Authorize
Automation testing
AZ-104
Az-204
Azure
Azure Functions
Bootstrap
Build and Deploy
Business Analyst
C#
C++
Clean Architecture
CMS
Code Snippets
Container Runtime
Containers
Cosmos DB
CSS
Data Structures and Algorithms
Database
Design Patterns
Development Tools
Devops
diagram
Diagram & Visualization
Docker
Documentation
Draft
Dynamic
Dynamic Data
Ebooks
Entity Framework
Error
Excel
Ext Js
Firebase
FrontEnd
Games
Giới thiệu
Git
Hosting
Html
Html5
IIS
Issues
Java
JavaScript
JQuery
JQueryUI
Kinh nghiệm
Kubernetes
Learning Tools
Libraries
Link tham khảo
LINQ
Linux
machine learning
Math
Microservices
Microsoft Certification
minikube
Mobile
mongodb
Multi-threading
Multimedia
MVC
Network
NextJs
Nhật ký IT
NodeJs
OOP
Phân tích thiết kế
PhoneGap
PowerShell
Practice
Profiles
Project Management
Puzzles
Python
ReactJs
Roadmap
SAEDI
Security
Selenium
Service Bus
Silverlight
Softwares
SQL
SQL Server
Tailwind CSS
Tản mạn cuối tuần
Testing
Theo dòng lịch sử
Third party
Thủ thuật
Tips
Tooltips
Trang web hay
UML
Visual Studio
WCF
Web API
WPF
Xml
XỬ LÝ VIDEO VỚI FFMPEG C++

Hiện thêm

Web học tập

Matt Ruma
Search ebooks
Download Ebooks
Devopscube
Box of Cables
Michael Crump
Azure Blog
Advanced Program-Android
Web Development is Easy!
Ode to code
AngularJs Directive Tuto
Steve Wellens Programming in the .Net environment
Dot Net Curry
Phil Haack
Html5demo
http://www.mikesdotnetting.com
Dot Net Perls
LC blog

Website học tập (Việt Nam)

Dev trends
Viet JS
Cùng học web
Kata learns to code
Bút chì số

Lưu trữ

tháng 1 20262
tháng 12 20253
tháng 11 20257
tháng 10 20254
tháng 9 20252
tháng 8 20258
tháng 7 20254
tháng 6 202510
tháng 5 202510
tháng 4 20252

tháng 3 20253
tháng 2 20251
tháng 1 20254
tháng 12 20241
tháng 11 20245
tháng 10 20242
tháng 9 20246
tháng 8 20246
tháng 7 20242
tháng 6 20241
tháng 5 20242
tháng 4 20244
tháng 3 20241
tháng 2 20242
tháng 1 20244
tháng 12 20234
tháng 11 202310
tháng 10 202317
tháng 9 20232
tháng 8 202312
tháng 7 20232
tháng 6 20239
tháng 5 202317
tháng 4 202310
tháng 3 20234
tháng 2 20234
tháng 1 202313
tháng 12 20225
tháng 11 202213
tháng 10 20226
tháng 9 202214
tháng 8 202214
tháng 7 20223
tháng 6 202214
tháng 5 20227
tháng 4 20224
tháng 3 20223
tháng 2 20224
tháng 1 20222
tháng 10 20213
tháng 8 20214
tháng 7 20213
tháng 6 20212
tháng 5 20215
tháng 4 20211
tháng 3 20213
tháng 2 20211
tháng 1 20211
tháng 12 20202
tháng 11 20202
tháng 10 20204
tháng 9 20201
tháng 8 20203
tháng 6 20201
tháng 5 20202
tháng 4 20204
tháng 3 20202
tháng 1 20202
tháng 12 20197
tháng 11 20195
tháng 10 20191
tháng 9 20191
tháng 7 20191
tháng 6 20191
tháng 5 20192
tháng 4 20191
tháng 1 20192
tháng 12 20183
tháng 11 20181
tháng 10 20185
tháng 9 20181
tháng 8 20181
tháng 7 20182
tháng 6 20181
tháng 5 20182
tháng 4 20182
tháng 3 20184
tháng 2 20182
tháng 12 20174
tháng 11 20171
tháng 10 20172
tháng 9 20173
tháng 8 20177
tháng 7 20174
tháng 6 20173
tháng 5 20172
tháng 4 20172
tháng 3 20173
tháng 2 20171
tháng 1 20171
tháng 11 20162
tháng 8 20161
tháng 12 20151
tháng 11 20151
tháng 9 20153
tháng 7 20151
tháng 6 20151
tháng 3 20152
tháng 2 20151
tháng 10 20141
tháng 8 20142
tháng 7 20142
tháng 6 20142
tháng 5 20142
tháng 4 20144
tháng 3 20141
tháng 1 20142
tháng 12 20132
tháng 11 20131
tháng 10 20132
tháng 9 20132
tháng 8 20132
tháng 7 20131
tháng 5 20131
tháng 4 20131
tháng 3 20132
tháng 1 20133
tháng 12 20121
tháng 11 20121
tháng 10 20127
tháng 9 20123
tháng 8 20126
tháng 7 20128
tháng 6 20122
tháng 5 20123
tháng 4 20122
tháng 3 20127
tháng 2 20123
tháng 1 20124
tháng 12 201110
tháng 11 20117
tháng 10 20113
tháng 9 20118
tháng 8 20111
tháng 7 20119
tháng 6 20111
tháng 4 20114
tháng 3 20117
tháng 2 20111
tháng 1 20113
tháng 12 201011
tháng 11 20101
tháng 10 20107

Hiện thêm

Từ khóa » Chụp ảnh Html

Html5: Chụp Hình Từ Camera - Nhật Ký Học Tập