টুইলিও দিয়ে React Native অ্যাপে ভিডিও কল ইন্টিগ্রেশন: ধাপে ধাপে গাইড

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

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

এই টিউটোরিয়ালে, আমরা শিখব কিভাবে টুইলিও প্রোগ্রামেবল ভিডিও কল API ব্যবহার করে React Native অ্যাপে ভিডিও কলিং ফিচার ইমপ্লিমেন্ট করতে হয়।

প্রক্রিয়াটি খুবই সোজা। আমরা সিম্পলি একটি ভিডিও কনফারেন্স রুম তৈরি করব এবং অন্যদের সেই রুমে যোগ होने আমন্ত্রণ জানাব। এটি করার জন্য, আমাদের ক্যামেরা এবং মাইক্রোফোনে অ্যাক্সেস দরকার হবে। তাই টেস্টিং উদ্দেশ্যে একটি আসল স্মার্টফোন ডিভাইস ব্যবহার করতে হবে।

টুইলিও API অ্যাক্সেস করার জন্য আমরা যেটা মূল প্যাকেজ ব্যবহার করব সেটি হল react-native-twilio-video-webrtc প্যাকেজ।

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

টুইলিও অ্যাকাউন্ট
টেস্টিং-এর জন্য কমপক্ষে দুইটি iOS বা Android ডিভাইস।
React Native এনভায়রনমেন্ট সেটআপ।

চলুন শুরু করি!

আপনার টুইলিও API কী কীভাবে পাবেন

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

টুইলিও দিয়ে React Native অ্যাপে ভিডিও কল ইন্টিগ্রেশন: ধাপে ধাপে গাইড

অ্যাক্সেস টোকেন ফেচ হ্যান্ডেল করার জন্য সার্ভার সেটআপ করা

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

yarn add dotenv express ngrok nodemon twilio

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

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 এন্ডপয়েন্ট তৈরি করব। Express ইনস্ট্যান্সের দ্বারা প্রদত্ত 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,
    );
    // এই টোকেনের আইডেন্টিটি সেট করুন
    accessToken.identity = req.query.userName;
    // ভিডিওতে অ্যাক্সেস দিন
    var grant = new VideoGrant();
    accessToken.addGrant(grant);
    // টোকেনকে 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 এন্ডপয়েন্ট তৈরি করেছি।

আমাদের React Native প্রোজেক্ট কনফিগার করা

আমাদের React Native প্রোজেক্টে, আমাদের প্যাকেজগুলো ম্যানুয়ালি সেট আপ করতে হবে সেইসাথে Android এবং 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-এর জন্য, আমাদের প্যাকেজটি ম্যানুয়ালি সেট আপ করতে হবে। প্রথমে, Podfile-এ iOS টার্গেট 11-এ বাড়াতে হবে। এটি প্রয়োজন কারণ টুইলিওর নেটিভ ভিডিও SDK শুধু iOS 11.0+ সাপোর্ট করে:

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

Podfile-এ, নিচের কোড স্নিপেটে দেখানো মতো পারমিশন রিকোয়েস্ট সেট আপ করতে হবে:

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();
    // নিচের কোডটি যোগ করুন
    packages.add(new TwilioPackage());
    return packages;
}

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

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

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

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-navigation: রেজিস্টার স্ক্রিন এবং ভিডিও কল স্ক্রিনের নেভিগেশন হ্যান্ডেল করার জন্য।
react-native: এই প্যাকেজটি আমাদের ক্যামেরা এবং মাইক্রোফোন অ্যাক্সেসের পারমিশন হ্যান্ডেল করতে দেয়।
react-native-twilio-video-webrtc: এটি আমাদের টুইলিওর ভিডিও কল প্রোগ্রামেবল API অ্যাক্সেস করতে দেয়।

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

প্রথমে, আমরা react-navigation-এর জন্য একটি ইনস্ট্যান্স তৈরি করব। তারপর, স্টেটসহ কনটেক্সট ভেরিয়েবল ইনিশিয়ালাইজ করব যাতে স্টেট ডিস্ট্রিবিউট করা যায়, নিচের কোড স্নিপেটের মতো:

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 (
        <>
            
            
                
                    
                        
                        
                    
                
            
        
    );
};

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

রেজিস্টার স্ক্রিনে একটি মডাল ডায়ালগ থাকবে যা ইউজারের ক্রেডেনশিয়াল নেবে এবং ইউজারদের ভিডিও কল রুমে যোগ होने দেবে।

প্রথমে, কনটেক্সট থেকে প্রপসগুলো 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();
}, []);

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

return (
    
        
            
                
                    User Name
                     setProps({...props, userName: text})}
                    />
                
                
                    Room Name
                     setProps({...props, roomName: text})}
                    />
                
                
                     {
                            _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');
                                    });
                            });
                        }}
                    >
                        Connect to Video Call
                    
                
            
        
    
);

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

এখানে, আমরা আমাদের রেজিস্টার রুম স্ক্রিনটি দেখতে পাচ্ছি যেখানে একটি মডাল ফর্মে রুম নাম এবং ইউজার নাম ইনপুট দিয়ে টুইলিও API-এ সার্ভারে রানিং রেজিস্টার করা যায়।

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

ভিডিও কল স্ক্রিনে দুটি উইন্ডো থাকবে — একটি আমাদের নিজস্ব ক্যামেরার ভিউ দেখানোর জন্য, এবং অন্যটি রিসিপিয়েন্টের ক্যামেরার ভিউ দেখানোর জন্য।

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

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

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

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

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

{(props.status === 'connected' || props.status === 'connecting') && (
    
        {props.status === 'connected' && (
            
                {Array.from(props.videoTracks, ([trackSid, trackIdentifier]) => (
                    
                ))}
            
        )}
    
)}

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

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();
};

এখানে, আমরা twilioVideo ইনস্ট্যান্স দ্বারা প্রদত্ত disconnect, setLocalAudioEnabled এবং flipCamera মেথডগুলো ব্যবহার করেছি প্রয়োজনীয় ইন-ভিডিও ফিচার ট্রিগার করার জন্য।

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


    
        End
    
    
        
            {props.isAudioEnabled ? 'Mute' : 'Unmute'}
        
    
    
        Flip

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

 {
        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});
    }}
/>

যদি আমরা ইউজারদের মাঝে একটি রুমে সঠিক কানেকশন স্থাপন করতে পারি, তবে নিচের ফলাফলটি পাব:

উপরের স্ক্রিনশটগুলো একটি রুমে দুজন পার্টিসিপেন্টের মাঝে ভিডিও কলিং প্রদর্শন করছে।

এদিকে, আমরা সফলভাবে আমাদের React Native অ্যাপে ভিডিও কলিং ফিচার ইমপ্লিমেন্ট করেছি।

উপসংহার

এই টিউটোরিয়ালের লক্ষ্য ছিল React Native অ্যাপে ভিডিও কলিং সেট আপ করার”上ে একটি বেগিনার-লেভেল লার্নিং রিসোর্স দেয়া। আমরা এটি টুইলিওর প্রোগ্রামেবল ভিডিও কল API ব্যবহার করে করেছি।

আমরা শুধু React Native অংশই কভার করিনি, বরং আলাদা একটি Node সার্ভার প্রোজেক্টে পুরো API ইমপ্লিমেন্টেশনও কভার করেছি।

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

ফিচার ইনসপিরেশন এবং একটি প্রপার ভিডিও কলিং অ্যাপের জন্য, আপনি instamobile.io চেক আউট করতে পারেন যা পাওয়ারফুল ফিচারসহ একটি ভিডিও চ্যাট অ্যাপ অফার করে।

আরও দেখা হবে ফলকস, হ্যাপি কোডিং!