npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

artc

v0.1.0

Published

WebRtc JSSDK

Downloads

8

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关闭提示