Membina aplikasi sembang video webrtc

Kebangkitan WebRTC dan keupayaan penyemak imbas yang dipertingkatkan untuk mengendalikan komunikasi titik ke titik masa nyata menjadikan aplikasi masa nyata bangunan lebih mudah dari sebelumnya. Artikel ini akan meneroka SimpleWEBRTC dan aplikasinya dalam pelaksanaan teknologi WebRTC, dan memperkenalkan alternatif lain yang dapat mencapai matlamat yang sama.

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:

Penerangan Imej: Menunjukkan gambarajah seni bina lengkap keseluruhan proses WebRTC.

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 skrin

penyulitan 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!