دليل التثبيت والكود

WebRTC (الاتصال عبر الويب في الوقت الفعلي) هي تقنية مفتوحة المصدر تتيح الاتصال في الوقت الفعلي عبر واجهات برمجة التطبيقات البسيطة في متصفحات الويب وتطبيقات الهاتف المحمول. فهو يسمح بمشاركة الصوت والفيديو والبيانات مباشرة بين النظراء دون الحاجة إلى خادم وسيط، مما يجعله مثاليًا لتطبيقات مثل مؤتمرات الفيديو والبث المباشر ومشاركة الملفات.

في هذه المدونة، سنتعمق في المواضيع التالية:

1. ما هو WebRTC؟
2. الميزات الرئيسية لـ WebRTC
3. تثبيت WebRTC
4. إنشاء تطبيق WebRTC أساسي
5. فهم الكود
6. خاتمة

ما هو WebRTC؟

WebRTC عبارة عن مجموعة من المعايير والبروتوكولات التي تتيح اتصال الصوت والفيديو والبيانات في الوقت الفعلي بين متصفحات الويب. ويتضمن عدة مكونات رئيسية:

• getUserMedia: يلتقط تدفقات الصوت والفيديو من جهاز المستخدم.
• RTCPeerConnection: يدير اتصال نظير إلى نظير ويتعامل مع تدفق الصوت والفيديو.
• RTCDataChannel: يسمح بنقل البيانات في الوقت الحقيقي بين أقرانه.

الميزات الرئيسية لـ WebRTC

1. الاتصال في الوقت الفعلي: اتصال بزمن وصول منخفض بأقل قدر من التأخير.
2. توافق المتصفح: مدعوم من معظم متصفحات الويب الحديثة (Chrome، Firefox، Safari، Edge).
3. لا توجد مكونات إضافية مطلوبة: يعمل مباشرة في المتصفح بدون مكونات إضافية أو برامج إضافية.
4. آمن: يستخدم التشفير للاتصال الآمن.

تثبيت WebRTC

WebRTC هي تقنية من جانب العميل ولا تتطلب تثبيت خادم محدد. ومع ذلك، ستحتاج إلى خادم ويب لخدمة ملفات HTML وJavaScript. للتطوير المحلي، يمكنك استخدام خادم HTTP بسيط.

المتطلبات الأساسية

• Node.js: لإعداد خادم محلي.
• متصفح ويب حديث: Chrome أو Firefox أو Safari أو Edge.

إعداد خادم محلي

1. تثبيت Node.js: قم بتنزيل Node.js وتثبيته منNodejs.org.

2. إنشاء دليل المشروع: افتح محطة طرفية وقم بإنشاء دليل جديد لمشروعك.
   

   mkdir webrtc-project
   cd webrtc-project
   

3. تهيئة مشروع Node.js:
   

   npm init -y
   

4. تثبيت خادم HTTP:
   

   npm install --save http-server
   

5. إنشاء ملفات المشروع الخاص بك:

   • index.html
   • main.js

قم بإنشاء ملف Index.html بالمحتوى التالي:

```html



    
WebRTC Example
    
```

بناء تطبيق WebRTC الأساسي

سنقوم بإنشاء تطبيق بسيط لمكالمات الفيديو من نظير إلى نظير. سيستخدم هذا المثال علامتي تبويب في المتصفح لمحاكاة اتصال النظير.

شرح الكود

1. التقاط الفيديو المحلي : استخدم getUserMedia لالتقاط الفيديو من كاميرا المستخدم.

2. إنشاء اتصال نظير : إنشاء اتصال نظير بين النظراء المحليين والبعيدين.

3. عرض التبادل والإجابة : استخدم SDP (بروتوكول وصف الجلسة) لتبادل تفاصيل الاتصال.

4. التعامل مع مرشحي ICE: تبادل مرشحي ICE لإنشاء الاتصال.

قم بإنشاء ملف main.js بالمحتوى التالي:

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);

فهم الكود

1. التقاط الوسائط: يلتقط navigator.mediaDevices.getUserMedia دفق الفيديو المحلي.
2. إعداد اتصال النظير: يدير RTCPeerConnection اتصال النظير.
3. العرض والإجابة: يتم استخدام عروض وإجابات SDP للتفاوض على الاتصال.
4. مرشحو ICE: يتم استخدام مرشحي ICE لإنشاء اتصال بين أقرانهم.