Scenes
Build Nginx RTMP server on Windows and use FFmpeg to push local video:
Use vue-video-player and videojs-flash plug-ins in Vue to play rtmp video file stream:
Use the vue-video-player and videojs-flash plug-ins in Vue to play rtmp video file streams
When using Vue to play RTMP streams, you need to use flash. This method is for the installation of the flash plug-in
Not great with subsequent browser support etc. You can convert the rtmp video stream to HTTP-FLV,
Then the front end realizes playback through bilibili's flv.js.
nginx-http-flv-module
Chinese description
nginx-http-flv-module/README.CN.md at master · winshining/nginx-http-flv-module · GitHub
A streaming media server based on nginx-rtmp-module.
nginx-http-flv-module has all the functions of nginx-rtmp-module, and the comparison is as follows:
supported players
VLC (RTMP & HTTP-FLV) / OBS (RTMP & HTTP-FLV) / JW Player (RTMP) / flv.js (HTTP-FLV).
Precautions
1. Adobe will stop official support for the flash player after December 31, 2020,
Major browsers will subsequently remove the flash player, and plug-ins that use the flash player will no longer be available.
2. flv.js can only run on browsers that support Media Source Extensions.
3. nginx-http-flv-module contains all the functions of nginx-rtmp-module,
So don't compile nginx-http-flv-module and nginx-rtmp-module together.
4. If you use flv.js to play the stream, please ensure that the published stream is encoded correctly,
Because flv.js only supports H.264 encoded video and AAC/MP3 encoded audio.
5. The add_header 'Access-Control-Allow-Origin' '*' and add_header 'Access-Control-Allow-Credentials' 'true' are very important,
It mainly solves the cross-domain problem of the front-end streaming through HTTP.
Other precautions and detailed details can be found in the official github.
Note:
Blog:
Overbearing rogue temperament blog_CSDN Blog-C#, Architecture Road, Blogger in SpringBoot
accomplish
1. The official examples and recommendations are all on the Linux server.
But if you need to debug on a local Windows computer or the server must be a Windows server,
You need to compile the Windows version, or directly search and download the compiled Windows version on the Internet.
for example:
https://download.csdn.net/download/codebooks/12793877
But whether it is available needs to be downloaded and verified by yourself.
Take downloading the above as an example, after downloading and decompressing, run the script with run.bat
The script content is:
nginx.exe -c conf/http-flv.confHere is the specified configuration file conf/http-flv.conf
So if you want to modify it, you must modify the http-flv.conf file instead of the original default nginx.conf file.
After double-clicking the startup script to start, you can verify whether the startup is successful from the task manager, or through other methods such as viewing logs.
2. Configuration file
Focus on two places, like the official example here
Suppose the listen configuration item in the http configuration block is:
http {
...
server {
listen 8080; #不是默认的 80 端口
...
location /live {
flv_live on;
}
}
}The listen configuration item in the rtmp configuration block is:
rtmp {
...
server {
listen 1985; #不是默认的 1935 端口
...
application myapp {
live on;
}
}
}And the name of the published stream is mystream, then the HTTP-based playback url is:
http://example.com:8080/live?port=1985&app=myapp&stream=mystreamThe following is an example of a configuration file with an official prompt
worker_processes 1; #运行在 Windows 上时，设置为 1，因为 Windows 不支持 Unix domain socket
#worker_processes auto; #1.3.8 和 1.2.5 以及之后的版本
#worker_cpu_affinity 0001 0010 0100 1000; #只能用于 FreeBSD 和 Linux
#worker_cpu_affinity auto; #1.9.10 以及之后的版本
error_log logs/error.log error;
#如果此模块被编译为动态模块并且要使用与 RTMP 相关的功
#能时，必须指定下面的配置项并且它必须位于 events 配置
#项之前，否则 NGINX 启动时不会加载此模块或者加载失败
#load_module modules/ngx_http_flv_live_module.so;
events {
worker_connections 4096;
}
http {
include mime.types;
default_type application/octet-stream;
keepalive_timeout 65;
server {
listen 80;
location / {
root /var/www;
index index.html index.htm;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
location /live {
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 头
}
location /hls {
types {
application/vnd.apple.mpegurl m3u8;
video/mp2t ts;
}
root /tmp;
add_header 'Cache-Control' 'no-cache';
}
location /dash {
root /tmp;
add_header 'Cache-Control' 'no-cache';
}
location /stat {
#推流播放和录制统计数据的配置
rtmp_stat all;
rtmp_stat_stylesheet stat.xsl;
}
location /stat.xsl {
root /var/www/rtmp; #指定 stat.xsl 的位置
}
#如果需要 JSON 风格的 stat, 不用指定 stat.xsl
#但是需要指定一个新的配置项 rtmp_stat_format
#location /stat {
# rtmp_stat all;
# rtmp_stat_format json;
#}
location /control {
rtmp_control all; #rtmp 控制模块的配置
}
}
}
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;
server_name www.test.*; #用于虚拟主机名后缀通配
application myapp {
live on;
gop_cache on; #打开 GOP 缓存，减少首屏等待时间
}
application hls {
live on;
hls on;
hls_path /tmp/hls;
}
application dash {
live on;
dash on;
dash_path /tmp/dash;
}
}
server {
listen 1935;
server_name *.test.com; #用于虚拟主机名前缀通配
application myapp {
live on;
gop_cache on; #打开 GOP 缓存，减少首屏等待时间
}
}
server {
listen 1935;
server_name www.test.com; #用于虚拟主机名完全匹配
application myapp {
live on;
gop_cache on; #打开 GOP 缓存，减少首屏等待时间
}
}
}
Then the content of the configuration file http-flv.conf of the Windows compiled version downloaded above is
worker_processes 1;
error_log logs/error.log error;
events {
worker_connections 4096;
}
http {
include mime.types;
default_type application/octet-stream;
keepalive_timeout 65;
server {
listen 800;
location / {
root www;
index index.html index.htm;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
location /live {
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头
}
location /hls {
types {
application/vnd.apple.mpegurl m3u8;
video/mp2t ts;
}
root temp;
add_header 'Cache-Control' 'no-cache';
}
location /dash {
root temp;
add_header 'Cache-Control' 'no-cache';
}
location /stat {
#推流播放和录制统计数据的配置
rtmp_stat all;
rtmp_stat_stylesheet stat.xsl;
}
location /stat.xsl {
root www/rtmp; #指定stat.xsl的位置
}
#如果需要JSON风格的stat, 不用指定stat.xsl
#但是需要指定一个新的配置项rtmp_stat_format
#location /stat {
# rtmp_stat all;
# rtmp_stat_format json;
#}
location /control {
rtmp_control all; #rtmp控制模块的配置
}
}
}
rtmp_auto_push on;
rtmp_auto_push_reconnect 1s;
rtmp_socket_dir temp;
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;
#server_name www.test.*; #用于虚拟主机名后缀通配
server_name 127.0.0.1;
application myapp {
live on;
gop_cache on; #打开GOP缓存，减少首屏等待时间
}
application hls {
live on;
hls on;
hls_path temp/hls;
}
application dash {
live on;
dash on;
dash_path temp/dash;
}
}
}
3. Local simulation push RTMP video stream to nginx-http-flv-module on Windows
Referring to the process of using FFMpeg to push above, modify the simulated streaming bat script as
ffmpeg.exe -re -i D:\WorkSpace\Other\FFmpegDemo\test\1.mp4 -vcodec libx264 -acodec aac -f flv rtmp://127.0.0.1:1935/myapp/badao
pauseAfter the push stream is successful, use VLC to perform a pull test, and the network stream address is
http://127.0.0.1:800/live?port=1935&app=myapp&stream=badaoNote here
800 corresponds to the port configured by http
live corresponds to /live behind the location of the http configuration
port=1935 corresponds to the port configured in rtmp
The myapp corresponding to app=myapp is the application myapp configured in rtmp
The badao of stream=badao corresponds to the badao of rtmp://127.0.0.1:1935/myapp/badao when streaming
Pull flow and push flow effect.
In order to simulate the time delay effect, you can use other streaming tools, take a screenshot of the desktop time display to push the stream, and test the delay effect.
Deploy nginx-rtmp in Docker and docker-compose to implement streaming media service and oob and ffmpeg streaming test:
Here you can refer to the simulation push test effect using oob
4. bilibili's flv.js
GitHub - bilibili/flv.js: HTML5 FLV Player
It can be seen that it is characterized by
HTTP FLV low-latency real-time streaming playback
Play http-flv using flv.js in html
Download flv.min.js to local
https://github.com/bilibili/flv.js/releases/download/v1.5.0/flv.min.js
Then create a new html
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>flv.js demo</title>
<style>
.mainContainer {
display: block;
width: 1024px;
margin-left: auto;
margin-right: auto;
}
.urlInput {
display: block;
width: 100%;
margin-left: auto;
margin-right: auto;
margin-top: 8px;
margin-bottom: 8px;
}
.centeredVideo {
display: block;
width: 100%;
height: 576px;
margin-left: auto;
margin-right: auto;
margin-bottom: auto;
}
.controls {
display: block;
width: 100%;
text-align: center;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<p class="mainContainer">
<video name="videoElement" id="videoElement" class="centeredVideo" controls muted autoplay width="1024"
height="576">
Your browser is too old which doesn't support HTML5 video.
</video>
</p>
<script src="js/flv.min.js"></script>
<script>
function start() {
if (flvjs.isSupported()) {
var videoElement = document.getElementById('videoElement');
var flvPlayer = flvjs.createPlayer({
type: 'flv',
url:'http://127.0.0.1:800/live?port=1935&app=myapp&stream=badao'
});
flvPlayer.attachMediaElement(videoElement);
flvPlayer.load();
flvPlayer.play();
}
}
document.addEventListener('DOMContentLoaded', function () {
start();
});
</script>
</body>
</html>Set the url to the streaming address above, pay attention to the path of flv.min.js
Visit the html in the browser to see the effect
5. Use flv.js to play http-flv in Vue
install dependencies
npm install --save flv.jsNew page modification code
<template lang="html">
<div id="app">
<video
id="videoLive"
crossorigin="anonymous"
controls
autoplay
width="100%"
height="100%"
style="object-fit: fill"
></video>
</div>
</template>
<script>
import flvjs from "flv.js";
export default {
name: "flvPlayer",
data() {
return {
flvPlayer: null,
};
},
mounted() {
this.createVideo('http://127.0.0.1:800/liveport=1935&app=myapp&stream=badao',"videoLive")
},
methods: {
createVideo(url, elementId) {
if (flvjs.isSupported()) {
let videoElement = document.getElementById(elementId);
this.flvPlayer = flvjs.createPlayer({
type: "flv",
enableWorker: true, //浏览器端开启flv.js的worker,多进程运行flv.js
isLive: true, //直播模式
hasAudio: false, //关闭音频
hasVideo: true,
stashInitialSize: 128,
enableStashBuffer: true, //播放flv时，设置是否启用播放缓存，只在直播起作用。
url: url,
});
this.flvPlayer.attachMediaElement(videoElement);
this.flvPlayer.load();
this.flvPlayer.play();
}
},
},
};
</script>
<style lang="css">
</style>Run to see the effect
