7 اسفند 1402
تهران، خیابان آزادی، تقاطع قریب

ساختن یک برنامه پخش ویدئوی زنده، انعطاف‌پذیر و پرمیوم، مشخصات مختلفی وجود دارد. به عنوان نمونه، هنگامی‌که سازگاری بین پلتفرم‌ها حفظ  می‌شود، کم نگه داشتن تأخیر، متعادل‌سازی لودینگ و هدایت هزاران کاربر به تماشای ویدئو، می‌تواند بسیار کارساز باشد. با این حال، یک راه آسان برای انجام این کار وجود دارد و آن استفاده از Agora React Native SDK است. در این مقاله، ما یک برنامه پخش زنده ایجاد می‌کنیم که می‌تواند پخش‌کننده‌های متعددی را در خود جای دهد و با استفاده از جادوی Agora Video SDK، هزاران کاربر را سرگرم کند.

agora 2

موارد مورد نیاز

  • حساب Agora
  • App-ID از Agora
  • پیاده سازی سمت مشتری با ماژول — react-native-agora

ما از Agora RTC SDK برای  React Native و برای مثال‌های زیر استفاده خواهیم کرد. از نسخه 3.4.6 در زمان نوشتن استفاده خواهد شد.

پیاده سازی سمت مشتری در agora

ما ماژول Agora خود را اضافه می‌کنیم:

				
					yarn add react-native-agora
				
			

پس از انجام این کار، دستورالعمل‌های نصب آسان برای اندروید را در این لینک و برای iOS را در این لینک دنبال کنید.

وارد پوشه ios خود شده و ران کنید:

				
					pod install
				
			

اکنون، ما جریان پخش زنده را پیاده سازی می‌کنیم

ابتدا، باید مجوزها را در فایل دیگری به نام Permission.ts مرتب کنیم. مطابق زیر، درخواست مجوز می‌کنیم:

				
					import { PermissionsAndroid } from 'react-native';

export default async function requestCameraAndAudioPermission() {
  try {
    const granted = await PermissionsAndroid.requestMultiple([
      PermissionsAndroid.PERMISSIONS.CAMERA,
      PermissionsAndroid.PERMISSIONS.RECORD_AUDIO,
    ]);
    if (
      granted['android.permission.RECORD_AUDIO'] ===
        PermissionsAndroid.RESULTS.GRANTED &&
      granted['android.permission.CAMERA'] ===
        PermissionsAndroid.RESULTS.GRANTED
    ) {
      console.log('You can use the cameras & mic');
    } else {
      console.log('Permission denied');
    }
  } catch (err) {
    console.warn(err);
  }
}

				
			

اکنون آن را در فایل اصلی LiveScreen.js که داریم وارد می‌کنیم. جایی که منطق اصلی ما پیاده سازی می‌شود:

				
					import React, { useEffect, useRef, useState } from 'react';
import {
  Platform,
  ActivityIndicator,
  StyleSheet,
  Dimensions,
} from 'react-native';
import 'react-native-get-random-values';
import { v4 as uuid } from 'uuid';
import RtcEngine, {
  ChannelProfile,
  RtcLocalView,
  RtcRemoteView,
} from 'react-native-agora';
import requestCameraAndAudioPermission from './Permission';

const SCREEN_HEIGHT = Dimensions.get('window').height;
const SCREEN_WIDTH = Dimensions.get('window').width;

export default function LiveScreen({ route }) {
  const isBroadcaster = route.params.type === 'create';
  const channelId = route.params.channel;

  const [joined, setJoined] = useState(false);

  const AgoraEngine = useRef();

  useEffect(() => {
    if (Platform.OS === 'android') requestCameraAndAudioPermission();
    const uid = isBroadcaster ? 1 : 0;
    init().then(() =>
      AgoraEngine.current.joinChannel(null, channelId, null, uid),
    );
    return () => {
      AgoraEngine.current.destroy();
    };
  }, []);

  const init = async () => {
    AgoraEngine.current = await RtcEngine.create('You App ID Here');
    AgoraEngine.current.enableVideo();
    AgoraEngine.current.setChannelProfile(ChannelProfile.LiveBroadcasting);
    if (isBroadcaster)
      AgoraEngine.current.setClientRole(ClientRole.Broadcaster);

    AgoraEngine.current.addListener(
      'JoinChannelSuccess',
      (channelId, uid, elapsed) => {
        console.log('JoinChannelSuccess', channelId, uid, elapsed);
        setJoined(true);
      },
    );
  };

  const onSwitchCamera = () => AgoraEngine.current.switchCamera();

  return (
    <View style={styles.container}>
      {!joined ? (
        <>
          <ActivityIndicator
            size={60}
            color="#222"
            style={styles.activityIndicator}
          />
          <Text style={styles.loadingText}>
            {'Joining Stream, Please Wait'}
          </Text>
        </>
      ) : (
        <>
          {isBroadcaster ? (
            <RtcLocalView.SurfaceView
              style={styles.fullscreen}
              channelId={channelId}
            />
          ) : (
            <RtcRemoteView.SurfaceView
              uid={1}
              style={styles.fullscreen}
              channelId={channelId}
            />
          )}
          <View style={styles.buttonContainer}>
            <TouchableOpacity style={styles.button} onPress={onSwitchCamera}>
              <Text style={styles.buttonText}>{'Switch Camera'}</Text>
            </TouchableOpacity>
          </View>
        </>
      )}
    </View>
  );
}

const styles = StyleSheet.create({
  loadingText: {
    fontSize: 18,
    color: '#222',
  },
  fullscreen: {
    width: SCREEN_WIDTH,
    height: SCREEN_HEIGHT,
  },
});

				
			

بیایید با مجموعه کدهایی که در agora نوشتیم کار کنیم:

  • LiveScreen یک props دریافت می‌کند: یک شناسه کانال (channelId) و یک تایپ (type). شناسه کانال یک رشته منحصر به فرد از کانال به منظور اتصال است و تایپ می‌تواند یک زمینه «ایجاد» یا «پیوستن» برای شروع پخش از پیوستنی دیگر باشد.
  • مجوز دسترسی به دوربین و میکروفون را برای ارسال صدا و تصویر از اندروید دریافت کرده‌ایم.
  • نمونه‌‌ای از Agora Engine را راه ‌اندازی کرده‌ و تمام پیکربندی‌های لازم را نصب کرده‌ایم.
  • بدون احراز هویت و شناسه کانال از روت prop، به کانال می‌پیوندیم.

(نکته: تابع joinChannel دارای 4 آرگومان است، توکن احراز هویت، شناسه کانال، اطلاعات اختیاری و UID اختیاری. برای یک برنامه تولیدی، باید یک نشانه احراز هویت را ببرید و بیاورید تا توسط یک میان افزار میزبانی شده در سمت سرور تولید شود.)

  • نمای محلی و نمای از راه دور را بر اساس افرادی که از برنامه، پخش‌کننده یا مخاطبان استفاده می‌کنند نمایش می‌دهیم.
  • یک دکمه سوئیچ دوربین برای جابجایی بین دوربین جلو و دوربین پشتی اضافه کرده‌ایم.

و همه اش همین است. شما یک برنامه پخش زنده ساده را در عرض چند دقیقه ساخته‌اید.

گام بعدی، می‌تواند اضافه کردن ویژگی‌های پیشرفته‌تر مانند: پخش جریان زنده با ویدئو کنفرانس (برای شرکت‌کنندگان زیاد) و با مخاطبان زیاد، امکان چت زنده با چندین مخاطب، امکان ارسال درخواست برای پیوستن به لایو و موارد دیگر باشد.

X