JSSIP踩坑记

前言

事情经过是这样的,公司最近准备搞一个移动端的项目,里面需要集成打电话功能(就是可以从页面直接打电话类型微信语音的感觉),最先考虑到是移动端项目(h5)就采用的uniapp,但电话播出去后却出现了h5无声音,但被叫端有声音。其中使用到audio 的srcObject属性,经自己实验得知uniapp的audio没有srcObject属性,故无法使用uniapp来实现该功能。我将源码复制到vue项目中,就不存在单通的问题。故决定将uniapp项目调整为vue2 + vantui的h5项目。贴上关键代码,方便日后有需求可以查看
JSSIP版本:“jssip”: “^3.3.11”
该代码不涉及接听电话

<template>
  <div>
    <button @click="startCall">拨打</button>
    <audio id="audioElement"></audio>
  </div>
</template>
<script>
import JsSIP from "jssip";
export default {
  data() {
    return {
      ua: null,
    };
  },
  created() {
    this.handleUA();
  },
  methods: {
    startCall() {
      this.ua.call("phonenum", your_options);
    },
    //初始化配置
    initConfig() {
      // Create our JsSIP instance and run it:
      const socket = new JsSIP.WebSocketInterface('your_fs_wss_url’);
      const configuration = {
        sockets: [socket],
        uri: `sip:${your mobile}@${your_fs_register_url}`,
        authorization_user: 'your mobile',
        password: this.userInfo.mobile,
        // WebSocket重新连接调度之间的最大间隔()。默认值是30。
        connection_recovery_max_interval: 300,
        // WebSocket重新连接尝试之间的最小间隔()。默认值是2。
        connection_recovery_min_interval: 10,
        // String 注册到fs显示的url
        contact_uri: `sip:${your mobile}@${your_fs_register_url};transport=wss`,
        // 外显
        display_name: this.org.id,
        // 来电后,120秒内未接听,将会拒绝.默认60s
        no_answer_timeout: 120,
        // 会话计时器,默认true
        session_timers: false,
        // 用于刷新会话计时器的SIP方法。有效值是UPDATE或INVITE。默认值是UPDATE。
        session_timers_refresh_method: "invite",
        // 是否应该在启动时自动注册.默认true
        register: true,
        // 注册过期时间() 默认值是600。
        register_expires: 7200,
        //  User-Agent header中的值,默认是JsSIP
        user_agent: "your_user_agent",
        registrar_server: `sip:${your_fs_register_url}`,
      };
      this.ua = new JsSIP.UA(configuration);
    },
    handleUA() {
      this.initConfig();
      this.ua.start();

      if (!this.ua.isRegistered()) {
        //未注册的情况下
        this.ua.register();
      }

      if (this.ua.isConnected()) {
        console.log("软电话已连接");
      }

      this.ua.on("registered", (data) => {
        console.log("软电话认证成功");
      });

      this.ua.on("registrationFailed", (data) => {
        console.log("软电话认证失败");
      });

      // 新来会话
      this.ua.on("newRTCSession", function (data) {
        let originator = data.originator;
        let session = data.session;
        //连接中
        session.on("connecting", (data) => {
          console.log("建立连接中");
        });
        // 连接已接受
        session.on("accepted", () => {
          console.log("连接已接受");
        });

        // 接通,在这一步可以处理音频播放
        // 接通并不代表对方已经接受,接通代表 滴 滴 滴
        session.on("confirmed", () => {
          console.log("接通中");
          const audioElement = document.getElementById("audioElement");
          audioElement.autoplay = true;
          const stream = new MediaStream();
          const receivers = session.connection?.getReceivers();
          if (receivers)
            receivers.forEach((receiver) => stream.addTrack(receiver.track));
          console.log("audioElement.srcObject2", "srcObject" in audioElement);
          audioElement.srcObject = stream;
          // 最后都要播放
          audioElement.play();
        });

        // 结束
        session.on("ended", () => {
          console.log("通话结束");
        });

        // 失败
        session.on("failed", () => {
          console.log("失败");
        });

        // 手动让打孔结束,最多4次,有时候等待时间会很长
        let iceCandidateCount = 0;
        session.on("icecandidate", (data) => {
          if (iceCandidateCount++ > 4) data.ready();
        });
      });
    },
  },
};
</script>

  • 3
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 8
    评论
jssip demo是一个基于JavaScript的开源软件库,用于实现SIP(Session Initiation Protocol,会话发起协议)通信协议的Web应用程序的开发。SIP是一种通信协议,用于建立、修改和解除多媒体会话,比如VoIP电话、视频通话等。 jssip demo提供了一个示例,用于演示如何使用jssip库来实现浏览器之间的实时通信。这个demo可以在网页上直接运行,不需要额外的软件安装。 在jssip demo中,我们可以看到一个网页界面,其中包含了拨号键盘、呼叫按钮等元素。我们可以输入电话号码,然后点击呼叫按钮,就可以建立起与对方的通话连接。 jssip demo的实现过程包括以下几个步骤: 1. 引入jssip库:在网页上引入jssip库的JavaScript文件。 2. 创建SIP用户:配置SIP服务器的信息,并创建一个SIP用户。 3. 建立连接:与SIP服务器建立WebSocket连接,以便进行通信。 4. 监听事件:监听SIP服务器发送的各种事件,比如呼叫建立、通话结束等。 5. 呼叫:在网页上输入对方的电话号码,点击呼叫按钮,发送呼叫请求给SIP服务器,并等待对方接听。 6. 通话:如果对方接听了呼叫请求,就可以进行实时通话。可以使用网页上的声音输入、输出设备,与对方进行语音通话。 通过jssip demo,我们可以了解到如何使用jssip库来开发基于Web的实时通信应用程序。这个demo提供了一个简单、易于理解的示例,可以作为我们开发自己应用程序的参考。无论是开发VoIP电话应用还是实时视频通话应用,jssip demo都是一个很好的起点。
评论 8
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值