Jika anda memerlukan pengetahuan latar belakang mengenai WebRTC dan komunikasi peer-to-peer, disarankan untuk membaca "Dawn of Webrtc" dan "Pengenalan kepada GetUsermedia API".
Oleh kerana kerumitan membina aplikasi WebRTC tersuai, artikel ini tidak akan menyediakan tutorial membina langkah demi langkah. Sebaliknya, kita akan melihat jenis perpustakaan dan pelayan yang diperlukan untuk membina aplikasi yang boleh dipercayai. Saya akan menyediakan pautan aplikasi sampel lengkap yang boleh anda rujuk semasa membina permohonan anda sendiri.
Kami akan memberi tumpuan terutamanya pada platform SimpleWebRTC. Kemudian, kami akan secara ringkas merangkumi alternatif sumber komersil dan terbuka yang dapat membantu anda mencapai matlamat yang sama.
mata utama
- WebRTC membolehkan komunikasi masa nyata titik ke titik langsung dalam pelayar web, tanpa memerlukan pemalam pihak ketiga, dan menyokong pelayar moden seperti Chrome, Firefox dan Safari.
- Menandatangani dalam WebRTC (kritikal untuk mewujudkan sambungan peer-to-peer) bergantung pada pelayan dan menghidupkan pelayan untuk memintas NAT (terjemahan alamat rangkaian) dan firewall untuk memastikan sambungan dalam pelbagai konfigurasi rangkaian.
- SimpleWEBRTC menyediakan platform yang komprehensif untuk membina dan menggunakan aplikasi WEBRTC, menyediakan SDK, perkhidmatan hosting dan sokongan teknikal untuk memudahkan pemaju untuk melaksanakan penyelesaian sembang video tersuai.
- Alternatif kepada SimpleWebRTC, seperti Daily.co dan platform komersil yang lain, menawarkan pelbagai tahap kemudahan penggunaan dan penyesuaian untuk memenuhi keperluan persediaan pantas untuk penyelesaian berjenama sepenuhnya.
- Penggunaan aplikasi WebRTC memerlukan kebolehpercayaan rangkaian, keselamatan, dan pertimbangan keserasian pelayar, dan platform komersial memudahkan banyak kerumitan yang berkaitan dengan pembangunan tersuai.
Apa itu WebRTC?
WebRTC (komunikasi masa nyata Web) adalah projek sumber terbuka yang membolehkan komunikasi masa nyata titik ke titik antara pelayar web, menghantar video masa nyata, aliran audio dan data melalui rangkaian. Google Chrome, Mozilla Firefox, Safari, Opera dan pelayar berasaskan kromium lain telah melaksanakan teknologi ini secara asli. Ini adalah berita baik kerana pengguna boleh mengakses teknologi tanpa memasang plugin atau aplikasi pihak ketiga.Versi pelayar yang lebih tua dan pelayar tradisional seperti Internet Explorer tidak mempunyai teknologi ini. Pengguna perlu menggunakan penyemak imbas terkini. Anda boleh melihat senarai penuh penyemak imbas yang disokong:
Pada bulan Januari 2021, World Wide Web Alliance (W3C) mengubah spesifikasi WebRTC 1.0 dari keadaan cadangan calon ke keadaan yang disyorkan. Ini adalah pencapaian yang luar biasa memandangkan teknologi pertama kali dikeluarkan 10 tahun yang lalu.
Spesifikasi WebRTC merangkumi bagaimana pelayar mengakses peranti media tempatan dan bagaimana mereka menggunakan satu set protokol masa nyata untuk menghantar data aplikasi media dan umum kepada penyemak imbas. Ia melakukan ini melalui satu set API JavaScript yang telah diliputi dalam artikel sebelumnya. Spesifikasi ini juga memastikan bahawa semua komunikasi disulitkan dan pihak ketiga yang tidak diingini tidak dapat menguping aliran.
Harus diingat bahawa WebRTC tidak meliputi segala -galanya, seperti isyarat, proses memulakan sambungan antara penyemak imbas. Untuk mengelakkan batasan teknikal baru yang berpotensi, bahagian kandungan ini ditinggalkan dari spesifikasi. Alasan kedua ialah WebRTC adalah teknologi pelanggan, dan lebih baik menggunakan teknologi pelayan untuk menangani masalah seperti sesi.
bagaimana isyarat penyemak imbas berfungsi
WebRTC ditakrifkan sebagai komunikasi titik-ke-titik antara pelayar web. Realitinya adalah bahawa kebanyakan pelayar berjalan di komputer yang terletak di belakang peranti NAT (Network Alamat Terjemahan) (Firewall Pilihan). Peranti NAT (biasanya router atau modem) membenarkan komputer dengan alamat IP peribadi untuk menyambung ke Internet melalui satu alamat IP awam.
peranti NAT melindungi komputer peribadi dari serangan langsung oleh pengguna berniat jahat di Internet melalui alamat IP. Malangnya, ia juga menghalang peranti dengan alamat IP peribadi daripada menyambung ke peranti IP peribadi lain melalui Internet.
Untuk mengatasi cabaran ini, Pasukan Petugas Kejuruteraan Internet (IETF) mencadangkan protokol ICE (Interactive Connection Plotmischmisment), yang membolehkan komputer IP swasta untuk ditemui dan menyambung ke komputer swasta lain di rangkaian awam.
Ini melibatkan menggunakan pelayan isyarat awam, yang mana kedua -dua pelanggan dapat menyambung dengan mudah. Komputer rakan sebaya menghubungkan ke pelayan ini dan menggunakannya untuk menukar alamat IP dan port yang diperlukan oleh sumber data dan penerima. Dengan maklumat ini, mereka boleh mewujudkan sambungan langsung antara satu sama lain dan mula menghantar video, audio, dan data.
Ini adalah demonstrasi animasi:
Penerangan imej: WebRTC isyarat
Untuk menubuhkan isyarat WebRTC, rangka kerja ICE mengharapkan anda menyediakan dua jenis pelayan berikut.1
stun (Sesi Traversal Utility for NAT) Fungsi pelayan seperti yang saya nyatakan di atas. Ia hanya menyediakan ruang mesyuarat untuk komputer untuk bertukar maklumat hubungan. Sebaik sahaja pertukaran maklumat selesai, sambungan ditubuhkan di antara komputer rakan sebaya, dan pelayan stun meninggalkan seluruh perbualan.
Ini adalah skrip sampel yang berjalan pada klien, yang membolehkan penyemak imbas memulakan sambungan melalui pelayan stun. Skrip ini membolehkan pelbagai URL pelayan stun disediakan apabila salah satu pelayan gagal:
Sambungan yang ditubuhkan melalui pelayan stun adalah jenis komunikasi WebRTC yang paling ideal dan kos efektif. Pengguna tidak akan menanggung sebarang kos yang berjalan. Malangnya, kerana setiap rakan sebaya menggunakan jenis peranti NAT yang berbeza, beberapa sambungan pengguna mungkin tidak ditubuhkan. Dalam kes ini, protokol ICE menghendaki anda memberikan sandaran, jenis pelayan isyarat yang berbeza yang dipanggil pelayan Turn.
function createPeerConnection() { myPeerConnection = new RTCPeerConnection({ iceServers: [ { urls: "stun:stun.stunprotocol.org", }, ], }); }
2
Putar (perjalanan dengan relay NAT) pelayan adalah lanjutan pelayan stun. Apa yang menjadikannya berbeza dari pendahulunya ialah ia mengendalikan keseluruhan sesi komunikasi.Pada dasarnya, selepas mewujudkan hubungan antara rakan sebaya, ia menerima aliran dari satu rakan sebaya dan ke hadapannya kepada rakan sebaya dan sebaliknya. Komunikasi jenis ini lebih mahal, dan tuan rumah mesti membayar beban pemprosesan dan jalur lebar yang diperlukan untuk menjalankan pelayan Turn.
Berikut adalah penerangan grafik yang melibatkan keseluruhan proses isyarat yang melibatkan pelayan stun terlebih dahulu dan kemudian pelayan giliran sebagai sandaran:
membina aplikasi sembang video tersuai
Walaupun mungkin untuk menyediakan penyelesaian sembang video anda sendiri menggunakan kod JavaScript tulen dan pelayan stun awam percuma, tidak semua orang boleh menyambung antara satu sama lain di platform anda. Jika anda ingin menyediakan perkhidmatan yang boleh dipercayai kepada semua pengguna, anda mesti menggunakan pelayan Turn.
Seperti yang disebutkan sebelumnya, menubuhkan platform WebRTC boleh menjadi rumit. Nasib baik, kami mempunyai platform perniagaan semua-dalam-satu yang menjadikan aplikasi sembang video WebRTC bangunan mudah. Sekarang mari kita lihat bagaimana SimpleWebrtc dapat melegakan beban kita.
Apa itu SimpleWebrtc?
SimpleWEBRTC adalah platform yang menyediakan pemaju dengan perkhidmatan yang mudah dan kos efektif untuk membina dan menggunakan aplikasi masa nyata tersuai menggunakan React. Khususnya, mereka menyediakan yang berikut:
SimpleWebrtc SDK: Perpustakaan Front-end
- Host: Stun/Turn dan SFU (Unit Pemajuan Selektif)
- Sokongan Teknikal
- Pembangunan Aplikasi Custom dan Perkhidmatan Perundingan WebRTC
- penyewa tunggal dan infrastruktur tempatan
- talky: Aplikasi sembang video percuma dibina sepenuhnya dengan SimpleWebrtc
- Berikut adalah contoh tangkapan skrin beberapa projek sembang video tersuai yang mereka membantu pelanggan membangun dan melancarkan.
Penerangan gambar: Talky
Penerangan Gambar: Aplikasi Tutor Web
Perkhidmatan WebRTC utama yang disediakan oleh platform SimpleWebRTC termasuk:
pemindahan keselamatan video, suara dan perkongsian skrinpenyulitan akhir-ke-akhir
- menyokong sehingga 30 pengguna serentak
- Infinite Room
- Dari segi harga, mereka menawarkan rancangan berikut:
-
- Kumpulan Kecil: Sehingga 6 Peserta, bermula pada $ 5 sebulan
- Kumpulan Besar: Sehingga 30 Peserta, bermula pada $ 3 sebulan
Kelebihan pelan kumpulan kecil adalah penyulitan akhir-ke-akhir boleh digunakan, sementara rancangan kumpulan besar tidak boleh. Dalam pelan kumpulan kecil, 60-80% sesi adalah sambungan peer-to-peer, dan aliran media tidak pernah menyentuh pelayan. Tiada caj untuk penggunaan jalur lebar untuk sesi tersebut.
Untuk pelan kumpulan besar, lalu lintas dialihkan melalui pelayan yang dipanggil SFU (unit pemajuan terpilih), dan semua lalu lintas berukuran.
Harus diingat bahawa kebanyakan alternatif komersial (yang akan kita nyatakan secara ringkas kemudian) menggunakan yang dibilkan oleh minit . Pada pandangan pertama, nampaknya agak berpatutan. Walau bagaimanapun, anda mengenakan caj untuk sambungan peer-to-peer, dan SimpleWebRTC tersedia secara percuma.
(Kandungan berikut akan dipermudahkan kerana panjang artikel, dan maklumat teras dan contoh kod akan dikekalkan. Sila rujuk dokumen asal untuk teks asal yang lengkap.)
Prasyarat
Perpustakaan klien SimpleWebRTC bergantung pada ekosistem React dan Redux. Anda memerlukan kemahiran asas:
- React
- redux
- Perpustakaan Redux Asynchronous -seperti Redux Thunk, Redux Saga, dan Redux Observables
Sediakan akaun
Dapatkan halaman pendaftaran SimpleWebrtc.com dan daftar akaun baru. Anda mendapat jalur lebar 2GB, dan jika anda mendaftar untuk surat berita mereka, anda akan mendapat jalur lebar 3GB tambahan. Kuota ini sepatutnya mencukupi untuk membangun dan menguji aplikasi sembang video anda.
Selepas mendaftar, anda perlu mengesahkan alamat e -mel anda. Selepas melengkapkan langkah ini, anda harus berada di halaman papan pemuka di mana anda akan menerima kunci API anda.
Gunakan kekunci API ini, anda boleh mula membina aplikasi WebRTC tersuai anda sendiri. Dalam bahagian seterusnya, kami akan menjalankan aplikasi sampel lengkap yang dibina oleh pasukan SimpleWebRTC.
Membina dan menjalankan aplikasi sampel
(sampel kod diselaraskan)
penyebaran
(langkah penyebaran mudah)
Alternatif ke SimpleWebrtc
(pengenalan ringkas kepada alternatif)
Kesimpulan
Bagaimanapun, lebih mudah untuk membina penyelesaian sembang video secara langsung dengan WebRTC menggunakan platform komersial. Mengguna pakai laluan sumber terbuka boleh dilaksanakan, tetapi anda perlu menjadi tuan rumah pelayan Turn sendiri untuk memastikan sambungan yang boleh dipercayai untuk semua pengguna. Dalam kedua -dua kes, proses membina boleh memakan masa yang sangat lama memandangkan kerumitan relatif aplikasi sampel yang telah kita lihat.
Soalan utama untuk bertanya kepada diri sendiri adalah sama ada membina penyelesaian masa nyata adat anda sendiri adalah bernilai masa anda. Kecuali anda merancang untuk menggunakan WebRTC sebagai perniagaan teras anda, anda mungkin perlu terlebih dahulu berunding dengan pengalaman dalam mengendalikan teknologi ini.
(bahagian Soalan Lazim diselaraskan)
Atas ialah kandungan terperinci Membina aplikasi sembang video webrtc. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Alat AI Hot

Undress AI Tool
Gambar buka pakaian secara percuma

Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Clothoff.io
Penyingkiran pakaian AI

Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!

Artikel Panas

Alat panas

Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6
Alat pembangunan web visual

SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Topik panas

Java dan JavaScript adalah bahasa pengaturcaraan yang berbeza, masing -masing sesuai untuk senario aplikasi yang berbeza. Java digunakan untuk pembangunan aplikasi perusahaan dan mudah alih yang besar, sementara JavaScript digunakan terutamanya untuk pembangunan laman web.

JavaScriptcommentsareessentialformaintaining,reading,andguidingcodeexecution.1)Single-linecommentsareusedforquickexplanations.2)Multi-linecommentsexplaincomplexlogicorprovidedetaileddocumentation.3)Inlinecommentsclarifyspecificpartsofcode.Bestpractic

Titik berikut harus diperhatikan apabila tarikh pemprosesan dan masa di JavaScript: 1. Terdapat banyak cara untuk membuat objek tarikh. Adalah disyorkan untuk menggunakan rentetan format ISO untuk memastikan keserasian; 2. Dapatkan dan tetapkan maklumat masa boleh diperoleh dan tetapkan kaedah, dan ambil perhatian bahawa bulan bermula dari 0; 3. Tarikh pemformatan secara manual memerlukan rentetan, dan perpustakaan pihak ketiga juga boleh digunakan; 4. Adalah disyorkan untuk menggunakan perpustakaan yang menyokong zon masa, seperti Luxon. Menguasai perkara -perkara utama ini secara berkesan dapat mengelakkan kesilapan yang sama.

PlacingtagsatthebottomofablogpostorwebpageservespracticalpurposesforSEO,userexperience,anddesign.1.IthelpswithSEObyallowingsearchenginestoaccesskeyword-relevanttagswithoutclutteringthemaincontent.2.Itimprovesuserexperiencebykeepingthefocusonthearticl

JavaScriptispreferredforwebdevelopment, whersjavaisbetterforlarge-scalebackendsystemsandandroidapps.1) javascriptexcelsinceleatinginteractiveWebexperienceswithitsdynamicnatureanddommanipulation.2) javaoffersstrongyblectionandobjection

JavascripthassevenfundamentalDatypes: nombor, rentetan, boolean, undefined, null, objek, andsymbol.1) numberuseadouble-precisionformat, bergunaforwidevaluangesbutbecautiouswithfloating-pointarithmetic.2)

Penangkapan dan gelembung acara adalah dua peringkat penyebaran acara di Dom. Tangkap adalah dari lapisan atas ke elemen sasaran, dan gelembung adalah dari elemen sasaran ke lapisan atas. 1. Penangkapan acara dilaksanakan dengan menetapkan parameter useCapture addeventlistener kepada benar; 2. Bubble acara adalah tingkah laku lalai, useCapture ditetapkan kepada palsu atau ditinggalkan; 3. Penyebaran acara boleh digunakan untuk mencegah penyebaran acara; 4. Acara menggelegak menyokong delegasi acara untuk meningkatkan kecekapan pemprosesan kandungan dinamik; 5. Penangkapan boleh digunakan untuk memintas peristiwa terlebih dahulu, seperti pemprosesan pembalakan atau ralat. Memahami kedua -dua fasa ini membantu mengawal masa dan bagaimana JavaScript bertindak balas terhadap operasi pengguna.

Java dan JavaScript adalah bahasa pengaturcaraan yang berbeza. 1.Java adalah bahasa yang ditaip dan disusun secara statik, sesuai untuk aplikasi perusahaan dan sistem besar. 2. JavaScript adalah jenis dinamik dan bahasa yang ditafsirkan, terutamanya digunakan untuk interaksi web dan pembangunan front-end.
