janus-connector

基于 janus-manger 的Vue组件，用于快速构建janus通讯应用。

Usage

安装

npm install janus-manager janus-connector --save

使用

import JanusConnector from "janus-connector";

export default {
  components: {
    JanusConnector,
  },
  data() {
    return {
      loading: true,
      calling: false,
      serverConfig: {
        server: [
          "https://janus-server/janus",
          "wss://janus-server",
        ],
        // 轮询超时时间（一般应大于服务端超时时间），默认60s，可不设置
        // longPollTimeout: 60000,
      },
      sipConfig: {
        proxy: "sip:xxx.xxx.xxx.xxx:port", // SIP服务器
        username: "sip:[e-mail]:port", // SIP身份
        authuser: "authuser", // SIP号
        secret: "password",
        displayname: "", // 显示名称
      },

      phoneNumber: "",
    };
  },
  computed: {
    callNumber() {
      return `sip:${this.phoneNumber}@xxx.xxx.xxx.xxx:port`;
    },
  },
  methods: {
    loadHandler({ handler }) {
      this.loading = false;
      this.handler = handler;
      // 加载完成，之后可进行电话拨打
    },
    callHandler() {
      if(this.calling){
        this.hangupHandler();
      }else {
        this.handler.makeCall(this.callNumber).then(() => {
          this.calling = true;
        });
      }
    },
    hangupHandler() {
      this.calling = false;
      this.handler.hangup();
    },
    // 监听处理事件
    messageHandler({ event, msg }) {
      // console.log("-----", event, "-------", msg);
      if (event === "accepted") {
        // accepted
      }
    },
    incomingcallHandler({ jsep, username }) {
      // username incoming call
      console.log('incoming call: ', username);

      // answer
      this.handler.answerCall(jsep, { audio: true });

      // decline
      // this.handler.declineCall();
    },
    // 处理发送键盘拨号方法
    sendDtmf(tones) {
      this.handler.sendDtmf({ tones });
    },
    // 处理错误事件
    errorHandler({ type, error }) {
      if (type === "timeout") {
        // 超时错误
        console.error(error.message);
        // alert(type + ": " + error.message);
      } else if (type === "hangup") {
        // 异常挂断
        this.calling = true;
      }
    },
  },
};

<template>
  <div>
    <JanusConnector
      :serverConfig="serverConfig"
      :sipConfig="sipConfig"
      @load="loadHandler"
      @hangup="hangupHandler"
      @message="messageHandler"
      @incomingcall="incomingcallHandler"
      @error="errorHandler"
    >
      <span v-if="loading">loading...</span>
      <input v-model="phoneNumber" />
      <button @click="callHandler">
        {{ calling ? "挂断" : "拨打" }}
      </button>
    </JanusConnector>
  </div>
</template>

说明

• 轮询设置 通过longPollTimeout字段设置轮询超时时间，必须设置大于服务端的超时时间，默认为6000ms

• JanusConnector组件属性与事件

  • 方法：
    • serverConfig：配置server、longPollTimeout等配置
    • sipConfig：配置proxy、username、authuser、secret、displayname等信息
  • 事件：
    • load：与服务端建立连接，并注册到sip server成功后触发，回调中可获取到 {handler, manager}对象，handler可用于拨打或挂断电话操作
    • hangup：监听服务端挂断事件，挂断逻辑已在组件中处理，调用者只需处理自定义业务逻辑即可
    • incomingcall：监听呼入事件，回调中可获取 { jsep, username }对象，之后通过handler可用于接听或挂断电话操作
    • message: 监听所有类型事件，包括registering、registered、registration_failed、calling、incomingcall、progress、accepted、hangup 等事件
    • error：处理错误事件，包含错误类型timeout、connect、registration_failed