Pengenalan kepada WebRTC-tutorial js-php.cn

Pengenalan kepada WebRTC

PHPz

Lepaskan： 2024-09-04 07:00:36

asal

375 orang telah melayarinya

Introduction to 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:

Apakah itu WebRTC?
Ciri Utama WebRTC
Memasang WebRTC
Membina Aplikasi WebRTC Asas
Memahami Kod
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

Komunikasi Masa Nyata: Komunikasi kependaman rendah dengan kelewatan yang minimum.
Keserasian Pelayar: Disokong oleh kebanyakan penyemak imbas web moden (Chrome, Firefox, Safari, Edge).
Tiada Pemalam Diperlukan: Berfungsi terus dalam penyemak imbas tanpa pemalam atau perisian tambahan.
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

Pasang Node.js: Muat turun dan pasang Node.js daripada nodejs.org.
Buat Direktori Projek: Buka terminal dan buat direktori baharu untuk projek anda.
```
mkdir webrtc-project
cd webrtc-project
```
Salin selepas log masuk
Mulakan Projek Node.js:
```
npm init -y
```
Salin selepas log masuk
Pasang Pelayan HTTP:
```
npm install --save http-server
```
Salin selepas log masuk
Buat Fail Projek Anda:
- index.html
- utama.js

Buat fail index.html dengan kandungan berikut:

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WebRTC Example</title>
</head>
<body>
    <h1>WebRTC Example</h1>
    <video id="localVideo" autoplay muted></video>
    <video id="remoteVideo" autoplay></video>
    <script src="main.js"></script>
</body>
</html>
```

Salin selepas log masuk

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

Tangkap Video Tempatan: Gunakan getUserMedia untuk menangkap video daripada kamera pengguna.
Buat Sambungan Rakan Sebaya: Wujudkan sambungan rakan sebaya antara rakan sebaya tempatan dan jauh.
Tawaran dan Jawapan Pertukaran: Gunakan SDP (Protokol Penerangan Sesi) untuk bertukar-tukar butiran sambungan.
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);

Salin selepas log masuk

Memahami Kod

Media Capture: navigator.mediaDevices.getUserMedia menangkap strim video tempatan.
Persediaan Sambungan Rakan Sebaya: RTCPeerConnection menguruskan sambungan rakan sebaya.
Tawaran dan Jawapan: Tawaran dan jawapan SDP digunakan untuk merundingkan sambungan.
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!