كيفية تسجيل شاشة وكاميرا الهاتف أثناء الاختبار باستخدام Node.js و React؟

تسجيل شاشة الهاتف أثناء الاختبار

هناك مكتبة تُدعى react-screen-recorder تستطيع الإعتماد عليها لتسجيل الشاشة أثناء الاختبار، وتلك المكتبة تعمل مع React وتُتيح للمستخدمين تسجيل شاشة هاتفهم أثناء استخدام التطبيق، ولتثبيتها استخدم الأمر التالي:

npm install react-screen-recorder

وستجد طريقة الاستخدام في المستودع الرسمي للمكتبة:

• https://github.com/DeltaCircuit/react-media-recorder

وإليك مثال:

import React, { useState } from 'react';
import { ScreenRecorder } from 'react-screen-recorder';

const ScreenRecorderComponent = () => {
  const [isRecording, setIsRecording] = useState(false);

  const handleRecording = (blob) => {
    // يمكنك إرسال الـ blob إلى المنصة الخاصة بك للمراجعة هنا
    console.log(blob);
  };

  return (
    <div>
      <h1>تسجيل شاشة الهاتف</h1>
      <ScreenRecorder onRecordingComplete={handleRecording} isRecording={isRecording}>
        {({ startRecording, stopRecording }) => (
          <>
            {isRecording ? (
              <button onClick={stopRecording}>إيقاف التسجيل</button>
            ) : (
              <button onClick={startRecording}>بدء التسجيل</button>
            )}
          </>
        )}
      </ScreenRecorder>
    </div>
  );
};

export default ScreenRecorderComponent;

ضع المكون في التطبيق وسيظهر زرًا يمكن للمستخدم النقر عليه لبدء تسجيل شاشة هاتفه، وبمجرد أن ينتهي المستخدم من تسجيل الشاشة، ستُستدعى وظيفة handleRecording وستُمرر لها blob الخاص بتسجيل الفيديو، هنا تستطيع إرسال الـ blob للواجهة الخلفية للمراجعة.

تسجيل فيديو من الكاميرا الأمامية أثناء الاختبار

وبالنسبة لتسجيل الفيديو من الكاميرا الأمامية، باستطاعتك استخدام تقنية التسجيل بواسطة MediaRecorder، والوصول إلى الكاميرا الأمامية باستخدام API "getUserMedia"، وهي API's متاحة من قبل المتصفح.

وإليك مثال:

async function startRecording() {
  const stream = await navigator.mediaDevices.getUserMedia({ video: { facingMode: 'user' }, audio: false });
  const mediaRecorder = new MediaRecorder(stream);
  const chunks = [];

  mediaRecorder.ondataavailable = (e) => {
    if (e.data.size > 0) {
      chunks.push(e.data);
    }
  };

  mediaRecorder.onstop = () => {
    const videoBlob = new Blob(chunks, { type: 'video/mp4' });
    // قم بإرسال الـ videoBlob للمراجعة على المنصة الخاصة بك هنا
  };

  mediaRecorder.start();
}

function stopRecording() {
  mediaRecorder.stop();
}

وعليك باستدعاء startRecording() عند بدء الاختبار و stopRecording() عند انتهائه.

تحميل الفيديوهات للمراجعة

وبمجرد انتهاء الاختبار، تستطيع إرسال الفيديوهات (شاشة الهاتف والكاميرا الأمامية) إلى المنصة الخاصة بك للمراجعة، باستخدام Node.js والمكتبات المناسبة لاستقبال الفيديوهات وتخزينها في الخادم أو قاعدة البيانات.

وبالطبع نستخدم Express.js كإطار عمل لبناء نظام السيرفر واستقبال طلبات الفيديوهات، والإعتماد على مكتبات أخرى مثل Multer لتحميل الفيديوهات على الخادم.

مثال:

const express = require('express');
const multer = require('multer');
const app = express();
const upload = multer({ dest: 'uploads/' });

app.post('/upload', upload.single('video'), (req, res) => {
  // يتم تخزين الفيديو هنا في قاعدة البيانات أو أي مكان آخر تفضله
  console.log(req.file);
  res.send('تم تحميل الفيديو بنجاح!');
});

app.listen(3000, () => {
  console.log('السيرفر يعمل على منفذ 3000');
});

وبإمكانك استدعاء API نقطة النهاية /upload عند انتهاء الاختبار لتحميل الفيديوهات.

شكرا جداا لاكن هل الطريقه دي هتشتغل كمان علي الكمبيوتر او laptops؟

بالطبع فهى تعتمد على الـ API's المتوفرة في المتصفح، فمثلا مكتبة react-media-recorder تعتمد على MediaRecorder API.