بناء تجربة بث فيديو سلسة باستخدام React Native Video

في عالم اليوم الذي يتمحور حول الهاتف المحمول، يعد بث الفيديو ميزة أساسية للعديد من التطبيقات. سواء كان ذلك منصة لمشاركة الفيديو، أو تطبيقًا تعليميًا، أو شبكة اجتماعية غنية بالوسائط المتعددة، فإن توفير تجربة فيديو سلسة أمر ضروري. باستخدام React Native، وهو إطار عمل شائع لإنشاء تطبيقات الهاتف المحمول عبر الأنظمة الأساسية، أصبح دمج بث الفيديو أمرًا سهلاً مع مكتبة الفيديو التفاعلية الأصلية.

في هذه المدونة، سنتعرف على خطوات تثبيت الفيديو التفاعلي الأصلي وتكوينه واستخدامه لإنشاء تجربة بث فيديو سلسة في تطبيقات React Native.

1. التثبيت

للبدء، تحتاج إلى تثبيت مكتبة الفيديو التفاعلية الأصلية في مشروع React Native الخاص بك.

الخطوة 1: تثبيت الحزمة

أولاً، قم بتثبيت المكتبة باستخدام npm أو الغزل:

npm install react-native-video react-native-video-cache

أو

yarn add react-native-video react-native-video-cache

بالنسبة لنظام iOS، قد تحتاج إلى تثبيت البودات الضرورية:

cd ios
pod install
cd ..

الخطوة 2: الإعداد الأصلي الإضافي لنظام التشغيل iOS/Android

أ) أندرويد:

i) android/build.gradle

buildscript {
  ext {
    // Enable IMA (Interactive Media Ads) integration with ExoPlayer
    useExoplayerIMA = true

    // Enable support for RTSP (Real-Time Streaming Protocol) with ExoPlayer
    useExoplayerRtsp = true

    // Enable support for Smooth Streaming with ExoPlayer
    useExoplayerSmoothStreaming = true

    // Enable support for DASH (Dynamic Adaptive Streaming over HTTP) with ExoPlayer
    useExoplayerDash = true

    // Enable support for HLS (HTTP Live Streaming) with ExoPlayer
    useExoplayerHls = true
  }
}

allprojects {
    repositories {
        mavenLocal()
        google()
        jcenter()
         maven {
            url "$rootDir/../node_modules/react-native-video-cache/android/libs"
        }
    }
}

&&&] يمكّن هذا التكوين بروتوكولات البث المختلفة (IMA، RTSP، Smooth Streaming، DASH، HLS) في ExoPlayer ويقوم بإعداد المستودعات لتشمل محلي، وGoogle، وJCenter، ومستودع Maven مخصص لفيديو التفاعل الأصلي- مخبأ. ستؤدي كل ميزة من هذه الميزات التي تم تمكينها إلى زيادة حجم ملف APK الخاص بك، لذا قم بتمكين الميزات التي تحتاجها فقط. الميزات الممكّنة افتراضيًا هي: useExoplayerSmoothStreaming، useExoplayerDash، useExoplayerHls

تضمن المجموعة أن التطبيق يحتوي على ذاكرة كافية للتعامل مع مجموعات البيانات الكبيرة (عبر LargeHeap) ويمكنه عرض الرسومات بكفاءة (عبر HardwareAccelerated)، مما يؤدي إلى تجربة مستخدم أكثر سلاسة واستقرارًا. ومع ذلك، يجب استخدام كليهما مع الأخذ في الاعتبار أداء التطبيق والاحتياجات المحددة لوظائفه.

import Video from 'react-native-video';
import convertToProxyURL from 'react-native-video-cache';