Tìm hiểu cơ bản về Skyway JavaScript SDK

LAMP Jun 11, 2021

Xin chào mọi người, hôm nay mình sẽ giới thiệu cơ bản về Skyway và cách sử dụng nó như thế nào nhé.

I: Giới thiệu tổng quát về Skyway

1. Khái niệm

- SkyWay là một SDK đa nền tảng và dịch vụ API được quản lý hoàn toàn giúp bạn dễ dàng triển khai chức năng gọi điện video và thoại trong các ứng dụng của mình.

- Không cần phải phát triển và vận hành một máy chủ. Bạn có thể dễ dàng phát triển ứng dụng bằng cách sử dụng SDK đa nền tảng.

- SkyWay là SDK & API giúp dễ dàng đưa vào WebRTC (Giao tiếp thời gian thực trên web), một công nghệ tiêu chuẩn để hiện thực hóa giao tiếp thời gian thực trên Web, vào các ứng dụng.

- Phát triển được trên web và cả moblie.

II: Đăng ký và cài đặt (Javascript SDK)

1. Cài đặt

- Để tiến hành cài đặt skyway ta thực hiện như sau:‌

- Sau đó ta tiến hành import‌

import Peer from 'skyway-js';

- Hoặc cũng có thể sử dụng CDN‌

<script src="https://cdn.webrtc.ecl.ntt.com/skyway-4.4.1.js"></script>

2. Đăng ký

- Khi đã tiến hành xong, chúng ta phải đăng ký để lấy Api_Key. Api_Key này cho phép những ứng dụng cùng sử dụng nó có thể tạo kết nối data với nhau.

B1: Truy cập vào đường dẫn https://webrtc.ecl.ntt.com/ và đăng ký

B2: Chọn button Create a new Application

B3: Thêm "localhost" vào “Available domains", thêm domain của những ứng dụng muốn sử thực hiện cuộc gọi với nhau và chọn"Create"

B4: Sao chép và lưu Api_Key‌

III: Cách thức hoạt động

Skyway cho phép chúng ta gọi ngang hàng 1-1(peer-to-peer) và cũng có thể cho phép gọi nhiều người.

Sau đây mình xin phép giới thiệu về gọi video chat 1-1 và text chat 1-1‌

1. Gọi video chat 1-1( sử dụng mediaConnection)
‌ * Đầu tiên chúng ta cần phải tạo ra 1 đối tượng gọi là Peer, đây là đơn vị trung tâm giao tiếp:‌

 const peer = new Peer({
    key: 'Your API KEY',
    debug: 3
  });
  

‌ - Vậy là chúng ta đã có peer của mình. Để bên A kết nối với bên B thì chúng ta cần PeerId của bên B.

* Tiếp theo cần cấp quyền cho máy sử dụng camera và micro:‌

return new Promise((resolve, reject) => {
        this.stream = navigator.mediaDevices
          .getUserMedia({ video: true, audio: true })
          .then(async (stream) => {
            const videoElm = document.getElementById("my-video");
            videoElm.srcObject = stream;
            videoElm.muted = true;
            await videoElm.play();
            this.localStream = stream;
            resolve(true);
          })
          .catch((error) => {
            console.error("mediaDevice.getUserMedia() error:", error);
            return;
          });
        reject(error);
      });

* Bắt đầu thực hiện Call‌

 const media = this.peer.call("peerId", this.localStream);

Sau khi bên A thực hiện cuộc gọi, bên B sẽ bắt sự kiện sau để nhận và tiến hành vào cuộc gọi‌

peer.on("call", (mediaConnection) => {
  mediaConnection.answer(this.localStream);
});

Bên A sẽ nhận được event answer của bên B.‌

mediaConnection.on("stream", (stream) => {
  // ...
});

Để kết thúc cuộc gọi ta sử dụng mediaConnection.close(true). Bên còn lại sẽ bắt sự kiện sau để biết được bên đối phương đã kết thúc.‌

mediaConnection.on("close", () => {
  // ...
});

2. Text chat( sử dụng dataConnection)

Cũng như Video chat thì chúng ta cần phải khởi tạo 1 đối tượng Peer.

const peer = new Peer({
    key: 'Your API KEY',
    debug: 3
  });
  

Bắt đầu thực hiện connect từ bên A đến bên B

const dataConnection = this.peer.connect(peerId);

Như vậy chúng ta đã tạo được 1 dataConnection giữa 2 bên. Lúc này chúng ta có thể trao đổi data qua lại với nhau qua như sau:

const dataConnection = this.peer.connect(peerId);

        const payload = {
          message: "hello"
        };
        dataConnection.on("open", () => {
          dataConnection.send(payload);
        });

Bên nhận sẽ bắt được data bên kia gửi qua:

dataConnection.on("data", (data) => {
	console.log(data);
});

Để kết thúc ta sử dụng dataConnection.close(). Bên còn lại sẽ bắt sự kiện sau để biết được bên đối phương đã kết thúc. v‌à thực hiện đóng dataConnection.

 dataConnection.on("close", () => {
    dataConnection.close();
 });

IV: Lời kết

Dưới góc độ của 1 fresher nên mình chỉ tìm hiểu ở mức cơ bản, bài viết còn nhiều thiếu xót mong mọi người thông cảm và bổ sung thêm. Còn về demo thì hẹn gặp mọi người ở buổi thuyết trình present nào đó để có thể thực hiện.‌
‌Thanks for reading <3

Tài liệu tham khảo:‌
https://webrtc.ecl.ntt.com/en/documents/javascript-sdk.html

Tags

Great! You've successfully subscribed.
Great! Next, complete checkout for full access.
Welcome back! You've successfully signed in.
Success! Your account is fully activated, you now have access to all content.