Play stream RTSP của camera IP cần sử dụng module react-native-vlc-media-player. Quá trình tích hợp vào app React Native không có nhiều vấn đề, chỉ khó khăn ở bước play stream trên iOS.
Play camera stream trên iOS bị delay khá lâu, player chỉ hiển thị ra màn hình đen (trên Android không delay). Bài viết này hướng dẫn tích hợp và xử lý các vấn đề xảy ra.
Bước 1: cài đặt module react-native-vlc-media-player
Sau khi cài đặt xong, các bạn vào thư mục /node_module/react-native-vlc-media-player, mở file react-native-vlc-media-player.podspec sau đó thay đổi phiên bản của thư viện MobileVLCKit thành 3.3.16.3, đây là phiên bản ổn định giúp cho tốc độ tải camera nhanh và độ trễ cũng như độ giật lag giảm.
Sau đó các bạn đi tới thu mục ios là chạy lệnh pod install để cài đặt các thư viện cần thiết
Bước 2: Test RTSP stream bằng video
Bên trong code các bạn có thể sử dụng các Component của thư viện react-native-vlc-media-player để test thử xem IP của mình có hoạt động không (lưu ý nếu trong mật khẩu camera có kí tự là @ thì hãy đổi thành %40 nếu không ứng dụng sẽ bị crash). Bạn có thể tham khảo cách sử dụng chúng ở Component https://github.com/razorRun/react-native-vlc-media-player
Bước 3: Chạy RTSP trên thiết bị iOS thực tế
Sau khi làm các bước trên các bạn sẽ thấy camera sẽ được load rất nhanh trên các thiết bị giả lập nhưng khi đưa nó lên thiết bị thật thì sẽ xuất hiện tình trạng tải rất lâu và giật lag.
Nguyên nhân là do chúng ta cần xin quyền Multicast Networking, các bạn truy vần vào đường dẫn này và điền các thông tin cần thiết để Apple xem xét và cấp quyền cho bạn https://developer.apple.com/contact/request/networkingmulticast
Thời gian chờ cấp quyền thường là từ 1-2 ngày hoặc có thể lâu hơn tùy thuộc vào thông tin mà bạn đã cung cấp.
Sau khi được cấp quyền bạn sẽ được Apple gửi mail và thông báo xác nhận có quyền Multicast Networking cho ứng dụng của bạn.
Sau đó bạn hãy truy cập vào https://developer.apple.com/account chọn vào mục Identifiers, chọn vào ứng dụng của bạn và xác nhận cấp quyền cho nó
Bước 4: kiểm tra hoàn thiện
Sau khi có quyền bạn hãy chạy lại camera trên thiết bị thật, giờ đây mọi thứ đã hoàn thành, app không còn chậm & giật lag nữa.
Chúc các bạn thành công!