React Demo 简介

请参考React webIm demo简介

我们的demo webim 中单聊、群聊的音视频功能是使用环信im+声网音视频去实现的，具体实现思路是使用环信IM SDk 收发消息去做信令，实现邀请、更新视频通话状态， 通过声网音视频SDK实现视频通话，并且能和安卓、IOS端互通。

如果要实现RTC功能，你需要满足以下条件：

• 你已分别创建了环信应用及声网应用
• 已完成环信IM的基本功能，包括登录、好友、群组以及会话等的集成
• 上线之前开通声网token验证时，用户需要实现自己的AppServer，根据环信ID,生成Token，创建Token服务及使用AppServer生成Token的过程参见https://docs.agora.io/cn/live-streaming/token_server
• 我们提供了开源的AppServer，可以供参考：https://github.com/easemob/easemob-im-app-server/tree/master/agora-app-server

1、线上地址webim

2、本地跑通demo

• 首先将本源码克隆到本地

$ git clone https://github.com/easemob/webim.git
  

• 定位到 webim/demo 目录 在终端执行下面的命令，安装测试所需要的依赖模块

$ npm i
  

• 启动项目

HTTPS=true npm start
  

登陆后在单聊或群聊里面点击摄像头的icon去发起音视频，体验音视频功能。

我们定义了一套音视频呼叫的流程

                            呼叫流程
    caller   --------------------------------------   callee
             ----inviting---->
                                  <----alerting----
             ----confirmRing---->
                                <----answerCall----
             ----confirmCallee---->
                      <----cancelCall---->

说明：

inviting 发送邀请消息，包含channelName callerDevId callId

alerting 回复 包含calleeDevId，callerDevId, callId

confirmRing: 主叫确认呼叫状态 包含 status TRUE为有效，FALSE为无效, callerDevId, calleeDevId, callId

answerCall：被叫回复操作类型 包含：result, busy/accept/refuse confirmCallee；主叫回复操作类型 包含：result, busy/accept/refuse

cancelCall: 挂断 包含callerDevId，callId

我们通过IM SDK 的CMD消息定义了以上这些指定消息，例如发送alerting：

WebIM.conn.send(msg.body); var id = WebIM.conn.getUniqueId();            //生成本地消息id
var msg = new WebIM.message('cmd', id); //创建命令消息
msg.set({
    to: to,
    action : 'rtcCall', 
    ext: {
       action: 'alert',
       calleeDevId: WebIM.conn.context.jid.clientResource,
       callerDevId: ‘calleeDevId’,
       callId: ‘callId’,
       ts: Date.now(),
       msgType: 'rtcCallWithAgora'
    }, 
    success: function ( id,serverMsgId ) {},
    fail: function(e){}
});
WebIM.conn.send(msg.body);

全部指令请参考demo下 redux/VIdeoCallRedux.js

接收到指令消息后的处理逻辑在redux/WebIMRedux.js

实现了包含对超时、拒接、多端登录等情景的处理，当协商成功之后就会调用 join方法加入音视频通话中。 ui组件在项目的components/videoCall下面，在 layout/DefaultLayout里面使用，组件根据当前呼叫的状态来显示隐藏。