Panggilan video grup di php

Hai semuanya, hari ini saya ingin membahas cara membuat aplikasi web obrolan video, sangat mirip dengan Google Hangouts, Skype, atau perangkat lunak konferensi video atau platform layanan obrolan mana pun yang Anda sukai. Mengingat lanskap JS yang terfragmentasi hari ini, saya ingin menulis tutorial ini menggunakan versi paling dasar dari HTML, CSS, dan JS. Sebelum Anda mengatakannya, saya tahu saya tahu, JQuery bukan vanilla JS tetapi Vanilla JS bisa sedikit bertele-tele untuk tugas DOM tertentu, saya memilih menggunakan JQuery untuk menyederhanakan beberapa hal. Kami akan mengambil jalan pintas dan menggunakan Bootstrap sehingga kami tidak perlu khawatir menulis terlalu banyak CSS khusus saat kami membuat aplikasi obrolan video multi-pengguna

Untuk kerumunan TLDR. ada demo Heroku di bagian bawah postingan

Diperbarui. 29 April 2020
Posting dan proyek ini telah diperbarui untuk menggunakan Agora versi terbaru. SDK Web (v3. 0. 2)

Prasyarat

• Server web sederhana — Saya suka menggunakan Live Server
• Sertifikat SSL atau cara untuk memiliki koneksi HTTPS (saya menggunakan ngrok)
• Akun developer dengan Agora
• Pemahaman tentang HTML/CSS/JS
• Pemahaman tentang cara kerja JQuery
• Pemahaman tentang bagaimana fungsi Bootstrap
  (pengetahuan minimal diperlukan)

Struktur Inti (HTML)

Mari kita mulai membangun aplikasi web obrolan video kita dengan meletakkan HTML dasar kita. Ada beberapa elemen UI yang harus kita miliki, seperti aliran video lokal, aliran video jarak jauh, bilah alat yang berisi tombol untuk beralih aliran audio/video, tombol untuk membagikan layar kita dengan grup, dan terakhir cara untuk

Menambahkan CSS dan JS

Sekarang setelah kami memiliki basis aplikasi web obrolan video, kami dapat mulai berkembang. Menggunakan Bootstrap untuk CSS kami, kami dapat dengan cepat menata HTML kami dengan beberapa kelas sederhana. Pada kode di atas, mari tambahkan tautan CSS _(ditampilkan di bawah)_ ke dalam kode tempat kita melihat blok komentar <!-- CSS includes go here -->

Meskipun Bootstrap bagus tetapi itu bukan solusi holistik, jadi saya memasukkan beberapa blok CSS tambahan dalam file CSS khusus (kita akan membahasnya nanti). Ini akan membantu menyesuaikan beberapa elemen yang tidak akan kami sempurnakan dengan Bootstrap. Saya juga menambahkan framework Font Awesome CSS karena kita perlu menyertakan ikon untuk berbagai tombol dan FA membuatnya sangat sederhana

Seperti yang saya sebutkan, Bootstrap adalah framework yang berkualitas, tetapi terkadang Anda masih memerlukan sedikit CSS khusus. Berikut adalah blok penataan untuk referensi di atas style.css

Menambahkan Elemen UI

Sekarang mari tambahkan beberapa tombol untuk mengontrol pengalihan mikrofon, video, atau keluar dari saluran dan selesaikan bagian terakhir dari UI kita. Di sinilah Font Awesome dan Bootstrap benar-benar membuat segalanya menjadi sederhana. Kami akan menggunakan elemen _______________ dan beberapa ikon Font Awesome

Bagian di bawah ini cocok dengan kode di atas dengan mengganti komentar <!-- insert button to share screen -->  dan
<!-- insert buttons to toggle audio/video and leave/end call -->

Kita perlu menambahkan beberapa JS untuk mengontrol tombol. JQuery akan sangat membantu kita di sini dengan menyederhanakan kode untuk berbagai operasi DOM yang memungkinkan UI terasa dinamis bagi pengguna

Seperti yang Anda lihat ada beberapa logika tambahan untuk kontrol keyboard. Selama pengujian saya menemukan memiliki pintasan keyboard membuat segalanya bergerak lebih cepat. Dalam cuplikan di atas, kami memiliki dukungan untuk m, v, s, q untuk beralih mikrofon, video, dan berbagi layar dan untuk keluar dari panggilan (masing-masing)

Saya menyimpan kode di atas ke dalam file ui.js agar tetap terpisah dari logika obrolan video inti yang akan kita tulis. Pastikan juga untuk menyertakan file ui.js dalam file HTML kita (menggunakan cuplikan di bawah)

<script src="ui.js"></script>

Struktur Inti (JS)

Sekarang setelah kita memiliki struktur HTML/DOM yang ditata, kita dapat menambahkan JS. Saya memilih menggunakan Agora untuk menyederhanakan tugas berat antarmuka WebRTC. Saya menulis postingan singkat tentang cara menyiapkan Agora untuk siapa saja yang baru mengenal platform Agora. Pada kode di bawah ini kita mulai dengan mendeklarasikan dan menginisialisasi objek Client. Setelah kita memiliki objek Klien, kita dapat bergabung/meninggalkan saluran, tetapi kita juga akan menambahkan pendengar untuk berbagai peristiwa mesin

Di bawah ini saya menyertakan beberapa deklarasi objek awal untuk berbagi layar. Saya akan memperluas penerapan itu nanti, saat kita menambahkan logika lainnya

Satu hal yang perlu diperhatikan. semua pendengar acara SDK Agora harus berada di tingkat atas. Harap jangan membuat kesalahan dengan menyarangkan mereka ke panggilan balik bergabung saluran. Saya melakukan kesalahan ini dan menyebabkan saya hanya memiliki akses ke aliran yang bergabung dengan saluran setelah saya

Seperti yang Anda lihat dalam kode di atas, kami memiliki panggilan balik ‘stream-added’. Di sinilah kita akan menambahkan logika untuk menangani pengaturan streaming jarak jauh pertama ke video layar penuh dan setiap streaming berikutnya ke wadah div baru di dalam div streaming jarak jauh yang akan memberi kita fungsionalitas grup lebih dari sekadar panggilan video 1-ke-1. Di bawah ini adalah fungsi yang akan kami panggil setiap kali aliran jarak jauh baru ditambahkan, dan kami ingin menambahkannya sendiri secara dinamis ke DOM

Satu catatan terakhir untuk bagian ini. kami memiliki tombol yang mengaktifkan aliran mikrofon dan video, tetapi kami perlu memberikan umpan balik kepada pengguna jarak jauh yang berlangganan aliran yang dibisukan. Jangan khawatir, SDK Agora menyediakan beberapa callback khusus untuk situasi ini. Di atas Anda dapat melihat kasus ini ditangani oleh peristiwa seperti <!-- CSS includes go here -->0 atau <!-- CSS includes go here -->1

Menyempurnakan UI dengan Menangani Tindakan Stream Jarak Jauh

Pertama mari kita mulai dengan menambahkan beberapa div tambahan dengan ikon untuk mikrofon yang dibisukan dan ikon pengguna saat umpan video dinonaktifkan. Saya akan menggunakan wadah lokal sebagai referensi karena wadah aliran jarak jauh akan memiliki struktur yang serupa

Div baru akan menyimpan beberapa ikon Font Awesome yang dapat kita sembunyikan/tampilkan setiap kali event callback dijalankan untuk streaming lokal dan remote yang sesuai. Sekarang kami memiliki beberapa nama untuk elemen kami, kami dapat dengan mudah mengontrolnya di dalam event listener kami

Lebih Banyak Embel-embel

Ada beberapa efek yang dapat kami tambahkan untuk benar-benar meningkatkan pengalaman pengguna. Pertama mari kita pertimbangkan apa yang terjadi jika pengguna menginginkan streaming yang berbeda menjadi layar penuh. Kami akan menambahkan pendengar klik dua kali ke setiap streaming jarak jauh sehingga saat pengguna mengklik dua kali streaming jarak jauh, tampilan mini akan ditukar dengan tampilan layar penuh

Terakhir mari kita pastikan selalu ada aliran layar penuh selama setidaknya satu aliran terhubung. Kita dapat menggunakan beberapa metode serupa seperti yang kita lakukan di atas

Saya menambahkan beberapa pengacakan sehingga ketika aliran jarak jauh layar penuh meninggalkan saluran, salah satu aliran jarak jauh lainnya dipilih secara acak dan disetel untuk diputar di div layar penuh

Menyatukan Semuanya

Sekarang setelah kita memiliki semua cuplikan ini, mari gabungkan dan isi sisa logika tentang bagaimana aplikasi web harus bereaksi terhadap setiap peristiwa

Catatan. Fitur berbagi video tidak didukung oleh Safari, dan meskipun Chrome mendukung berbagi layar, fitur ini memerlukan plugin khusus agar berfungsi dengan baik. Untungnya FireFox tidak memiliki batasan seperti itu. Ya, Anda membacanya dengan benar. Saya berkata mari kita gunakan Firefox untuk menguji berbagi layar

Mari lepaskan JS kami ke halaman HTML kami untuk membuat koneksi terakhir. Cuplikan di bawah cocok dengan HTML utama (di atas) dengan mengganti komentar dengan cuplikan di bawah ini

Penyiapan Pengujian (server web/https)

Ada beberapa cara berbeda untuk mengimplementasikan berbagai pustaka (Agora, JQuery, dan Bootstrap), jadi saya memilih untuk menggunakan versi CDN. Karena menggunakan CDN dengan koneksi HTTPS memerlukan koneksi Internet yang aman, sebelum kami dapat menguji aplikasi obrolan video kami, kami harus mengaktifkan server web sederhana (saya suka menggunakan Server Langsung). Persyaratan server web disebabkan oleh pembatasan browser saat memuat file dari sumber <!-- CSS includes go here -->3. Untuk tujuan pengujian lokal <!-- CSS includes go here -->4 diberikan akses oleh browser, tetapi untuk berbagi dengan teman, kami memerlukan cara untuk keluar dari mesin lokal kami. Ngrok, adalah layanan freemium yang membuat tunnel ini dari komputer lokal Anda dan menyediakan url <!-- CSS includes go here -->3 untuk digunakan. Menurut pengalaman saya, ini adalah salah satu cara paling sederhana untuk menjalankan server web aman <!-- CSS includes go here -->3 di komputer lokal Anda

Setelah server siap, kami dapat menjalankan pengujian kami

Catatan. untuk pengujian kami akan menggunakan dua (atau lebih) tab browser untuk mensimulasikan host lokal dan satu/beberapa host jarak jauh

Sirip

Dan begitu saja kita selesai. Jika Anda tidak membuat kode atau ingin melihat produk jadi secara bersamaan, saya telah mengunggah semua kode ke GitHub

Jika Anda ingin melihat demo beraksi, lihat di Heroku

Harap dicatat bahwa karena tingginya permintaan, saya telah mengupdate build sehingga Anda perlu mendaftar akun Agora gratis agar AppId dapat menguji demo. Jika Anda memerlukan bantuan, saya memiliki panduan 3 langkah singkat

Jika Anda menikmati postingan ini, saya akan merekomendasikan Cara Membuat Aplikasi Web Siaran Langsung di mana kami akan membuat tiruan YouTube Live dengan beberapa fitur tambahan

Terima kasih telah meluangkan waktu untuk membaca tutorial saya tentang cara membuat proyek aplikasi web obrolan video dengan Agora. Jika Anda memiliki pertanyaan, beri tahu saya dengan komentar. Jika Anda melihat ada ruang untuk perbaikan, silakan fork repo dan buat permintaan tarik

Bagaimana cara mengintegrasikan panggilan video di PHP?

Bagaimana cara mengintegrasikan panggilan video ke situs web saya?