这两天的一个小需求，需要实现桌面实时直播，前面讲了两种方式：

1、Windows 11实现录屏直播，搭建Nginx的rtmp服务 的方式需要依赖与Flash插件，使用场景有限

2、Windows 11实现直播，VLC超简单实现捕获、串流、播放 的方式需要依赖于播放器，也可以通过转换协议实现需求

现在讲第三种，通过 FFmpeg 切片推流 HLS，并嵌入 H5 的web页面实现桌面直播

需要工具去头一篇博客取，别客气，当自己家一样

开始叭

1、写个 Nginx 的配置文件

　　在自己的nginx/cong文件夹下，新建一个 nginx-win-hls.conf 文件，内容如下：

worker_processes  2;

events {

    worker_connections  8192;

}

rtmp {

    server {

        listen 1935;

        application live {   #rtmp直播

            live on;

        }

        application hls {     #hls直播

             live on;

             hls on;

             hls_path D:/live/nginx-1.7.11.3-Gryphon/hls/;

             hls_fragment 5s;

       }

       chunk_size 4096;   #数据传输块的大小

    }

}

http {

    include       mime.types;

    default_type  application/octet-stream;

    sendfile        off;

    server_names_hash_bucket_size 128;

    client_body_timeout   10;

    client_header_timeout 10;

    keepalive_timeout     30;

    send_timeout          10;

    keepalive_requests    10;

    server {

        listen       80;

        server_name  localhost;

        index web/index.html;                               # 直播页

        location /hls/ {

            types{

               application/vnd.apple.mpegurl m3u8;

               video/mp2t ts;

            }

            alias D:/live/nginx-1.7.11.3-Gryphon/hls/;

            expires -1;

        }

        location /stat {

            rtmp_stat all;

            rtmp_stat_stylesheet stat.xsl;

        }

        location /stat.xsl {

            root nginx-rtmp-module/;

        }

        location /control {

            rtmp_control all;

        }

        location / {

            root   D:/live/nginx-1.7.11.3-Gryphon;

            index  index.html index.htm;

        }

        error_page   500 502 503 504  /50x.html;

        location = /50x.html {

            root   html;

        }

    }

}

2、启动 Nginx，这里有问题去看头一篇文章

nginx.exe -c conf\nginx-win-hls.conf

3、启动FFmpeg，切片、保存

ffmpeg -f gdigrab -i desktop -vcodec libx264 -preset:v ultrafast -tune:v zerolatency -f hls -hls_time 5.0 -hls_list_size 1 -hls_wrap 20  D:\live\nginx-1.7.11.3-Gryphon\hls\tv.m3u8

　　目录下会生成一个 tv.m3u8文件 + 一堆的 tv片，用过的会自动删除

4、写个H5的Web页面

　　进入Nginx的html目录，新建 live-hls.html

<!DOCTYPE HTML>

<html>

<head>

  <title>Live - HLS</title>

  <link rel="icon" href="./favicon.ico">

  <meta charset="utf-8" />

  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

  <meta name="renderer" content="webkit" />

  <meta name="force-rendering" content="webkit" />

  <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">

  <script type="text/javascript" src="EasyPlayer-element.min.js"></script>

</head>

<body>

  <easy-player video-url="/hls/tv.m3u8" live="true" aspect="400:300" debug="true"

   isresolution="true" resolution="yh,fhd,hd,sd" resolutiondefault="yh"></easy-player>

</body>

</html>

5、见证奇迹

　　浏览器输入：http://127.0.0.1/html/live-hls.html

　　是的，此时我正在写博客

　　哈？　

　　白屏！没奇迹！对吧？给你的 js 就有了

链接：https://pan.baidu.com/s/1eqEW1G6kEOxKQ42kN_cyjw

提取码：3235

　　好了，别客气。求个关注，常来哈

Windows11实现录屏直播，H5页面直播 HLS ，不依赖Flash的更多相关文章

  1. Windows实现桌面录屏、指定窗口录制直播，低延时，H5页面播放

    接着前面记录的3种方式实现桌面推流直播: 1.Windows 11实现录屏直播,搭建Nginx的rtmp服务 的方式需要依赖与Flash插件,使用场景有限 2.Windows 11实现直播,VLC超简 ...

  2. 基于EasyNVR+EasyDSS H5视频直播二次开发实现业务需求：直接使用播放页面

    之前的"网页直播.微信直播技术解决方案:EasyNVR与EasyDSS流媒体服务器组合之区分不同场景下的easynvr"有介绍一些功能.由于客户需求,我们定制一下功能.给该套方案添 ...

  3. 前端视频直播技术总结及video.js在h5页面中的应用

    全手打原创,转载请标明出处:https://www.cnblogs.com/dreamsqin/p/12557070.html,多谢,=.=~ (如果对你有帮助的话请帮我点个赞啦) 目前有一个需求是在 ...

  4. Windows 11实现录屏直播，搭建Nginx的rtmp服务

    先!下载几个工具呗 官方下载FFmpeg:http://www.ffmpeg.org 官方下载nginx-rtmp-module:https://github.com/arut/nginx-rtmp- ...

  5. 手游录屏直播技术详解 | 直播 SDK 性能优化实践

    在上期<直播推流端弱网优化策略 >中,我们介绍了直播推流端是如何优化的.本期,将介绍手游直播中录屏的实现方式. 直播经过一年左右的快速发展,衍生出越来越丰富的业务形式,也覆盖越来越广的应用 ...

  6. Android实现录屏直播（三）MediaProjection + VirtualDisplay + librtmp + MediaCodec实现视频编码并推流到rtmp服务器

    请尊重分享成果,转载请注明出处,本文来自Coder包子哥,原文链接:http://blog.csdn.net/zxccxzzxz/article/details/55230272 Android实现录 ...

  7. Android设备一对多录屏直播--(UDP组播连接,Tcp传输)

    原文:https://blog.csdn.net/sunmmer123/article/details/82734245 近期需要学习流媒体知识,做一个Android设备相互投屏Demo,因此找到了这 ...

  8. Android实现录屏直播（一）ScreenRecorder的简单分析

    http://blog.csdn.net/zxccxzzxz/article/details/54150396 Android实现录屏直播(一)ScreenRecorder的简单分析 Android实 ...

  9. ffmpeg,rtmpdump和nginx rtmp实现录屏，直播和录制

    公司最近在做视频直播的项目,我这里分配到对直播的视频进行录制,录制的方式是通过rtmpdump对rtmp的视频流进行录制 前置的知识 ffmpeg: 用于实现把录屏工具发出的视频和音频流,转换成我们需 ...

随机推荐

  1. 使用systemd将iptables规则在docker启动后自动导入

    编写systemd文件 $ sudo vi /etc/systemd/system/iptables-import.service # /etc/systemd/system/iptables-imp ...

  2. python 多态、组合、反射

    目录 多态.多态性 多态 多态性 鸭子类型 父类限制子类的行为 组合 面向对象的内置函数 反射 多态.多态性 多态 多态通俗理解起来,就像迪迦奥特曼有三种形态一样,怎么变还是迪迦奥特曼 定义:多态指的 ...

  3. day10设置文件权限

    day10设置文件权限 yum复习 1.修改IP [root@localhost ~]# sed -i 's#.200#.50#g' /etc/sysconfig/network-scripts/if ...

  4. 几种常用JavaScript设计模式es6

    设计模式分类(23种设计模式) 创建型 单例模式 原型模式 工厂模式 抽象工厂模式 建造者模式 结构型 适配器模式 装饰器模式 代理模式 外观模式 桥接模式 组合模式 享元模式 行为型 观察者模式 迭 ...

  5. Angular 中 [ngClass]、[ngStyle] 的使用

    1.ngStyle 基本用法 1 <div [ngStyle]="{'background-color':'green'}"></<div> 判断添加 ...

  6. 通信方案软件设计（环形动态申请内存，支持USART+IIC+SPI+CAN协议

    1 <STM32进阶之串口环形缓冲区实现>中讲得比较清楚(链接) 2 amobbs中讲的方法有点复杂,以下是链接和参考源码: 通信方案软件设计(环形动态申请内存,支持USART+IIC+S ...

  7. git 日志技术

    1.git log, 在一个分支下, 以时间的倒序方式显示你制造的所有commit列表,包含创建人,时间,提交了什么等信息: 2. git reflog, 获取您在本地repo上还原commit所做工 ...

  8. 【Linux】【Services】【SaaS】 kubeadm安装kubernetes

    1. 简介 2. 环境 2.1. OS:  CentOS Linux release 7.5.1804 (Core) 2.2. Ansible: 2.6.2-1.el7 2.3. docker: 2. ...

  9. oracle 当月日历的sql

    select max(sun) sun, max(mon) mon, max(tue) tue, max(wed) wed, max(thu) thu, max(fri) fri, max(sat) ...

  10. canal整合springboot实现mysql数据实时同步到redis

    业务场景: 项目里需要频繁的查询mysql导致mysql的压力太大,此时考虑从内存型数据库redis里查询,但是管理平台里会较为频繁的修改增加mysql里的数据 问题来了: 如何才能保证mysql的数 ...