在 React JS 和声网为群组视频通话应用添加管理员功能

在视频通话应用中集成管理员功能非常耗时而且极其枯燥，创建和维护一个集成了视频通话服务的后端来提供管理员功能更是难上加难。

声网 RTC 和 RTM SDK 可以帮我们在视频通话应用中添加管理员功能，而且只要短短几分钟就可以轻松搞定。

当然，把 SDK 和复杂的 React 集成起来并充分利用 React 的功能也有一定难度。在下面这个教程里，我们会写一个简易的 React 应用，然后用这个 React 应用在一个基础的视频通话应用中添加管理员功能。另外，声网为 SDK 提供 React wrapper ，用来创建这个基础的视频聊天应用。

你可以点击 这里 测试配置好的应用的直播 demo，还可以在 这里 找到 Github 资源库。


一、前期准备


二、从代码开始

首先，我们使用下列代码创建一个预置 React 应用：

npx create-react-app agora-gc


然后，打开自己喜欢的代码编辑器文件夹，用下列代码安装声网Agora React Wrapper：

npm install git://github.com/AgoraIO-Community/agora-rtc-react#v1.0.1


接下来，用下列代码安装 RTM SDK：

npm install agora-rtm-sdk

我们的主要关注点是这个应用程序的管理员函数。


三 、应用架构

首先，我们创建一个标准的声网 RTC 用户端，并在该用户端添加相应的事件监听器。然后，我们通过用户名来初始化 RTM 用户端，并作为 RTC 用户端加入同一个频道。我们用声网提供的频道属性来存储视频通话中的用户信息，然后使用用户信息来实施管理员功能以及通过 RTM 发送消息。成为管理员的用户能调用函数发送 RTM 消息，从而把其他用户的音频/视频静音或将用户踢出通话。


四、应用说明

1、数据存储：

//Store the User Data
const [users, setUsers] = useState([])
//Regulates the start of the video call
const [start, setStart] = useState(false)
//Contains the RTC and RTM data
const client = useRef({
   rtc: {
       client: null,
       localAudioTrack: null,
       localVideoTrack: null,
   },
   rtm: {
       client: null,
       channel: null
   }
});
//Whether you are the admin or not
const admin = useRef(false)

2、用户数据结构：

{
   uid: The RTC UID of the client,
   audio: Boolean for audio muted or not,
   video: Boolean for video muted or not,
   client: Boolean for whether the user is the client,
   videoTrack: Video Track Object of the user,
   admin: Whether the user is an admin,
   username: RTM username of the user
}

五、应用程序组件

这个组件是表单组件和视频组件的父函数。它包含了一个 init 函数，我们可以用这个 init 函数初始化 RTM 和 RTC 用户端、加入频道、将本地的音频和视频轨道在加入的频道中播放，还能创建必要的事件监听器。用户加入 RTM 频道时，频道属性会根据用户信息进行更新：

{
   uid: RTC UID,
   username: RTM Username,
   admin: Boolean for whether admin or not
}

1、RTC 事件监听:

我们对用户加入或离开 RTC 视频通话进行事件监听。

const initClientEvents = () => {
   client.current.rtc.client.on('user-joined', async (user) => {
       // A remote user has joined, add him to the users state
   })
   client.current.rtc.client.on("user-published", async (user, type) => {
       //Remote user published a track
       //Subscribe to it and alter the user state accordingly
   });
   client.current.rtc.client.on('user-left', async (user) => {
       //Remote user has left, delete from the user state
   })
   client.current.rtc.client.on("user-unpublished", (user, type) => {
       //Remote user unpublished a track
       //Alter the user state accordingly
   });
}

2、action 函数

把音频/视频静音或离开视频通话时，我们使用下列函数：

let action = async (action) => {
   if (action == 'leave') {
       //Destroy the local audio and video tracks.
       //Remove your user info from the RTM channel attributes
       //Leave the RTC client and RTM channel and client
       //Set users state to [] and start state to false
   }
   else {
       //Mute your audio or video respectively
       //Alter the users state accordingly
   }
}

3、RTM 事件监听:

我们对用户通过 RTM 频道发送消息进行事件监听。我们用下列代码来启动管理员功能：

const initRtmEvents = () => {
   client.current.rtm.client.on('MessageFromPeer', async (message, memberId) => {
       //Message from an admin to either mute audio/video yourself or quit the call
       //Call to action function
   })
   client.current.rtm.channel.on('AttributesUpdated', (attr) => {
       //An update to channel Attributes indicating an alteration to the users list of the call
   })
}


应用程序组件包括视频组件和 InitForm 组件，这两个组件谁是可视组件取决于用户是否已经开始视频通话：

return (
   <div className="App">
       {start && <Videos />}
       {!start && <InitForm initFunc={init} />}
   </div>
)
const messageMaster = (type) => {
   //If you are an admin
   //Send message via RTM to mute users audio/video or kick them
}

const muteMaster = (type) => {
   if (user.client) {
       //Mute your audio/video or quit call
   }
   else {
       if (admin.current) {
           messageMaster(type)
       }
   }
}

六、InitForm 组件

这个组件是一个表单，在打开应用时显示，用来接收用户信息（App ID、频道名称和用户名），并使用上述数据来调用 init 函数。

七、视频组件

这个组件使用用户状态并迭代每个用户，用来渲染用户的视频推流前端和控件（音频/视频静音，踢人/离开）：

const Videos = () => {
   return (
       <div id='videos'>
           {users.length && users.map((user) => {
               if (user.videoTrack) {
                   return (
                       <div className="user-container" key={user.uid}>
                           {user.videoTrack && <AgoraVideoPlayer className='vid' videoTrack={user.videoTrack} ></AgoraVideoPlayer>}
                           <Controls user={user} />
                       </div>
                   )
               }
           })}
       </div>
   )
}

八、控件组件

这个组件可以把音频/视频静音或退出通话。如果用户是管理员，可以使用这个组件把其他用户的音频/视频静音或将他们踢出通话。这个组件的前端有图标。

这个组件的重要函数：

const messageMaster = (type) => {
   //If you are an admin
   //Send message via RTM to mute users audio/video or kick them
}

const muteMaster = (type) => {
   if (user.client) {
       //Mute your audio/video or quit call
   }
   else {
       if (admin.current) {
           messageMaster(type)
       }
   }
}

总结

太棒啦！现在你可以在你的 React 应用上使用管理员控件进行视频通话啦～

  • 可以从 Github 仓库中提取组件，然后直接在你的应用程序上执行该组件。
  • 想了解更多其他功能，可以点击这里查看官方文档哦。
  • 也可以在 GitHub 查看本教程的代码库哦。


原文作者：Prakhar Soni Prakhar Soni 是声网的 Superstar。声网的超级明星计划欢迎全球开发人员使用声网的个性化 SDK分享爱好、共享技术专业知识以及创建创新型的实时通信应用和项目。
原文链接：Adding Admin Functionality for Group Video Call Apps in React JS and Agora
请 注册 或 登录 后评论
    // 作者
    声网技术社区 发布于 声网开发者社区
    • 0
    // 本帖子
    分类
    SDK 教程
    关键词
    #rtm#react
    // 相关帖子
    Coming soon...
    • 0
    在 React JS 和声网为群组视频通话应用添加管理员功能声网技术社区 发布于 声网开发者社区