FreeSWITCH 1.10.10 简单图形化界面11 - 简单封装一下JSSIP

2023-09-17 23:58:36

FreeSWITCH 1.10.10 简单图形化界面11 - 简单封装一下JSSIP


FreeSWITCH界面安装参考:https://blog.csdn.net/jia198810/article/details/132479324

0、 界面预览

http://myfs.f3322.net:8020/
用户名:admin,密码:admin

FreeSWITCH界面安装参考:https://blog.csdn.net/jia198810/article/details/132479324


1、前言

使用JSSIP拨打电话,通过研究官网,实现起来确实不太难、自己感觉难得是各种网络环境及各种修改配合VOIP服务器配置。
这几天简单封装了一下jssip,基本200行代码实现网页拨号,有小伙伴用到的,做个参考。

2、demo地址

直接右击看源码,js文件下载即可。

网址在这里

3、简单演示

简单演示一下。

20230917_234207

*上传了一个视频,模糊成这个样子了。,服了

4、demo代码

备份一下代码,代码这玩意过几天自己都忘的差不多了。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>MyJsSIP Demo</title>
</head>

<body>
    <video id="localvideo" controls="controls" style="
                border: 1px solid blue;
                width: 100%;
                height: 200px;
                text-align: right;
              " muted></video>
    <video id="remotevideo" controls="controls" style="
                border: 1px solid blue;
                width: 100%;
                height: 200px;
                text-align: right;
              " muted></video>
    <button onclick="openLocalMedia()">打开本地摄像头</button>
    <button onclick="closeLocalMedia()">关闭本地摄像头</button>
    <input type="text" id="username" value="2001" placeholder="用户名" autocomplete="on">
    <input type="text" id="password" value="2001" placeholder="密码" autocomplete="on">
    <input type="text" id="server" value="pbx.x3322.net" placeholder="服务器地址" autocomplete="on">
    <button onclick="start()">首先初始化</button>
    <input type="text" id="calleeNumber" value="401" placeholder="被叫号码" autocomplete="on">
    <button onclick="makeCall('audio')">发起音频呼叫</button>
    <button onclick="makeCall('video')">发起视频呼叫</button>
    <button onclick="answer()">接听</button>
    <button onclick="sendDtmf(0)">发送dtmf(0)</button>
    <button onclick="hangup()">挂断</button>
    <button onclick="unRegister()">注销</button>
    <button onclick="stop()">结束一切</button>
    <div id="log"></div>


    <script src="static/js/myjssip-3.10.0.js"></script>
    <script>
        // 实例化 MyJsSIP 对象,并指定配置选项和事件回调
        myJsSIP = new MyJsSIP({
            //账号
            username: '',
            //密码
            password: '',
            //服务器地址
            server: '',
            //服务器端口
            port: '7443',
            //ice设置
            //enableIce:  false,
            //服务器地址
            //iceServer: 'stun:test.sipserver.cn:3478?transport=udp',
            //turn服务器用户名
            //iceUsername:'turnuser',
            //turn服务器密码
            //icePassword:'123456',
            //本地视频控件id
            localVideoElementId: "localvideo",
            //远端视频控件id,只能拨打音频通话
            remoteVideoElementId: "remotevideo",

            //来电铃声
            ringToneSound: "static/sounds/incomingcall.mp3",
            //日志
            log: true,
            //jssip日志
            jssiplog: false,
            //回调
            // onRegistered: function (e) {
            //     console.log('注册成功:', e);
            // },
            // onUnregistered: function (e) {
            //     console.log('取消注册:', e);
            // },
            // onRegistrationFailed: function (e) {
            //     console.log("注册失败:", e)
            // },
            // onDisconnected: function (response, cause) {
            //     console.log("连接断开:", response, cause)
            // },
            // onIncomingCall: function (e) {
            //     console.log("有来电:", e)
            // },
            // onCallProgress: function (e) {
            //     console.log("呼叫进行中:", e)
            // },
            // onCallConnecting: function (e) {
            //     console.log("呼叫连接中:", e)
            // },
            // onCallConfirmed: function (e) {
            //     console.log("呼叫接听:", e)
            // },
            // onCallFailed: function (e) {
            //     console.log("呼叫失败:", e)
            // },
            // onCallEnded: function (e) {
            //     console.log("呼叫结束:", e)
            // },
        });

        //开启本地摄像头
        function openLocalMedia() {
            myJsSIP.openLocalMedia()
        }
        //关闭本地摄像头
        function closeLocalMedia() {
            myJsSIP.closeLocalMedia()
        }

        //初始化,连接服务器,注册账号
        function start() {
            //账号
            myJsSIP.username = document.getElementById('username').value
            //密码
            myJsSIP.password = document.getElementById('password').value
            //服务器地址
            myJsSIP.server = document.getElementById('server').value
            //启动
            myJsSIP.start();
        }

        //注销号码,结束ua,断开连接
        function stop() {
            myJsSIP.stop();
        }

        //应答呼叫
        function answer() {
            myJsSIP.answer();
        }

        //挂断呼叫
        function hangup() {
            myJsSIP.hangup();

        }
        //发起呼叫.
        function makeCall(mediaType) {
            let calleeInput = document.getElementById("calleeNumber")
            calleeNumber = calleeInput.value;
            //calleeNumber 被叫号码; meidaType 呼叫类型=audio / video
            myJsSIP.makeCall(calleeNumber, mediaType);
        }
        //注销号码
        function unRegister() {
            myJsSIP.unRegister()
        }

        //发送dtmf
        function sendDtmf(value) {
            myJsSIP.sendDtmf(value);
        }

    </script>
</body>

</html>
更多推荐

OJ练习第173题——单词接龙 II

单词接龙II力扣链接:126.单词接龙II题目描述按字典wordList完成从单词beginWord到单词endWord转化,一个表示此过程的转换序列是形式上像beginWord->s1->s2->…->sk这样的单词序列,并满足:每对相邻的单词之间仅有单个字母不同。转换过程中的每个单词si(1<=i<=k)必须是字典

算法通关村 | 透彻理解动态规划

1.斐波那契数列1,1,2,3,5,8,13,.....f(n)=f(n-1)+f(n-2)代码实现publicstaticintcount_2=0;publicintfibonacci(intn){if(n<=2){count_2++;returnn;}intf1=1;intf2=2;intsum=0;for(int

Redis主从复制(Redis6.2.5版本)

1、Redis单击服务问题?Redis的单机服务在实际的应用中会有很多的问题,所以在实际的使用中如果使用了redis服务,往往都不是单机服务,都会配置主从复制或者哨兵机制及redis的集群服务等。Redis的单机服务,当主机发生机器故障的时候,我们就需要做数据迁移,同时也会大概率出现数据大量都是的情况,并且短时间内,系

ChatGPT:解释Java中 ‘HttpResponse‘ 使用 ‘try-with-resources‘ 的警告和处理 ‘Throwable‘ 打印警告

ChatGPT:解释Java中‘HttpResponse’使用‘try-with-resources’的警告和处理‘Throwable’打印警告我在IDEA中对一个函数的警告点击了ignore,怎么撤回这个呢ChatGPT:要撤回在IDEA中对一个函数的警告的忽略,您可以按照以下步骤进行操作:打开您的项目,并在编辑器中

SkyWalking快速上手(三)——架构剖析2

文章目录介绍UI组件什么是UI组件?UI组件的配置配置UI组件示例使用SkyWalkingUIStorage组件什么是Storage组件?Storage组件的配置配置Storage组件示例结语介绍接上篇文章:SkyWalking快速上手(二)——架构剖析1SkyWalking是一个开源的分布式系统追踪、监控和诊断工具,

Python爬虫:通过js逆向获取某视频平台上的视频的m3u8链接

Python爬虫:通过js逆向获取某视频平台上的视频的m3u8链接1.前言2.js逆向分析3.参考代码和运行结果1.前言现在我们在网页端看的视频,其前端实现原理就小编目前知道的而言,总的有两点:其一,直接就是一个mp4(或其他类似的)视频链接,如果我们能得到这个视频链接,直接用这个链接就能下载到这个视频;其二,和第一点

毕业设计|基于stm32单片机的app视频遥控抽水灭火小车设计

基于stm32单片机的app视频遥控抽水灭火水泵小车设计1、项目简介1.1系统构成1.2系统功能2、部分电路设计2.1L298N电机驱动电路设计2.2继电器控制电路设计3、部分代码展示3.1小车控制代码3.1水泵控制代码4演示视频及代码资料获取1、项目简介视频简介中包含资料https://www.bilibili.co

自定义协议、序列化与反序列化

在编写TCP和UDP程序的时候,我们很自然的就使用了读取的函数对数据进行获取,对于UDP来说提供的是无连接的以数据报的形式进行传输,对于TCP来说是面向数据流的,在之前的程序中我们只是进行了读取的操作,但是并没有对读取的内容进行分析。那如果我们要传输一些结构化的数据的话,那么就需要引入"协议"这个概念。网络版计算器在本

前后端分离毕设项目之产业园区智慧公寓管理系统设计与实现(内含源码+文档+教程)

博主介绍:✌全网粉丝10W+,前互联网大厂软件研发、集结硕博英豪成立工作室。专注于计算机相关专业毕业设计项目实战6年之久,选择我们就是选择放心、选择安心毕业✌🍅由于篇幅限制,想要获取完整文章或者源码,或者代做,拉到文章底部即可看到个人VX。🍅2023年-2024年最新计算机毕业设计本科选题大全汇总感兴趣的可以先收藏

如何选择适合你的隧道爬虫ip?

隧道爬虫IP在保护你的网络隐私和提供安全的数据传输方面起着关键作用。然而,在众多的商家中选择适合自己的并非易事。本文将分享一些关键的考虑因素,帮助你选择适合你的隧道爬虫IP商家。无论你是个人用户还是企业客户,相信这些指南都能帮助你做出明智的选择,确保你的网络连接安全可靠。一、明确你的需求1、安全性需求:确定你对数据隐私

webpack 基础配置

常见配置文件打包的出口和入口webpack如何开启一台服务webpack如何打包图片,静态资源等。webpack配置loader配置plugin配置sourceMap配置babel语法降级等接下来,我们先从webpack的基本配置开始吧!在准备配置之前,搭建一个webpack工程,你可以在自己的工程下npminit或者

热文推荐