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 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格式可能有不同,效果也有差异,延时等,可进行相关测试。祝君好运