======React Demo 简介======
请参考[[https://juejin.im/post/5dafc32df265da5b926be0bf|React webIm demo简介 ]]

==== 环信IM+声网音视频实现音视频通话方案介绍 ====
我们的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**

=== 体验demo ===
1、线上地址[[https://webim-h5.easemob.com/|webim]]

2、本地跑通demo
  * 首先将本源码克隆到本地
  <code bash>
     $ git clone https://github.com/easemob/webim.git
  </code>
  * 定位到 webim/demo 目录 在终端执行下面的命令，安装测试所需要的依赖模块
  <code bash>
     $ npm i
  </code>
  * 启动项目
  <code bash>
    HTTPS=true npm start
  </code>
登陆后在单聊或群聊里面点击摄像头的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：
<code javascript>
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);
</code>
  
全部指令请参考demo下 redux/VIdeoCallRedux.js

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

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