+10

Hướng dẫn viết ứng dụng gọi video 1-1 miễn phí trên nền tảng Web với Stringee Call API

Mở đầu

Hôm nay, mình xin hướng dẫn mọi người viết được một ứng dụng video call trên nền web bằng Stringee API Call.

Stringee là nền tảng (SDK/API) cung cấp tính năng Nghe - Gọi - Chat - SMS, có thể tích hợp nhanh vào các ứng dụng web. Và hiện Stringee đang cung cấp Stringee Call API cho các bạntìm hiểu cũng như tham khảo để dựng một ứng dụng gọi video call nhỏ. Hiện Stringee miễn phí 1500 phút gọi mỗi tháng nên các bạn có thể tích hợp và test.

Hy vọng hữu ích đối với các bạn đang cần.

Các bước xây dựng ứng dụng video call

1. Sơ đồ luồng giao tiếp của Stringee Video

Để viết được 1 ứng dụng video call bằng Stringee API, trước tiên ta cần nắm được luồng giao tiếp video call trên Stringee server

image.png

Đầu tiên, server của bạn sẽ gọi lên REST API https://api.stringee.com để tạo room

Tiếp theo, server của bạn sẽ dùng room ID trả về để tạo room_token

Sau đó, Client App sẽ dùng room_token để join room bằng phương thức joinRoom(stringeeClient, roomToken) của Stringee server

Client App sẽ gọi hàm publish(StringeeStream) để xuất bản luồng lên Stringee server

Cuối cùng, Client App sẽ gọi phương thức subscribe(Stringeestream) để đăng ký luồng của khách hàng khác

Và để hiểu hơn về video call, chúng ta sẽ đi vào sample thực tế nhé.

2. Tạo project trên trang developer stringee

Đầu tiên, chúng ta lên trang developer của Stringee để tạo 1 dự án cá nhân. Mỗi project sẽ có 2 cặp key: API Key SID và API key Secret để định danh cho project tương ứng

image.png

3. Tạo dự án video call bằng API Stringee

Source code: web-sdk-conference-samples

Tạo dự án với cấu trúc sau:

image.png

Trong sample file test_room.html, gán link SDK để call lên Stringee server

image.png

Trong sample file token_pro.php, thêm 2 key: KEY_SID và KEY_SECRET của dự án (ở bước 1). File này có nhiệm vụ request lên stringee server để xác thực user cũng như tạo token room

image.png

4. Tạo cuộc gọi video

Lên trang developer của Stringee, vào portal tương ứng, truy cập theo hướng dẫn Tools → Generate Access token và tạo token theo user. Cụ thể ở đây là user1

image.png

Tương tự, tạo token với user2

image.png

Mở 2 tab test_room.html và đăng nhập với 2 user: user1 và user2 tương ứng. Check device và join room

image.png

5. Tài liệu tham khảo

Để thực hành viết ứng dụng gọi video thuận lợi, bạn hãy đăng ký ngay tài khoản Stringee API tại đây.


All Rights Reserved

Viblo
Let's register a Viblo Account to get more interesting posts.