在这个信息化的当下，远程交流显得尤为重要，人们对视频通话的需求急剧攀升。但要在React应用中自行开发这一功能，过程相当繁琐。这正是我们的难题，好在有解决方案，能让我们轻松解决这一难题。
AgoraVideoSDK的优势
在众多选项里，AgoraVideoSDK显然是解决React视频通话问题的有效工具。它拥有全面的功能，能让开发者节省许多时间和精力。根据调研数据，用SDK开发视频通话应用，与从头开始搭建相比，开发周期至少能缩短六成。此外，全球多个地区的多家公司都选择了AgoraVideoSDK来开发性能优良的视频通话应用，比如某些东南亚初创企业用它迅速推出了视频客服功能。
在使用AgoraVideoSDK的过程中，开发者能得到持续的技术支持。与某些小众SDK不同，遇到难题时，开发者不会感到孤立无援。Agora拥有一支专业的社区和技术团队，全球开发者都能在此交流经验。据线上社区论坛数据显示，每天都有众多关于Agora使用的问答互动。
.
├── android
├── components
│ └── Permission.ts
│ └── Style.ts
├── ios
├── App.tsx
.
构建的基本步骤
不需要复杂的Token验证（但生产环境中仍需按规定进行验证），可以先迅速进入应用开发阶段。在这一过程中，确定应用状态接口至关重要，它关联到应用的全面架构设计。在特定区域的开发团队，依照此流程，上午设定好接口，下午就能着手构建功能模块，有效提升了工作效率。
在编写函数时，设置状态变量和获取摄像头与麦克风的权限是基本操作。举个例子，一个小团队中的一位新加入的开发者在获取权限的过程中出现了失误，结果视频播放不成功。经过查阅资料和同事的协助，问题才得以解决。这件事也反映出，尽管步骤看似简单，但每一步都至关重要。
import React, {Component} from 'react'
import {Platform, ScrollView, Text, TouchableOpacity, View} from 'react-native'
import RtcEngine, {RtcLocalView, RtcRemoteView, VideoRenderMode} from 'react-native-agora'
import requestCameraAndAudioPermission from './components/Permission'
import styles from './components/Style'
/**
* @property peerIds Array for storing connected peers
* @property appId
* @property channelName Channel Name for the current session
* @property joinSucceed State variable for storing success
*/
interface State {
appId: string,
token: string,
channelName: string,
joinSucceed: boolean,
peerIds: number[],
}
...
方法与函数的调用
...
export default class App extends Component {
_engine?: RtcEngine
constructor(props) {
super(props)
this.state = {
appId: YourAppId,
token: YourToken,
channelName: 'channel-x',
joinSucceed: false,
peerIds: [],
}
if (Platform.OS === 'android') {
// Request required permissions from Android
requestCameraAndAudioPermission().then(() => {
console.log('requested!')
})
}
}
componentDidMount() {
this.init()
}
/**
* @name init
* @description Function to initialize the Rtc Engine, attach event listeners and actions
*/
init = async () => {
const {appId} = this.state
this._engine = await RtcEngine.create(appId)
await this._engine.enableVideo()
this._engine.addListener('Warning', (warn) => {
console.log('Warning', warn)
})
this._engine.addListener('Error', (err) => {
console.log('Error', err)
})
this._engine.addListener('UserJoined', (uid, elapsed) => {
console.log('UserJoined', uid, elapsed)
// Get current peer IDs
const {peerIds} = this.state
// If new user
if (peerIds.indexOf(uid) === -1) {
this.setState({
// Add peer ID to state array
peerIds: [...peerIds, uid]
})
}
})
this._engine.addListener('UserOffline', (uid, reason) => {
console.log('UserOffline', uid, reason)
const {peerIds} = this.state
this.setState({
// Remove peer ID from state array
peerIds: peerIds.filter(id => id !== uid)
})
})
// If Local user joins RTC channel
this._engine.addListener('JoinChannelSuccess', (channel, uid, elapsed) => {
console.log('JoinChannelSuccess', channel, uid, elapsed)
// Set state variable to true
this.setState({
joinSucceed: true
})
})
}
...
使用init函数至关重要。在开发阶段，组件一旦被安装，该函数便会以AppID为依据启动RTC引擎。根据开发者的笔记，许多人因忘记或写错AppID而遭遇初始化失败的问题。这相当于一扇门的钥匙，若匹配错误，便无法继续打开。
在实际操作中，开启视频功能的方法同样至关重要。若忽略此环节，系统可能会自动切换至纯音频模式。经过测试，我们注意到，纯音频模式在某些特定场景，如远程教学，缺乏视频画面会显著降低教学效果，这并非开发者所预期的。
渲染方法及组件
展示通话起止的按钮和本地及远端用户的视频内容，这需要用到特定的渲染技术。在开发过程中，对时间的管理至关重要。据数据统计，若在这一环节处理不当，调试工作可能会额外耗费整整一天的时间。
组件的使用颇有讲究。比如，展示本地用户视频时，某个组件需设定特定参数，开发者必须严格依照规范编写程序。至于远程用户视频的展示，选用SDK里的组件同样需小心操作。
特色功能与扩展
建立基本的视频通话功能之外，AgoraReactAPI还支持更多功能拓展。例如，可以静音摄像头和麦克风，这在许多会议场合中非常有用。随机询问一些经常参加线上会议的员工，他们普遍认为这一功能能有效减少干扰。
视频和音频的配置以及混音等功能同样易于操作。针对不同的网络状况和用户需求，我们可以做出相应的调整，就好比为用户量身打造专属的视频通话服务包。
...
/**
* @name startCall
* @description Function to start the call
*/
startCall = async () => {
// Join Channel using null token and channel name
await this._engine?.joinChannel(this.state.token, this.state.channelName, null, 0)
}
/**
* @name endCall
* @description Function to end the call
*/
endCall = async () => {
await this._engine?.leaveChannel()
this.setState({peerIds: [], joinSucceed: false})
}
render() {
return (
Start Call
End Call
{this._renderVideos()}
)
}
_renderVideos = () => {
const {joinSucceed} = this.state
return joinSucceed ? (
{this._renderRemoteVideos()}
) : null
}
_renderRemoteVideos = () => {
const {peerIds} = this.state
return (
{peerIds.map((value, index, array) => {
return (
)
})}
)
}
}
整体应用效果
遵循这些步骤，便可以完成两个设备间的视频通话。同时，预设的频道名称等设置也便于用户初次上手。这种快速搭建的方式让众多开发者省去了不少时间。以初创项目为例，他们急于迅速推出视频功能以吸引顾客，采用这种方法确实能显著降低开发初期的费用。
我们已对构建React视频通话应用的方法有了初步认识。大家认为，这种便捷的开发途径能否成为众多小型企业和开发者未来的首选？欢迎留言交流，点赞转发，让更多人从中获益。
