sip.js + freeswitch 软电话(webRTC)demo

本文转载自查看原文 2021-03-26 15:21 1177 javascript

<!DOCTYPE html>
<html>
<head>
    <title>SIP + WebRTC + freeSWITCH</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="./assets/js/jquery-1.10.2.min.js"></script>
    <script src="./assets/js/sip-0.7.7.js" type="text/javascript"></script>
    <script src="./assets/js/discard.js?v=1"></script>
</head>


<body>
    <div id="app">
      <audio id="remoteAudio"></audio>
      <audio id="localAudio"></audio>
      <button class="login" data-action="logout">登陆</button>
      <button class="logout" data-action="logout">登出</button>
      <button class="register" data-action="register">就绪</button>
      <button class="unregister" data-action="unregister" style="margin-right: 10px;">取消就绪</button>
      <button class="call" data-action="call">拨打</button>
      <button class="hang-up" data-action="hangup">挂断</button>
      <button class="answer" data-action="answer">接听</button>
    </div>
</body>
</html>

'use strict';
var softPhoneUA = null;
var currentSession = null;

const options = {
  wsAddress: 'xxxxx',   // 即时通讯地址
  wsPort: 'xxxx',  // 即时通讯端口
  number: 'xxxx',  // 分机号
  password: 'xxx',  // 密码
  displayName: 'xx',  // 显示名
  convrsationOptions: {
    media: {
      constraints: {
        audio: true,
        video: false
      },
      render: {
        remote: document.getElementById('remoteAudio'),
        // local: document.getElementById('localAudio')
      }
    }
  }
}

const softPhone = {
  /**
   * 登陆软电话
   */
  start() {
    var config = {
      uri: `${options.number}@${options.wsAddress}`,
      wsServers: `wss://${options.wsAddress}:${options.wsPort}`,
      authorizationUser: options.number,  // 授权号
      displayName: options.displayName,   // 显示名称
      password: options.password,     // 登陆密码
      allowLegacyNotifications:true,
      autostart: true,   // 自动连接
      register: false,   // 自动就绪
      rel100: SIP.C.supported.SUPPORTED, // 该选项开启接收早期媒体(采坑记录)
    };

    softPhoneUA = new SIP.UA(config);

    softPhone.UAEvent(softPhoneUA);

    // 有电话呼入
    softPhoneUA.on('invite', function (session) {
      console.log('invite')
      currentSession = session;

      softPhone.sessionEvent(session);
    })
  },

  /** 就绪 */
  register() {
    softPhoneUA.register({  // 注册
      register:true
    });
  },

  /** 取消就绪 */
  unregister() {
    softPhoneUA.unregister();
  },

  /**
   * 绑定ua事件
   * @param {*} ua 
   */
  UAEvent(ua) {
    // 开始尝试连接
    ua.on('connecting', function (args) {
      console.log('%c connecting', 'color: #f00');
    });
    // 连接完毕
    ua.on('connected', function () {
      console.log('%c connected', 'color: #f00');
    });
    // 主动取消注册或注册后定期重新注册失败
    ua.on('unregistered', function (response, cause) {
      console.log('%c unregistered', 'color: #f00');
    });
    // 注册成功
    ua.on('registered', function () {
      console.log('%c registered', 'color: #f00');
    })
    // websocket 连接失败
    ua.on('disconnected', function () {
      console.log('%c disconnected', 'color: #f00');
    })
  },

  /**
   * 绑定session事件
   * @param {} session 
   */
  sessionEvent(session) {
    session.on("rejected" , function (response, cause){
      console.log('%c invite-rejected', 'color: #f00');
    });
    session.on("bye" , function (response, cause){
      console.log('%c invite-bye', 'color: #f00');
    });
    session.on("accepted" , function (response, cause){
      console.log('%c invite-accepted', 'color: #f00');
    });
    session.on("cancel" , function (response, cause){
      console.log('%c invite-cancel', 'color: #f00');
    });
  },

  /**
   * 拨打
   */
  call() {
    console.log('callOut')
    const telNumber = 'xxxx';

    currentSession = softPhoneUA.invite(`${telNumber}@${options.wsAddress}`, options.convrsationOptions)

    currentSession.on("rejected" , function (response, cause) {
      console.log('%c rejected', 'color: #f00');
    });
    currentSession.on("bye" , function (response, cause) {
      // 本次通话结束
      console.log('%c bye', 'color: #f00');
    });
    currentSession.on("accepted" , function (response, cause) {
      // 对方接听
      console.log('%c accepted', 'color: #f00');
    });
    currentSession.on("cancel" , function (response, cause) {
      // 取消通话
      console.log('%c cancel', 'color: #f00');
    });
  },

  /**
   * 挂断
   */
  hangUp() {
    if (currentSession instanceof Object) {
      if (currentSession.hasAnswer) {
        currentSession.bye();
      } else if (currentSession.isCanceled == false) {
        currentSession.cancel();
      } else {
        currentSession.reject();
      }
    }
  },
  
  /**
   * 接听
   */
  answer() {
    currentSession.accept(options.convrsationOptions)
  },

  /**
   * 登出
   */
  logout() {
    if (softPhoneUA instanceof Object) {
      softPhoneUA.unregister(); // 注销
      softPhoneUA.stop({
        register:true
      });
    }
  },
}

function addEvent() {
  $('.login').on('click', softPhone.start);
  $('.logout').on('click', softPhone.logout);
  $('.register').on('click', softPhone.register);
  $('.unregister').on('click', softPhone.unregister);
  $('.call').on('click', softPhone.call);
  $('.hang-up').on('click', softPhone.hangUp);
  $('.answer').on('click', softPhone.answer);
}

$(function() {  
  addEvent();
})