Gọi điện video đã trở thành một hoạt động thiết yếu hàng ngày trong đại dịch COVID-19. Bằng cách sử dụng các tính năng như ứng dụng trò chuyện, cuộc gọi âm thanh và cuộc gọi video, chúng tôi có thể giữ kết nối với bạn bè và gia đình của mình.
Bây giờ, hãy tạo ứng dụng React Native của riêng chúng tôi để cho phép chúng tôi thực hiện cuộc gọi điện video.
Trong hướng dẫn này, chúng ta sẽ tìm hiểu cách triển khai tính năng gọi điện video trong ứng dụng React Native bằng cách sử dụng API cuộc gọi điện video có thể lập trình Twilio.
Quá trình này khá đơn giản. Chúng tôi chỉ cần tạo một phòng họp video và mời những người khác tham gia phòng đó. Để làm điều này, chúng tôi sẽ cần quyền truy cập vào máy ảnh và micrô. Vì vậy, chúng tôi sẽ cần sử dụng một thiết bị điện thoại thông minh thực sự cho mục đích thử nghiệm.
Gói chính mà chúng tôi sẽ sử dụng để truy cập API Twilio là gói react-native-twilio-video-webrtc.
Yêu cầu
- Tài khoản Twilio
- Tối thiểu hai thiết bị iOS hoặc Android để thử nghiệm.
- Thiết lập React Native Environment.
Hãy bắt đầu!
Cách nhận Khoá API Twilio của bạn
Để nhận được khóa API Twilio, bạn cần có tài khoản Twilio. Đối với điều đó, hãy truy cập URL này. Sau khi thiết lập tài khoản của mình, bạn cần đi đến vị trí được hướng dẫn bởi ảnh chụp màn hình bên dưới:
Cách Thiết lập Máy chủ để Xử lý Tìm nạp Mã truy cập
Để tìm nạp mã thông báo truy cập, chúng ta cần tạo một dự án máy chủ Node mới. Để làm được điều đó, chúng ta cần cài đặt các gói cần thiết bằng cách chạy lệnh sau:
yarn add dotenv express ngrok nodemon twilioTiếp theo, chúng ta cần thêm thông tin đăng nhập Twilio vào tệp biến môi trường - .env, như được hiển thị trong đoạn mã bên dưới:
PORT=3000
ACCOUNT_SID=AC5ceb0847c50c91b143ce07
API_KEY_SID=SKa173c10de99a26fd86969b
API_KEY_SECRET=Czv7IjNIZJis8s7jb5FePiBây giờ chúng ta cần tạo một điểm cuối API. Trước tiên, chúng ta cần nhập các gói cần thiết và tạo các phiên bản đối tượng để lấy mã thông báo truy cập như được hướng dẫn trong đoạn mã bên dưới:
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();Ở đây, chúng ta sẽ tạo một điểm cuối API để lấy mã thông báo truy cập. Bằng cách sử dụng phương thức get do cá thể Express cung cấp, chúng ta cần tạo một hàm điểm cuối phản hồi với mã thông báo truy cập.
Bên trong hàm, chúng ta cần tạo một phiên bản mới với thông tin đăng nhập Twillio. Sau đó, chúng ta cần thêm tên người dùng mà chúng ta đã nhận được từ màn hình đăng ký trên thiết bị di động làm thuộc tính nhận dạng.
Cuối cùng, chúng tôi sẽ cấp quyền truy cập cho người dùng để họ có thể sử dụng video và sau đó trả lại mã thông báo JWT cho thiết bị. Đây là mã để thực hiện tất cả điều này trong đoạn mã bên dưới:
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);
});
Chúng tôi cũng hiển thị API điểm cuối mà chúng tôi đã tạo lên internet để truy cập đông. Để làm được điều đó, chúng ta có thể sử dụng mã từ đoạn mã sau:
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}`);
});
Cuối cùng, chúng ta cần chạy máy chủ như được hiển thị trong ảnh chụp màn hình bên dưới:
Tại đây, chúng tôi đã tạo thành công một điểm cuối API để trả lại mã thông báo truy cập.
Cách định cấu hình dự án React Native của chúng tôi
Trong dự án React Native của chúng tôi, chúng tôi cần thiết lập các gói theo cách thủ công cũng như định cấu hình quyền truy cập máy ảnh và micrô cho cả hai nền tảng Android và iOS.
Nhưng trước tiên, chúng ta cần cài đặt các gói cần thiết, đó là react-navigation và react-native-twilio-video-webrtc , bằng cách chạy lệnh sau trong thiết bị đầu cuối dự án của chúng tôi:
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>
Thiết lập cho iOS
Đối với iOS, chúng ta cần thiết lập gói theo cách thủ công. Trước tiên, chúng tôi cần tăng mục tiêu IOS lên 11 trên Podfile . Điều này là cần thiết vì Twilio’s Native Video SDK chỉ hỗ trợ cho iOS 11.0+:
platform :ios, '11.0'
require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'
Trong Podfile, chúng ta cần thiết lập yêu cầu cấp quyền theo chỉ dẫn trong đoạn mã bên dưới:
permissions_path = '../node_modules/react-native-permissions/ios'
pod 'Permission-Camera', :path => "#{permissions_path}/Camera.podspec"
pod 'Permission-Microphone', :path => "#{permissions_path}/Microphone.podspec"
Sau đó, chúng tôi cần mở info.plist và thêm mã để yêu cầu quyền truy cập máy ảnh và micrô theo hướng dẫn trong đoạn mã bên dưới:
<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>
Bây giờ chúng ta đã hoàn tất quá trình thiết lập iOS của mình.
Thiết lập cho Android
Trước hết, chúng ta cần thêm dòng mã sau vào ./android/settings.gradle tệp:
project(':react-native-twilio-video-webrtc').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-twilio-video-webrtc/android')
Ngoài ra, chúng tôi cần thêm mã triển khai gói vào ./android/app/build.gradle tệp:
implementation project(':react-native-twilio-video-webrtc')
Cuối cùng, chúng tôi cần nhập tệp này vào MainApplication.java cũng như tệp:
import com.twiliorn.library.TwilioPackage;
Sau đó, chúng tôi cần kích hoạt gói bằng cách sử dụng đoạn mã sau:
@Override
protected List getPackages() {
@SuppressWarnings("UnnecessaryLocalVariable")
List packages = new PackageList(this).getPackages();
// add the following code
packages.add(new TwilioPackage());
return packages;
}
Cách tạo Màn hình Phòng Đăng ký
Ở đây, chúng tôi sẽ tạo một màn hình có tên "Đăng ký Phòng", cho phép chúng tôi đăng ký một phòng trong ứng dụng gọi điện video React Native của chúng tôi.
Đầu tiên, chúng ta cần nhập các gói cần thiết như được hiển thị trong đoạn mã bên dưới:
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';
- điều hướng phản ứng:Để xử lý điều hướng của màn hình đăng ký và màn hình cuộc gọi điện video.
- react-native:Gói này cho phép chúng tôi xử lý quyền truy cập vào máy ảnh và micrô.
- react-native-twilio-video-webrtc:điều này cho phép chúng tôi truy cập API có thể lập trình cuộc gọi điện video của Twilio.
Cách Khởi tạo Phiên bản và Biến
Đầu tiên, chúng ta sẽ tạo một ví dụ cho chuyển hướng phản ứng. Sau đó, chúng tôi sẽ khởi tạo các trạng thái cũng như các biến ngữ cảnh để phân phối các trạng thái như được hiển thị trong đoạn mã bên dưới:
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');
Điều hướng Bootstrap
Trong App.js , chúng tôi sẽ tạo một ngăn xếp vùng điều hướng. Sử dụng Stack thành phần mà chúng tôi sẽ phân phối trạng thái cho mọi màn hình bằng cách sử dụng ngữ cảnh như được hướng dẫn trong đoạn mã bên dưới:
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>
</>
);
};
Cách tạo màn hình đăng ký
Màn hình Đăng ký sẽ có một hộp thoại phương thức để lấy thông tin đăng nhập của người dùng và cho phép người dùng tham gia phòng cuộc gọi điện video.
Trước tiên, chúng tôi cần tìm nạp các đạo cụ từ ngữ cảnh vào register.js tệp như được hiển thị trong đoạn mã bên dưới:
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);
Tiếp theo, chúng ta cần tạo một hàm để xử lý quyền đối với camera và micrô. Mã cho hàm được cung cấp trong đoạn mã bên dưới:
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();
}
}
});
};
Sau đó, chúng ta cần gọi chức năng kiểm tra quyền này mỗi khi ứng dụng khởi động. Để làm được điều đó, chúng ta cần gọi hàm bên trong useEffect móc theo hướng dẫn trong đoạn mã bên dưới:
useEffect(() => {
_checkPermissions();
}, []);
Cuối cùng, chúng ta cần tạo một biểu mẫu đơn giản với hai đầu vào chấp nhận tên phòng và tên người dùng. Sau đó, chúng ta cần gửi các đầu vào đến máy chủ để đăng ký trên Twilio API. Mã cho việc này được cung cấp trong đoạn mã bên dưới:
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>
);
Chúng ta sẽ nhận được kết quả như trong ảnh chụp màn hình trình giả lập bên dưới:
Tại đây, chúng ta có thể nhận thấy màn hình Phòng Đăng ký của mình với một biểu mẫu phương thức, nơi chúng ta có thể nhập tên phòng và tên người dùng để đăng ký API Twilio đang chạy trên máy chủ.
Cách tạo màn hình cuộc gọi điện video
Trong Màn hình cuộc gọi điện video, chúng ta sẽ có hai cửa sổ - một để hiển thị chế độ xem camera của chính chúng ta và cửa sổ còn lại để hiển thị chế độ xem camera của người nhận.
Đầu tiên, chúng ta cần khởi tạo ngữ cảnh để chấp nhận các trạng thái. Sau đó, chúng tôi sẽ tạo một biến tham chiếu bằng cách sử dụng useRef móc để truy cập các trạng thái như được hướng dẫn trong đoạn mã bên dưới:
const VideoCallScreen = ({navigation}) => {
const twilioVideo = useRef(null);
const {props, setProps} = useContext(AppContext);
Tiếp theo, chúng ta cần khởi tạo kết nối bằng connect phương thức từ twilioVideo , cung cấp tên phòng và mã thông báo truy cập như được hướng dẫn trong đoạn mã bên dưới:
useEffect(() => {
twilioVideo.current.connect({
roomName: props.roomName,
accessToken: props.token,
});
setProps({...props, status: 'connecting'});
return () => {
_onEndButtonPress();
};
}, []);
Bây giờ, chúng ta cần tạo mẫu nội dung chính cho Màn hình cuộc gọi điện video. Ở đây, chúng tôi chỉ hiển thị chế độ xem camera của người tham gia khi kết nối được thiết lập và phát trực tuyến bằng cách sử dụng kết xuất có điều kiện. Mã tổng thể cho việc này được cung cấp trong đoạn mã bên dưới:
{(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>
)}
Tiếp theo, chúng ta cần tạo các chức năng để điều khiển các tính năng trong video như kết thúc cuộc gọi, tắt tiếng và chuyển đổi camera trước và sau. Việc triển khai mã hóa các chức năng bắt buộc được cung cấp trong đoạn mã bên dưới:
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();
};
Ở đây, chúng tôi đã sử dụng disconnect , setLocalAudioEnabled và flipCamera các phương pháp được cung cấp bởi twilioVideo ví dụ để kích hoạt các tính năng cần thiết trong video.
Bây giờ chúng ta cần hiển thị một số nút để kích hoạt các chức năng. Để làm được điều đó, chúng tôi cần sử dụng mã từ đoạn mã sau:
<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>
Bước cuối cùng là thêm TwilioVideo thành phần được định cấu hình để xử lý và quan sát tất cả các sự kiện gọi điện video. Cấu hình tổng thể TwilioVideo thành phần được cung cấp trong đoạn mã bên dưới:
<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});
}}
/>
Chúng tôi sẽ nhận được kết quả sau nếu chúng tôi có thể thiết lập kết nối thích hợp giữa những người dùng trong một phòng:
Ảnh chụp màn hình ở trên minh họa cuộc gọi điện video giữa hai người tham gia trong một phòng.
Với điều này, chúng tôi đã triển khai thành công tính năng Gọi điện video trong ứng dụng React Native của chúng tôi.
Kết luận
Hướng dẫn này nhằm cung cấp tài nguyên học tập ở cấp độ người mới bắt đầu về cách thiết lập Gọi điện video trong ứng dụng React Native. Chúng tôi đã làm điều này bằng cách sử dụng API cuộc gọi điện video có thể lập trình của Twilio.
Chúng tôi không chỉ đề cập đến phần React Native mà còn cả việc triển khai API tổng thể trong một dự án máy chủ Node riêng biệt.
Bây giờ, bước tiếp theo có thể là thêm các tính năng nâng cao như bắt đầu cuộc gọi ẩn danh hoặc phòng gọi điện video nhiều người tham gia.
Để có cảm hứng về tính năng và ứng dụng gọi điện video phù hợp, bạn có thể xem instamobile.io cung cấp trạng thái của ứng dụng Trò chuyện video với các tính năng mạnh mẽ.
Hẹn gặp lại mọi người lần sau, Happy Coding!