مقدمة

مرحبًا! ?

سأوضح لك في هذا البرنامج التعليمي كيفية استخدام WebCodec API لإرسال واستقبال الفيديو.

أولاً لنبدأ بتشفير الخادم.

إعداد الخادم

من أجل إرسال واستقبال الحزم بين أقراننا، سنحتاج إلى خادم websocket.

لهذا سنقوم بإنشاء خادم أساسي للغاية باستخدام Nodejs. أولاً تهيئة المشروع:

npm init -y

ثم قم بتثبيت الوحدات المطلوبة:

npm i ws express

بعد ذلك قم بإنشاء ملف جديد يسمى "index.js" وقم بتعبئته بالكود التالي:

// server.js
const WebSocket = require('ws');
const express = require('express');

const app = express();
const port = 3000;
const connectedClients = new Set();

app.use(express.static(__dirname   '/public'));

const wss = new WebSocket.Server({ noServer: true });

wss.on('connection', ws => {
  console.log('new connection');
  connectedClients.add(ws);

  ws.on('message', message => {
    connectedClients.forEach(client => {
      if (client !== ws && client.readyState === WebSocket.OPEN) {
        client.send(message);
      }
    });
  });

  ws.once('close', () => {
    connectedClients.delete(ws);
    console.log('connection closed');
  });
});

const server = app.listen(port, () => {
  console.log(`server running on port ${port}`);
});

server.on('upgrade', (request, socket, head) => {
  wss.handleUpgrade(request, socket, head, (ws) => {
    wss.emit('connection', ws, request);
  });
});

لا يوجد شيء معقد للغاية، فالرمز أعلاه يخدم الدليل العام ويتعامل مع اتصال websocket الذي يرسل الحزم إلى جميع الأقران المتصلين. ?

بعد ذلك سنتعامل مع جزء المرسل، ولكن أولاً قم بإنشاء دليل جديد يسمى "عام"

mkdir public

إنشاء المرسل

أول ملف للواجهة الأمامية سنقوم بإنشائه هو الملف الذي يتم بثه، قم بإنشاء ملف جديد يسمى "sender.html" ضمن ملف عام وقم بتعبئته بصيغة HTML التالية:

لتفصيل وشرح ما يفعله الكود.

1. هيكل HTML
   • يعرض عنصر الفيديو فيديو مباشر من كاميرا المستخدم
   • يتم استخدام عنصر اللوحة القماشية لعرض الإطارات الفردية لخلاصة الفيديو. يوفر هذا معاينة مرئية لكل إطار مشفر
2. كود جافا سكريبت
   • تتصل وظيفة initWebSocket بخادم WebSocket. يعد هذا الاتصال ضروريًا لتدفق الإطارات المشفرة إلى جهاز الاستقبال
   • تقوم وظيفة initEncoder بإنشاء كائن VideoEncoder. إنه يحدد رد اتصال الإخراج الذي يتم تشغيله في كل مرة يقوم فيها المشفر بإنتاج قطعة جديدة
   • يقوم videoEncoder.configure() بتعيين برنامج الترميز على VP8 بمعدل بت 1 ميجابت في الثانية و30 إطارًا في الثانية، مما يضمن تشفيرًا سلسًا وعالي الجودة
   • يتم استخدام مكالمة getUserMedia لطلب الوصول إلى الكاميرا. يتم تعيين تغذية الفيديو لعنصر الفيديو، ويسمح معالج VideoTrack بمعالجة كل إطار في الوقت الفعلي
   • تقوم وظيفة ProcessFrames بقراءة الإطارات من الفيديو، وتعرضها على عنصر اللوحة القماشية، وتقوم بتشفير كل إطار باستخدام videoEncoder.encode(). يتم بعد ذلك إرسال كل إطار إلى الخادم كقطعة مشفرة.

أوه! نأمل أن يكون ذلك مفهوما بالنسبة لك. بعد ذلك سنقوم بإنشاء الملف الذي سيستقبل الدفق. ?

إنشاء جهاز الاستقبال

يستقبل هذا الملف مقاطع الفيديو المشفرة عبر WebSocket، ويفك تشفيرها، ويعرضها على عنصر قماش.

قم بإنشاء ملف جديد ضمن الدليل العام باسم "receiver.html" وقم بتعبئته بما يلي:

لتحليل الملف أعلاه:

1. HTML
   • عنصر اللوحة القماشية هو منطقة العرض الأساسية لإطارات الفيديو التي تم فك تشفيرها. لها عرض وارتفاع وحدود ثابتة، مثل صفحة المرسل.
2. جافا سكريبت
   • تقوم وظيفة initWebSocket بإنشاء اتصال WebSocket جديد، حيث تتلقى الإطارات المشفرة من المرسل وتمريرها إلى decodeFrame() لفك التشفير.
   • يقوم initDecoder بتهيئة كائن VideoDecoder الذي تم تكوينه لبرنامج الترميز VP8. تقوم وحدة فك التشفير بإخراج كل إطار إلى اللوحة القماشية.
   • يأخذ decodeFrame البيانات المشفرة، ويغلفها في EncodedVideoChunk (كإطار رئيسي مع الطابع الزمني الحالي)، ويفك تشفيرها عبر videoDecoder.decode(). يتم عرض كل إطار على اللوحة القماشية في الوقت الفعلي

أوه! والآن بعد أن حصلنا على جميع القطع المطلوبة، فلنقم بتشغيلها بالفعل! ?

تشغيل الكود

لتشغيل الكود ببساطة قم بتشغيل الأمر التالي:

node index.js

ثم قم بتوجيه متصفحك إلى http://localhost:3000/sender.html
اسمح بالوصول إلى الكاميرا ثم افتح علامة تبويب أخرى لـ
http://localhost:3000/receiver.html

كما هو موضح أدناه، يجب أن تشاهد الدفق الذي يتم إرساله من المرسل.

خاتمة

لقد أوضحت في هذا البرنامج التعليمي كيفية الوصول إلى الكاميرا، وترميزها، وإرسال القطع عبر WebSocket وفك تشفيرها وعرضها على جانب جهاز الاستقبال. آمل أن يكون هذا البرنامج التعليمي مفيدًا لك. ?

كما هو الحال دائمًا، يمكنك الحصول على الكود عبر جيثب الخاص بي:
https://github.com/ethand91/webcodec-stream

ترميز سعيد! ?

هل أعجبك عملي؟ أقوم بالنشر حول مجموعة متنوعة من المواضيع، إذا كنت ترغب في رؤية المزيد، يرجى الإعجاب ومتابعتي.
كما أنني أحب القهوة.

إذا كنت تتطلع إلى تعلم أنماط الخوارزمية لإتقان مقابلة البرمجة، فإنني أوصي بـ [الدورة التدريبية التالية](https://algolab.so/p/algorithms-and-data-structure-video-course?affcode=1413380_bzrepgch