rtmp+DPlayer+ffmpeg生成m3u8文件在浏览器显示摄像头视频延迟30秒左右

最新推荐文章于 2024-05-25 20:14:28 发布

itxiaoxd2020

最新推荐文章于 2024-05-25 20:14:28 发布

阅读量1.9k

点赞数 2

文章标签： ffmpeg 音视频

本文链接：https://blog.csdn.net/qq_40351360/article/details/127679156

版权

背景

虽然延迟比较高，但是相对比较稳定和好实现，可以分发播放，还是有使用价值的。可以支持谷歌浏览器，不用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

在这里插入图片描述