IPC-JSSDK

Appearance

On this page

IPCJanus - DEMO

1. 引入 js 

<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-"),
        },
      }));
  },
};

2.使用标签并配置 props 

<body>
  <div id="callerwindow"></div>
  <div id="receiverWindow"></div>
    
  <ipc-janus 
    id="janus1"
    server="janus服务器地址"
    sipserver="sip服务器地址"
    username="己方/呼方sip号"
    authuser="己方/呼方账号名"
    password="己方/呼方密码"
    caller-window-id="callerwindow" // 呼方DOMID
    receiver-window-id="receiverWindow" // 被呼方DOMID
    use-t-c-p // 使用tcp
  />
</body>

3.获取组件对象 

const janus1 = document.getElementById("janus1");

4.监听初始化事件 

let JanusIns; // Janus实例 该对象上挂载了呼叫相关方法
janus1.addEventListener("initEvent", (emit) => {
  // 监听初始化事件 获取Janus实例
  JanusIns = emit.detail[0];
});

5.呼叫 

JanusIns.janusDoCall("被呼方sip号", "twoWay"); // 音视频呼叫
JanusIns.janusDoCall("被呼方sip号", "twoWay", "hires"); // 指定分辨率视频呼叫
JanusIns.janusDoCall("被呼方sip号", "audioOnly"); // 仅音频呼叫

6.Janus 实例其他操作 

JanusIns.janusVideoSwitch(false); // 关闭呼方摄像头
JanusIns.janusAudioSwitch(false); // 呼方静音
JanusIns.janusDoHangup(); // 挂断
......