前端播放rtsp协议视频流（Ubuntu搭建ZLMediaKit音视频服务推拉流）

项目背景

项目中需要在web端播放rtsp协议视频流，浏览器不支持，使用ZLMediaKit进行推拉流并生成hls流在web端播放

介绍

ZLMediaKit是一个基于C++开发的开源流媒体服务器。它提供了高性能的音视频处理能力，支持常见的流媒体协议，如RTSP、RTMP、HLS和HTTP-FLV，并且具有低延迟和高并发处理能力。

准备

1. 一台Ubuntu服务器，我这边采用的是windows自带的linux系统（越干净越好，可能会有端口冲突）
2. 此教程只使用ZLMediaKit的httpApi来进行操作

gitHub地址

https://github.com/ZLMediaKit/ZLMediaKit

开始搭建

如果遇到无法下载依赖的就更新apt-get 或者更换源试试

#国内用户推荐从同步镜像网站gitee下载 
git clone --depth 1 https://gitee.com/xia-chu/ZLMediaKit
cd ZLMediaKit
#千万不要忘记执行这句命令
git submodule update --init
# 安装gcc
sudo apt-get install build-essential
# 安装cmake
sudo apt-get install cmake
# 安装依赖库
sudo apt-get install libssl-dev -y
# 构建和编译项目
cd ZLMediaKit
mkdir build
cd build
cmake ..
# 如果编译release版本 使用 cmake .. -DCMAKE_BUILD_TYPE=Release
make -j4

运行服务

cd ZLMediaKit/release/linux/Debug
#通过-h可以了解启动参数
sudo ./MediaServer

运行结果

一切顺利的话会看到下图

这样就是运行成功了 可以开始调用httpApi接口了

api接口地址

https://github.com/ZLMediaKit/ZLMediaKit/wiki/MediaServer%E6%94%AF%E6%8C%81%E7%9A%84HTTP-API

开始调用

博主这边调用/index/api/addStreamProxy 进行拉流

  const data = {
    secret: '4IFDt5umoQ3BvWxO7YcEKMv1L0b9owNf',
    vhost: '127.0.0.1',
    app: 'guoyVideo',
    stream: 'test',
    timeout_sec: '15',
    rtp_type: 1,
    url: 'rtsp://*****/live',
  }
  return request.Ajax('get','http://172.31.239.52/index/api/addStreamProxy', data)

服务相应如下

说明调用成功并返回了播放地址

播放视频

通过url规则

https://github.com/ZLMediaKit/ZLMediaKit/wiki/%E6%92%AD%E6%94%BEurl%E8%A7%84%E5%88%99

在前端可播放视频
http://服务地址/guoyVideo/test/hls.m3u8
当然还有很多地址可以查看url拼接规则

当然这个服务流主要是后端和运维的活，后面生产环境肯定要后端写代码来使用推拉流，在视频不需要的时候还需要进行关闭拉流