JQUERY TUTORIALS
CÁC CHỦ ĐỀ
BÀI MỚI NHẤT
MỚI CẬP NHẬT

Top 10 jquery webcam plugin tốt nhất

Có lẽ bạn cũng từng nghe đến việc chụp hình Webcam trực tiếp trên website rồi lưu vào trong hệ thống rồi nhỉ? Đấy là người ta sử dụng những plugin webcam jquery để làm đấy, và thông thường chúng ta sử dụng để chụp hình webcam.

test php

banquyen png
Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.

Sau đây mình xin tổng hợp 10 jquery webcam plugin tốt nhất mà mình tìm được ở trên mạng và sưu tầm lại. Mình chỉ giới thiệu sơ qua và có link đến trang demo, còn việc sử dụng nó như thế nào thì ban vui lòng đọc phần user guild của từng plugin nhé.

1. ScriptCam : jQuery plugin to manipulate Webcams

ScriptCam là plugin thường được dùng nhiều nhất, bạn có thể chụp lại hình của mình dưới dạng mã base64 hoặc là một tấm hình trực tiếp luôn. Nó liên kết với Driver webcam của máy vi tính để hiển thị ảnh chuyển động.

jquery webcam plugin scriptcam 1 jpg

CHI TIẾT | DEMO

2. Xarg jQuery webcam plugin

Ngoài các chức năng chụp lại hình ảnh và nhận biết hình chuyển động thì plugin này có sẵn demo cho bạn hẹn giờ chụp, nghĩa là sẽ có các API xử lý các sự kiện như onLoad, onTich, onSave. jQuery Plugin này có chưc năng rất hay là tạo hiệu ứng mờ, nhòe cho hình bằng cách sử dụng các options của nó. Chi tiết bạn xem demo nhé.

Bài viết này được đăng tại [free tuts .net]

jquery webcam plugin xarg 2 gif

CHI TIẾT

3. jQuery.WebcamQRCode : QR Code scanning in jQuery

Webcam QR Code là một jquery plugin sử dụng để show hình camera lên webshite, nó sử dụng webcam để quét mã QR và trả kết quả về cho javascript hiển thị lên. Plugin này ban đầu được sử dụng để quét mã vạch sản phẩm và tự động điền vào các thông tin nằm trên thẻ. Nó sử dụng flash để hiển thị Webcam.

jquery-qr-code-scanning-plugin-3.gif
CHI TIẾT | DEMO

4. Photobooth-js : jQuery Html5 plugin to take pictures through webcam

Đây là một jquery plugin có kết hợp HTML45 để chụp hình ảnh thông qua Webcam và lưu lại trên site. Plugin này hoạt động trên tất cả các trình duyệt có hỗ trợ navigator.getUserMedia.

jquery-html5-webcam-photobooth-js-4.jpg
CHI TIẾT | DEMO

5. Photobooth with PHP, jQuery and CSS3

Đây cũng là một plugin jquery, nhưng khác với các phần trên đó là trong phần này sẽ hướng dẫn làm thế nào để sử dụng camera trong jquery để xây dựng chức năng chụp hình và lưu lại trên server thông qua mã code PHP. Hay nói cách khác đây là một tutorials và nó sử dụng thư viện webcam.js để xử lý.

jquery-php-photobooth-webcam-5.jpg

CHI TIẾT | DEMO

6. Mackers jQuery Webcam Plugin

Thư viện này mình thấy không hay lắm nhưng cũng xin liệt kê ra cho các bạn luôn. Nó sử dụng jquery làm nền tảng.

jquery-webcam-plugin-mackers-6.jpg
CHI TIẾT | DEMO

7. headtrackr : Javascript library for headtracking via Webcam

Headtrackr là một thư viện javascript cho phép theo dõi các hoạt động trong thế giới thực thông qua công cụ Webcam có sẵn trên máy tính hoặc máy ảnh web theo chuẩn webRTC/getUserMedia. Đặc biệt plugin này cho phép nhận diện khuôn mặt rất hay.

jquery-headtracking-webcam-library-7.jpg
CHI TIẾT | DEMO

8. tracking.js : Real Time tracking techniques by the Camera

Thư viện tracking.js mang đến cho chúng ta hình ảnh rất hiện thực thông qua các tương tác tự nhiên như các thao tác, hoạt động của sự vật. Đặc biệt nó có những thông số cấu hình cho phép ta chọn màu hoặc những hiệu ứng mờ ảo cực kì thú vị.

javascript-real-time-webcam-tracking-8.jpg
CHI TIẾT | DEMO

9. Reveal.js with Webcam-based gesture recognition

Nêu bạn muốn tạo một webcam dạng background thì đây là thư viện cho bạn lựa chọn đấy, nó cho phép bạn hiển thị hình webcam lên website nằm dưới backgroud và các thẻ HTML khác có thể đè lên.

jquery-webcam-gesture-recognition-reveal-js-9.jpg
CHI TIẾT | DEMO

10. Say Chees : JavaScript library for integrating a webcam

Đây là thư viện javascript cho phép bạn chụp hình avatar ngay trên website và sử dụng code PHP hoặc ngôn ngữ Server nào đó để lưu lại.

javascript-integrate-webcam-say-cheese-10.jpg
CHI TIẾT | DEMO

Lời Kết

Bài này mục đích mình sưu tầm lại link để sau này cần sử dụng tới thì không mất nhiều thời gian để tìm kiếm nó. Thực sự thì những plugin trên mình chưa sử dụng hết được vì mình cũng chỉ sưu tầm trên mạng về thôi.

Cùng chuyên mục:

Cách dùng .bind() trong JQuery

Cách dùng .bind() trong JQuery

Cách dùng .delegate() trong JQuery

Cách dùng .delegate() trong JQuery

slideUp() và slideDown() trong jQuery

slideUp() và slideDown() trong jQuery

Nếu nói đến hiệu ứng slide thì ta phải tìm đến những ...

fadeIn() và fadeOut() trong jQuery

fadeIn() và fadeOut() trong jQuery

Không giống như show và hide, fadeIn và fadeOut sẽ hiển thị hoặc mờ ...

Show() và Hide() trong jQuery

Show() và Hide() trong jQuery

Hàm hide chỉ đơn giản là thiết lập thuộc tính ...

jQuery selector là gì? Trọn bộ selector trong jQuery đầy đủ nhất

jQuery selector là gì? Trọn bộ selector trong jQuery đầy đủ nhất

Trong bài này chúng ta sẽ tìm hiểu về Selector trong jQuery, đây là bài…

jQuery là gì? Cách viết jQuery cho người mới bắt đầu

jQuery là gì? Cách viết jQuery cho người mới bắt đầu

Trong công nghệ web 2.0 thì Javascript là một

Cách ẩn hiện nội dung khi click vào button trong jQuery

Cách ẩn hiện nội dung khi click vào button trong jQuery

Cách dùng All Selector (“*”) trong jQuery

Cách dùng All Selector (“*”) trong jQuery

Cách dùng All Selector (“*”) trong jQuery

Cách dùng :animated Selector trong jQuery

Cách dùng :animated Selector trong jQuery

Cách dùng :animated Selector trong jQuery

Cách dùng Attribute Contains Prefix Selector [name|=”value”] trong jQuery

Cách dùng Attribute Contains Prefix Selector [name|=”value”] trong jQuery

Cách dùng Attribute Contains Prefix Selector [name|=”value”] trong jQuery

Cách dùng Attribute Contains Selector [name*=”value”] trong jQuery

Cách dùng Attribute Contains Selector [name*=”value”] trong jQuery

Cách dùng Attribute Contains Selector [name*=”value”] trong jQuery

Cách dùng Attribute Contains Word Selector [name~=”value”] trong jQuery

Cách dùng Attribute Contains Word Selector [name~=”value”] trong jQuery

Cách dùng Attribute Contains Word Selector [name~=”value”] trong jQuery

Cách dùng Attribute Ends With Selector [name$=”value”] trong jQuery

Cách dùng Attribute Ends With Selector [name$=”value”] trong jQuery

Cách dùng Attribute Ends With Selector [name$=”value”] trong jQuery

Cách dùng Attribute Equals Selector [name=”value”] trong jQuery

Cách dùng Attribute Equals Selector [name=”value”] trong jQuery

Cách dùng Attribute Equals Selector [name=”value”] trong jQuery

Cách dùng Attribute Not Equal Selector [name!=”value”] trong jQuery

Cách dùng Attribute Not Equal Selector [name!=”value”] trong jQuery

Cách dùng Attribute Not Equal Selector [name!=”value”] trong jQuery

Cách dùng Attribute Starts With Selector [name^=”value”] trong jQuery

Cách dùng Attribute Starts With Selector [name^=”value”] trong jQuery

Cách dùng Attribute Starts With Selector [name^=”value”] trong jQuery

Cách dùng :button Selector trong jQuery

Cách dùng :button Selector trong jQuery

Cách dùng :button Selector trong jQuery

Cách dùng :checkbox Selector trong jQuery

Cách dùng :checkbox Selector trong jQuery

Cách dùng :checkbox Selector trong jQuery

Cách dùng :checked Selector trong jQuery

Cách dùng :checked Selector trong jQuery

Cách dùng :checked Selector trong jQuery

Top