【IPV6从入门到起飞】4-RTMP推流，ffmpeg拉流，纯HTML网页HLS实时直播

最新推荐文章于 2024-09-10 12:43:01 发布

第四维度4

最新推荐文章于 2024-09-10 12:43:01 发布

阅读量909

点赞数 36

分类专栏： IPV6专栏文章标签： ffmpeg html 前端 ipv6 HLS

本文链接：https://blog.csdn.net/qq_46079439/article/details/142001889

版权

IPV6专栏专栏收录该内容

6 篇文章 0 订阅

订阅专栏

【IPV6从入门到起飞】4-RTMP推流，ffmpeg拉流，纯HTML网页HLS实时直播

1 背景
2 搭建rtmp服务器
3 rtmp推流
- 3.1 EV录屏推流
- 3.2 OBS Studio推流
4 ffmpeg拉流转格式
5 配置nginx访问资源
6 页面访问直播
7 效果展示
- 7.1 电脑端浏览器
- 7.2 手机浏览器/微信
8 后记

1 背景

近期产生了一个想法，想通过手机网页播放电脑的画面，不使用第三方工具以及公网IPV4服务器。
因为我的电脑IPV6能入站，能当服务器，手机在插卡的情况下能获取IPV6，能访问我电脑的服务，该前提条件能实现我想要的功能。

实现思路：
1、电脑（Linux）搭建rtmp服务器
2、电脑（windows）通过EV录屏或者OBS Studio向该服务器推流直播
3、电脑（Linux）通过ffmpeg拉流，并转换为m3u8格式的文件存到共享目录下
4、HTML静态页面通过HLS播放共享目录下的m3u8格式视频
5、加入IPV6，即可实现手机端访问网页，实时看到电脑端的直播

注：以上是个人探讨出来的思路，有更好的想法可以一起学习

2 搭建rtmp服务器

2.1 nginx方案搭建

windows/Linux 是借助nginx搭建的rtmp
nginx 下载地址：https://nginx.org/en/download.html

2.1.1 windows 配置

编辑 conf\nginx-win.conf
在大节点下添加：

#RTMP服务
rtmp {
    server {
        listen 1935;#监听端口,若被占用,可以更改
        listen [::]:1935;
        chunk_size 4000;#上传flv文件块儿的大小
        application live { #创建名为"live"的应用
             live on;#开启live的应用
             allow publish 127.0.0.1;#
	         allow publish all;          # 允许所有 IP 推流
             allow play all;
        }
    }
}

在nginx目录下cmd执行：

nginx -c .\conf\nginx-win.conf

在这里插入图片描述

2.1.2 linux 配置

linux和windows的nginx配置是一样的

2.2 Docker方案搭建

2.2.1 docker 下载

在这里插入图片描述

2.2.2 宝塔软件商店下载

在这里插入图片描述

3 rtmp推流

在上面rtmp搭建完服务器之后记得开放端口哦，默认是1935端口

3.1 EV录屏推流

在这里插入图片描述
具体的推送窗口或区域自己调整哦

3.2 OBS Studio推流

在这里插入图片描述
具体的推送窗口或区域自己调整哦

4 ffmpeg拉流转格式

研究了一段时间，静态html没有办法直接拉取rtmp格式的直播，在这里转为m3u8格式，并寸到tomcat对应的目录下，记得先创建

记得先下载安装
windows 下ffmpeg资源【下载】
Linux 下ffmpeg

sudo apt install ffmpeg

ffmpeg转码：

sudo ffmpeg -i rtmp://127.0.0.1:1935/live/1122 -codec: copy -f hls /www/server/tomcat/webapps/nginx/stream.m3u8

其中
-i 指定rtmp服务器地址（不一定是本机，得看具体情况，我这里是服务器自己转），以及推流上来的路径和密码
rtmp://127.0.0.1:1935/live/1122

-f hls指定m3u8文件的存储目录，可按需调整
/www/server/tomcat/webapps/nginx/stream.m3u8

在这里插入图片描述

5 配置nginx访问资源

在http节点下添加一下内容，特别注意CORS，否则会出现跨域访问问题
然后开放8081端口

    server {
       listen 8081;
       listen [::]:8081;     # IPv6
       location /nginx/ {
        # CORS 头配置
        # add_header Cache-Control no-cache;
        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Methods' 'GET, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'Range';
        add_header 'Access-Control-Expose-Headers' 'Content-Range';

        types {
            application/vnd.apple.mpegurl m3u8;
            video/mp2t ts;
        }
         alias /www/server/tomcat/webapps/nginx/;  # 确保这个路径是正确的
    }

6 页面访问直播

以下代码可参考，注意修改服务器的IP地址

 <!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HLS 流播放示例</title>
    <link href="https://vjs.zencdn.net/7.11.4/video-js.css" rel="stylesheet" />
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #f0f0f0;
        }
        #my-video {
            width: 640px;
            height: 360px;
        }
    </style>
</head>
<body>

    <video id="my-video" class="video-js vjs-default-skin" controls preload="auto"
           data-setup='{"techOrder": ["html5"], "sources": [{"src": "http://[服务的IP]:8081/nginx/stream.m3u8", "type": "application/x-mpegURL"}]}'>
        <p class="vjs-no-js">
            为了观看此视频，请启用 JavaScript，并考虑使用支持 HTML5 的浏览器。
        </p>
    </video>

    <script src="https://vjs.zencdn.net/7.11.4/video.min.js"></script>
</body>
</html>