Nhật ký học tập

Giới thiệu về Canvas Html 5 Canvas API là một API tuyệt vời cho phép bạn tự động vẽ và hiển thị đồ họa, biểu đồ, hình ảnh và hiệu ứng. Khái niệm Canvas lần đầu tiên được Apple đưa ra và được sử dụng trong Mac OS X Webkit để tạo nên dashboard widgets. Trước khi có canvas, bạn chỉ có thể sử dụng các API đồ họa của trình duyệt thông qua plugin như Adobe Flash, Scalable Vector Graphics (SVG), Vector Markup Language (VML) (dành riêng cho Internet Explorer), hoặc một số đoạn hack của javascript.

Khi bạn sử dụng thẻ <video> trong html5 để chơi 1 video nào đó bất kể độ dài ngắn khác nhau, bạn đôi lúc gặp lỗi khi hàm được gọi ra không đúng thời điểm. Ví dụ: <div> <video id="testVideo" width="320" height="240" controls="controls" autoplay="true"> <source src="http://www.w3schools.com/html5/movie.mp4" type="video/mp4" /> <source src="http://www.w3schools.com/html5/movie.ogg" type="video/ogg" /> Your browser does not support the video tag. </video> </div> Width: <div id="width"></div> Height: <div id="height"></div> <script type="text/javascript"> $(document).ready(function () { var video = document.getElementById("testVideo"); $('#width').text(video.videoWidth); $('#height').text(video.videoHeight); ...

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

Trước đây, nếu các bạn muốn kết nối với webcam bằng trình duyệt, bạn phải cài plugin là flash hoặc silverlight…. Nhưng với công nghệ Html5, mọi thứ đã thay đổi.