artc

WebRtc JSSDK

Usage no npm install needed!

<script type="module">
  import artc from 'https://cdn.skypack.dev/artc';
</script>

README

#引入sdk

https://g.alicdn.com/ARTC/artc-web/artc.min.js

用法

初始化
   var artc=new ARTC({
         signaling:{
              url:'xxxxxxx?userId=12315&appKey=abc'//信令服务器的地址
         },
         localVideo:elm1,//本地视频 video dom
         remoteVideo:elm2,//远程视频 video dom
         timeout:60,//超时时间 默认60秒。通讯链接处于connected状态之前的所有状态超过这个数值 则触发timeout事件
   })
呼叫
    artc.call({
      //主叫(自己)的userinfo
      userId:12315,
      appKey:'abc'
      },{
      //被叫(你想call的人)的userinfo
      userId:11011,
      appKey:'abc'
    },
    type,
    /*呼叫类型 
    ARTC.CallType = {
      CoupleSession: 1,//双人通话
      MultiSession: 2,//多人通话
      AutomaticSession: 3,//对方自动接听
      CloseSession: 0//结束通话
    };
    默认CoupleSession
    */
    allowVideo// false 则只进行语音通话 默认为true
    )
自动呼叫
//当执行过call之后 call的信息都会保存在sessionStorage里 后续的重新call操作只需要调用autoCall就行了
//autoCall 默认是以AutomaticSession模式,即对方自动接听.因此autoCall 用于异常中断后的重新呼叫
artc.autoCall();
挂断
    artc.hangup();
接听
    artc.answer();
事件监听
artc.on(event,callback);

首先整个sdk由三个状态机构成 artc dialog peer 这三个状态机的每个状态都可以添加监听,当进入该状态(并完成该状态的所有默认行为)后触发绑定的监听器 最外层是artc 所有的监听器是都是绑在它上面的 要想监听dialog的事件则需要 加上dialog这个前缀,peer需要带上dialog.peer这个前缀

artc的状态

[offline]离线状态 这 该状态会尝试连接信令服务器 连接成功后转入idle状态 连接成功会抛出[online]事件
                       ^
                       |
                       v
  [new]初始状态-->[idle] 空闲(在线)状态 此状态会监听来电 这个过程中如果websocket异常会转入[offline]状态
                       ^
                       |
                       v
               [session]会话状态 此状态对应dialog的整个状态机流转 当dialog进入[end]状态时 artc恢复到[idle]状态
               
##### dialog的状态

主叫方:  [call] `信令呼叫状态`                  被叫方: [incall] `被叫状态`
          |   此状态会发出call信令等信令服务器返回结果    |  此状态会设置对方传过来的candidate和sdp
          | ----> end 对方不在线进入end状态             |  等对方成功传过来sdp进入下个状态
          v   正常则进入下个状态                          v
      [getUserMedia]`获取用户本地视频状态`             [ready] `可以接听状态`
          |   拿到用户本地视频流之后进入下个状态            |  只有进入ready状态才允许接听
          v                                             |  因为必须等对端的sdp发过来
       [calling] `rtc呼叫状态`                        v  完成setRemoteDescription
          |    此状态会创建sdp和candidate并发出        [answer] `接听状态`
          |   等createOffer完成并把sdp发出后 进入下个状态 |  点击接听后进入接听状态
          v                                              |  此状态会收集candidate
       [waitAnswer] `等待接听状态` 此状态监听对方的响应      v
          |   拿到对方响应(ResCall)后进入下个状态 [getUserMedia]`获取用户本地视频状态`
          |                                           |
          v                                           v
       [response] `处理响应状态`                     [accept] `接受状态`
          | ----> [end] 对方拒绝或者忙                   |
          |    对方应答则开始进行ice打洞建联             |   此状态createAnswer并发送accept信令
          v                                            v   然后开始ice打洞建联
               
   dialog之后的状态会跟peer的connected disconnected failed 同步 且failed之后 会转到[end]状态
               --------->[connected] 已连接状态  PeerConnection通信已建立连接
               |              ^
               |              |
               |              V
PeerConnection |       [disconnected] 断开连接状态 
  状态机        |              |         网络中断时会进入这状态 PeerConnection会尝试重连 重连成功则转入connected
               |              |         大概10秒之后重连还未成功会进入failed状态
 [new]--->[checking]          v
                           [failed]

除了上述的状态事件监听之外 还有一些其他的事件 camPermit 当用第一次使用视频通话,会有个"是否允许使用摄像头的弹窗"当弹窗时 触发这个事件 userMediaReady 获取到本地视频之后触发,这个配合camPermit可以弹出相关引导用户点击允许按钮,camPermit弹出提示userMediaReady关闭提示