拉【rtsp】推【flv】

原创已于 2024-08-27 15:01:56 修改 · 736 阅读

13 ·

CC 4.0 BY-SA版权

文章标签：

#c语言 #html #bash

于 2024-08-27 14:47:36 首次发布

【0】创建一个公共的目录
目录在哪都可以用于存放下载的包

mkdir -p /usr/local/package  
chmod -R +x /usr/local/package

【1】安装Yasm
开源的汇编器，用于汇编x86和x86-64体系结构的代码，辅助ffmpeg编译

wget http://www.tortall.net/projects/yasm/releases/yasm-1.3.0.tar.gz
tar -zxvf yasm-1.3.0.tar.gz
cd yasm-1.3.0
./configure
make && make install

【2】安装ffmpeg

开源的跨平台多媒体处理工具集，用于处理音频、视频和多媒体流

wget http://www.ffmpeg.org/releases/ffmpeg-3.1.tar.gz
tar -zxvf ffmpeg-3.1.tar.gz 
cd ffmpeg-3.1
./configure --prefix=/usr/local/ffmpeg
make && make install

添加环境变量

vi /etc/profile
export PATH=$PATH:/usr/local/ffmpeg/bin
source /ect/profile

【3】安装nginx 及 nginx-http-flv-module Nginx用于代理视频流

Nginx-http-flv-module服务器的第三方模块，用于支持HTTP-FLV（Flash Video）协议。它扩展了Nginx的功能，使其能够提供基于HTTP的流媒体服务，特别是用于实时的音视频直播


wget https://nginx.org/download/nginx-1.18.0.tar.gz
tar -zxvf nginx-1.18.0.tar.gz

下载 nginx-http-flv-module

git clone https://gitcode.com/mirrors/winshining/nginx-http-flv-module.git

将 nginx 和 Nginx-http-flv-module 同时编译

cd nginx-1.18.0/
./configure --add-module=/usr/local/package/nginx-http-flv-module --with-http_ssl_module
make && make install

修改 nginx 配置文件

vim /usr/local/nginx/conf/nginx.conf

修改内容如下监听 1935端口

rtmp {
    server {
        listen 1935;
        application live {
                    live on;
                    record off;
                }
        }
}

代理live

location /live {
        flv_live on;
        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Credentials' 'true';                                                                
        add_header 'Access-Control-Allow-Methods' 'GET';
    }

示例 nginx.conf 全文如下

worker_processes  1;
events {
    worker_connections  1024;
}

rtmp {
    server {
        listen 1935;
        application live {
            live on;
            record off;
                }
        }
}
http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    keepalive_timeout  65;
    server {
        listen       80;
        server_name  localhost;
        location / {
            root   html;
            index  index.html index.htm;
        }

        location /live {
                flv_live on;
                add_header 'Access-Control-Allow-Origin' '*';
                add_header 'Access-Control-Allow-Credentials' 'true';
                add_header 'Access-Control-Allow-Methods' 'GET';
        }
        
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }
}

启动nginx

/usr/local/nginx/sbin/nginx -c /usr/local/nginx/conf/nginx.conf

【4】拉流推送播放

linux 端：

ffmpeg -rtsp_transport tcp -i "rtsp://admin:hk123456@172.16.3.21:2554/Streaming/Channels/101" -c copy -f flv "rtmp://127.0.0.1:1935/live/1024"

web端：

http://172.16.4.9/live?port=1935&app=live&stream=1024

将命令行中的 rtsp://admin:hk123456@172.16.3.21:2554/Streaming/Channels/101 替换成自己的流地址
rtmp://127.0.0.1:1935/live/1024 1024 就是随便填写的用于播放地址对应
http://172.16.4.9/live?port=1935&app=live&stream=1024 172.16.4.9 替换成你自己的服务器地址 1024 和上面的1024对应，如果是多个视频流就动态变换

【5】前端播放代码

<!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.0">
    <title>video</title>
</head>
<script src="https://cdn.bootcss.com/flv.js/1.5.0/flv.js"></script>

<body>
    <div>
        <video id="flvVideo" width="600" height="500" controls />
    </div>

    <script>
        if (flvjs.isSupported()) {
            var videoElement = document.getElementById('flvVideo');
            var flvPlayer = flvjs.createPlayer({
                type: 'flv',
                url: 'http://172.16.4.9/live?port=1935&app=live&stream=1024',
                isLive: false,
                hasAudio: false,
                hasVideo: true,
                enableStashBuffer: false,
                changeOrigin: true
            });
            flvPlayer.attachMediaElement(videoElement);
            flvPlayer.load();
            flvPlayer.play();
        }
    </script>
</body>

</html>