Pengenalan kepada WebRTC

Panduan Pemasangan dan Kod

WebRTC (Komunikasi Masa Nyata Web) ialah teknologi sumber terbuka yang membolehkan komunikasi masa nyata melalui API mudah dalam pelayar web dan apl mudah alih. Ia membenarkan perkongsian audio, video dan data secara langsung antara rakan sebaya tanpa memerlukan pelayan perantara, menjadikannya sempurna untuk aplikasi seperti persidangan video, penstriman langsung dan perkongsian fail.

Dalam blog ini, kita akan menyelami topik berikut:

1. Apakah itu WebRTC?
2. Ciri Utama WebRTC
3. Memasang WebRTC
4. Membina Aplikasi WebRTC Asas
5. Memahami Kod
6. Kesimpulan

---

Apakah itu WebRTC?

WebRTC ialah satu set piawaian dan protokol yang membolehkan audio, video dan komunikasi data masa nyata antara penyemak imbas web. Ia termasuk beberapa komponen utama:

• getUserMedia: Menangkap strim audio dan video daripada peranti pengguna.
• RTCPeerConnection: Mengurus sambungan peer-to-peer dan mengendalikan penstriman audio dan video.
• RTCDataChannel: Membolehkan pemindahan data masa nyata antara rakan sebaya.

Ciri Utama WebRTC

1. Komunikasi Masa Nyata: Komunikasi kependaman rendah dengan kelewatan yang minimum.
2. Keserasian Pelayar: Disokong oleh kebanyakan penyemak imbas web moden (Chrome, Firefox, Safari, Edge).
3. Tiada Pemalam Diperlukan: Berfungsi terus dalam penyemak imbas tanpa pemalam atau perisian tambahan.
4. Secure: Menggunakan penyulitan untuk komunikasi selamat.

Memasang WebRTC

WebRTC ialah teknologi sisi pelanggan dan tidak memerlukan pemasangan pelayan khusus. Walau bagaimanapun, anda memerlukan pelayan web untuk menyediakan fail HTML dan JavaScript anda. Untuk pembangunan setempat, anda boleh menggunakan pelayan HTTP yang mudah.

Prasyarat

• Node.js: Untuk menyediakan pelayan setempat.
• Pelayar Web Moden: Chrome, Firefox, Safari atau Edge.

Menyediakan Pelayan Tempatan

1. Pasang Node.js: Muat turun dan pasang Node.js daripada nodejs.org.

2. Buat Direktori Projek: Buka terminal dan buat direktori baharu untuk projek anda.
   

   mkdir webrtc-project
   cd webrtc-project
   

3. Mulakan Projek Node.js:
   

   npm init -y
   

4. Pasang Pelayan HTTP:
   

   npm install --save http-server
   

5. Buat Fail Projek Anda:

   • index.html
   • utama.js

Buat fail index.html dengan kandungan berikut:

```html
8b05045a5be5764f313ed5b9168a17e6
49099650ebdc5f3125501fa170048923
93f0f5c25f18dab9d176bd4f6de5d30e
    1fc2df4564f5324148703df3b6ed50c1
    4f2fb0231f24e8aef524fc9bf9b9874f
    b2386ffb911b14667cb8f0f91ea547a7WebRTC Example6e916e0f7d1e588d4f442bf645aedb2f
9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d
    4a249f0d628e2318394fd9b75b4636b1WebRTC Example473f0a7621bec819994bb5020d29372a
    886e14ee2bf2e07562cf694bdd704993a6a9c6d3f311dabb528ad355798dc27d
    fc3cb8de349c32412815ef2a53a0fb7ca6a9c6d3f311dabb528ad355798dc27d
    e803653d6fd93b3996ebf69dd59af1622cacc6d41bbb37262a98f745aa00fbf0
36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e
```

Membina Aplikasi WebRTC Asas

Kami akan mencipta aplikasi panggilan video rakan ke rakan yang mudah. Contoh ini akan menggunakan dua tab penyemak imbas untuk mensimulasikan sambungan rakan sebaya.

Penerangan Kod

1. Tangkap Video Tempatan: Gunakan getUserMedia untuk menangkap video daripada kamera pengguna.

2. Buat Sambungan Rakan Sebaya: Wujudkan sambungan rakan sebaya antara rakan sebaya tempatan dan jauh.

3. Tawaran dan Jawapan Pertukaran: Gunakan SDP (Protokol Penerangan Sesi) untuk bertukar-tukar butiran sambungan.

4. Kendalikan Calon ICE: Tukar calon ICE untuk mewujudkan sambungan.

Buat fail main.js dengan kandungan berikut:

const localVideo = document.getElementById('localVideo');
const remoteVideo = document.getElementById('remoteVideo');

let localStream;
let peerConnection;
const serverConfig = { iceServers: [{ urls: 'stun:stun.l.google.com:19302' }] };
const constraints = { video: true, audio: true };

// Get local video stream
navigator.mediaDevices.getUserMedia(constraints)
    .then(stream => {
        localStream = stream;
        localVideo.srcObject = stream;
        setupPeerConnection();
    })
    .catch(error => {
        console.error('Error accessing media devices.', error);
    });

function setupPeerConnection() {
    peerConnection = new RTCPeerConnection(serverConfig);

    // Add local stream to the peer connection
    localStream.getTracks().forEach(track => peerConnection.addTrack(track, localStream));

    // Handle remote stream
    peerConnection.ontrack = event => {
        remoteVideo.srcObject = event.streams[0];
    };

    // Handle ICE candidates
    peerConnection.onicecandidate = event => {
        if (event.candidate) {
            sendSignal({ 'ice': event.candidate });
        }
    };

    // Create an offer and set local description
    peerConnection.createOffer()
        .then(offer => {
            return peerConnection.setLocalDescription(offer);
        })
        .then(() => {
            sendSignal({ 'offer': peerConnection.localDescription });
        })
        .catch(error => {
            console.error('Error creating an offer.', error);
        });
}

// Handle signals (for demo purposes, this should be replaced with a signaling server)
function sendSignal(signal) {
    console.log('Sending signal:', signal);
    // Here you would send the signal to the other peer (e.g., via WebSocket)
}

function receiveSignal(signal) {
    if (signal.offer) {
        peerConnection.setRemoteDescription(new RTCSessionDescription(signal.offer))
            .then(() => peerConnection.createAnswer())
            .then(answer => peerConnection.setLocalDescription(answer))
            .then(() => sendSignal({ 'answer': peerConnection.localDescription }));
    } else if (signal.answer) {
        peerConnection.setRemoteDescription(new RTCSessionDescription(signal.answer));
    } else if (signal.ice) {
        peerConnection.addIceCandidate(new RTCIceCandidate(signal.ice));
    }
}

// Simulate receiving a signal from another peer
// This would typically be handled by a signaling server
setTimeout(() => {
    receiveSignal({
        offer: {
            type: 'offer',
            sdp: '...' // SDP offer from the other peer
        }
    });
}, 1000);

Memahami Kod

1. Media Capture: navigator.mediaDevices.getUserMedia menangkap strim video tempatan.
2. Persediaan Sambungan Rakan Sebaya: RTCPeerConnection menguruskan sambungan rakan sebaya.
3. Tawaran dan Jawapan: Tawaran dan jawapan SDP digunakan untuk merundingkan sambungan.
4. Calon ICE: Calon ICE digunakan untuk mewujudkan keterkaitan antara rakan sebaya.

Atas ialah kandungan terperinci Pengenalan kepada WebRTC. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!