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代码

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

html 复制代码

<!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>

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