Fork me on GitHub

h5播放rtsp格式视频

字数统计: 2.5k字   |   阅读时长≈ 11分

Linux下载和安装yasm、FFmpeg、流媒体服务SRS4.0

FFmpeg下载

方案

前端：

  • jsmpeg.js (连接wbesocket，绘制视频图像)

服务端（node）：

  • express（静态服务，接口处理）
  • body-parser（处理接口接收数据）
  • node-rtsp-stream-jsmpeg （下发FFmpeg指令，创建websocke服务端）
  • child_process（启动shell脚本指令）

其他：

  • FFmpeg(视频流转码)
  • pm2(node进程守护)
  • 云台控制程序（通过视频厂家提供的sdk二次开发，通过ajax调用）

参考链接

zlmediakit搭建和配合ffmpeg使用

zlmediakit 是一个基于C++11的高性能运营级流媒体服务框架，可以推送各种视频，音频流。

ffmpeg 推流视频，zlmediakit 流媒体服务器经行转发，转发后的地址有多种视频格式

官网文档

  • zlmediakit linux 环境搭建：
    这篇文章写得已经非常详细了，就不再拾人牙慧了
  • ffmpeg安装：
    虽然上面的搭建文档说不用安装ffmpeg，但是如果使用命令的话，肯定还是要安装的(不安装指的是在项目中调用api)，这种方式只能安装低版本，高版本参考上面
    1).sudo apt-get update
    2).sudo apt-get install ffmpeg
  • 测试(；推流路径格式是：rtsp://ip/…（后面可随意命名）)：
    例：把test文件推到某个rtsp地址上去
    ffmpeg -re -i test.mp4 -vcodec h264 -acodec aac -f rtsp -rtsp_transport tcp rtsp://ip/live/test
    注意事项：
    1）要推的视频路径写绝对路径；
    2）推流地址格式为: rtsp://ip/…（后面可随意定义）
    3）zlmediakit的默认路径是554，如果改了端口号，ip后要加上。
    4）如果使用docker安装zlmediakit，那么要注意映射的端口不是554的话，端口号也得写上
  • 附带推流测试地址(附带右边列表很多相关资料)：

参考地址

ZIMediaKit源地址

ffmpeg 推送到 zlmediakit 服务上，需要先启动 zlmediakit

进入安装目录指定文件夹，找到 MediaServer 执行文件

1
2
cd /home/xxx/ZLMediaKit/release/linux/Debug/
./MediaServer

ffmpeg 推流操作

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// rtsp推流(文件推流)
ffmpeg -re -i test.mp4 -rtsp_transport tcp -c copy -f rtsp rtsp://127.0.0.1:554/live/test
// rtsp推流(文件循环推流)
ffmpeg -re -stream_loop -1 -i test.mp4 -rtsp_transport tcp -c copy -f rtsp rtsp://127.0.0.1:554/live/test
// rtmp推流(文件推流)
ffmpeg -re -i test.mp4 -vcodec h264_nvenc -acodec aac -f flv rtmp://127.0.0.1:1935/live/test
// rtmp推流(文件循环推流)
ffmpeg -re -stream_loop -1 -i test.mp4 -vcodec h264 -acodec aac -f flv rtmp://127.0.0.1:1935/live/test

// 推流笔记本摄像头
ffmpeg -i /dev/video0 -vcodec libx264 -acodec copy -preset:v ultrafast -tune:v zerolatency -f flv rtmp://192.168.94.128:1935/live/test

//推流h265
ffmpeg -re -i test.mp4 -rtsp_transport tcp -c copy -c:v libx265  -f rtsp rtsp://127.0.0.1/live/test


ZIMediaKit 转发地址播放规则

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
# ZIMediaKit支持多种流媒体协议的转换，协议转换后的播放地址
// rtsp播放
rtsp://127.0.0.1:554/live/test

//rtmp播放
rtmp://127.0.0.1:1935/live/test
	
// hls播放
http://127.0.0.1:80/live/test/hls.m3u8

// http-flv播放
http://127.0.0.1:80/live/test.live.flv

// http-ts播放
http://127.0.0.1:80/live/test.live.ts
//websocket 直播
ws://127.0.0.1：80/live/test.live.flv

ffplay ffmpeg快速检验摄像头

ZLMediaKit 推/拉流

ffmpeg 基础

Fmpeg 是领先的多媒体框架，能够解码、编码、转码、混合、解密、流媒体、过滤和播放人类和机器创造的几乎所有东西。它支持最晦涩的古老格式，直到最尖端的格式。

简单来说可以将浏览器不支持的流转换为支持的流供页面展示.

除了视频文件，还能处理 摄像头，声卡，网络直播，电脑桌面进行数据采集

FFmpeg 视频处理入门教程

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
# -i 表示输入	a.mov
# -c 表示为输出文件指定编码格式
# copy 表示从输入文件a.mov中直接拷贝音频和视频数据
# 将输入的 a.mov 转化为 mp4 格式 输出 a.mp4
ffmpeg -i a.mov -c copy a.mp4


# -c:v  code video 指定视频编码
# -c:a  code audio 指定音频编码
# 将 video.avi 输出为 视频编码246，音频编码 acc 格式 的mp4文件
ffmpeg -i video.avi -c:v h246 -c:a aac video.mp4

# 查看支持的格式
ffmpeg -c

# 常用参数选项
ffmpeg -h

# 显示一些高级参数
ffmpeg -h -long

# 显示更多
ffmpeg -h full

# 输出参数

-r 24 # 指定输出视频帧率 24
-s 1920X1080 # 指定输出视频分辨率
-vb 5000k 将输出文件视频码率限制在 5000k左右
-ab 320k 将输出音频码率设置限制在320k左右


# 将视频音频拆分，输出生成多个文件
ffmpeg -i hello.avi -c:v h264 video.map -c:a aac audio.acc

# 将4k视频同时生成 不同分辨率视频输出
ffmpeg -i video4k.avi -c:v h264 -s 1280x720 720p.map -c:v h264 -s 1920x1080 1080p.mp4

# 主要参数
-i 设定输入流 
-f 设定输出格式 
-ss 开始时间 
# 视频参数：
-b 设定视频流量(码率)，默认为200Kbit/s 
-r 设定帧速率，默认为25 
-s 设定画面的宽与高 
-aspect 设定画面的比例 
-vn 不处理视频 
-vcodec 设定视频编解码器，未设定时则使用与输入流相同的编解码器
# 音频参数：
-ar 设定采样率 
-ac 设定声音的Channel数 
-acodec 设定声音编解码器，未设定时则使用与输入流相同的编解码器 
-an 不处理音频

基础使用参考链接

简单示例

ffplay

继承了 ffmpeg 的编解码能力，支持格式最全的播放器

1
2
# 播放文件，左右方向键控制快进快退，q退出
ffplay video.mp4

在安装 ffmpeg 时 本来时默认会 安装好 ffplay,ffprobe。 但是如果缺少依赖会导致安装不成功

ffplay 依赖 SDL2

1
2
3
4
// 设置 ffmpeg   --enable-libx264，此设置依赖x264。不然报错 libx264 not found
./configure --enable-shared --enable-libx264 --enable-gpl --prefix=/usr/local/ffmpeg

make && make install

5. 安装x264

1
2
3
4
5
6
7
8
9
10
11
12
13
14
http://www.videolan.org/developers/x264.html，下载
或者

git clone https://code.videolan.org/videolan/x264.git

或者

git clone http://git.videolan.org/git/x264.git

cd x264

./configure --enable-shared

make & make install

libx264 not found

  1. 将使用到的库路径添加至环境变量中

export PATH=/usr/local/x264/bin:$PATH

export PATH=/usr/local/x264/include:$PATH

export PATH=/usr/local/x264/lib:$PATH

手动编译安装ffmpeg会出现的问题

在跑视频流程序或命令时出现这个问题。
跟这个报错：ffmpeg: error while loading shared libraries: libx264.so.164: cannot open shared object file: No such file or directory

ffmpeg 时使用到了 libx264，而在实际的编译式安装过程中没有指定编译 libx264 参数，从而产生报错。

缺失依赖

ffmpeg 命令报错 xxxx => not found

1
2
# ffmpeg bin名录下
ldd ffmpeg

查找目录

1
find /usr -name 'libavdevice.so.58'

将 目录export 出来

1
export LD_LIBRARY_PATH=/usr/local/lib/

AKStream

​ AKStream是一套全功能的软NVR接口平台，软NVR指的是软件定义的NVR（Network Video Recoder）。

​ AKStream集成了ZLMediaKit作为其流媒体服务器，AKStream支持对ZLMediaKit的集群管理（通过AKStreamKeeper-流媒体治理组件），可以将分布在不同服务器的多个ZLMediaKit集群起来，统一管理，统一调度。

AKStream生态圈开源Web管理平台

Nginx 流媒体服务器

安装 Nginx,nginx-http-flv-module插件

配置文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
...
 
http {
    include       mime.types;
    default_type  application/octet-stream;
 
    keepalive_timeout  65;
 
    server {
        listen       80; #http-flv的拉流端口
 
        ...
        
        # http-flv的相关配置
        location /test {
            flv_live on; #打开HTTP播放FLV直播流功能
            chunked_transfer_encoding on; #支持'Transfer-Encoding: chunked'方式回复
 
            add_header 'Access-Control-Allow-Origin' '*'; #添加额外的HTTP头
            add_header 'Access-Control-Allow-Credentials' 'true'; #添加额外的HTTP头
        }
 
        ...
    }
}
 
rtmp_auto_push on;
rtmp_auto_push_reconnect 1s;
rtmp_socket_dir /tmp;
 
rtmp {
    out_queue           4096;
    out_cork            8;
    max_streams         128;
    timeout             15s;
    drop_idle_publisher 15s;
 
    log_interval 5s; #log模块在access.log中记录日志的间隔时间，对调试非常有用
    log_size     1m; #log模块用来记录日志的缓冲区大小
 
    server {
        listen 1935;
        chunk_size: 4096;
        # server_name www.test.*; #用于虚拟主机名后缀通配
 		
        #ffmpeg推流的application 
        application live {
            live on; # 启用实时流应用程序监听
            allow publish 127.0.0.1;
            allow play all;
            record off; # 不要录制流
            meta copy; # 复制传出元数据的传入元数据
            gop_cache on; #打开GOP缓存，减少首屏等待时间 on时第一帧加载快，off时第一帧加载慢 
            # @StringKai 在博客https://blog.csdn.net/string_kai/article/details/100598268提到on时延高，off时延低，不过我在测试时并没有感觉出时延的差别
        }
 
       ...
    }
 
   ...
}

使用 ffmpeg 推流

1
ffmpeg -f v4l2 -framerate 10 -i /dev/video0 -g 10 -f flv rtmp://127.0.0.1/live/wei

播放：

RTMP协议拉流:

1
rtmp:192.168.94.128/live/wei

HTTL FLV 协议拉流

1
http://192.168.94.128/test?app=live&stream=wei

image-20230409153038364

rtsp 拉流方案2

rtsp2web + jsmpeg 播放rtsp 流视频

  1. rtsp2web 是 node服务 依赖 ffmpeg

    需要在服务器运行 rtsp2web ,有🕳

    • 这个服务在 conteos 运行不了，需要找作者付费。在Ubuntu Linux就可以

    • 版本建议 v3.1.1，新版本Ubuntu也不行

    • 视频有水印，可以去掉https://raw.githubusercontent.com/wyf195075595/images/main/blog/image-20231102103414179.png

      1
      2
      3
      4
      5
      // setInterval((function(){
      //    r.checkFree(),
      //    cs&&(ls.includes(decodeURIComponent(ut.exports.decode("eCUzRHctdHctNSUzQXklM0Q4MCUzQWZvbnRjb2xvciUzRHdoaXRlJTNBZm9udHNpemUlM0QzMiUzQXRleHQlM0RjbGVhciUyMHdpdGglMjBxcSUyMDQyMTM1NDUzMiUzQWJveCUzRDElM0Fib3hjb2xvciUzRGJsYWNr")))
      //    ||(r.destroyAllChannel(),global.process.stderr.write("***wm代码异常***，请联系作者！")))})
      //    ,1e3*fs);

      image-20231102103414179

    • 代码

      nodejs

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      // index.js

      let RTSP2web = require('rtsp2web');

      let port=28999;

      let videoSzie = '1920*1080'

      new RTSP2web({
      	port
      })

      前端

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      <!DOCTYPE html>
      <html lang="en">
      <head>
      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no,viewport-fit=cover">
      <script src="https://jsmpeg.com/jsmpeg.min.js" charset="utf-8"></script>
      <title>播放rtsp</title>
      </head>
      <body>
      <canvas id="canvas" style="width: 600px; height: 600px;"></canvas>
      </body>
      <script> 
          // var rtsp = 'rtsp://ip:554/live/test' 
          window.onload = () => { 
          new JSMpeg.Player("ws://ip:28999/rtsp?url="+btoa(rtsp), { 
              canvas: document.getElementById("canvas"),
              autoplay: true
          })} 
       </script>
      </html>

nginx + nginx-rtmp-module

详情见 音视频 笔记

扫一扫，分享到微信

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia-plus根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

侠客行
作者：李白
赵客缦胡缨，吴钩霜雪明。
银鞍照白马，飒沓如流星。
十步杀一人，千里不留行。
事了拂衣去，深藏身与名。
闲过信陵饮，脱剑膝前横。
将炙啖朱亥，持觞劝侯嬴。
三杯吐然诺，五岳倒为轻。
眼花耳热后，意气素霓生。
救赵挥金槌，邯郸先震惊。
千秋二壮士，烜赫大梁城。
纵死侠骨香，不惭世上英。
谁能书阁下，白首太玄经。