Papan Tulis SDK Amazon Chime dengan Pesan Data untuk Pensinyalan Waktu Nyata

Artikel ini juga tersedia di sini.(Bahasa Jepang)
https://cloud.flect.co.jp/entry/2020/06/01/115652

(PASAL BARU 20/Oktober/2020):
"Faceswap dan Latar Belakang Virtual di browser Anda"

Di artikel terakhir, saya menjelaskan cara membuat latar belakang virtual untuk Amazon Chime SDK.

Saya ingin melanjutkan pembicaraan tentang Amazon Chime SDK di postingan ini.

Tahukah Anda bahwa Amazon mengumumkan penambahan fitur baru ke Amazon Chime SDK mereka beberapa hari yang lalu?

Fitur ini memungkinkan peserta konferensi untuk bertukar pesan data dengan menggunakan saluran komunikasi data yang digunakan oleh Amazon Chime. Seperti disebutkan dalam pengumuman, ini memungkinkan kami menerapkan papan tulis dan emoji dengan mudah di antara peserta di ruang konferensi. Dan itu juga dapat digunakan untuk mengontrol keadaan ruang konferensi, seperti memaksa peserta untuk melakukan mute.

Jadi saya ingin menunjukkan cara membuat papan tulis menggunakan fitur ini.

Ini adalah perilaku papan tulis yang saya buat kali ini.

Amazon Chime dan Sinyal

Fitur tambahan dari Amazon Chime SDK ini menggunakan komunikasi sinyal yang sudah ada di Amazon Chime. Konferensi video Amazon Chime dilakukan menggunakan teknologi yang disebut WebRTC, dan di WebRTC, komunikasi sinyal digunakan untuk mengontrol sesi.

Secara khusus, WebRTC digunakan untuk komunikasi P2P antar browser, dan komunikasi pensinyalan digunakan untuk mengidentifikasi tujuan pihak lain atau untuk bertukar kunci untuk komunikasi kriptografi guna memulai komunikasi ini.

Dan meskipun disebut komunikasi P2P, komunikasi melalui firewall harus melalui server relay yang disebut TURN. Pertukaran informasi tentang rute-rute tersebut juga dilakukan melalui komunikasi persinyalan.

Jika Anda ingin mengetahui lebih banyak tentang WebRTC dan hubungannya dengan pensinyalan, silakan merujuk ke halaman ini.

Amazon Chime menyediakan server relai terkelola dan saluran sinyal untuk memudahkan memulai konferensi video di berbagai lingkungan jaringan. Fitur baru ini memanfaatkan jalur komunikasi terkelola untuk pensinyalan ini guna memungkinkan pertukaran pesan data yang berubah-ubah. Jadi pengembang dapat dengan mudah menambahkan hal-hal seperti papan tulis bersama ke sistem konferensi video mereka tanpa harus menyediakan server untuk pengiriman pesan.

Ikhtisar API Baru

Tiga metode baru yang ditawarkan adalah sebagai berikut

Fungsi ini mengirimkan pesan data dengan “Topik”.

Pertama-tama, setiap klien mendaftarkan fungsi panggilan balik yang mendefinisikan proses untuk setiap Topik. Kemudian, ketika pengirim mengirimkan pesan data dengan Topik, klien menerima pesan data dan memanggil fungsi panggilan balik yang sesuai dengan Topik. Kami tidak mengetahui detail pemrosesan internalnya, terutama aliran datanya, tapi mungkin ini berjalan pada “model terbitkan/berlangganan” yang umum.

Setelah menggunakannya kali ini, menurut saya fitur ini sangat mudah digunakan.

Perhatikan bahwa fungsi ini mungkin tidak dapat menerima pesan data meskipun Penerbit pesan data telah berlangganan topik pesan data, jadi Anda mungkin perlu berhati-hati. Menurut saya keuntungan dari model terbitkan/berlangganan adalah memungkinkan penerbit dan pelanggan mengabaikan hubungan satu sama lain, sehingga fakta bahwa penerbit tidak dapat menerima data ketika mereka berada dalam perangkat lunak (sesi) yang sama hanya sedikit melenceng. .

1. SendDataMessage
   https://aws.github.io/amazon-chime-sdk-js/interfaces/audiovideofacade.html#realtimesenddatamessage
2. Berlangganan
   https://aws.github.io/amazon-chime-sdk-js/interfaces/audiovideofacade.html#realtimesubscribetoreceivedatamessage
3. Berhenti berlangganan
   https://aws.github.io/amazon-chime-sdk-js/interfaces/audiovideofacade.html#realtimeunsubscribefromreceivedatamessage

Papan Tulis Bersama

Berikut alur proses umum papan tulis bersama yang kami buat.

1. Mendeteksi peristiwa mouse/peristiwa sentuh di kanvas browser Penerbit (HTMLCanvasEelemnt) dan mengidentifikasi koordinatnya.
2. Menggambar di kanvas Penerbit
3. Kirim koordinat ke Broker (Chime) sebagai pesan data (real-timeSendDataMessage)
4. Mengirim koordinat dari Broker ke masing-masing Pelanggan
5. Menggambar di kanvas masing-masing Pelanggan

Seperti disebutkan sebelumnya, Publisher tidak dapat menerima pesan data yang dikirimkannya, sehingga harus menggambar di kanvasnya sendiri sebelum mengirim pesan data. Saat membuat aplikasi yang ingin mencerminkan operasi pengguna di UI tanpa penundaan, seperti papan tulis, sebaiknya pengalaman pengguna mencerminkannya di UI sebelum mengirim pesan data, jadi menurut saya akan serupa terlepas dari apakah Penerbit dapat menerima pesan data atau tidak.
Selain itu, karena Publisher tidak dapat menerima pesan data yang dikirimkannya, penerapannya mungkin lebih mudah karena Publisher tidak perlu membuang data yang diterima.

Implementasi

Langganan

Berikut adalah contoh fungsi wrapper yang mendaftarkan topik dan fungsi callback terkait untuk dilanggan oleh realtimeSubscribeToReceiveDataMessage. Di sini, kita mendefinisikan fungsi panggilan balik yang memanggil app.app.receivedDataMessage ketika kita menerima pesan data dan menggunakannya sebagai argumen. Harap dicatat bahwa app.app.receivedDataMessage sendiri dapat didefinisikan di tempat lain untuk pemrosesan sewenang-wenang.

export const setRealtimeSubscribeToReceiveDataMessage = (app:App, audioVideo:AudioVideoFacade, topic:string) =>{
    const receiveDataMessageHandler = (dataMessage: DataMessage): void => {
        app.receivedDataMessage(dataMessage)
    }
    audioVideo.realtimeSubscribeToReceiveDataMessage(topic, receiveDataMessageHandler)
}

Kirim Pesan Data

Ini adalah contoh cara mengirim pesan data menggunakan realtimeSendDataMessage.
Untuk menggambar di papan tulis, koordinat titik awal dan akhir, informasi guratan, ketebalan garis, dll. di-JOSN dan dikirim.

    sendDrawsingBySignal = (targetId: string, mode:string, startXR:number, startYR:number, endXR:number, endYR:number, stroke:string, lineWidth:number)=>{
        const gs = this.props as GlobalState
        const message={
            action: 'sendmessage',
            data: JSON.stringify({ 
                cmd         : MessageType.Drawing,
                targetId    : targetId, 
                startTime   : Date.now(),
                mode        : mode,
                startXR     : startXR,
                startYR     : startYR,
                endXR       : endXR,
                endYR       : endYR,
                stroke      : stroke,
                lineWidth   : lineWidth
            })
        }
        gs.meetingSession?.audioVideo.realtimeSendDataMessage(MessageType.Drawing.toString(), JSON.stringify(message))
    }

Demo

Papan Tulis

Beginilah cara kerja fungsi papan tulis yang Anda buat. Demo ini akan menjadi papan tulis kelas simulasi. Anda dapat melihat bahwa apa yang Anda gambar di sisi kanan tercermin di sisi kiri layar.

Papan Tulis dengan Tampilan Bersama

Anda juga dapat membuat papan tulis ini sebagai overlay sehingga Anda dapat menggunakannya dengan fitur berbagi layar Amazon Chime SDK untuk memberikan presentasi.

Kode

Fitur-fitur yang diuraikan dalam artikel ini dibangun ke dalam uji coba fitur-fitur baru menggunakan konferensi video.
Jika Anda tertarik dengannya, silakan kunjungi repositori berikut.

Akhirnya

Kali ini saya mencoba membuat papan tulis menggunakan fitur terbaru Amazon Chime SDK.

Di Jepang, baru-baru ini diumumkan bahwa keadaan darurat telah dicabut. Namun, tampaknya masih sulit untuk mendapatkan banyak orang di kelas untuk memberikan pelajaran. Selain itu, layanan pelanggan tatap muka bisa berisiko dan sulit dilakukan dengan cara yang sama. Saya pikir konferensi video dan papan tulis bersama dapat menjadi pilihan untuk mengatasi masalah ini.