Twilio के साथ अपने React Native ऐप में वीडियो कॉल इंटीग्रेट करें

COVID-19 महामारी के दौरान वीडियो कॉलिंग एक आवश्यक दैनिक गतिविधि बन गई है। चैट ऐप्स, ऑडियो कॉलिंग, और वीडियो कॉलिंग जैसी सुविधाओं का उपयोग करके, हम अपने दोस्तों और परिवार के साथ जुड़े रहने में सक्षम हुए हैं।

अब, आइए अपना खुद का React Native ऐप बनाते हैं जो हमें वीडियो कॉल करने देगा।

इस ट्यूटोरियल में, हम Twilio प्रोग्रामेबल वीडियो कॉल API का उपयोग करके React Native ऐप में वीडियो कॉलिंग सुविधा को लागू करना सीखेंगे।

प्रक्रिया बहुत सीधी है। हम बस एक वीडियो कॉन्फ्रेंस रूम बनाएंगे और दूसरों को उस रूम में शामिल होने के लिए आमंत्रित करेंगे। ऐसा करने के लिए, हमें कैमरा और माइक्रोफोन तक पहुंच की आवश्यकता होगी। इसलिए टेस्टिंग के लिए हमें एक वास्तविक स्मार्टफोन डिवाइस का उपयोग करना होगा।

मुख्य पैकेज जिसका हम Twilio API तक पहुंचने के लिए उपयोग करने जा रहे हैं वह है react-native-twilio-video-webrtc पैकेज।

आवश्यकताएं

Twilio अकाउंट
टेस्टिंग के लिए न्यूनतम दो iOS या Android डिवाइस।
React Native वातावरण सेटअप।

चलिए शुरू करते हैं!

अपना Twilio API कुंजी कैसे प्राप्त करें

अपना Twilio API कुंजी प्राप्त करने के लिए, आपको एक Twilio अकाउंट की आवश्यकता होगी। उसके लिए, इस URL पर जाएं। अपना अकाउंट सेटअप करने के बाद, आपको स्क्रीनशॉट नीचे द्वारा निर्देशित स्थान पर जाने की आवश्यकता है:

Twilio के साथ अपने React Native ऐप में वीडियो कॉल इंटीग्रेट करें - चरण-दर-चरण गाइड

एक्सेस टोकन लाने को संभालने के लिए सर्वर कैसे सेटअप करें

एक्सेस टोकन लाने के लिए, हमें एक नया Node सर्वर प्रोजेक्ट बनाने की आवश्यकता है। उसके लिए, हमें निम्न कमांड चलाकर आवश्यक पैकेज इंस्टॉल करने की आवश्यकता है:

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 एंडपॉइंट बनाने जा रहे हैं। Express इंस्टेंस द्वारा प्रदान की गई get मेथड का उपयोग करके, हमें एक एंडपॉइंट फ़ंक्शन बनाने की आवश्यकता है जो एक्सेस टोकन के साथ प्रतिक्रिया करता है।

फ़ंक्शन के अंदर, हमें Twilio क्रेडेंशियल्स के साथ एक नया इंस्टेंस बनाने की आवश्यकता है। फिर, हमें मोबाइल डिवाइस पर रजिस्टर स्क्रीन से प्राप्त उपयोगकर्ता नाम को पहचान विशेषता के रूप में जोड़ने की आवश्यकता है।

अंत में, हम उपयोगकर्ता को वीडियो का उपयोग करने के लिए पहुंच प्रदान करेंगे और फिर 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 पर बढ़ाने की आवश्यकता है. यह आवश्यक है क्योंकि Twilio का नेटिव वीडियो 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: यह हमें Twilio के वीडियो कॉल प्रोग्रामेबल 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();
}, []);

अंत में, हमें दो इनपुट के साथ एक साधारण फॉर्म बनाने की आवश्यकता है जो रूम नाम और उपयोगकर्ता नाम स्वीकार करते हैं। फिर, हमें Twilio 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
                    
                
            
        
    
);

हमको एमुलेटर स्क्रीनशॉट में नीचे दिखाए अनुसार परिणाम मिलेगा:

यहां, हम अपने Register Room स्क्रीन को एक मॉडल फॉर्म के साथ देख सकते हैं जहां हम Twilio API पर रजिस्टर करने के लिए सर्वर पर चल रहे रूम नाम और उपयोगकर्ता नाम दर्ज कर सकते हैं।

वीडियो कॉल स्क्रीन कैसे बनाएं

Video Call Screen में, हमारे पास दो विंडो होंगी - एक हमारे अपने कैमरे के व्यू को प्रदर्शित करने के लिए, और दूसरी प्राप्तकर्ता के कैमरे के व्यू को प्रदर्शित करने के लिए।

सबसे पहले, हमें स्टेट्स स्वीकार करने के लिए कॉन्टेक्स्ट इनिशियलाइज़ करने की आवश्यकता है। फिर हम 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();
    };
}, []);

अब, हमें Video Call Screen के लिए मुख्य बॉडी टेम्पलेट बनाने की आवश्यकता है। यहां, हम प्रतिभागी के कैमरा व्यू को केवल तभी दिखाते हैं जब कनेक्शन स्थापित हो जाता है और स्ट्रीमिंग कंडीशनल रेंडरिंग का उपयोग करके हो रही होती है। इसके लिए समग्र कोड नीचे दिए गए कोड स्निपेट में प्रदान किया गया है:

{(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 ऐप में वीडियो कॉलिंग सेटअप करने पर एक शुरुआती-स्तर का लर्निंग संसाधन प्रदान करना था। हमने इसे Twilio के प्रोग्रामेबल वीडियो कॉल API का उपयोग करके किया।

हमने न केवल React Native भाग को कवर किया बल्कि एक अलग Node सर्वर प्रोजेक्ट में समग्र API कार्यान्वयन को भी कवर किया।

अब, अगला कदम गुमनाम कॉल शुरू करने या मल्टीपल प्रतिभागी वीडियो कॉलिंग रूम जैसी उन्नत सुविधाओं को जोड़ना हो सकता है।

फीचर प्रेरणा और एक उचित वीडियो कॉलिंग ऐप के लिए, आप instamobile.io देख सकते हैं जो शक्तिशाली सुविधाओं के साथ एक वीडियो चैट ऐप की स्थिति प्रदान करता है।

अगली बार मिलते हैं दोस्तों, हैप्पी कोडिंग!

Twilio के साथ अपने React Native ऐप में वीडियो कॉल इंटीग्रेट करें - चरण-दर-चरण गाइड