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


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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/870231.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Jmeter三种方式获取数组中多个数据并将其当做下个接口参数入参【附带JSON提取器和CSV格式化】

目录 一、传统方式-JOSN提取器获取接口返回值 1、接口调用获取返回值 2、添加JSON提取器 3、调试程序查看结果 4、添加循环控制器 5、设置count计数器 6、添加请求 7、执行请求 二、CSV参数化 1、将结果写入后置处理程序 2、设置循环处理器 3、添加CSV文件 4、设置…

前端面试项目细节重难点分享(十三)

面试题提问&#xff1a;分享你最近做的这个项目&#xff0c;并讲讲该项目的重难点&#xff1f; 答&#xff1a;最近这个项目是一个二次迭代开发项目&#xff0c;迭代周期一年&#xff0c;在做这些任务需求时&#xff0c;确实有很多值得分享的印象深刻的点&#xff0c;我讲讲下面…

【中项】系统集成项目管理工程师-第5章 软件工程-5.3软件设计

前言&#xff1a;系统集成项目管理工程师专业&#xff0c;现分享一些教材知识点。觉得文章还不错的喜欢点赞收藏的同时帮忙点点关注。 软考同样是国家人社部和工信部组织的国家级考试&#xff0c;全称为“全国计算机与软件专业技术资格&#xff08;水平&#xff09;考试”&…

设计模式|观察者模式

观察者模式是一种行为设计模式&#xff0c;它定义了一种一对多的依赖关系&#xff0c;让多个观察者对象同时监听某一个主题对象。当主题对象发生变化时&#xff0c;它的所有观察者都会收到通知并更新。观察者模式常用于实现事件处理系统、发布-订阅模式等。在项目中&#xff0c…

【spring boot】初学者项目快速练手

项目视频&#xff1a;一小时带你从0到1实现一个SpringBoot项目开发_哔哩哔哩_bilibili 注解视频&#xff1a;10、Java高级技术&#xff1a;注解&#xff1a;认识注解_哔哩哔哩_bilibili 一、基础知识 1.注解Annotation &#xff08;1&#xff09;定义 注解是Java代码里的特…

Wordpress安装到win10(2024年7月)

目录 1.wordpress介绍 2下载应用 2.1.wordpress 2.2XAMPP 2.3 PHPmyadmin 3.配置应用 3.1XAMPP进程 3.2 文件配置 3.3 phpmyadmin配置 4.配置网页 4.1 数据库创建 4.2 安装wordpress 5.进入面板 6.总结 1.wordpress介绍 WordPress是一个开源内容管理系统&#xff0…

Node.js知识点总结

Node.js知识点总结 Node.js其本质和浏览器一样是一个JavaScript运行环境。浏览器的运行环境为V8引擎浏览器内置API&#xff08;BOM、DOM、Canvas);而node.js的运行环境是V8引擎node提供的API(fs、path、http)。它使JavaScript可以编写后端。 基本知识 fs文件系统模块 它提供一…

C语言·分支和循环语句(超详细系列·全面总结)

前言&#xff1a;Hello大家好&#x1f618;&#xff0c;我是心跳sy&#xff0c;为了更好地形成一个学习c语言的体系&#xff0c;最近将会更新关于c语言语法基础的知识&#xff0c;今天更新一下分支循环语句的知识点&#xff0c;我们一起来看看吧~ 目录 一、什么是语句&#xf…

剪画小程序:短视频搬运必备!去除视频字幕!

在这个人人都自媒体的盛世&#xff0c;新人想要创作爆款视频那里难上加难&#xff0c;所以搬运视频就成了很多新手自媒体人的不二选择。 搬运优质内容成为许多人的需求。但原视频中的字幕往往成为困扰大家的难题。 你是否曾为了搬运一个精彩的短视频&#xff0c;却因为无法去除…

gitee设置ssh公钥密码避免频繁密码验证

gitee中可以创建私有项目&#xff0c;但是在clone或者push都需要输入密码&#xff0c; 比较繁琐。 公钥则可以解决该问题&#xff0c;将私钥放在本地&#xff0c;公钥放在gitee上&#xff0c;当对项目进行操作时带有的私钥会在gitee和公钥进行验证&#xff0c;避免了手动输入密…

CTF-Web习题:[GXYCTF2019]Ping Ping Ping

题目链接&#xff1a;[GXYCTF2019]Ping Ping Ping 解题思路 访问靶机&#xff0c;得到如下页面&#xff0c;类似于URL参数 尝试用HackBar构造url传输过去看看 发现返回了ping命令的执行结果&#xff0c;可以猜测php脚本命令是ping -c 4 $ip&#xff0c;暂时不知道执行的函数…

【Android】数据存储方案——文件存储、SharedPreferences、SQLite数据库用法总结

文章目录 文件存储存储到文件读取文件 SharedPreferences存储存储获取SharedPreferences对象Context 类的 getSharedPreferences() 方法Activity 类的 getPreferences() 方法PreferenceManager 类中的 getDefaultSharedPreferences() 方法 示例 读取记住密码的功能 SQLite数据库…

通信协议_C#实现CAN通信

CAN协议 CAN&#xff08;Controller Area Network&#xff09;即控制器局域网络。特点&#xff1a; 多主网络&#xff1a;网络上的任何节点都可以主动发送数据&#xff0c;不需要一个固定的主节点。双绞线&#xff1a;使用双绞线作为通信介质&#xff0c;支持较远的通信距离。…

挑战房市预测领头羊:KNN vs. 决策树 vs. 线性回归

挑战房市预测领头羊&#xff08;KNN&#xff0c;决策树&#xff0c;线性回归&#xff09; 1. 介绍1.1 K最近邻&#xff08;KNN&#xff09;&#xff1a;与邻居的友谊1.1.1 KNN的基础1.1.2 KNN的运作机制1.1.3 KNN的优缺点 1.2 决策树&#xff1a;解码房价的逻辑树1.2.1 决策树的…

kafka服务介绍

kafka 安装使用管理 Kafka Apache Kafka 是一个开源的分布式事件流平台&#xff0c;主要用于实时数据传输和流处理。它最初由 LinkedIn 开发&#xff0c;并在 2011 年成为 Apache 基金会的顶级项目。Kafka 设计的目标是处理大规模的数据流&#xff0c;同时提供高吞吐量、低延迟…

shopee虾皮 java后端 一面面经 整体感觉不难

面试总结&#xff1a;总体不难&#xff0c;算法题脑抽了只过了一半&#xff0c;面试官点出了问题说时间到了&#xff0c;反问一点点&#xff0c;感觉五五开&#xff0c;许愿一个二面 1.Java中的锁机制&#xff0c;什么是可重入锁 Java中的机制主要包括 synchronized关键字 Loc…

SpringBoot整合elasticsearch-java

一、依赖 系统使用的是ElasticSearch8.2.0 <dependency><groupId>co.elastic.clients</groupId><artifactId>elasticsearch-java</artifactId><version>8.1.0</version> </dependency> 二、配置 1、yml文件配置 elastics…

SpringBoot入门:如何新建SpringBoot项目(保姆级教程)

在本文中&#xff0c;我们将演示如何新建一个基本的 Spring Boot 项目。写这篇文章的时候我还是很惊讶的&#xff0c;因为我发现有些java的初学者&#xff0c;甚至工作10年的老员工居然并不会新建一个SpringBoot项目&#xff0c;所以特别出了一篇文章来教大家新建一个SpringBoo…

关于pycharm上push项目到gitee失败原因

版权声明&#xff1a;本文为博主原创文章&#xff0c;如需转载请贴上原博文链接&#xff1a;https://blog.csdn.net/u011628215/article/details/140577821?spm1001.2014.3001.5502 前言&#xff1a;最近新建项目push上gitee都没有问题&#xff0c;但是当在gitee网站进行了一个…

基于 HTML+ECharts 实现监控平台数据可视化大屏(含源码)

构建监控平台数据可视化大屏&#xff1a;基于 HTML 和 ECharts 的实现 监控平台的数据可视化对于实时掌握系统状态、快速响应问题至关重要。通过直观的数据展示&#xff0c;运维团队可以迅速发现异常&#xff0c;优化资源配置。本文将详细介绍如何利用 HTML 和 ECharts 实现一个…