React Demo 简介

环信IM+声网音视频实现音视频通话方案介绍

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

体验demo

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里面使用,组件根据当前呼叫的状态来显示隐藏。