Tutorial WHIP & WHEP WebRTC: Bina Apl Penstriman langsung

Artikel ini pada asalnya diterbitkan di Blog Metered: Tutorial WHIP & WHEP WebRTC: Bina Apl Penstriman langsung

WHIP (WebRTC-HTTP Ingestion Protocol) dan WHEP (WebRTC-HTTP Egress Protocol) ialah protokol yang direka untuk menyelaraskan isyarat dalam WebRTC dengan bantuan kaedah HTTP standard

• Definisi WHIP: WHIP memudahkan cara peranti klien menghantar strim media ke pelayan.

  • Ia menggantikan mekanisme isyarat kompleks yang diperlukan dengan permintaan HTTP GET yang mudah, sekali gus menjadikannya lebih mudah untuk memasukkan media ke dalam pelayan

• Definisi WHEP: Protokol WHEP digunakan untuk menghantar strim media daripada pelayan kepada pelanggan. Ia menggunakan protokol HTTP untuk mengendalikan isyarat untuk penggunaan media sekali gus membolehkan peranti klien menerima aliran media tanpa persediaan yang rumit

Peranan dalam Memudahkan Isyarat WebRTC

• Kemudahan Pelaksanaan: WHEP dan WHIP menggunakan protokol HTTP dengan itu protokol ini mengurangkan kerumitan yang dikaitkan dengan

• Komunikasi Tanpa Kewarganegaraan: Ini kerana HTTP ialah protokol tanpa kewarganegaraan, pelayan tidak perlu mengekalkan maklumat sesi berterusan antara permintaan.

• Keserasian yang Dipertingkat: Memandangkan HTTP mempunyai keserasian universal, menggunakan HTTP untuk isyarat adalah yang terbaik untuk keserasian merentas platform dan peranti

• Pembangunan pantas: Pembangun boleh melaksanakan aplikasi WebRTC dengan lebih cekap, kerana mereka tidak perlu mengambil kira butiran rumit metodologi isyarat tradisional

Bagaimana WHIP berfungsi

Bagaimana WHIP mengendalikan Pengingesan Strim Media

Protokol WHIP telah merevolusikan cara aliran media boleh dihantar ke pelayan daripada peranti klien dengan menggunakan kaedah HTTP untuk memberi isyarat

Secara tradisional untuk menyediakan WebRTC, anda perlu menyediakan mekanisme isyarat kompleks menggunakan soket web atau protokol lain. Dengan WHIP proses ini menjadi mudah dengan menggunakan protokol HTTP untuk memberi isyarat dan memulakan sesi WebRTC

• Permintaan HTTP POST: Di sini peranti klien menghantar permintaan HTTP POST dengan SDP atau tawaran protokol perihalan sesi dalam badan ke titik akhir WHIP

• Maklum Balas Pelayan: Pelayan Media kemudian memproses tawaran SDP dan membalas dengan 200 kod status termasuk jawapan SDP dalam badan permintaan

• Pertukaran Calon ICE: Protokol WHIP menyokong protokol ICE dengan membenarkan pelanggan menghantar permintaan HTTP PATCH tambahan apabila calon ICE baharu tersedia 

• Penubuhan Sambungan: Setelah pertukaran SDP selesai maka sambungan peer to peer diwujudkan membolehkan pelanggan menstrim media ke pelayan

Faedah berbanding Kaedah Pengingesan tradisional

• Kesederhanaan: Dengan menggunakan kaedah WHIP, WHIP mengurangkan keperluan untuk sambungan berterusan dan pelayan isyarat.

• Kemudahan Pelaksanaan: Pembangun boleh menggunakan HTTP yang mempunyai keserasian universal untuk mempercepatkan proses pembangunan

• Skalabiliti: Permintaan HTTP tanpa status membenarkan pelayan mengendalikan berbilang permintaan sambungan serentak dengan itu dengan mudah mengurus sejumlah besar sambungan.

• Firewall dan Mesra Proksi: HTTP mesra tembok api, hampir semua jenis firewall membenarkan trafik HTTP 

• Kos Berkesan: Isyarat yang dipermudahkan melalui HTTP mengurangkan kos yang berkaitan dengan menambah pelayan isyarat

Bagaimana WHEP berfungsi

Protokol WHEP memudahkan proses penghantaran media dari pelayan ke peranti klien. 

Oleh itu, protokol WHEP membolehkan anda menggunakan HTTP untuk menyediakan isyarat untuk menerima media daripada pelayan peranti klien.

Bagaimana WHEP berfungsi dalam penstriman media

• Permintaan HTTP GET: Pelanggan meminta aliran media dengan menghantar permintaan HTTP GET ke titik akhir WHEP pelayan

• SDP Exchange: Pelayan bertindak balas dengan tawaran SDP dalam respons HTTP, pelanggan kemudian menghantar semula jawapan SDP dalam permintaan POST seterusnya

• Penerimaan Media: Setelah sambungan diwujudkan, strim media diterima melalui sambungan WebRTC yang telah ditetapkan. NOTA: Banyak kali anda memerlukan PUTAR pelayan untuk mewujudkan sambungan WebRTC

• Sokongan untuk ICE: WHEP membenarkan pertukaran Calon ICE melalui permintaan tampalan HTTP tambahan sekali gus membolehkan sambungan yang lebih baik 

Kelebihan dalam penstriman sebelah pelanggan

• Pelaksanaan Pelanggan Ringkas: Penggunaan permintaan HTTP justeru mengurangkan keperluan untuk mekanisme isyarat yang kompleks 

• Keserasian yang Dipertingkat: Sokongan universal untuk protokol HTTP memastikan keserasian yang lebih baik merentas peranti 

• Skala Dipertingkat: Oleh kerana HTTP ialah protokol tanpa kewarganegaraan, ini meningkatkan kebolehskalaan pelayan dan dengan sumber yang kecil anda boleh menskalakan kepada bilangan pengguna yang sangat besar

• Traversal Rangkaian yang Lebih Baik: Oleh kerana anda boleh melakukan isyarat dengan HTTP dan tidak memerlukan soket web atau mekanisme lain, ini meningkatkan traversal NAT untuk sambungan. Setelah sambungan diwujudkan, anda memerlukan HIDUPKAN pelayan untuk WebRTC

• Kependaman Dikurangkan: Isyarat menggunakan HTTP boleh membawa kepada sambungan yang lebih pantas sekali gus meningkatkan pengalaman pengguna.

Sinergi antara WHIP dan WHEP

Menggabungkan Kedua-dua Protokol untuk Komunikasi Hujung-ke-Hujung yang Cekap:

Dengan menggabungkan WHIP dan WHEP, pembangun boleh mencipta penyelesaian isyarat yang komprehensif untuk WebRTC

Gabungan ini memudahkan pengingesan dan penghantaran strim media, memastikan pelaksanaan WebRTC yang lebih lancar

• Pendekatan Isyarat Bersatu: Menggunakan HTTP untuk kedua-dua pengingesan dan penghantaran menghasilkan metodologi isyarat yang konsisten

• Kerumitan Dikurangkan: Pembangun perlu berurusan dengan protokol HTTP sahaja, sekali gus mengurangkan keluk pembelajaran dan penyelenggaraan kod

• Prestasi Dipertingkat: Memperkemas kod dengan protokol tunggal untuk memberi isyarat membawa kepada masa sambungan yang lebih cepat dan kependaman yang lebih rendah apabila anda menghantar media

Kes Penggunaan Mempamerkan Prestasi yang Diperbaiki

• Platform Penstriman Langsung: 

• Aplikasi Interaktif

• Seni Bina Boleh Skala

Membina APL Penstriman Langsung

Melaksanakan WHIP dan WHEP dalam apl WebRTC anda agak mudah. Dalam bahagian ini, kami akan menyediakan pelayan WHIP dan menyepadukannya dalam aplikasi anda menggunakan teknologi moden seperti nod dan docker

Di sini kita akan menggunakan perkhidmatan pelayan Metered.ca TURN untuk traversal NAT

Menyediakan Pelayan WHIP

Pra-syarat dan Persediaan Persekitaran:

• Node.js dan NPM: Pastikan anda memasang Node dan nvm terkini

• Akaun Metered.ca: Buat akaun percuma pada Pelayan TURN Bermeter

• Alamat IP Awam: Ini diperlukan untuk pelayan boleh diakses di Internet. Jika anda menggunakan mana-mana pembekal awan untuk aplikasi anda, anda mendapat alamat IP awam percuma dengannya

• WebRTC Media Server: Kami memerlukan pelayan media seperti GStreamer atau Janus yang mempunyai sokongan WHIP

Tingkatkan Konfigurasi Langkah Menggunakan Node.Js dan GStreamer

1. Pasang GStreamer dengan Sokongan WHIP

2. Sediakan Pelayan WHIP dengan GStreamer

   1. Buat saluran paip GStreamer yang mendengar sambungan WHIP seperti itu

gst-launch-1.0 whipserversrc name=whip \
  ! queue ! videoconvert ! autovideosink

Arahan di atas memulakan pelayan WHIP yang menerima strim media masuk dan memaparkannya 

1. Konfigurasikan Pelayan untuk Digunakan Metered.ca TURN Server

   1. Ubah suai saluran paip GStreamer untuk menggunakan pelayan TURN. Ini penting kerana penghala NAT dan tembok api menyekat sambungan

gst-launch-1.0 whipserversrc name=whip ice-server="turn://YOUR_USERNAME:YOUR_CREDENTIAL@relay.metered.ca:80" \
  ! queue ! videoconvert ! autovideosink

1. Sediakan Proksi Songsang dengan Node.JS (Pilihan):

   1. Jika anda ingin mengurus titik akhir HTTP atau menambah sebarang logik tambahan lain, anda boleh menyediakan pelayan js ekspres mudah

const express = require('express');
const httpProxy = require('http-proxy');
const app = express();
const proxy = httpProxy.createProxyServer();

app.post('/whip', (req, res) => {
  proxy.web(req, res, { target: 'http://localhost:PORT_WHERE_GSTREAMER_IS_RUNNING' });
});

app.listen(3000, () => {
  console.log('Proxy server running on port 3000');
});

Melaksanakan WHIP dalam Aplikasi anda

Coretan Kod untuk Mengintegrasikan WHIP:

Di sisi pelanggan, anda boleh menangkap strim media dengan bantuan RTCPeerConnection dan menggunakan permintaan HTTP untuk mengendalikan isyarat yang diperlukan untuk mewujudkan sambungan 

1. Tangkap Strim Media:

   1. Anda boleh menangkap strim media seperti

const mediaStream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });

1. Buat RTCPeerConnection:

Anda boleh mencipta RTCPeerConnection dengan bantuan Metered TURN Servers

var myPeerConnection = new RTCPeerConnection({
  iceServers: [
      {
        urls: "stun:stun.relay.metered.ca:80",
      },
      {
        urls: "turn:global.relay.metered.ca:80",
        username: "your-username",
        credential: "your-credential",
      },
      {
        urls: "turn:global.relay.metered.ca:80?transport=tcp",
        username: "your-username",
        credential: "your-credential",
      },
      {
        urls: "turn:global.relay.metered.ca:443",
        username: "your-username",
        credential: "your-credential",
      },
      {
        urls: "turns:global.relay.metered.ca:443?transport=tcp",
        username: "your-username",
        credential: "your-credential",
      },
  ],
});

1. Tambah Trek Media pada Sambungan:

mediaStream.getTracks().forEach((track) => {
  pc.addTrack(track, mediaStream);
});

1. Buat dan Hantar Tawaran SDP ke Pelayan WHIP:

const offer = await pc.createOffer();
await pc.setLocalDescription(offer);

const response = await fetch('http://YOUR_SERVER_IP:3000/whip', {
  method: 'POST',
  headers: { 'Content-Type': 'application/sdp' },
  body: pc.localDescription.sdp,
});

const sdpAnswer = await response.text();
await pc.setRemoteDescription({ type: 'answer', sdp: sdpAnswer });

Mengendalikan Permintaan HTTP dan Respons untuk Isyarat

• Pihak Pelanggan:

  • Permintaan HTTP POST: 

    • URL: http://YOUR_SERVER_IP:3000/whip
    • Tajuk: { 'Jenis Kandungan': 'aplikasi/sdp' }
    • Badan: Tawaran SDP sebagai teks biasa

  • Menjangkakan Maklum Balas:

    • Status: 201 Dibuat
    • Pengepala: Pengepala lokasi dengan URL sumber 
    • Badan: SDP jawapan sebagai teks biasa

• Sisi Pelayan:

  • Terima Tawaran SDP: 

    • Baca SDP daripada req.body
    • Buat titik akhir WebRTC dan tetapkan penerangan jauh 

  • Jana Jawapan SDP

    • Jawapan SDP daripada titik akhir WebRTC pelayan
    • Hantar semula jawapan SDP dalam res.body
    • Menggunakan perkhidmatan pelayan Metered.ca TURN

Menggunakan perkhidmatan pelayan Metered.ca TURN

Tujuan TURN Server

Memudahkan traversal media melalui NAT dan firewall apabila sambungan terus rakan ke rakan tidak dapat dilakukan

Sertakan Pelayan TURN dalam Konfigurasi Pelayan ICE

Berikut ialah kelayakan Pelayan TURN dan Pelayan ICE

gst-launch-1.0 whipserversrc name=whip \
  ! queue ! videoconvert ! autovideosink

Mengerahkan pelanggan WHEP

Mempunyai klien WHIP membolehkan apl anda menerima strim media daripada pelayan menggunakan isyarat HTTP.

Mengintegrasikan WHEP di sisi pelanggan

• Pemahaman asas API WebRTC dalam Javascript 

• Pelayan media yang menyokong WHEP GStreamer Janus atau mana-mana

• Metered.ca TURN kelayakan pelayan

Penyatuan WHEP langkah demi langkah dalam Apl anda.

1. Mulakan RTCPeerConnection

   1. Buat contoh RTCPeerConnection dengan pelayan ICE yang mempunyai pelayan turn metered.ca

gst-launch-1.0 whipserversrc name=whip ice-server="turn://YOUR_USERNAME:YOUR_CREDENTIAL@relay.metered.ca:80" \
  ! queue ! videoconvert ! autovideosink

1. Kendalikan Trek Media masuk

Sediakan pendengar acara untuk menghidupkan semula trek jauh daripada pelayan

const express = require('express');
const httpProxy = require('http-proxy');
const app = express();
const proxy = httpProxy.createProxyServer();

app.post('/whip', (req, res) => {
  proxy.web(req, res, { target: 'http://localhost:PORT_WHERE_GSTREAMER_IS_RUNNING' });
});

app.listen(3000, () => {
  console.log('Proxy server running on port 3000');
});

1. Hantar Permintaan HTTP GET ke pelayan WHEP:

Hantar permintaan GET ke pelayan

const mediaStream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });

1. Penerangan jauh dengan tawaran SDP yang diterima

var myPeerConnection = new RTCPeerConnection({
  iceServers: [
      {
        urls: "stun:stun.relay.metered.ca:80",
      },
      {
        urls: "turn:global.relay.metered.ca:80",
        username: "your-username",
        credential: "your-credential",
      },
      {
        urls: "turn:global.relay.metered.ca:80?transport=tcp",
        username: "your-username",
        credential: "your-credential",
      },
      {
        urls: "turn:global.relay.metered.ca:443",
        username: "your-username",
        credential: "your-credential",
      },
      {
        urls: "turns:global.relay.metered.ca:443?transport=tcp",
        username: "your-username",
        credential: "your-credential",
      },
  ],
});

1. Buat dan hantar jawapan SDP

Buat jawapan SDP dan hantar ke pelayan melalui permintaan HTTP POST

mediaStream.getTracks().forEach((track) => {
  pc.addTrack(track, mediaStream);
});

1. Kendalikan Pertukaran Calon ICE (Pilihan):

Jika anda perlu menghantar calon ICE secara berasingan kemudian kendalikan acara calon ais

const offer = await pc.createOffer();
await pc.setLocalDescription(offer);

const response = await fetch('http://YOUR_SERVER_IP:3000/whip', {
  method: 'POST',
  headers: { 'Content-Type': 'application/sdp' },
  body: pc.localDescription.sdp,
});

const sdpAnswer = await response.text();
await pc.setRemoteDescription({ type: 'answer', sdp: sdpAnswer });

Kendalikan strim Media di bahagian hadapan

1. buat elemen video dalam HTML

var myPeerConnection = new RTCPeerConnection({
  iceServers: [
      {
        urls: "stun:stun.relay.metered.ca:80",
      },
      {
        urls: "turn:global.relay.metered.ca:80",
        username: "e13b9bsdfdsfsdfb0676cc5b6",
        credential: "dedewdewfer+gq5iT",
      },
      {
        urls: "turn:global.relay.metered.ca:80?transport=tcp",
        username: "e13bdfdsfds6b0676cc5b6",
        credential: "dewfrefre+gq5iT",
      },
      {
        urls: "turn:global.relay.metered.ca:443",
        username: "e13b9fsdfdsfsd86b0676cc5b6",
        credential: "csdfwefeer+gq5iT",
      },
      {
        urls: "turns:global.relay.metered.ca:443?transport=tcp",
        username: "e13b9dsfsdfe6b0676cc5b6",
        credential: "sdfewtrererer+gq5iT",
      },
  ],
});

1. Lampirkan strim jauh pada elemen video

apabila acara trek dicetuskan, pasangkan strim yang diterima pada elemen video

1. Mengendalikan Acara Strim Media

   1. Perubahan keadaan sambungan

var myPeerConnection = new RTCPeerConnection({
  iceServers: [
      {
        urls: "stun:stun.relay.metered.ca:80",
      },
      {
        urls: "turn:global.relay.metered.ca:80",
        username: "e13b9bsdfdsfsdfb0676cc5b6",
        credential: "dedewdewfer+gq5iT",
      },
      {
        urls: "turn:global.relay.metered.ca:80?transport=tcp",
        username: "e13bdfdsfds6b0676cc5b6",
        credential: "dewfrefre+gq5iT",
      },
      {
        urls: "turn:global.relay.metered.ca:443",
        username: "e13b9fsdfdsfsd86b0676cc5b6",
        credential: "csdfwefeer+gq5iT",
      },
      {
        urls: "turns:global.relay.metered.ca:443?transport=tcp",
        username: "e13b9dsfsdfe6b0676cc5b6",
        credential: "sdfewtrererer+gq5iT",
      },
  ],
});

b. Rundingan diperlukan

pc.addEventListener('track', (event) => {
  const [remoteStream] = event.streams;
  // Attach the remote stream to a video element
  const remoteVideo = document.getElementById('remoteVideo');
  remoteVideo.srcObject = remoteStream;
});

1. Kod contoh penuh

const whepServerEndpoint = 'http://YOUR_SERVER_IP:3000/whep'; // Replace with your server's WHEP endpoint

const response = await fetch(whepEndpoint, {
  method: 'GET',
  headers: {
    Accept: 'application/sdp',
  },
});

const sdpOffer = await response.text();

Pelayan TURN bermeter

1. API: HIDUPKAN pengurusan pelayan dengan API berkuasa. Anda boleh melakukan perkara seperti Tambah/Alih keluar bukti kelayakan melalui API, Dapatkan Setiap Pengguna / Bukti kelayakan dan metrik Pengguna melalui API, Dayakan/ Lumpuhkan bukti kelayakan melalui API, Dapatkan semula data Penggunaan mengikut tarikh melalui API.

2. Penyasaran Geo-Lokasi Global: Menghalakan trafik ke pelayan terdekat secara automatik, untuk kependaman serendah mungkin dan prestasi kualiti tertinggi. kependaman kurang daripada 50 ms di mana-mana sahaja di seluruh dunia

3. Pelayan di semua Wilayah di dunia: Toronto, Miami, San Francisco, Amsterdam, London, Frankfurt, Bangalore, Singapura, Sydney, Seoul, Dallas, New York

4. Kependaman Rendah: kurang daripada 50 ms kependaman, di mana-mana sahaja di seluruh dunia.

5. Kos Efektif: harga bayar semasa anda pergi dengan lebar jalur dan diskaun volum tersedia.

6. Pentadbiran Mudah: Dapatkan log penggunaan, e-mel apabila akaun mencapai had ambang, rekod pengebilan dan sokongan e-mel serta telefon.

7. Mematuhi Standard: Mematuhi RFC 5389, 5769, 5780, 5766, 6062, 6156, 5245, 5768, 6336, 59244, TLS dan TLS. 🎜>

8. Berbilang‑Penyewaan: Buat berbilang bukti kelayakan dan asingkan penggunaan mengikut pelanggan atau apl yang berbeza. Dapatkan log Penggunaan, rekod pengebilan dan makluman ambang.

9. Kebolehpercayaan Perusahaan: 99.999% Masa Beroperasi dengan SLA.

10. Skala Perusahaan: Tanpa had pada trafik serentak atau jumlah trafik. Pelayan TURN Bermeter menyediakan Kebolehskalaan Perusahaan

11. 5 GB/bln Percuma: Dapatkan 5 GB penggunaan pelayan TURN percuma setiap bulan dengan Pelan Percuma

12. Berjalan pada port 80 dan 443

13. Sokongan MENGUBAH SSL untuk membenarkan sambungan melalui tembok api pemeriksaan paket dalam.

14. Menyokong kedua-dua TCP dan UDP

15. STUN Tanpa Had Percuma

---

Anda boleh mempertimbangkan beberapa artikel kami yang lain:

1. Saluran Data WebRTC: Panduan

2. Tutorial Rakan Sebaya Mudah: Tambah Pelayan TURN untuk Video, Saluran Data

3. Panduan untuk Menyediakan Pelayan TURN WebRTC Anda dengan Bermeter

4. WebRTC lwn HLS: Mana Yang Terbaik untuk Anda?

Atas ialah kandungan terperinci Tutorial WHIP & WHEP WebRTC: Bina Apl Penstriman langsung. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!