FreeSWITCH 1.10.10 简单图形化界面26-在网页上播放SIP设备视频
- 1、前言
- 2、大概流程
- 3、测试环境
- 4、安装流媒体服务器
- 5、设置流媒体服务器接口
- 6、简单写个web接口
- 7、测试一下
- 1、web播放
- 在线播放器1
- 在线播放器2
- 本地video控件
- 2、vlc播放
- vlc播放rtmp
- vlc播放rtsp
- 8、总结
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 getoutputapp = 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():passif __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格式可能有不同，效果也有差异，延时等，可进行相关测试。祝君好运
