Cara Membina apl Web Sembang Video Rawak denganWebrtc ,Websocket dan Django.

Pada tahun kedua saya di kolej, Saya dan rakan saya pernah menghabiskan masa berjam-jam di Omegle, bersembang dengan orang rawak dari seluruh dunia. Ia sentiasa gabungan keseronokan dan kejutan — anda tidak pernah tahu siapa yang akan anda temui seterusnya. Apabila Omegle ditutup, ia meninggalkan kekosongan. Kami terlepas keseronokan sambungan rawak itu, dan ketika itulah saya terfikir, "Mengapa tidak membina versi saya sendiri?"

Dalam blog ini, saya akan memecahkan proses mereka bentuk dan membina platform sedemikian menggunakan WebRTC dan WebSockets, menyerlahkan cabaran yang saya hadapi dan cara saya mengatasinya. Menjelang akhir blog ini, anda bukan sahaja akan memahami cara ia berfungsi tetapi juga mempunyai asas yang kukuh untuk mula membina aplikasi komunikasi masa nyata anda sendiri

Saya sedang mengusahakan projek yang dipanggil Noto Chats, yang merangkumi ciri sembang video rawak ini bersama-sama dengan beberapa fungsi menarik yang lain. Sistem ini telah diuji dengan teliti dan berfungsi dengan lancar.

Berikut ialah Pautan Kod untuk apl sembang ramdomvideo https://github.com/Arsh910/RandomVideo-Chat-app

The Tech Stack

Frontend: ReactJS untuk membina antara muka pengguna interaktif.
Bahagian Belakang: Saluran Django untuk mengendalikan sambungan WebSocket.
Protokol Isyarat: WebSockets untuk mewujudkan sambungan WebRTC.
Penstriman Media: WebRTC untuk komunikasi video dan audio peer-to-peer.

Reka bentuk

Kedua-dua belah pihak rakan sebaya akan cuba untuk membuat berhubung, yang membuat pertama akan diteruskan

Komponen Reka Bentuk:

Jika anda tidak biasa dengan cara WebRTC berfungsi, lihat video ini tempat saya belajar. Berikut ialah gambaran keseluruhan ringkas komponen

1. Pelanggan 1 dan Pelanggan 2
Ini mewakili dua pengguna yang cuba menyambung. Setiap pelanggan bertanggungjawab untuk membuat tawaran, menghantarnya ke pelayan dan membalas tawaran yang mereka terima.

Analogi: Fikirkan Klien 1 dan Klien 2 sebagai dua orang yang ingin berbual. Mereka belum mengenali antara satu sama lain tetapi bersemangat untuk bercakap. Masing-masing mengambil inisiatif untuk menghubungi dan menunggu yang lain untuk membalas.

2. Pelayan
Pelayan bertindak sebagai pencari jodoh. Ia tidak mengendalikan perbualan sebenar tetapi memudahkan pengenalan dengan memberikan tawaran dan jawapan antara pelanggan dan membantu bertukar-tukar butiran sambungan.

Analogi: Bayangkan rakan bersama memperkenalkan dua orang di sebuah parti. Rakan itu tidak menyertai perbualan mereka tetapi memastikan mereka mengetahui nama dan nombor satu sama lain untuk mula bercakap.

3. PeerConnection
PeerConnection ialah mekanisme yang mewujudkan hubungan langsung antara kedua-dua pelanggan. Ia menguruskan pertukaran media (audio/video) dan memastikan sambungan kekal stabil setelah disediakan. Suka peer1 dan peer 2 dalam gambar di atas .

Analogi: PeerConnection adalah seperti terowong peribadi yang selamat antara dua rumah. Setelah terowong dibina, orang di dalam boleh menghantar nota, bercakap atau menghantar pakej tanpa orang lain melihat.

4. Calon ICE
Calon ICE (Interactive Connectivity Establishment) adalah blok binaan untuk sambungan terus. Ini ialah laluan dan laluan rangkaian yang PeerConnection cuba gunakan untuk mewujudkan sambungan terbaik.

Analogi: Calon ICE adalah seperti peta yang menunjukkan berbilang jalan untuk menghubungkan dua rumah. Sambungan mencari jalan terbaik (paling pendek, paling lancar) dan menggunakannya untuk memastikan laluan yang cepat dan boleh dipercayai.

5. Tawaran dan Jawab
Proses sambungan bermula dengan satu pelanggan (Pemanggil) membuat tawaran dan menghantarnya kepada pelanggan lain melalui pelayan. Pelanggan kedua (Penerima) mencipta jawapan dan menghantarnya kembali. Pertukaran ini menyediakan sambungan.

Analogi: Bayangkan seseorang menghantar surat berkata, "Mari kita berkawan!" Orang lain menjawab, "Sudah tentu, saya juga mahukan itu!" Apabila mereka bersetuju, persahabatan bermula.

6. Lagu (Strim Audio/Video)
Lagu merujuk kepada strim media (audio dan video) yang dikongsi antara pelanggan sebaik sahaja sambungan diwujudkan.

Analogi: Lagu adalah seperti suapan langsung daripada dua kamera dan mikrofon. Setiap orang boleh melihat dan mendengar apa yang dikongsi oleh orang lain dalam masa nyata, seperti panggilan video langsung.

7. Proses Isyarat
Proses isyarat melibatkan pertukaran tawaran, jawapan dan calon ICE melalui pelayan. Ini memastikan bahawa kedua-dua pelanggan mempunyai maklumat yang diperlukan untuk mewujudkan PeerConnection langsung.

Analogi: Proses isyarat adalah seperti sistem pos yang menyampaikan mesej antara dua orang yang ingin berhubung. Posmen (pelayan) memastikan surat (tawaran, jawapan) sampai kepada penerima yang betul supaya perbualan boleh dimulakan.

Cabaran Dwi Peranan

Untuk memahami reka bentuk, penting untuk memahami cabaran utama terlebih dahulu.

Dalam panggilan telefon tradisional, proses sambungan melibatkan seorang bertindak sebagai pemanggil dan seorang lagi sebagai penerima. Namun, dalam aplikasi sembang seperti ini, keadaannya berbeza. Di sini, setiap pengguna sedang memulakan sambungan dan menunggu orang lain menerimanya. Ini bermakna semua orang mesti berfungsi sebagai pemanggil dan penerima secara serentak, mewujudkan sistem di mana kedua-dua peranan bergabung untuk memudahkan kelancaran.

Itulah sebabnya saya menggunakan dua sambungan rakan sebaya, rakan sebaya1 dan rakan sebaya2.

Beberapa Fungsi Penting:

OnIceCandidateFunc
Mengendalikan pertukaran calon ICE untuk mewujudkan sambungan peer-to-peer. Ia Menghantar calon ICE ke pelayan apabila calon Ais diterima daripada Pelayan STUN.

OnTrackFunc
Mengendalikan trek media (audio/video) yang diterima daripada rakan sebaya. Diaktifkan apabila rakan sebaya menghantar trek. Memaparkan media pada antara muka penerima.

penangan_ais
Mengendalikan calon ais yang diterima daripada pelanggan lain. Ia menambahkan calon ais yang diterima dan menambahkannya pada sambungan rakan sebaya.

GetRandomUser
Fungsi ini memilih pengguna rawak daripada senarai pengguna dalam talian, tidak termasuk pengguna semasa. Jika senarai itu kosong, ia menimbulkan ralat. Ini memastikan gandingan rawak yang adil untuk sembang.

Hantar Padanan
Fungsi ini menghantar permintaan sambungan ke pelayan untuk pengguna rawak yang dipilih. Ia membina mesej WebSocket, memaklumkan pelayan tentang niat untuk menyambung.

Perlawanan semak
Fungsi ini mengesahkan jika respons pelayan mengesahkan perlawanan yang berjaya. Ia menyemak orang lain memilih pengguna ini. Ia menyemak sama ada pengguna ini memilih pengguna lain. Ia menyemak sama ada bendera calling_clicked adalah benar (Adalah penting pengguna lain turut mengklik panggilan).

Jika semua syarat dipenuhi, ia kembali benar; jika tidak, ia kembali palsu. Langkah ini memastikan sambungan disahkan dengan betul sebelum meneruskan.

Contoh untuk Memahami Proses Pemadanan

Kedua belah pihak akan menghantar dan menerima , pihak yang menerima dahulu diambil

Proses Sambungan Webrtc

Rakan Sebaya 1 dan Rakan Sebaya 2
Untuk mewujudkan sambungan, dua rakan sebaya, Peer 1 dan Peer 2, memainkan peranan yang berbeza:

Rakan Sebaya 1: Bertanggungjawab untuk membuat tawaran dan menerima jawapan.
Rakan 2: Mengendalikan tawaran, menjana jawapan dan menghantarnya kembali.
Proses Sambungan
Begini cara proses sambungan berlaku selepas perlawanan dibuat:

1 Memulakan Rakan Sebaya 1:
Peer 1 dibuat pada kedua-dua pelanggan (cth., Klien 1 dan Klien 2).
Dua acara penting dilampirkan pada Peer 1:
OnTrackFunc: Mengurus strim audio/video yang masuk daripada rakan sebaya yang lain.
OnIceCandidateFunc: Menghantar calon ICE ke pelayan setiap kali calon baharu diterima daripada pelayan STUN.

2 Mencipta dan Menghantar Tawaran:
Peer 1 menjana tawaran, yang ditetapkan sebagai localDescriptionnya.
Tawaran ini dihantar kepada pengguna yang dipadankan (melalui pelayan isyarat) oleh kedua-dua pelanggan.
3 Mengendalikan Tawaran dengan Rakan Sebaya 2:

Setelah menerima tawaran, Peer 2 dicipta di kedua-dua belah pihak.
Sama seperti Peer 1, Peer 2 dimulakan dengan acara OnTrackFunc dan OnIceCandidateFunc.
Tawaran yang diterima ditetapkan sebagai Perihalan jauh Peer 2.

4 Menjana dan Menghantar Jawapan:
Peer 2 menjana jawapan, yang ditetapkan sebagai localDescriptionnya.
Jawapan ini dihantar semula kepada pelanggan lain (melalui pelayan) oleh kedua-dua belah pihak.

5 Melengkapkan Sambungan:
Setelah jawapan diterima, ia ditetapkan sebagai Perihalan jauh Peer 1.
Kedua-dua pelanggan kini mempunyai maklumat yang diperlukan untuk mewujudkan sambungan terus.

Kedua-dua pihak akan menghantar dan menerima

6 Mengendalikan Calon ICE:
Apabila calon ICE ditukar, OnIceCandidateFunc dicetuskan.
Calon ICE yang diterima diproses menggunakan fungsi handle_ice, yang menambahkan mereka pada peer yang sesuai (Peer 1 atau Peer 2) berdasarkan persediaan sambungan.

7 Menyediakan Strim Media:
Acara OnTrackFunc dicetuskan apabila runut media (audio/video) diterima.
Ini memastikan strim video dan audio jauh dipaparkan pada kedua-dua pelanggan.

Kedua-dua pihak akan menghantar dan menerima

Proses penyambungan tidak berlaku serentak pada kedua-dua belah pihak kerana pemilihan pengguna dan kelewatan pemprosesan secara rawak. Mana-mana pelanggan yang melengkapkan persediaan dahulu akan menjadi "pemanggil", manakala yang lain bertindak sebagai "penerima".

Setelah sambungan WebRTC berjaya diwujudkan, kedua-dua pengguna boleh menikmati pengalaman sembang video yang lancar.

Menamatkan panggilan

Menamatkan panggilan WebRTC dengan betul adalah penting untuk mengelakkan masalah semasa sambungan masa hadapan, seperti kebocoran sumber atau ralat semasa menyambung semula. Berikut ialah panduan terperinci untuk mengendalikan penamatan panggilan dengan betul:

1 Alih Keluar Calon ICE:
Calon ICE digunakan untuk mewujudkan hubungan antara rakan sebaya.
Sebelum menamatkan panggilan, kosongkan mana-mana calon ICE yang disimpan untuk memastikan mereka tidak mengganggu sambungan masa hadapan.

2 Maklumkan Pelanggan Lain:
Maklumkan kepada pelanggan lain bahawa panggilan akan ditamatkan.
Ini boleh dilakukan melalui pelayan isyarat untuk menamatkan sambungan pada kedua-dua belah dengan anggun.

3 Alih Keluar Lagu daripada Sambungan Rakan Sebaya:
Alih keluar sebarang runut media (audio/video) yang dikaitkan dengan sambungan rakan sebaya untuk mengosongkan sumber.
Ini menghalang penerusan strim media selepas panggilan ditamatkan.

4 Tetapkan Semula Keadaan Panggilan:
Tetapkan pembolehubah calling_clicked kepada null (atau yang setara dengannya dalam aplikasi anda).
Ini memastikan bahawa aplikasi mengetahui tiada panggilan aktif sedang berjalan.
Tetapkan semula Peer 1 dan Peer 2 kepada null.
Ini membebaskan memori yang diperuntukkan untuk sambungan rakan sebaya dan mengelakkan penggunaan semula objek lama secara tidak sengaja.
Tetapkan Aliran jauh kepada null.
Ini memastikan bahawa strim audio/video jauh dikosongkan daripada antara muka aplikasi.

hanya satu pihak , kerana hanya satu daripada pelanggan yang memulakan penghujung

Membungkus

Membina apl sembang video rawak sama menariknya dengan menggunakan satu! Proses itu datang dengan cabaran dan peluang pembelajaran yang saksama, tetapi kepuasan melihat ciptaan anda dihidupkan benar-benar menggembirakan.

Sebagai pelajar tahun 3 Sains Komputer, saya telah mencurahkan semangat dan rasa ingin tahu saya ke dalam projek ini. Walaupun saya telah melakukan yang terbaik untuk memastikan semuanya berfungsi dengan lancar, sentiasa ada ruang untuk penambahbaikan. Jika anda mendapati sebarang kelemahan atau mempunyai cadangan untuk menjadikan projek ini lebih baik, sila jangan teragak-agak untuk menghubungi saya — saya ingin belajar daripada cerapan anda!

Jadi, ambil papan kekunci anda, selami kod, dan siapa tahu — anda mungkin mencipta perkara besar seterusnya dalam komunikasi dalam talian.

Selamat pengekodan! ?

Atas ialah kandungan terperinci Cara Membina apl Web Sembang Video Rawak denganWebrtc ,Websocket dan Django.. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!