- vừa được xem lúc

Hướng dẫn xây dựng ứng dụng gọi video 1-1 trên nền tảng React Native với Stringee Call API

0 0 15

Người đăng: Nguyễn Văn Thời

Theo Viblo Asia

Tổng quan về Stringee Call API

Chuẩn bị

Trước khi bạn có thể dùng Stringee Call API để tạo và nhận cuộc gọi video, bạn cần :

  1. Tạo tài khoản Stringee miễn phí tại đây.

  2. Tạo project trên Stringee Dashboard.

Stringee create project

  1. Cấu hình answer_url
  • Để hiểu rõ hơn về answer_url, bạn xem tại đây .Bạn có thể tham khảo cách tạo answer_url tại đây

  • Để có thể thực hiệc cuộc gọi ban cần cấu hình answer_url vào project của bạn như sau:

Stringee project answer_url

Nếu bạn chưa có sẵn answer_url, bạn có thể sử dụng Project's answer_url sau để đẩy nhanh quá trình:


https://developer.stringee.com/scco_helper/simple_project_answer_url?record=false&appToPhone=auto&recordFormat=mp3 

(Source code: https://github.com/stringeecom/server-samples/blob/master/answer_url/php/project_answer_url.php)

Khi xây dựng ứng dụng, bạn nên có answer_url của riêng mình.

Tích hợp stringee-react-native

Chuẩn bị

  1. Tạo một project React Native.

  2. Tạo một CallScreen để hiển thị màn hình của cuộc gọi.

Cài đặt stringee-react-native

  1. Ở terminal, chuyển đường dẫn tới React Native Project
  2. Chạy lệh $ npm install stringee-react-native --save

Cài đặt với từng môi trường

Android

  1. Mở file build.gradle và thêm các dòng sau:

buildscript { repositories { ... mavenCentral() } } ... allprojects { repositories { ... mavenCentral() } } 
  1. Mở file app/build.gradle và thêm các dòng sau:

android { ... compileOptions { sourceCompatibility JavaVersion.VERSION_1_8 targetCompatibility JavaVersion.VERSION_1_8 } } dependencies { ... implementation 'com.android.volley:volley:1.2.1' } 
  1. Permissions

Với Android Stringee yêu cầu một số permissions, mở file AndroidManifest.xml và thêm các dòng sau:


/// permission cho việc kết nối internet <uses-permission android:name="android.permission.INTERNET" /> <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" /> <uses-permission android:name="android.permission.ACCESS_WIFI_STATE" /> // permission cho cuộc gọi <uses-permission android:name="android.permission.RECORD_AUDIO" /> <uses-permission android:name="android.permission.CAMERA" /> <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" /> <uses-permission android:name="android.permission.BLUETOOTH" /> <uses-permission android:name="android.permission.BLUETOOTH_CONNECT" /> // permission này mới thêm trên android sdk version 31 

Ghi chú:

  • Bạn bắt buộc phải cấp đủ quyền trước khi thực hiện cuộc gọi, trước khi thực hiện cuộc gọi bàn bắt buộc yêu cầu các quyền sau: RECORD_AUDIO, CAMERA

  • Với việc sử dụng class StringeeAudioManager bạn cần cấp thêm quyền BLUETOOTH_CONNECT đối với android sdk version 31 trở lên

  1. ProGuard

-dontwarn org.webrtc.** -keep class org.webrtc.** { *; } -dontwarn org.apache.http.** -keep class com.stringee.** { *; } 
  • Thêm các dòng sau trong app/buidl.gradle:

android { ... buildTypes { ... release { ... useProguard true proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro' } } } 

iOS

  1. Vào thư mục iOS và chạy lệnh pod install
  2. Thêm quyền truy cập camera và microphone vào file Info.split
<key>NSCameraUsageDescription</key> <string>$(PRODUCT_NAME) uses Camera</string>
<key>NSMicrophoneUsageDescription</key> <string>$(PRODUCT_NAME) uses Microphone</string>

Kết nối Stringee server

Để kết nối đến Stringee Server, bạn cần có access_token. Trong quá trình xây dựng ứng dụng, access_token nên được tạo ra từ server của bạn, bạn có thể tìm hiểu thêm về authentication ở đây: Client authentication, và code mẫu tạo access_token: https://github.com/stringeecom/server-samples/tree/master/access_token.

Để tiết kiệm thời gian, chúng tôi sẽ hard code access_token ở trong ứng dụng:

  1. Khởi tạo một biến để chứa access_token.

const token = "access_token"; 
  1. Lấy access_token và hard code dữ liệu :

Để làm điều đó, chúng tôi đã cung cấp sẵn tool để sinh ra access_token, bạn truy cập vào Dashboard -> Tools -> Generate Access token và sinh access_token của bạn.

Tiếp theo, chúng ta sẽ kết nối đến Stringee Server. Bạn cần phải kết nối được đến Stringee Server trước thì mới có thể thực hiện được cuộc gọi.

  1. Khởi tạo StringeeClient.

import { StringeeClient } from 'stringee-react-native' ... const Home = () => { const client = useRef(); useEffect(() => { client.current.connect(userToken) }, []) const setupStringeeClient = () => { <StringeeClient ref={client} /> }
} 
  1. Lắng nghe sự kiện từ StringeeClient để giao tiếp với Stringee Server trong eventHandlers của bạn:

const setupStringeeClient = () => { const clientDidConnect = (data) => { console.log(data) setUserId(data.userId); } const clientDidDisConnect = (data) => { console.log("clientDidDisConnect", data); } const clientDidFailWithError = (data) => { console.log("clientDidFailWithError", data); } const clientRequestAccessToken = (data) => { console.log("clientRequestAccessToken", data); } const callIncomingCall2 = (data) => { console.log("onIncomingCall2", data); } const eventHandlers = { onConnect: clientDidConnect, onDisConnect: clientDidDisConnect, onFailWithError: clientDidFailWithError, onRequestAccessToken: clientRequestAccessToken, onIncomingCall2: callIncomingCall2, } return ( <StringeeClient ref={client} eventHandlers={eventHandlers} /> )
}

Xử lý logic cuộc gọi

Sau khi kết nối đến Stringee Server, bạn cần thực hiện các bước sau:

  1. Khởi tạo đối tượng StringeeCall2 vào màn hình cuộc gọi và tiền xử lý cuộc gọi:

import { StringeeCall2, StringeeVideoView } from 'stringee-react-native' const Call = ({ route }) => { const call = useRef(); const setupStringeeCall2 = () => { return ( <StringeeCall2 ref={call} clientId={route.params.clientId} /> ) }
} 
  1. Lắng nghe sự kiện của cuộc gọi trong eventHandlers:
const setupStringeeCall2 = () => { const callDidChangeSignalingState = (data) => { console.log('callDidChangeSignalingState', data); switch (data.code) { case 0: break; case 1: break; case 2: setCallState(CallState.CALLING) break; case 3: navigation.goBack() break; case 4: navigation.goBack() break; } }
const callDidChangeMediaState = (data) => { console.log('callDidChangeMediaState', data);
} const callDidReceiveLocalStream = (data) => { console.log('callDidReceiveLocalStream', data); setLocalStream(true)
}
const callDidReceiveRemoteStream = (data) => { console.log('callDidReceiveRemoteStream', data); setRemoteStream(true)
}
const didReceiveDtmfDigit = (data) => { console.log('didReceiveDtmfDigit', data);
}
const didReceiveCallInfo = (data) => { console.log('didReceiveCallInfo', data);
} const didHandleOnAnotherDevice = (data) => { console.log('didHandleOnAnotherDevice', data);
}
const didAudioDeviceChange = (data) => { console.log('didAudioDeviceChange', data)
}
const callEvents = { onChangeSignalingState: callDidChangeSignalingState, onChangeMediaState: callDidChangeMediaState, onReceiveLocalStream: callDidReceiveLocalStream, onReceiveRemoteStream: callDidReceiveRemoteStream, onReceiveDtmfDigit: didReceiveDtmfDigit, onReceiveCallInfo: didReceiveCallInfo, onHandleOnAnotherDevice: didHandleOnAnotherDevice, onAudioDeviceChange: didAudioDeviceChange
} 
  • Khi tạo/trả lời cuộc gọi thành công, cuộc gọi sẽ đi qua rất nhiều trạng thái như là: calling, ringing, answered, ended, busy. Mỗi lần trạng thái của cuộc gọi thay đổi, bạn sẽ nhận được event onChangeSignalingState.

  • Khi media stream của cuộc gọi đã kết nối hoặc mất kết nối, bạn sẽ nhận được event onChangeMediaState.

  • Khi cuộc gọi được xử lý trên thiết bị khác, bạn sẽ nhận được event onHandleOnAnotherDevice.

Tạo cuộc gọi đi

  1. Tạo một call object và đưa tới màn hình cuộc gọi.
const makeCall = () => { navigation.navigate('Call', { clientId: client.current.getId(), callObj: { from: userId, to: toUserID, isVideoCall: true, videoResolution: 'NORMAL' } });
} 
  1. Bắt đầu cuộc gọi ở màn hình call
useEffect(() => { if (route.params.callObj) { call.current.makeCall(JSON.stringify(route.params.callObj), (status, code, message, callId) =>{ console.log('makeCall', status, code, message); setCallId(callId) }) } })

Trả lời cuộc gọi

  1. Bạn sẽ nhận được event onIncomingCall2 từ eventHandlers của StringeeClient đưa object nhận được tới màn hình call
const callIncomingCall2 = (data) => { console.log("onIncomingCall2", data); navigation.navigate('Call', { incomingCall: data, clientId: client.current.getId() })
}
  1. Ở màn hình call thực hiện khởi tạo cuộc gọi
	useEffect(() => { if (route.params.incomingCall) { call.current.initAnswer(route.params.incomingCall.callId, (status, code, message) => { console.log('initAnswer', status, code, message); setCallId(route.params.incomingCall.callId); }) } })
  1. Tiếp nhận hoặc từ chối cuộc gọi
// trả lời cuộc gọi
call.current.answer(callId, (status, code, message) => { if (status) { setCallState(CallState.CALLING) } else { console.log('answer', status, code, message); navigation.goBack(); }
}) // từ chối cuộc gọi
call.current.reject(callId, (status, code, message) => { navigation.goBack() console.log('reject', status, code, message);
})

Hiển thị video

stringee-react-native cung cấp component StringeeVideoView để hiển thị video

{remoteStream && <StringeeVideoView style={styles.remoteView} callId={callId} local={false}
/>} {localStream && <StringeeVideoView callId={callId} local={true} style={styles.localView}
/>}

Ngừng cuộc gọi

Ngừng cuộc gọi và giải phóng tài nguyên của cuộc gọi:

call.current.hangup(callId, (status, code, message) => { console.log('hangup', status, code, message); navigation.goBack()
}) 

Chạy app

Bây giờ ứng dụng của bạn có thể chạy được trên thiết bị. Bạn có thể tham khảo sample phiên bản đầy đủ ở đây: https://github.com/stringeecom/react-native-samples

Xem thêm: Hướng dẫn xây dựng ứng dụng gọi video 1-1 trên nền tảng Android với Stringee Call API Xem thêm: Hướng dẫn viết ứng dụng gọi video 1-1 trên nền tảng iOS với Stringee Call API

Bình luận

Bài viết tương tự

- vừa được xem lúc

Học React Native từ cơ bản đến nâng cao - Phần 1 Hướng dẫn cài đặt và chạy "Hello world" (tài liệu viết từ 2018 nên giờ không còn phù hợp với version mới của react native hiện nay )

Trong bài viết này tôi sẽ hướng dẫn cài đặt React Native trên môi trường Windows (khá phổ biến ở Việt Nam). Cài đặt môi trường. Bạn cần phải có :. .

0 0 43

- vừa được xem lúc

Làm ứng dụng học toán đơn giản với React Native - Phần 6

Chào các bạn một năm mới an khang thịnh vượng, dồi dào sức khỏe. Lại là mình đây Đây là link app mà các bạn đang theo dõi :3 https://play.google.com/store/apps/details?id=com.

0 0 68

- vừa được xem lúc

Formik vs React Hook Form (Phần 1)

Các lập trình viên Front End đều làm việc rất nhiều với form cùng sự phức tạp của ứng dụng. Do vậy chúng ta cần những thư viện form mạnh mẽ hỗ trợ quản lý các form state, form validation... Thành phần module. Formik bao gồm có 9 dependencies khác. . React Hook Form thì không có.

0 0 371

- vừa được xem lúc

Làm ứng dụng học toán đơn giản với React Native - Phần 5

Chào mọi người, lại là mình đây Sau 1 thời gian vừa viết bài hướng dẫn, vừa viết code thì mình đã đưa được cái app cơ bản của mình lên google play. Đây là link: https://play.google.com/store/apps/details?id=com.

0 0 119

- vừa được xem lúc

Responsive và Adaptive UI trong React Native

Một số mẹo chung. . Luôn set min width và max width. Điều này giúp cover tốt được các màn hình cỡ XS hoặc XL.

0 0 68

- vừa được xem lúc

Những điều cần lưu ý và sử dụng Hook trong React (Phần 2)

II. UseEffect và điều cần lưu ý . Có hai loại xử lý phổ biến trong các thành phần React: những xử lý phụ không yêu cầu cleanup và những xử lý phụ có cleanup. Hãy xem xét sự khác biệt này chi tiết hơn.

0 0 129