IPCJanus - API 文档

简要

什么是 Web Components

Web Components | MDN (mozilla.org)
ipcJanus 使用 Web Components 打包为原生 JS 可跨框架使用

一级标题释义

PROPS - 配置参数 组件会根据特定的配置 进行生成
EVENTS - 触发事件 组件内部某些行为会触发对应的事件
INSTANCEFUNCTION - 实例方法 Janus 实例上挂载的方法
- 与 PROPS 不同 INSTANCEFUNCTION 提供的是对 已生成组件 的操作能力
注解 - 文档中某些需额外介绍的内容

配置

scriptSrc 引入

<script src="https://webapi.onewo.com/JSSDK/IPCJanus/V1.0"></script>

注意：

在框架内使用如果有以下异常
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.
是因为自定义标签和框架内标签冲突框架无法识别需配置插件
以下以 vue 为例

// Vite - vite.config.js
export default defineConfig({
  plugins: [
    vue({
      template: {
        // 添加以下内容
        compilerOptions: {
          //将所有以ipc-开头的标签作为自定义元素处理
          isCustomElement: (tag) => tag.startsWith("ipc-"),
        },
      },
    }),
  ],
});

// Vue CLI - vue.config.js
module.exports = {
  chainWebpack: (config) => {
    config.module
      .rule("vue")
      .use("vue-loader")
      .tap((options) => ({
        ...options, // 其他配置没有则无需
        // 添加以下内容
        compilerOptions: {
          //将所有以ipc-开头的标签作为自定义元素处理
          isCustomElement: (tag) => tag.startsWith("ipc-"),
        },
      }));
  },
};

使用

COMPONENT 使用
直接使用自定义标签生成 DOM
```
<body>
  <ipc-janus id="janus1" />
</body>
```
然后获取 组件对象
```
const janus1 = document.getElementById("janus1");
```
⚠️ 重要 - <组件对象操作>
在 组件对象 上操作的事件如： props设置复杂类型属性值 和 event
需确保 DOM 已经生成 后再进行请在类似 onMounted 之类的生命周期中使用
PROPS 使用
基础类型的属性值 ( String，Boolean 或 Number )
⚠️ 注意 - <props 使用>
! 直接在标签上设置 props 时 请务必 将小驼峰拆分为 短横线分隔命名
如 callerWindowId => caller-window-id
- HTML 中的特性名是大小写不敏感的所以浏览器会把所有大写字符解释为小写字符
- 所以 callerWindowId 的 prop 名需要使用其等价的 caller-window-id ( 短横线分隔命名 ) 命名
- 直接在 标签上 设置
```
<ipc-janus id="janus1" caller-window-id="callerwindow" // 己方DOM
receiver-window-id="receiverWindow" // 接收方DOM
username="sip:1000@172.22.16.60" // 己方sip authuser="1000" // 己方账户
password="1234567" // 己方密码 />
```
复杂类型的属性值 ( Object )
⚠️ 注意 - <props 使用>
! 在组件对象上设置 props 时 请保持小驼峰不变
- 在 组件对象 上设置
```
const janus1 = document.getElementById("janus1"); // 获取组件对象
janus1.headerAttachData = {
  "X-VR-CallType": "monitor-front",
}; // 修改SDP头信息
```
- 基础类型的属性值 通过 组件对象 设置需要在 DOM 渲染完毕 之后
EVENTS 使用
获取 组件对象 并使用addEventListener监听事件
```
// 以 初始化事件-initEvent 为例
janus1.addEventListener("initEvent", (event) => {
  const JanusIns = event.detail[0];
});
```
- Web Components 传值
  - addEventListener 的回调函数会返回一个event 对象 其中detail属性为事件的返回值
  - event.detail为多个返回参数组成的数组

PROPS

使用方法见 PROPS 使用

⚠️ 注意 - <props 使用> - 再次提醒

1. 直接在标签上设置 props 时 请务必 将小驼峰拆分为 短横线分隔命名
如 callerWindowId => caller-window-id
- HTML 中的特性名是大小写不敏感的所以浏览器会把所有大写字符解释为小写字符
- 所以 callerWindowId 的 prop 名需要使用其等价的 caller-window-id ( 短横线分隔命名 ) 命名

2. 在组件对象上设置 props 时 请保持小驼峰不变

server

释义：Janus 服务器地址
类型：String
默认值：wss://172.22.16.60:80

iceServers

释义：要使用的 STUN / TURN 服务器列表
类型：Object

默认值：

[{ urls: "stun:media.onewo.com:3479" }];

sipserver

释义：SIP 服务器地址
类型：String
默认值：sip:172.22.16.60

username

释义：己方 SIP 号
类型：String

displayname

释义：己方昵称
类型：String
默认值：IPCCaller

authuser

释义：己方账号名
类型：String

password

释义：己方密码
类型：String

removePayloadType

释义：sdp 处理
类型：Boolean Object

默认值：true

当值为 Boolean 时
true 表示使用默认的 sdp 处理机制 / false 表示不对 sdp 进行处理
true 值等同于
  {
    rtcp: true,
    audioExtmap: false,
    videoExtmap: false,
    audioPT: [111, 8],
    videoPT: [127],
  },
当值为 Object 时表示根据 自定对象 处理 sdp
对象参数对应含义如下
参数类型默认值释义
"rtcp" Boolean false 开启 rtp/rtcp 端口复用
"audioExtmap" Boolean true 添加 audio rtp 扩展头
"videoExtmap" Boolean true 添加 video rtp 扩展头
"audioPT" Array [111, 63, 103, 104, 9, 0, 8, 106, 105, 13, 110, 112, 113, 126] [5]音频pt 可能采用的编码格式的 pt 值
"videoPT" Array [96, 97, 102, 122, 127, 121, 125, 107, 108, 109, 124, 120, 39, 40, 98, 99,100, 101, 123, 119, 114, 115, 116] [6]视频pt 可能采用的编码格式的 pt 值

参数	类型	默认值	释义
"rtcp"	Boolean	false	开启 rtp/rtcp 端口复用
"audioExtmap"	Boolean	true	添加 audio rtp 扩展头
"videoExtmap"	Boolean	true	添加 video rtp 扩展头
"audioPT"	Array	[111, 63, 103, 104, 9, 0, 8, 106, 105, 13, 110, 112, 113, 126] `[5]音频pt`	可能采用的编码格式的 `pt` 值
"videoPT"	Array	[96, 97, 102, 122, 127, 121, 125, 107, 108, 109, 124, 120, 39, 40, 98, 99,100, 101, 123, 119, 114, 115, 116] `[6]视频pt`	可能采用的编码格式的 `pt` 值

originalJsepSdp

释义：将被替换的原始 jsep-sdp 配置 ( 配合 changeJsepSdp 使用)
类型：String

changeJsepSdp

释义：新 jsepSdp 配置 - 将替换 originalJsepSdp
类型：String
注意：将以 changeJsepSdp 内容替换 sdp 信息中指定的 originalJsepSdp 内容
- originalJsepSdp 不配置则配置 changeJsepSdp 无意义
- changeJsepSdp / originalJsepSdp 的替换优先级在 removePayloadType 之后
  即：先根据 removePayloadType 规则进行 sdp 处理再对处理后的 sdp 进行替换操作

callerWindowId

释义：己方 DOMID
类型：String
默认值：callerWindow
注意：请保证存在对应 ID 的 DOM

receiverWindowId

释义：被呼方 DOMID
类型：String
默认值：receiverWindow
注意：请保证存在对应 ID 的 DOM

videoFill

释义：是否根据父 DOM 拉伸 video 尺寸
类型：Boolean
默认值：false

useTCP

释义：是否使用 tcp 链接 ( 默认使用 udp )
类型：Boolean
默认值：false

useInsideTip

释义：是否使用 SDK 自带的提示信息与交互弹窗
类型：Boolean
默认值：false

unloadDestroy

释义：是否在页面 unload 时销毁 ( 默认在 beforeunload 时销毁 )
类型：Boolean
默认值：false

registerAttachData

释义：自定义注册时的 body 参数
类型：Object

headerAttachData

释义：自定义呼叫时的 SDP 头参数
类型：Object

registerTimer

释义：刷新注册的时间间隔（单位：秒为0时不刷新） - v1.1版本以上
类型：Number
默认值：0

heartbeatCycle

释义：心跳间隔（单位：毫秒） - v1.1版本以上
类型：Number
默认值：20000

EVENTS

使用方法见 EVENTS 使用

initEvent

释义：初始化事件初始化时触发返回对应的双向绑定实例

⚠️ 重要 - <初始化事件>

此事件必须监听
事件返回 <Janus 实例对象> JanusIns => 所有实例方法都挂载在其上
返回数据请为响应式对象 请保存

返回参数：

数量： 1
获取方式：event.detail[0]
JanusIns：Janus实例 挂载了宫格对应的方法详见 JanusIns

lifeCycleEvent

释义：janus 生命周期事件

返回参数：

数量：1~3
获取方式：参数1 - event.detail[0] 参数2? - event.detail[1] 参数3? - event.detail[2] 参数4? - event.detail[3]
参数类型： 参数1 - String 参数2? - any 参数3? - any 参数4? - any
参数详解：
- 参数 1：事件详细类型
- 参数 2：any
- 参数 3：any

参数 1	参数 2	参数 3	参数 4	释义
"registered"	String - 注册的用户	/	/	注册成功
"hardwareApply"	Boolean - 授权成功状态	/	/	设备音视频授权
"waitingAnswer"	/	/	/	等待应答
"ringing"	/	/	/	呼叫中
"accepted"	/	/	/	接通
"ICEChange"	/	/	/	ICE 发生变化
"WebRTCEvent"	Boolean - WebRTC 开启	/	/	WebRTC 状态变化
"mediaState"	Object - medium	Boolean - 流状态	/	流状态变化
"hungUp"	result	/	/	挂断
"gotSDP"	/	/	/	SDP 获取
"missedCall"	result	/	/	未接来电
"audioCreated"	track	mid	on	音频连接成功
"videoCreated"	track	mid	on	视频链接成功
"renderingComplete"	enum [ "caller" , "receiver" ]	trackId / trackId	/	视频画面渲染完毕
"earlyMedia"	/	/	/	呼叫信息已到达被呼方
"messageSuccess"	/	/	/	接收消息成功提示
"gotInfo"	/	/	/	获取 Info 信息数据
"Notify"	/	/	/	接收 Notify 信息提示
"messageDeliverySuccess"	/	/	/	传送消息成功提示
"incomingcall"	result	/	/	有来电

errorEvent

释义：异常事件组件发生异常时触发

返回参数：

数量：2~3
获取方式：参数1 - event.detail[0] 参数2 - event.detail[1]
参数类型： 参数1 - String 参数2? - any
参数详解：
- 参数 1：异常类型
- 参数 2：具体错误或状态

参数 1	参数 2	释义
"AttachOnmessagError"	error	接收消息失败
"RegistrationFailed"	/	注册失败
"RegisterRepeatedly"	/	重复注册
"NeedRegisterAccount"	/	尚未注册
"WebRTCError"	error	webRTC 连接失败
"InvalidHandle"	/	无效句柄
"AttachError"	/	句柄连接失败
"JanusInitError"	/	Janus 初始化失败
"AnswerError"	/	应答失败
"CreateOfferError"	/	创建 offer 失败
"VideoSwitchError"	Boolean - 状态	摄像头开关状态切换失败
"AudioSwitch"	Boolean - 状态	麦克风开关状态切换失败
"SIPError"	/	SIP 错误提示
"InCalling"	/	当前正在通话中

webSocketEvent

释义：webSocket 事件 webSocket 接收数据时触发

返回参数：

数量：2~3
获取方式：参数1 - event.detail[0] 参数2 - event.detail[1]
参数类型： 参数1 - String 参数2? - any
参数详解：
- 参数 1：janus状态
- 参数 2：接收到的数据

INSTANCEFUNCTION

IPCJanus 实例 上挂载的方法
实例获取见 initEvent

Janus 实例

initEvent事件中获取的JanusIns

方法名	使用方式	参数	释义
janusDoCall	JanusIns.janusDoCall( `sip:string`, `callType:CallType`, `ratio?:Ratio` )	`sip` : 被呼方 sip 号 `callType` : `[1]呼叫方式` `ratio?` : `[2]视频参数`	呼叫
janusDoHangup	JanusIns.janusDoHangup()	/	挂断
janusAudioSwitch	JanusIns.janusAudioSwitch( `switch:boolean` )	`switch` : 是否开启	麦克风开关
janusVideoSwitch	JanusIns.janusVideoSwitch( `switch:boolean` )	`switch` : 是否开启	摄像头开关
janusReplay	JanusIns.janusReplay()	/	重新呼叫
janusReset	JanusIns.janusReset()	/	janus 重置
janusReceiveCalling	JanusIns.janusReceiveCalling()	/	接听当前来电
janusRefuseCalling	JanusIns.janusRefuseCalling	/	拒接当前来电
janusGetStatus	JanusIns.janusGetStatus()	/	获取当前状态返回值： `[3]janusGetStatus返回值`
janusScreenshot	JanusIns.janusScreenshot( `videoStr:VideoStr` )	`videoStr` : `[4]截图参数`	截图返回值：截图 URL<base64>

注解

`[1] 呼叫方式`

必填

当为 String 时为对应的呼叫方式

enum CallType {
  "twoWay", // 双向音视频
  "videoOnly", // 仅视频呼叫
  "audioOnly", // 仅音频呼叫
  "receiverOnly", // 仅接收应答方音视频
  "callerOnly", // 仅传递呼叫方音视频
}

注意
如果 SIP 服务默认全双工模式 receiverOnly / callerOnly 可能会因为只有单边数据流而导致媒体超时
此时需要后端提供相应支持

当为 Object 时可自定义音视频数据接收与出传递

通过 videoSend videoRecv audioSend audioRecv 控制

// e.g. 接收音频 不接收视频 传递视频 不传递音频
{
  videoSend: true,
  videoRecv: false,
  audioSend: false,
  audioRecv: true,
}

`[2] 视频参数`

非必填

String

enum Ratio {
  "vague" = "160x120",
  "lowres" = "320x240",
  "lowres-16:9" = "320x180",
  "stdres" = "640x480",
  "stdres-16:9" = "640x360",
  "hires" = "1280x720",
}

`[3] janusGetStatus返回值`

{
  lifeCycle, // 当前生命周期
  ratioDetail:{
    caller, // 呼叫方video分辨率
    receiver, // 被呼方video分辨率
  },
  callType, // 呼叫模式
  registered, // 注册状态
  callerWindowId, // 呼叫方video DOMID
  receiverWindowId, // 被呼方video DOMID
}

`[4] 截图参数`

enum VideoStr {
  "callerWindow", // 呼方
  "receiverWindow", // 被呼方
}

`[5] 音频pt`

音频 pt 值对应的编码格式

pt 值	编码格式
111	`opus/48000/2` `transport-cc` `minptime=10;useinbandfec=1`
63	`red/48000/2` `111/111`
103	`ISAC/16000`
104	`ISAC/32000`
9	`G722/8000`
0	`PCMU/8000`
8	`PCMA/8000`
106	`CN/32000`
105	`CN/16000`
13	`CN/8000`
110	`telephone-event/48000`
112	`telephone-event/32000`
113	`telephone-event/16000`
126	`telephone-event/8000`

`[6] 视频pt`

视频 pt 值对应的编码格式

pt 值	编码格式
96	`VP8/90000` `goog-remb` `transport-cc` `ccm fir` `nack` `nack pli`
97	`rtx/90000` `apt=96`
102	`H264/90000` `goog-remb` `transport-cc` `ccm fir` `nack` `nack pli` `level-asymmetry-allowed=1;packetization-mode=1;profile-level-id=42001f`
122	`rtx/90000` `apt=102`
127	`H264/90000` `goog-remb` `transport-cc` `ccm fir` `nack` `nack pli` `level-asymmetry-allowed=1;packetization-mode=0;profile-level-id=42001f`
121	`rtx/90000` `apt=127`
125	`H264/90000` `goog-remb` `transport-cc` `ccm fir` `nack` `nack pli` `level-asymmetry-allowed=1;packetization-mode=1;profile-level-id=42e01f`
107	`rtx/90000` `apt=125`
108	`H264/90000` `goog-remb` `transport-cc` `ccm fir` `nack` `nack pli` `level-asymmetry-allowed=1;packetization-mode=0;profile-level-id=42e01f`
109	`rtx/90000` `apt=108`
124	`H264/90000` `goog-remb` `transport-cc` `ccm fir` `nack` `nack pli` `level-asymmetry-allowed=1;packetization-mode=1;profile-level-id=4d001f`
120	`rtx/90000` `apt=124`
39	`H264/90000` `goog-remb` `transport-cc` `ccm fir` `nack` `nack pli` `level-asymmetry-allowed=1;packetization-mode=0;profile-level-id=4d001f`
40	`rtx/90000` `apt=39`
98	`VP9/90000` `goog-remb` transport-cc``ccm fir `nack` `nack pli` `profile-id=0`
99	`rtx/90000` `apt=98`
100	`VP9/90000` `goog-remb` `transport-cc` `ccm fir` `nack` `nack pli` `profile-id=2`
101	`rtx/90000` `apt=100`
123	`H264/90000` `goog-remb` `transport-cc` `ccm fir` `nack` `nack pli` `level-asymmetry-allowed=1;packetization-mode=1;profile-level-id=64001f`
119	`rtx/90000` `apt=123`
114	`red/90000`
115	`rtx/90000` `apt=114`
116	`ulpfec/90000`

IPCJanus - API 文档 #

简要 #

什么是 Web Components #

一级标题释义 #

配置 #

使用 #

COMPONENT 使用 #

PROPS 使用 #

EVENTS 使用 #

PROPS #

server #

iceServers #

sipserver #

username #

displayname #

authuser #

password #

removePayloadType #

originalJsepSdp #

changeJsepSdp #

callerWindowId #

receiverWindowId #

videoFill #

useTCP #

useInsideTip #

unloadDestroy #

registerAttachData #

headerAttachData #

registerTimer #

heartbeatCycle #

EVENTS #

initEvent #

lifeCycleEvent #

errorEvent #

webSocketEvent #

INSTANCEFUNCTION #

Janus 实例 #

注解 #

[1] 呼叫方式 #

[2] 视频参数 #

[3] janusGetStatus返回值 #

[4] 截图参数 #

[5] 音频pt #

[6] 视频pt #

IPCJanus - API 文档

简要

什么是 Web Components

一级标题释义

配置

使用

COMPONENT 使用

PROPS 使用

EVENTS 使用

PROPS

server

iceServers

sipserver

username

displayname

authuser

password

removePayloadType

originalJsepSdp

changeJsepSdp

callerWindowId

receiverWindowId

videoFill

useTCP

useInsideTip

unloadDestroy

registerAttachData

headerAttachData

registerTimer

heartbeatCycle

EVENTS

initEvent

lifeCycleEvent

errorEvent

webSocketEvent

INSTANCEFUNCTION

Janus 实例

注解

`[1] 呼叫方式`

`[2] 视频参数`

`[3] janusGetStatus返回值`

`[4] 截图参数`

`[5] 音频pt`

`[6] 视频pt`