Sử dụng ML5 với ZIM cho Theo dõi Tay Tích Hợp trên Canvas

Giới thiệu

Bạn có bao giờ tưởng tượng việc vẫy tay trong không khí và con trỏ ứng dụng của bạn theo dõi ngón tay, kích hoạt bằng cách kẹp lại? Chúng ta đã thấy điều này trong các bộ phim và một số buổi trình diễn thử nghiệm. Giờ đây, nó đã được tích hợp hoàn chỉnh vào ZIM.

Việc tích hợp này có nghĩa là bất kỳ thành phần nào trong số năm mươi thành phần ZIM như thanh trượt, nút bấm, tab, v.v. đều có thể hoạt động bằng cách vẫy tay và kẹp tay. ML5 theo dõi tay và cung cấp thông tin cho ZIM, giúp các chuyển động này trở thành tương tác cốt lõi. Nhờ đó, các sự kiện vốn chỉ hoạt động với chuột hoặc cảm ứng cũng sẽ hoạt động với những ngón tay đang lơ lửng và kẹp lại.

Trên đây, chúng tôi đã trình bày cách di chuyển một thanh trượt bằng cách kẹp vào nút và kéo tay trong không khí. Hãy xem video về Theo dõi Tay với ZIM và ML5.

Chúng tôi cũng đã tạo ra chín ví dụ ZIM / ML5 trong một buổi chiều.

Video Hướng Dẫn

Dưới đây là video sử dụng theo dõi tay tích hợp của ZIM với ML5:

Mã ZIM

javascript Copy

<script src="https://unpkg.com/ml5@1/dist/ml5.min.js"></script>

<script type="module">
import zim from "https://zimjs.org/cdn/018/zim_cam";

// Xem tài liệu dưới Frame cho FIT, FILL, FULL, và TAG
new Frame(FIT, 1024, 768, black, licorice, ready);
function ready() {
    // Khởi tạo khung cho ứng dụng
    const ask = new CamAsk().show(yes => {    
        if (yes) {          
            let cam = new Cam();   
            cam.on("ready", async () => { 
                cam.scaleTo().center().alp(.2);
                const handPose = await ml5.handPose();              
                handPose.detectStart(cam.getCanvas(), result);  
                function result(results) {
                    cam.handTrack(results);             
                }           

                new Circle(50, red).center().drag();
                new Label("kẹp để kéo hình tròn", 30, null, tin)
                    .pos(0, 100, CENTER, BOTTOM);

                const message = new Pane("Nút đã được chọn!", green);
                const button = new Button()
                    .pos(0, 100, CENTER)
                    .tap(() => { message.show(); });
            });   

            // Nếu người dùng không chấp nhận yêu cầu về camera
            cam.on("error", () => {
                new Pane("CAM không được chấp nhận", yellow).show();
            });             
        } else { // trả lời không cho hộp thoại CamAsk
            new Pane("CAM không được chấp nhận", yellow).show();
        }   
    }); 
}

Thực hành tốt nhất

Kiểm tra thiết bị: Trước khi sử dụng theo dõi tay, hãy đảm bảo rằng camera và thiết bị của bạn tương thích với ML5.
Ánh sáng đủ: Đảm bảo có đủ ánh sáng để camera có thể dễ dàng theo dõi chuyển động của tay.
Đặt camera ở vị trí hợp lý: Đặt camera sao cho nó có thể nhìn thấy tay của bạn một cách rõ ràng mà không bị che khuất.

Những cạm bẫy thông thường

Chưa kích hoạt camera: Đảm bảo rằng bạn đã cấp quyền truy cập camera cho trình duyệt.
Khó khăn trong việc nhận diện: Trong môi trường tối, ML5 có thể không nhận diện tay một cách chính xác.

Mẹo hiệu suất

Giảm độ phân giải: Nếu ứng dụng của bạn hoạt động chậm, hãy thử giảm độ phân giải của video từ camera.
Tối ưu hóa mã: Kiểm tra mã JavaScript để đảm bảo không có lỗi cú pháp làm chậm ứng dụng.

Giải quyết sự cố

Camera không hoạt động: Nếu camera không hoạt động, hãy kiểm tra quyền truy cập camera trong trình duyệt.
Phản hồi chậm: Nếu có độ trễ trong phản hồi của ứng dụng, hãy đảm bảo rằng không có quá nhiều tác vụ đang chạy đồng thời.

FAQ

ML5 là gì?
ML5 là một thư viện JavaScript giúp các nhà phát triển dễ dàng sử dụng machine learning trong ứng dụng của họ.
ZIM là gì?
ZIM là một framework JavaScript mạnh mẽ giúp xây dựng các ứng dụng đa phương tiện một cách nhanh chóng và dễ dàng.

Kết luận

Việc sử dụng ML5 với ZIM không chỉ mang lại trải nghiệm tương tác thú vị mà còn mở ra nhiều khả năng sáng tạo cho các nhà phát triển. Hãy bắt đầu thử nghiệm với mã nguồn trên và khám phá những điều thú vị mà bạn có thể tạo ra với công nghệ này!

Sử dụng ML5 với ZIM để theo dõi tay tích hợp trên Canvas