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

本文主要是介绍【IPV6从入门到起飞】4-RTMP推流，ffmpeg拉流，纯HTML网页HLS实时直播，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

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

1 背景
2 搭建rtmp服务器
- 2.1 nginx方案搭建
- - 2.1.1 windows 配置
  - 2.1.2 linux 配置
- 2.2 Docker方案搭建
- - 2.2.1 docker 下载
  - 2.2.2 宝塔软件商店下载
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;     # IPv6location /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>