EnableX 및 React Native를 사용한 화상 통화 애플리케이션 구축
14891 단어 webrtcreactnativevideo
WebRTC는 오픈 소스 기술로 칭찬을 받아왔지만, 어플리케이션/웹 사이트에 포함할 수 있는 API를 충분히 제공하지만 현실은 다릅니다.만약 당신이나 당신의 단체가 전문 지식이 부족하다면, 무장애 임무는 진정한 투쟁이 될 수도 있다.어떤 개발 프로젝트와 마찬가지로 노력, 시간, 자금, 인프라 시설과 유지보수도 필요하다는 것을 잊지 마라.MVP를 만드는 데 많은 자금을 투입하지 않고 시장에 진출하고자 하는 경험이 부족한 조직이나 초창기 회사들에게도 장애가 될 수 있다.
모든 번거로움과 인프라 투자를 피하기 위해 CPaas(통신 플랫폼 즉 서비스) 공급자에게 도움을 청하여 WebRTC 기반의 모듈화와 기능이 풍부한 API를 제공할 수 있습니다.가장 좋은 부분--그것은 당신의 주머니에 구멍을 내지 않을 것이다!사실상, 그것의 현금 지불 모델은 당신이 사용량에 따라 비용을 지불할 수 있도록 허락한다. 이것은 그것으로 하여금 예산의 우호적인 선택이 되게 한다.
최근 프로젝트에서는 EnableX API를 사용하여 React Native를 사용하여 일대일 비디오 애플리케이션을 구축했습니다.
EnableX란 무엇입니까?
EnableX는 모든 애플리케이션과 웹 사이트에 비디오, 음성, 문자 메시지 및 채팅 정보를 삽입하는 클라우드 기반 통신 플랫폼입니다.이것은 운영자급 플랫폼에 구축되어 개발자에게 모든 통신 API와 필요한 도구 패키지를 제공하여 혁신적이고 사람을 황홀하게 하는 통신 체험을 개발한다.
다음은 종단 간 화상 통신에 필요한 다양한 방법을 포함하는 주요 EnableX 클래스 목록입니다.
EnxRtc: 이 클래스에는 방에 연결하고 방에 가입하는 방법이 포함되어 있습니다.
EnxRoom: 이 유형에는 공간 내 작업을 처리하는 방법이 포함되어 있습니다.e, g. EnableX Room, 게시 및 구독 흐름 등에 엔드포인트 연결
EnxStream: 이 클래스는 미디어 흐름과 관련된 모든 함수를 처리합니다.예를 들어, EnableX 미디어 서버 간에 스트림을 시작, 구성 및 전송하고 재생할 스트림을 수신합니다
EnxPlayerView: 비디오 흐름을 EnxPlayerView에 표시하는 데 사용됩니다.
EnableX Basic에 대한 자세한 내용은 Enablex official developer documentation에 나와 있습니다.
EnableX 계정 생성
제가 상세한 설명을 시작하기 전에, 반드시 React-Native와 React-Native 패키지를 사용하는 것에 대해 기초부터 중급까지 이해해 주십시오.
EnableX 계정을 생성해야 합니다.절대 무료!프로젝트를 만들고 필요한 증거를 얻으면 시작할 수 있습니다!
Expo CLI를 사용하여 React 네이티브 애플리케이션을 생성하려면
개발 서버 시작: 다음 명령을 실행하여 Expo CLI를 사용하여 새 React 네이티브 프로젝트를 생성합니다.프로젝트 이름으로 변수 프로젝트Name을 바꿉니다.
Expo init ProjectName
cd projectname
Npm start
npm run android
npm run ios
EnableX를 React 네이티브 애플리케이션과 통합하려면
1. EnableX는 enx rtc react native라는 react 네이티브 패키지를 제공합니다. 코드에서 이 패키지를 가져와야 각종 EnableX 클래스에 접근할 수 있습니다.이 "enx rtc react native"플러그인은 네이티브 EnableX SDK와 Javascript를 통합하여 구성됩니다.iOS나 Android의 선결 조건에서 언급한 절차에 따라, 요구에 따라, enx rtc react native를 설치하기 위해 프로그램을 준비하십시오.
IOS 사전 요구 사항:
1. 설치node.js
2. 설치 및 업데이트Xcode(Mac 필요)
3. 기계에 CoCoapod이 설치되어 있는지 확인합니다.설치된 경우 설치 프로세스가 변경되면 팟캐스트 파일과 프로젝트 구조를 편집해야 할 수도 있습니다.
4. React 원본 프로젝트의 ios 디렉토리로 이동합니다.
5.pod init를 실행하여pod 파일을 만듭니다.
6.pod 파일에 다음을 추가합니다.
... pod 'enx-rtc-react-native', :path => '../node_modules/enx-rtc-react- native/ios/RNEnxRtc.podspec' …
8. EnxRTCiOS SDK를 설치한 후 프로젝트의 루트로 변경합니다.
9. react native link enx rtc react native를 실행합니다.
문을 열다.XCode의 xcworkspace 컨텐트입니다.이 파일은 React 기본 프로젝트의 ios 폴더에서 찾을 수 있습니다.
11. 파일 선택 -> 새 파일
12. 프로젝트에 빈 swift 파일을 추가합니다.EnxInstall과 같은 모든 파일 이름을 지정할 수 있습니다.스웨프트.Swift 코드를 사용할 수 있도록 XCode에 플래그를 설정합니다.
13. "Objective-C 브리지 헤드를 구성하시겠습니까?"라는 메시지가 나타나면 "브리지 헤드 생성"을 선택합니다.
14. 메시지에 다음 항목을 추가하여 카메라와 마이크를 사용할 수 있는지 확인합니다.plist 파일:
NSCameraUsageDescription
Your message to the user when the camera is accessed for the first time
NSMicrophoneUsageDescription
Your message to the user when the microphone is accessed for the first time
1. 설치node.js
2. Android Studio를 설치하고 업데이트합니다.
3. pen 파일android/app/src/main/java/[...]/main 활동.활용단어참조
4. 다음 줄을android/settings에 추가합니다.그레델:
include ':enx-rtc-react-native
project(':enx-rtc-react-native').projectDir = new File(rootProject.projectDir, '../node_modules/enx-rtc-react-native/android')]
ompile project(':enx-rtc-react-native')
< uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW" />
< uses-permission android:name="android.permission.CAMERA" />
< uses-permission android:name="android.permission.CHANGE_NETWORK_STATE" />
< uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
< uses-permission android:name="android.permission.RECORD_AUDIO" />
< uses-permission android:name="android.permission.INTERNET" />
< uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
< uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
< uses-permission android:name="android.permission.BLUETOOTH" />
< uses-permission android:name="android.permission.BLUETOOTH_ADMIN" />
npm install enx-rtc-react-native --save
//Mostly automatic installation
react-native link enx-rtc-react-native
import { EnxRoom, Enx, EnxStream, EnxPlayerView, EnxToolBarView } from "enx-rtc-react- native";
async componentWillMount() { Enx.initRoom();
EnableX 룸에 연결하려면 각 사용자에게 액세스 토큰이 필요합니다.Rest API call를 통해 각 회의실의 모든 사용자에게 유일한 영패를 생성합니다.
아래 링크를 사용하여 토큰과 방 만들기 Id
https://openapi.enablex.io/video/v1/api-docs/#/Rooms
5. 방에 연결하려면 구조 함수에서 영패, 로컬 흐름 정보, 방 정보, 방 처리 프로그램과 흐름 처리 프로그램을 전달해야 한다.RoomEventHandler는 룸의 이벤트를 수신하고 다음과 같은 동작을 터치합니다
constructor(props) {
super(props);
localStreamInfo: {
audio: true,
video: true,
data: false,
maxVideoBW: "400",
minVideoBW: "300",
audioMuted: false,
videoMuted: false,
name: "React Native",
minWidth: "720",
minHeight: "480",
maxWidth: "1280",
maxHeight: "720",
audio_only: false
},
enxRoomInfo: {
allow_reconnect: true,
number_of_attempts: "3",
timeout_interval: "15"
},
activeTalkerStreams: [],
this.roomEventHandlers = {
//publish local stream on connecting to the room
roomConnected: event => {
console.log("roomConnected", event);
Enx.getLocalStreamId(status => {
this.setState({
localStreamId: status
});
this.state.localStreamId = status;
console.log("localStreamId", this.state.localStreamId);
});
Enx.publish();
},
//subscribe to remote stream when remote stream added.
streamAdded: event => {
console.log("streamAdded", event);
Enx.subscribe(event.streamId, error => {
console.log("streamAdded", error);
});
},
//maintain list of active talkers in the room
activeTalkerList: event => {
var tempArray = [];
tempArray = event;
if (tempArray.length == 0) {
this.setState({
activeTalkerStreams: tempArray,
});
}
if (tempArray.length > 0) {
this.setState({
activeTalkerStreams: tempArray,
});
} }
};
this.streamEventHandlers = {
};
};
render() {
return (
{this.createActiveTalkerPlayers()}
}
//Method to create remote players
createActiveTalkerPlayers() {
return (
{this.state.activeTalkerStreams.map(function(element, index) {
if (index == 0) {
const { height, width } = Dimensions.get("window");
return (
<View>
{this.state.activeTalkerStreams.map(function(element, index) {
if (index == 0) {
const { height, width } = Dimensions.get("window");
return (
);
}
})}
</View>
);
}
Enx.muteSelfAudio(‘localStreamId’,true);
Enx.switchCamera(‘localStreamId’);
8. 방과의 연결 끊기
Enx.disconnect();
React-Native에서 찾을 수 있습니다.
EnableX를 사용하면 플랫폼 간 모바일 애플리케이션을 쉽게 개발할 수 있습니다.이 플랫폼은 많은 풍부한 기능을 제공하여 모든 사용자의 영상 통화 체험을 유력하게 강화하였다.
그들의 프레젠테이션 프로그램을 시작해 보세요.
계속해서 이 공간에 관심을 가지고 웹RTC와 다른 통신을 빈틈없이 하는 기술의 최신 발전에 대해 더 많이 알아보세요.
이 해결 방안은 시험적으로 사용할 수 있다.Sign up here
Reference
이 문제에 관하여(EnableX 및 React Native를 사용한 화상 통화 애플리케이션 구축), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/enablex/build-a-video-calling-app-with-enablex-and-react-native-2859텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
