FreeSWITCH 1.10.10 简单图形化界面26-在网页上播放SIP设备视频

​

1、前言

在web上播放SIP设备的视频，通常使用jssip或者sipjs，使用webrtc技术及wss协议呼叫SIP设备，然后再使用video控件播放视频流。通过库，可实现双向的音视频通信。

如果有不需要双向通信的情况下（监听SIP设备、站岗等场景），只是想查看下SIP设备的视频流，最近在学习sip过程中，貌似也可以通过流媒体服务器实现在web上播放SIP设备的视频流。但是只是单向的，无法像使用js库那样进行对讲通话。
使用流媒体服务器，可以使用http、rtsp、rtmp播放视频流，前端没有使用js库那么复杂（js库必须使用wss协议，服务器需要部署wss证书等环境）

2、大概流程

部署流媒体服务器–>拉取流媒体–>流不存在–>调用web接口–>web接口把FreeSWITCH的终端视频流推送到流媒体服务器–>播放。
参考https://docs.zlmediakit.com/zh/guide/media_server/on-demand_streaming.html
如图：

开始瞎折腾

3、测试环境

参考安装步骤：https://blog.csdn.net/jia198810/article/details/137820796，安装一个FreeSWITCH作为测试环境。

参考使用手册：https://docs.qq.com/pdf/DVEZjSGhXVHhaUEFW?，设置一下，并添加账号，注册一个SIP终端。

4、安装流媒体服务器

安装流媒体服务器，本次使用的流媒体服务器是 ZLMediaKit，安装可参考https://docs.zlmediakit.com/zh/tutorial/

安装完毕后，运行，如下图：

端口554为rtsp端口
端口1935为rtmp端口
端口8080为http端口
端口8443为https端口

5、设置流媒体服务器接口

找到流媒体服务器的配置文件，修改web接口，ZLMediaKit的配置文件为config.ini，如下图：

​
找到hook，找到on_stream_not_found，设置为web接口的地址，如下图：

6、简单写个web接口

简单编写一个web接口，用于处理流媒体服务器的回调时，把SIP终端的视频流推送到流媒体服务器，如下：

from flask import Flask, request, jsonify
from subprocess import getoutput

app = Flask(__name__)

@app.route('/on_stream_not_found', methods=['POST'])
def call():
    print(request.form)
    data = request.get_json() or request.form.to_dict()
    print(data)
    app_ = data.get('app', '')
    hook_index = data.get('hook_index', '')
    id_ = data.get('id', '')
    ip_ = data.get('ip', '')
    mediaServerId = data.get('mediaServerId', '')
    params = data.get('params', '')
    port = data.get('port', '')
    schema = data.get('schema', '')
    stream = data.get('stream', '')
    vhost = data.get('vhost', '')
    # 呼叫FreeSWITCH终端，并将流发布到流媒体服务器
    cmd = f"fs_cli -pfs8021 -x'bgapi originate {{absolute_codec_string='^^:PCMA:PMCU:H264'}}user/{stream} &record(rtmp://127.0.0.1/{app_}/{stream})'"
    print(cmd)
    output = getoutput(cmd)
    print(output)


    # 构建响应数据
    response_data = {
        "code": 200,
        "msg": "Success",
        "data": {
            "max_time_length": 20,
            "upload_record": 1,
            "app": app_,
            "hook_index": hook_index,
            "id": id_,
            "ip": ip_,
            "mediaServerId": mediaServerId,
            "params": params,
            "port": port,
            "schema": schema,
            "stream": stream,
            "vhost": vhost
        }
    }

    # 返回 JSON 格式的响应
    return jsonify(response_data)

@app.route('/on_stream_not_found', methods=['POST'])
def hangup():
    pass

if __name__ == '__main__':
    app.run(debug=True,host='0.0.0.0')

# 把终端的视频流推送到流媒体服务器
cmd = f"fs_cli -pfs8021 -x'bgapi originate {{absolute_codec_string='^^:PCMA:PMCU:H264'}}user/{stream} &record(rtmp://127.0.0.1/{app_}/{stream})'"

7、测试一下

通过ZLMediaKit，可以直接通过http、rtsp、rtmp播放媒体流。播放url规则，可参考https://docs.zlmediakit.com/zh/guide/media_server/play_url_rules.html#_3%E3%80%81%E6%B5%81%E5%AA%92%E4%BD%93%E6%BA%90%E5%AF%B9%E5%BA%94%E7%9A%84%E6%92%AD%E6%94%BE-url
如下：

# HLS(mpegts)
http://somedomain.com/live/0/hls.m3u8
https://somedomain.com/live/0/hls.m3u8
http://127.0.0.1/live/0/hls.m3u8?vhost=somedomain.com
https://127.0.0.1/live/0/hls.m3u8?vhost=somedomain.com

# HLS(fmp4)
http://somedomain.com/live/0/hls.fmp4.m3u8
https://somedomain.com/live/0/hls.fmp4.m3u8
http://127.0.0.1/live/0/hls.fmp4.m3u8?vhost=somedomain.com
https://127.0.0.1/live/0/hls.fmp4.m3u8?vhost=somedomain.com

# HTTP-TS/WS-TS(后缀为.live.ts,目的是为了解决与 hls 的冲突)
http://somedomain.com/live/0.live.ts
https://somedomain.com/live/0.live.ts
http://127.0.0.1/live/0.live.ts?vhost=somedomain.com
https://127.0.0.1/live/0.live.ts?vhost=somedomain.com
ws://somedomain.com/live/0.live.ts
wss://somedomain.com/live/0.live.ts
ws://127.0.0.1/live/0.live.ts?vhost=somedomain.com
wss://127.0.0.1/live/0.live.ts?vhost=somedomain.com

# HTTP-fMP4/WS-fMP4(后缀为.live.mp4,目的是为了解决与 mp4 点播的冲突)
http://somedomain.com/live/0.live.mp4
https://somedomain.com/live/0.live.mp4
http://127.0.0.1/live/0.live.mp4?vhost=somedomain.com
https://127.0.0.1/live/0.live.mp4?vhost=somedomain.com
ws://somedomain.com/live/0.live.mp4
wss://somedomain.com/live/0.live.mp4
ws://127.0.0.1/live/0.live.mp4?vhost=somedomain.com
wss://127.0.0.1/live/0.live.mp4?vhost=somedomain.com

1、web播放

上面编写的web接口，当访问http://ip/live/[分机号].live.mp4时（其他url地址，如上），会呼叫指定的分机号，如下图：呼叫的是1100分机号。

在线播放器地址1：http://cloud.liveqing.com:18000/#/liveplayer
在线播放器地址2：http://player.ruiboyun.cn/

找个在线播放器（本地播放测试，请使用相关播放器本地部署），或者输入流媒体服务器的url地址，点击播放按钮后，流媒体服务器开始拉取媒体流，拉取失败后会调用web接口，web接口在呼叫FreeSWITCH进行推流，推流成功后，网页开始播放。如下图：

PS: 8000是媒体服务器的公网http端口，因为是公网，所以进行了端口映射，公网为8000，内网为媒体服务器的http端口8080。

在线播放器1

在线播放器2

本地video控件

编写一个简单本地video控件测试，代码如下：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>播放SIP终端视频</title>
</head>
<body>
    <h1>视频直播</h1>
    <video width="640" height="480" controls autoplay>
        <source src="http://210.51.10.231:8000/live/1100.live.mp4" type="video/mp4">
        您的浏览器不支持 video 标签。
    </video>
</body>
</html>

效果如下图：

linphone测试。

2、vlc播放

也可以通过rtsp、rtmp进行播放，播放url，如下：

http://210.51.10.231:8000/live/1100.live.flv
rtmp://210.51.10.231/live/1100
rtsp://210.51.10.231/live/1100
http://210.51.10.231:8000/live/1100/hls.m3u8
http://210.51.10.231:8000/live/1100.live.mp4

vlc播放rtmp

如下图：

vlc播放rtsp

如下图：

8、总结

以上使用了ZLMediaKit流媒体服务器的按需拉取功能，此流媒体服务器功能强大，可以直接播放GB28181，可参考相关文档。

各类播放器支持url格式可能有不同，效果也有差异，延时等，可进行相关测试。祝君好运