本文主要是介绍【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>7 效果展示
7.1 电脑端浏览器
7.2 手机浏览器/微信
右上角显示实时速度仅为158kB/s，还是不错的，直播视频非常流畅
8 后记
推流拉流转码，配合IPV6可以实现远距离观看直播，可以在视频监控等方面应用，太强了
这篇关于【IPV6从入门到起飞】4-RTMP推流，ffmpeg拉流，纯HTML网页HLS实时直播的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
