একটি প্রতিক্রিয়া নেটিভ অ্যাপে ভিডিও কলিং কীভাবে যুক্ত করবেন

COVID-19 মহামারী চলাকালীন ভিডিও কলিং একটি অপরিহার্য দৈনন্দিন কার্যকলাপ হয়ে উঠেছে। চ্যাট অ্যাপ, অডিও কলিং এবং ভিডিও কলিংয়ের মতো বৈশিষ্ট্যগুলি ব্যবহার করে, আমরা আমাদের বন্ধু এবং পরিবারের সাথে সংযুক্ত থাকতে পেরেছি।

এখন, আসুন আমাদের নিজস্ব রিঅ্যাক্ট নেটিভ অ্যাপ তৈরি করি যা আমাদের ভিডিও কল করতে দেবে।

এই টিউটোরিয়ালে, আমরা শিখতে যাচ্ছি কিভাবে Twilio প্রোগ্রামেবল ভিডিও কল API ব্যবহার করে রিঅ্যাক্ট নেটিভ অ্যাপে একটি ভিডিও কলিং বৈশিষ্ট্য বাস্তবায়ন করা যায়।

প্রক্রিয়াটি বেশ সহজবোধ্য। আমরা কেবল একটি ভিডিও কনফারেন্স রুম তৈরি করব এবং অন্যদের সেই ঘরে যোগ দিতে আমন্ত্রণ জানাব৷ এটি করার জন্য, আমাদের ক্যামেরা এবং মাইক্রোফোন অ্যাক্সেস করতে হবে। তাই পরীক্ষার উদ্দেশ্যে আমাদের একটি বাস্তব স্মার্টফোন ডিভাইস ব্যবহার করতে হবে।

Twilio API অ্যাক্সেস করার জন্য আমরা যে প্রধান প্যাকেজটি ব্যবহার করতে যাচ্ছি তা হল react-native-twilio-video-webrtc প্যাকেজ।

প্রয়োজনীয়তা

• Twilio অ্যাকাউন্ট
• পরীক্ষার জন্য ন্যূনতম দুটি iOS বা Android ডিভাইস।
• প্রতিক্রিয়া নেটিভ এনভায়রনমেন্ট সেটআপ।

আসুন শুরু করা যাক!

কিভাবে আপনার Twilio API কী পাবেন

আপনার Twilio API কী পেতে, আপনার একটি Twilio অ্যাকাউন্টের প্রয়োজন হবে। যে জন্য, এই URL দেখুন. আপনার অ্যাকাউন্ট সেট আপ করার পরে, আপনাকে নীচের স্ক্রিনশট দ্বারা নির্দেশিত অবস্থানে যেতে হবে:

অ্যাক্সেস টোকেন আনার জন্য কীভাবে সার্ভার সেটআপ করবেন

অ্যাক্সেস টোকেন আনতে, আমাদের একটি নতুন নোড সার্ভার প্রকল্প তৈরি করতে হবে। এর জন্য, আমাদের নিম্নলিখিত কমান্ডটি চালিয়ে প্রয়োজনীয় প্যাকেজগুলি ইনস্টল করতে হবে:

yarn add dotenv express ngrok nodemon twilio

এরপরে, আমাদের এনভায়রনমেন্ট ভেরিয়েবল ফাইল – .env-এ Twilio শংসাপত্র যোগ করতে হবে, যেমনটি নীচের কোড স্নিপেটে দেখানো হয়েছে:

PORT=3000
ACCOUNT_SID=AC5ceb0847c50c91b143ce07
API_KEY_SID=SKa173c10de99a26fd86969b
API_KEY_SECRET=Czv7IjNIZJis8s7jb5FePi

এখন আমাদের একটি API এন্ডপয়েন্ট তৈরি করতে হবে। প্রথমে, নীচের কোড স্নিপেটে নির্দেশিত হিসাবে অ্যাক্সেস টোকেন পেতে আমাদের প্রয়োজনীয় প্যাকেজগুলি আমদানি করতে হবে এবং বস্তুর দৃষ্টান্ত তৈরি করতে হবে:

import 'dotenv/config';
import express from 'express';

import twilio from 'twilio';
import ngrok from 'ngrok';
const AccessToken = twilio.jwt.AccessToken;
const VideoGrant = AccessToken.VideoGrant;

const app = express();

এখানে, আমরা অ্যাক্সেস টোকেন পেতে একটি API এন্ডপয়েন্ট তৈরি করতে যাচ্ছি। এক্সপ্রেস ইনস্ট্যান্স দ্বারা প্রদত্ত get পদ্ধতি ব্যবহার করে, আমাদের একটি এন্ডপয়েন্ট ফাংশন তৈরি করতে হবে যা অ্যাক্সেস টোকেনের সাথে প্রতিক্রিয়া জানায়।

ফাংশনের ভিতরে, আমাদের টুইলিও শংসাপত্রের সাথে একটি নতুন উদাহরণ তৈরি করতে হবে। তারপরে, মোবাইল ডিভাইসের রেজিস্টার স্ক্রীন থেকে আমরা যে ব্যবহারকারীর নামটি পেয়েছি তা আমাদের পরিচয় বৈশিষ্ট্য হিসাবে যুক্ত করতে হবে।

অবশেষে, আমরা ব্যবহারকারীকে অ্যাক্সেস দেব যাতে তারা ভিডিওটি ব্যবহার করতে পারে এবং তারপরে ডিভাইসে JWT টোকেন ফেরত দিতে পারে। নীচের স্নিপেটে এই সব করার জন্য কোড এখানে আছে:

app.get('/getToken', (req, res) => {
  if (!req.query || !req.query.userName) {
    return res.status(400).send('Username parameter is required');
  }
  const accessToken = new AccessToken(
    process.env.ACCOUNT_SID,
    process.env.API_KEY_SID,
    process.env.API_KEY_SECRET,
  );

  // Set the Identity of this token
  accessToken.identity = req.query.userName;

  // Grant access to Video
  var grant = new VideoGrant();
  accessToken.addGrant(grant);

  // Serialize the token as a JWT
  var jwt = accessToken.toJwt();
  return res.send(jwt);
});

আমরা পূর্ব অ্যাক্সেসের জন্য ইন্টারনেটে তৈরি করা এন্ডপয়েন্ট APIটিও প্রকাশ করি। এর জন্য, আমরা নিম্নলিখিত কোড স্নিপেট থেকে কোডটি ব্যবহার করতে পারি:

app.listen(process.env.PORT, () =>
  console.log(`Server listening on port ${process.env.PORT}!`),
);

ngrok.connect(process.env.PORT).then((url) => {
  console.log(`Server forwarded to public url ${url}`);
});

সবশেষে, নীচের স্ক্রিনশটে দেখানো হিসাবে আমাদের সার্ভার চালাতে হবে:

এখানে, অ্যাক্সেস টোকেন ফেরত দেওয়ার জন্য আমরা সফলভাবে একটি API এন্ডপয়েন্ট তৈরি করেছি।

কিভাবে আমাদের প্রতিক্রিয়া নেটিভ প্রকল্প কনফিগার করবেন

আমাদের রিঅ্যাক্ট নেটিভ প্রোজেক্টে, আমাদের প্যাকেজগুলি ম্যানুয়ালি সেট আপ করতে হবে এবং সেইসাথে অ্যান্ড্রয়েড এবং iOS উভয় প্ল্যাটফর্মের জন্য ক্যামেরা এবং মাইক্রোফোন অ্যাক্সেস করার অনুমতিগুলি কনফিগার করতে হবে৷

কিন্তু প্রথমে, আমাদের প্রয়োজনীয় প্যাকেজগুলি ইনস্টল করতে হবে, যেগুলি হল react-navigation এবং react-native-twilio-video-webrtc , আমাদের প্রকল্প টার্মিনালে নিম্নলিখিত কমান্ডটি চালানোর মাধ্যমে:

yarn add @react-navigation/native @react-navigation/stack react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view react-native-dotenv react-native-permissions <https://github.com/blackuy/react-native-twilio-video-webrtc>

iOS এর জন্য সেটআপ

iOS এর জন্য, আমাদের ম্যানুয়ালি প্যাকেজ সেট আপ করতে হবে। প্রথমে, আমাদের পডফাইলে আইওএস টার্গেটকে 11 এ বৃদ্ধি করতে হবে . এটি প্রয়োজনীয় কারণ Twilio-এর নেটিভ ভিডিও SDK-তে শুধুমাত্র iOS 11.0+ এর জন্য সমর্থন রয়েছে:

platform :ios, '11.0'
require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'

পডফাইলে, নীচের কোড স্নিপেটে নির্দেশিত হিসাবে আমাদের একটি অনুমতি অনুরোধ সেটআপ করতে হবে:

permissions_path = '../node_modules/react-native-permissions/ios'
  pod 'Permission-Camera', :path => "#{permissions_path}/Camera.podspec"
  pod 'Permission-Microphone', :path => "#{permissions_path}/Microphone.podspec"

তারপরে, নীচের কোড স্নিপেটে নির্দেশিত ক্যামেরা এবং মাইক্রোফোন অ্যাক্সেসের জন্য অনুমতির অনুরোধ করতে আমাদের info.plist খুলতে হবে এবং কোড যোগ করতে হবে:

  <key>UIViewControllerBasedStatusBarAppearance</key>
	<false/>
  <key>NSCameraUsageDescription</key>
  <string>We require your permission to access the camera while in a video call</string>
  <key>NSMicrophoneUsageDescription</key>
  <string>We require your permission to access the microphone while in a video call</string>

এখন আমরা আমাদের iOS সেটআপ সম্পন্ন করেছি৷

Android এর জন্য সেটআপ

প্রথম এবং সর্বাগ্রে, আমাদের ./android/settings.gradle-এ কোডের নিম্নলিখিত লাইন যোগ করতে হবে ফাইল:

project(':react-native-twilio-video-webrtc').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-twilio-video-webrtc/android')

এছাড়াও, আমাদের ./android/app/build.gradle-এ প্যাকেজ বাস্তবায়ন কোড যোগ করতে হবে ফাইল:

implementation project(':react-native-twilio-video-webrtc')

অবশেষে, আমাদের এটিকে MainApplication.java-এ আমদানি করতে হবে পাশাপাশি ফাইল:

import com.twiliorn.library.TwilioPackage;

তারপর, আমাদের নিম্নলিখিত কোডটি ব্যবহার করে প্যাকেজটি সক্রিয় করতে হবে:

@Override
protected List getPackages() {
  @SuppressWarnings("UnnecessaryLocalVariable")
  List packages = new PackageList(this).getPackages();
  //  add the following code
  packages.add(new TwilioPackage());
  return packages;
}

কিভাবে রেজিস্টার রুম স্ক্রীন তৈরি করবেন

এখানে, আমরা "রেজিস্টার রুম" নামে একটি স্ক্রিন তৈরি করতে যাচ্ছি যা আমাদের ভিডিও কলিং রিঅ্যাক্ট নেটিভ অ্যাপে একটি রুমে নিবন্ধন করার অনুমতি দেবে৷

প্রথমে, নীচের কোড স্নিপেটে দেখানো হিসাবে আমাদের প্রয়োজনীয় প্যাকেজগুলি আমদানি করতে হবে:

import React, {useState, useRef, useEffect, useContext} from 'react';
import {
  StyleSheet,
  View,
  Text,
  StatusBar,
  TouchableOpacity,
  TextInput,
  Alert,
  KeyboardAvoidingView,
  Platform,
  ScrollView,
  Dimensions,
} from 'react-native';

import {
  TwilioVideoLocalView,
  TwilioVideoParticipantView,
  TwilioVideo,
} from 'react-native-twilio-video-webrtc';

import {NavigationContainer} from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack';

• প্রতিক্রিয়া-নেভিগেশন:রেজিস্টার স্ক্রীন এবং ভিডিও কল স্ক্রিনের নেভিগেশন পরিচালনা করতে।
• প্রতিক্রিয়া-নেটিভ:এই প্যাকেজগুলি আমাদের ক্যামেরা এবং মাইক্রোফোন অ্যাক্সেস করার অনুমতিগুলি পরিচালনা করতে দেয়৷
• react-native-twilio-video-webrtc:এটি আমাদের Twilio-এর ভিডিও কল প্রোগ্রামেবল API অ্যাক্সেস করতে দেয়।

কিভাবে ইনস্ট্যান্স এবং ভেরিয়েবল শুরু করবেন

প্রথমত, আমরা প্রতিক্রিয়া-নেভিগেশনের জন্য একটি উদাহরণ তৈরি করতে যাচ্ছি। তারপরে, আমরা রাজ্যগুলিকে শুরু করতে যাচ্ছি সেইসাথে প্রসঙ্গ ভেরিয়েবলগুলি রাজ্যগুলিকে বিতরণ করার জন্য নীচের কোড স্নিপেটে দেখানো হয়েছে:

const Stack = createStackNavigator();
const initialState = {
  isAudioEnabled: true,
  status: 'disconnected',
  participants: new Map(),
  videoTracks: new Map(),
  userName: '',
  roomName: '',
  token: '',
};

const AppContext = React.createContext(initialState);

const dimensions = Dimensions.get('window');

বুটস্ট্র্যাপ নেভিগেশন

App.js-এ ফাইল, আমরা একটি নেভিগেশন কন্টেইনার স্ট্যাক তৈরি করতে যাচ্ছি। Stack ব্যবহার করে উপাদানটি আমরা নীচের কোড স্নিপেটে নির্দেশিত প্রসঙ্গ ব্যবহার করে প্রতিটি স্ক্রিনে রাজ্য বিতরণ করতে যাচ্ছি:

export default () => {
  const [props, setProps] = useState(initialState);

  return (
    <>
      <StatusBar barStyle="dark-content" />
      <AppContext.Provider value={{props, setProps}}>
        <NavigationContainer>
          <Stack.Navigator>
            <Stack.Screen name="Home" component={HomeScreen} />
            <Stack.Screen name="Video Call" component={VideoCallScreen} />
          </Stack.Navigator>
        </NavigationContainer>
      </AppContext.Provider>
    </>
  );
};

কিভাবে রেজিস্টার স্ক্রিন তৈরি করবেন

ব্যবহারকারীর শংসাপত্রগুলি পেতে এবং ব্যবহারকারীদের ভিডিও কল রুমে যোগদানের অনুমতি দেওয়ার জন্য রেজিস্টার স্ক্রিনে একটি মডেল ডায়ালগ থাকবে।

প্রথমে, আমাদের প্রপসগুলিকে প্রসঙ্গ থেকে register.js-এ আনতে হবে নিচের কোড স্নিপেটে দেখানো ফাইলটি:

import React, {useState, useRef, useEffect, useContext} from 'react';
import {
  checkMultiple,
  request,
  requestMultiple,
  PERMISSIONS,
  RESULTS,
} from 'react-native-permissions';

const RegisterScreen = ({navigation}) => {
  const {props, setProps} = useContext(AppContext);

এর পরে, আমাদের ক্যামেরা এবং মাইক্রোফোন অনুমতিগুলি পরিচালনা করার জন্য একটি ফাংশন তৈরি করতে হবে। ফাংশনের জন্য কোড নিচের কোড স্নিপেটে দেওয়া আছে:

const _checkPermissions = (callback) => {
    const iosPermissions = [PERMISSIONS.IOS.CAMERA, PERMISSIONS.IOS.MICROPHONE];
    const androidPermissions = [
      PERMISSIONS.ANDROID.CAMERA,
      PERMISSIONS.ANDROID.RECORD_AUDIO,
    ];
    checkMultiple(
      Platform.OS === 'ios' ? iosPermissions : androidPermissions,
    ).then((statuses) => {
      const [CAMERA, AUDIO] =
        Platform.OS === 'ios' ? iosPermissions : androidPermissions;
      if (
        statuses[CAMERA] === RESULTS.UNAVAILABLE ||
        statuses[AUDIO] === RESULTS.UNAVAILABLE
      ) {
        Alert.alert(
          'Error',
          'Hardware to support video calls is not available',
        );
      } else if (
        statuses[CAMERA] === RESULTS.BLOCKED ||
        statuses[AUDIO] === RESULTS.BLOCKED
      ) {
        Alert.alert(
          'Error',
          'Permission to access hardware was blocked, please grant manually',
        );
      } else {
        if (
          statuses[CAMERA] === RESULTS.DENIED &&
          statuses[AUDIO] === RESULTS.DENIED
        ) {
          requestMultiple(
            Platform.OS === 'ios' ? iosPermissions : androidPermissions,
          ).then((newStatuses) => {
            if (
              newStatuses[CAMERA] === RESULTS.GRANTED &&
              newStatuses[AUDIO] === RESULTS.GRANTED
            ) {
              callback && callback();
            } else {
              Alert.alert('Error', 'One of the permissions was not granted');
            }
          });
        } else if (
          statuses[CAMERA] === RESULTS.DENIED ||
          statuses[AUDIO] === RESULTS.DENIED
        ) {
          request(statuses[CAMERA] === RESULTS.DENIED ? CAMERA : AUDIO).then(
            (result) => {
              if (result === RESULTS.GRANTED) {
                callback && callback();
              } else {
                Alert.alert('Error', 'Permission not granted');
              }
            },
          );
        } else if (
          statuses[CAMERA] === RESULTS.GRANTED ||
          statuses[AUDIO] === RESULTS.GRANTED
        ) {
          callback && callback();
        }
      }
    });
  };

তারপরে, প্রতিবার অ্যাপটি শুরু হলে আমাদের এই অনুমতি-পরীক্ষা ফাংশনটি কল করতে হবে। এর জন্য, আমাদের useEffect এর ভিতরে ফাংশনটিকে কল করতে হবে নিচের কোড স্নিপেটে নির্দেশিত হুক:

useEffect(() => {
    _checkPermissions();
  }, []);

অবশেষে, আমাদের দুটি ইনপুট সহ একটি সাধারণ ফর্ম তৈরি করতে হবে যা রুমের নাম এবং ব্যবহারকারীর নাম গ্রহণ করে। তারপর, Twilio API এ নিবন্ধন করার জন্য আমাদের সার্ভারে ইনপুট পাঠাতে হবে। এর জন্য কোড নিচের কোড স্নিপেটে দেওয়া আছে:

return (
    <KeyboardAvoidingView
      behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
      style={styles.container}>
      <ScrollView contentContainerStyle={styles.container}>
        <View style={styles.form}>
          <View style={styles.formGroup}>
            <Text style={styles.text}>User Name</Text>
            <TextInput
              style={styles.textInput}
              autoCapitalize="none"
              value={props.userName}
              onChangeText={(text) => setProps({...props, userName: text})}
            />
          </View>
          <View style={styles.formGroup}>
            <Text style={styles.text}>Room Name</Text>
            <TextInput
              style={styles.textInput}
              autoCapitalize="none"
              value={props.roomName}
              onChangeText={(text) => setProps({...props, roomName: text})}
            />
          </View>
          <View style={styles.formGroup}>
            <TouchableOpacity
              disabled={false}
              style={styles.button}
              onPress={() => {
                _checkPermissions(() => {
                  fetch(`https://ae7a722dc260.ngrok.io/getToken?userName=${props.userName}`)
                    .then((response) => {
                      if (response.ok) {
                        response.text().then((jwt) => {
                          setProps({...props, token: jwt});
                          navigation.navigate('Video Call');
                          return true;
                        });
                      } else {
                        response.text().then((error) => {
                          Alert.alert(error);
                        });
                      }
                    })
                    .catch((error) => {
                      console.log('error', error);
                      Alert.alert('API not available');
                    });
                });
              }}>
              <Text style={styles.buttonText}>Connect to Video Call</Text>
            </TouchableOpacity>
          </View>
        </View>
      </ScrollView>
    </KeyboardAvoidingView>
  );

আমরা নিচের এমুলেটর স্ক্রিনশটে দেখানো ফলাফলটি পাব:

এখানে, আমরা একটি মডেল ফর্ম সহ আমাদের রেজিস্টার রুম স্ক্রীনটি লক্ষ্য করতে পারি যেখানে আমরা সার্ভারে চলমান Twilio API-এ নিবন্ধন করার জন্য রুমের নাম এবং ব্যবহারকারীর নাম ইনপুট করতে পারি৷

কিভাবে ভিডিও কল স্ক্রীন তৈরি করবেন

ভিডিও কল স্ক্রিনে, আমাদের দুটি উইন্ডো থাকবে – একটি আমাদের নিজস্ব ক্যামেরার ভিউ প্রদর্শনের জন্য, এবং অন্যটি প্রাপকের ক্যামেরার দৃশ্য প্রদর্শনের জন্য৷

প্রথমত, রাজ্যগুলিকে গ্রহণ করার জন্য আমাদের প্রসঙ্গটি শুরু করতে হবে। তারপর আমরা useRef ব্যবহার করে একটি রেফারেন্স ভেরিয়েবল তৈরি করব নীচের কোড স্নিপেটে নির্দেশিত রাজ্যগুলি অ্যাক্সেস করতে হুক করুন:

const VideoCallScreen = ({navigation}) => {
  const twilioVideo = useRef(null);
  const {props, setProps} = useContext(AppContext);

এর পরে, আমাদের সংযোগটি শুরু করতে হবে connect ব্যবহার করে twilioVideo থেকে পদ্ধতি অবজেক্ট, নীচের কোড স্নিপেটে নির্দেশিত হিসাবে রুমের নাম এবং অ্যাক্সেস টোকেন প্রদান করে:

useEffect(() => {
    twilioVideo.current.connect({
      roomName: props.roomName,
      accessToken: props.token,
    });
    setProps({...props, status: 'connecting'});
    return () => {
      _onEndButtonPress();
    };
  }, []);

এখন, আমাদের ভিডিও কল স্ক্রীনের জন্য মূল বডি টেমপ্লেট তৈরি করতে হবে। এখানে, আমরা শুধুমাত্র তখনই অংশগ্রহণকারীর ক্যামেরা ভিউ দেখাই যখন সংযোগ স্থাপন করা হয় এবং শর্তসাপেক্ষ রেন্ডারিং ব্যবহার করে স্ট্রিমিং করা হয়। এর জন্য সামগ্রিক কোড নীচের কোড স্নিপেটে প্রদান করা হয়েছে:

{(props.status === 'connected' || props.status === 'connecting') && (
        <View style={styles.callWrapper}>
          {props.status === 'connected' && (
            <View style={styles.grid}>
              {Array.from(props.videoTracks, ([trackSid, trackIdentifier]) => (
                <TwilioVideoParticipantView
                  style={styles.remoteVideo}
                  key={trackSid}
                  trackIdentifier={trackIdentifier}
                />
              ))}
            </View>
          )}
        </View>
      )}

এর পরে, আমাদের ভিডিও-র বৈশিষ্ট্যগুলি নিয়ন্ত্রণ করতে ফাংশন তৈরি করতে হবে যেমন শেষ কল, নিঃশব্দ এবং সামনে এবং পিছনের ক্যামেরা স্যুইচ করা। প্রয়োজনীয় ফাংশনের কোডিং বাস্তবায়ন নিচের কোড স্নিপেটে দেওয়া আছে:

const _onEndButtonPress = () => {
    twilioVideo.current.disconnect();
    setProps(initialState);
  };

  const _onMuteButtonPress = () => {
    twilioVideo.current
      .setLocalAudioEnabled(!props.isAudioEnabled)
      .then((isEnabled) => setProps({...props, isAudioEnabled: isEnabled}));
  };

  const _onFlipButtonPress = () => {
    twilioVideo.current.flipCamera();
  };

এখানে, আমরা disconnect ব্যবহার করেছি , setLocalAudioEnabled এবং flipCamera twilioVideo দ্বারা প্রদত্ত পদ্ধতি প্রয়োজনীয় ইন-ভিডিও বৈশিষ্ট্যগুলি ট্রিগার করার উদাহরণ৷

এখন আমাদের ফাংশন ট্রিগার করার জন্য কিছু বোতাম রেন্ডার করতে হবে। এর জন্য, আমাদের নিম্নলিখিত কোড স্নিপেট থেকে কোডটি ব্যবহার করতে হবে:

       <View style={styles.optionsContainer}>
        <TouchableOpacity style={styles.button} onPress={_onEndButtonPress}>
          <Text style={styles.buttonText}>End</Text>
        </TouchableOpacity>
        <TouchableOpacity style={styles.button} onPress={_onMuteButtonPress}>
          <Text style={styles.buttonText}>
            {props.isAudioEnabled ? 'Mute' : 'Unmute'}
          </Text>
        </TouchableOpacity>
        <TouchableOpacity style={styles.button} onPress={_onFlipButtonPress}>
          <Text style={styles.buttonText}>Flip</Text>
        </TouchableOpacity>
      </View>

শেষ ধাপ হল TwilioVideo যোগ করা সমস্ত ভিডিও কলিং ইভেন্ট পরিচালনা এবং পর্যবেক্ষণ করার জন্য কনফিগার করা উপাদান। সামগ্রিকভাবে কনফিগার করা TwilioVideo কম্পোনেন্ট নিচের কোড স্নিপেটে দেওয়া আছে:

      <TwilioVideo
        ref={twilioVideo}
        onRoomDidConnect={() => {
          setProps({...props, status: 'connected'});
        }}
        onRoomDidDisconnect={() => {
          setProps({...props, status: 'disconnected'});
          navigation.goBack();
        }}
        onRoomDidFailToConnect={(error) => {
          Alert.alert('Error', error.error);
          setProps({...props, status: 'disconnected'});
          navigation.goBack();
        }}
        onParticipantAddedVideoTrack={({participant, track}) => {
          if (track.enabled) {
            setProps({
              ...props,
              videoTracks: new Map([
                ...props.videoTracks,
                [
                  track.trackSid,
                  {
                    participantSid: participant.sid,
                    videoTrackSid: track.trackSid,
                  },
                ],
              ]),
            });
          }
        }}
        onParticipantRemovedVideoTrack={({track}) => {
          const videoTracks = props.videoTracks;
          videoTracks.delete(track.trackSid);
          setProps({...props, videoTracks});
        }}
      />

যদি আমরা একটি রুমে ব্যবহারকারীদের মধ্যে সঠিক সংযোগ স্থাপন করতে সক্ষম হই তাহলে আমরা নিম্নলিখিত ফলাফল পাব:

উপরের স্ক্রিনশটগুলি একটি ঘরে দুই অংশগ্রহণকারীর মধ্যে ভিডিও কলিং প্রদর্শন করে৷

এর সাথে, আমরা আমাদের রিঅ্যাক্ট নেটিভ অ্যাপে ভিডিও কলিং ফিচার সফলভাবে প্রয়োগ করেছি।

উপসংহার

এই টিউটোরিয়ালটি একটি রিঅ্যাক্ট নেটিভ অ্যাপে ভিডিও কলিং সেটআপ করার বিষয়ে একটি শিক্ষানবিস-স্তরের শিক্ষার সংস্থান সরবরাহ করার লক্ষ্যে। আমরা Twilio এর প্রোগ্রামেবল ভিডিও কল API ব্যবহার করে এটি করেছি।

আমরা শুধুমাত্র রিঅ্যাক্ট নেটিভ অংশই কভার করিনি বরং একটি পৃথক নোড সার্ভার প্রকল্পে সামগ্রিক API বাস্তবায়নও করেছি।

এখন, পরবর্তী ধাপে একটি বেনামী কল বা একাধিক অংশগ্রহণকারী ভিডিও কলিং রুম শুরু করার মতো উন্নত বৈশিষ্ট্য যোগ করা হতে পারে।

বৈশিষ্ট্য অনুপ্রেরণা এবং একটি সঠিক ভিডিও কলিং অ্যাপের জন্য, আপনি instamobile.io দেখতে পারেন যা শক্তিশালী বৈশিষ্ট্য সহ একটি ভিডিও চ্যাট অ্যাপের অবস্থা অফার করে৷

পরের বার দেখা হবে, শুভ কোডিং!