背景
虽然延迟比较高，但是相对比较稳定和好实现，可以分发播放，还是有使用价值的。可以支持谷歌浏览器，不用flash支持。
引用文章
https://blog.csdn.net/zhangke1985/article/details/120274060
配置文件
nginx.conf
#user nobody;
# multiple workers works !
worker_processes 2;
#error_log logs/error.log;
#error_log logs/error.log notice;
#error_log logs/error.log info;
#pid logs/nginx.pid;
events {
worker_connections 8192;
}
rtmp_auto_push on;
#RTMP服务
rtmp {
server {
listen 7899;
application live {
live on;
}
application hls {
live on;
hls on;
hls_path ./hls;
hls_fragment 5s;
}
}
}
#HTTP服务
http {
include mime.types;
default_type application/octet-stream;
sendfile on;
keepalive_timeout 65;
server {
listen 8099;
server_name localhost;
location / {
root html;
index index.html index.htm;
}
location /hls{
types{
#m3u8 type设置
application/vnd.apple.mpegurl m3u8;
#ts分片文件设置
video/mp2t ts;
}
#指向访问m3u8文件目录
alias ./hls;
add_header Cache-Control no-cache; #禁止缓存
}
location /control{
rtmp_control all;
}
location /stat{
rtmp_stat all;
rtmp_stat_stylesheet stat.xsl;
}
location /stat.xsl{
root ./nginx-rtmp-module-master;
}
# redirect server error pages to the static page /50x.html
#
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
}
html页面代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
<link rel="stylesheet" href="DPlayer.min.css" />
<script src="hls.min.js"></script>
<script src="DPlayer.min.js"></script>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<div id="dplayer"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>
<script language="JavaScript">
const dp = new DPlayer({
container: document.getElementById('dplayer'),
screenshot: true,
autoplay: true,
lang: 'zh-cn',
theme: '#FF7411',
hotkey: false,
video: {
url: 'http://192.168.1.136:8099/hls/test2.m3u8',
type: 'hls',
pic:'',
defaultQuality: 0
}
});
dp.play();
</script>
ffmpeg
ffmpeg -i rtsp://admin:password@ip:554/Streaming/Channels/101?transportmode=unicast -rtsp_transport tcp -vcodec copy -acodec copy -f flv -r 25 -g 25 -s 640x360 -b 1024K -an rtmp://192.168.1.13:7899/hls/test2
代码下载地址
链接：https://pan.baidu.com/s/1VutfLD68bwqY4VKHGixuCA
提取码：qsgl