作者: admin

  • 开车前的位置和镜子调整

    1,调整位置,标准有两个。

    (1)能把刹车踩到底,且腿能弯曲。

     

    (2)手能这么放

    根据以上的方法去调整位置的前后和靠椅的角度。

     

     

    2,左右镜子

    靠着图去调

     

    3,后视镜

     

  • 使用flv.js做直播

    https://github.com/gwuhaolin/blog/issues/3

    https://segmentfault.com/a/1190000009695424

    https://wuhaolin.cn/2017/05/17/%E4%BD%BF%E7%94%A8flv.js%E5%81%9A%E7%9B%B4%E6%92%AD/

    为什么要在这个时候探索flv.js做直播呢?原因在于各大浏览器厂商已经默认禁用Flash,之前常见的Flash直播方案需要用户同意使用Flash后才可以正常使用直播功能,这样的用户体验很致命。

    在介绍flv.js之前先介绍下常见的直播协议以及给出我对它们的延迟与性能所做的测试得出的数据。
    如果你看的很吃力可以先了解下音视频技术的一些基础概念。

     

    常见直播协议

    RTMP: 底层基于TCP,在浏览器端依赖Flash。
    HTTP-FLV: 基于HTTP流式IO传输FLV,依赖浏览器支持播放FLV。
    WebSocket-FLV: 基于WebSocket传输FLV,依赖浏览器支持播放FLV。WebSocket建立在HTTP之上,建立WebSocket连接前还要先建立HTTP连接。
    HLS: Http Live Streaming,苹果提出基于HTTP的流媒体传输协议。HTML5可以直接打开播放。
    RTP: 基于UDP,延迟1秒,浏览器不支持。

     

    常见直播协议延迟与性能数据以下数据只做对比参考

    传输协议 播放器 延迟 内存 CPU
    RTMP Flash 1s 430M 11%
    HTTP-FLV Video 1s 310M 4.4%
    HLS Video 20s 205M 3%

    在支持浏览器的协议里,延迟排序是:
    RTMP = HTTP-FLV = WebSocket-FLV < HLS
    而性能排序恰好相反:
    RTMP > HTTP-FLV = WebSocket-FLV > HLS
    也就是说延迟小的性能不好。

    可以看出在浏览器里做直播,使用HTTP-FLV协议是不错的,性能优于RTMP+Flash,延迟可以做到和RTMP+Flash一样甚至更好。

     

     

    flv.js 简介

    flv.js是来自Bilibli的开源项目。它解析FLV文件喂给原生HTML5 Video标签播放音视频数据,使浏览器在不借助Flash的情况下播放FLV成为可能。

    flv.js 优势
    • 由于浏览器对原生Video标签采用了硬件加速,性能很好,支持高清。
    • 同时支持录播和直播
    • 去掉对Flash的依赖
    flv.js 限制
    • FLV里所包含的视频编码必须是H.264,音频编码必须是AACMP3, IE11和Edge浏览器不支持MP3音频编码,所以FLV里采用的编码最好是H.264+AAC,这个让音视频服务兼容不是问题。
    • 对于录播,依赖 原生HTML5 Video标签 和 Media Source Extensions API
    • 对于直播,依赖录播所需要的播放技术,同时依赖 HTTP FLV 或者 WebSocket 中的一种协议来传输FLV。其中HTTP FLV需通过流式IO去拉取数据,支持流式IO的有fetch或者stream
    • flv.min.js 文件大小 164Kb,gzip后 35.5Kb,flash播放器gzip后差不多也是这么大。
    • 由于依赖Media Source Extensions,目前所有iOS和Android4.4.4以下里的浏览器都不支持,也就是说目前对于移动端flv.js基本是不能用的。
    flv.js依赖的浏览器特性兼容列表

     

    flv.js 原理

    flv.js只做了一件事,在获取到FLV格式的音视频数据后通过原生的JS去解码FLV数据,再通过Media Source Extensions API 喂给原生HTML5 Video标签。(HTML5 原生仅支持播放 mp4/webm 格式,不支持 FLV)

    flv.js 为什么要绕一圈,从服务器获取FLV再解码转换后再喂给Video标签呢?原因如下:

    1. 兼容目前的直播方案:目前大多数直播方案的音视频服务都是采用FLV容器格式传输音视频数据。
    2. FLV容器格式相比于MP4格式更加简单,解析起来更快更方便。
    flv.js兼容方案

    由于目前flv.js兼容性还不是很好,要用在产品中必要要兼顾到不支持flv.js的浏览器。兼容方案如下:

    PC端
    1. 优先使用 HTTP-FLV,因为它延迟小,性能也不差1080P都很流畅。
    2. 不支持 flv.js 就使用 Flash播放器播 RTMP 流。Flash兼容性很好,但是性能差默认被很多浏览器禁用。
    3. 不想用Flash兼容也可以用HLS,但是PC端只有Safari支持HLS
    移动端
    1. 优先使用 HTTP-FLV,因为它延迟小,支持HTTP-FLV的设备性能运行 flv.js 足够了。
    2. 不支持 flv.js 就使用 HLS,但是 HLS延迟非常大。
    3. HLS 也不支持就没法直播了,因为移动端都不支持Flash。
    flv.js实战

    说了这么多介绍与原理,接下来教大家如何用flv.js搭建一个完整的直播系统。
    我已经搭建好了一个demo可以供大家体验。

    搭建音视频服务

    主播推流到音视频服务,音视频服务再转发给所有连接的客户端。为了让你快速搭建服务推荐我用go语言实现的livego,因为它可以运行在任何操作系统上,对Golang感兴趣?请看Golang 中文学习资料汇总

    1. 下载livego,注意选对你的操作系统和位数。
    2. 解压,执行livego,服务就启动好了。它会启动RTMP(1935端口)服务用于主播推流,以及HTTP-FLV(7001端口)服务用于播放。

     

  • HLS协议在nginx的配置详细说明

    一、HLS简介

    HLS(HTTP Live Streaming) 是Appale公司在2009年发布的,可以通过普通的web服务器进行分发的新型流媒体协议。

    HLS协议文件:http://tools.ietf.org/html/draft-pantos-http-live-streaming-07

    HLS提供一个m3u8列表,播放地址像这样:http://IP[port]/[app]/live.m3u8,其实m3u8是一个ts的list,但是在这个list中要需要定义一些关键的参数,这些参数都有重要的意义。

    一般HLS中ts切片的视频编码使用H264,音频编码使用AAC。

     

     

    二、HLS m3u8介绍

    下面是一个m3u8列表中的内容

    #EXTM3U

    #EXT-X-VERSION:3

    #EXT-X-MEDIA-SEQUENCE:64

    #EXT-X-TARGETDURATION:12

    #EXTINF:11.550

    livestream-64.ts

    #EXTINF:5.250

    livestream-65.ts

    #EXTINF:7.700

    livestream-66.ts

    #EXTINF:6.850

    livestream-67.ts

    有几个关键的参数,这些参数在SRS的配置文件中都有配置项:

      • EXT-X-TARGETDURATION:所有切片的最大时长。有些Apple设备这个参数不正确会无法播放。SRS会自动计算出ts文件的最大时长,然后更新m3u8时会自动更新这个值。用户不必自己配置。
      • EXTINF:ts切片的实际时长,SRS提供配置项hls_fragment,但实际上的ts时长还受gop影响,详见下面配置HLS的说明。
      • ts文件的数目:SRS可配置hls_window,指定m3u8中保存多少个切片,SRS会自动清理旧的切片。
      • livestream-67.ts:SRS会自动维护ts切片的文件名,在编码器重推之后,这个编号会继续增长,保证流的连续性。直到SRS重启,这个编号才重置为0。

    譬如,每个ts切片为10秒,窗口为60秒,那么m3u8中会保存6个ts切片。

     

    三、SRS的HLS工作流

    RTMP编码器推流到SRS,视音频编码为,视频:H.264 音频:AAC,其他编码的,可以通过SRS进行直播转码后,输出到SRS的其他Vhost中,然后生成HLS

    如果不是H264/AAC,则停止输出HLS。

     

     

     

    四、SRS配置生成HLS

    其他配置查看conf目录下的full.conf

    vhost with-hls.srs.com {

    hls {

    #是否开启HLS,on:开启 off:关闭,默认是off 

    enabled         on;

    #单位秒,指定ts切片的最小长度。默认为10

            #ts文件长度 = max(hls_fragment, gop_size)

            #如果ffmpeg中指定fps(帧速率)为20帧/秒,gop为200帧,那么gop_size=gop/fps=10秒

            #那么实际ts的长度为max(5,10) =10秒。这样实际ts切片的长度就与设定的不同了。

    hls_fragment    5;

     #倍数,控制m3u8的EXT-X-TARGETDURATION值,EXT-X-TARGETDURATION(整数)值标明了切片的最大时长。

            #m3u8列表文件中EXTINF的值必须小于等于EXT-X-TARGETDURATION的值。

            #EXT-X-TARGETDURATION在m3u8列表文件中必须出现一次。

    hls_td_ratio    1.5;

    #倍数。纯音频时,当ts时长超过配置的ls_fragment乘以这个系数时就切割文件。例如,当ls_fragment是10秒,hls_aof_ratio是2.0时,对于纯音频,10s*2.0=20秒时就切割ts文件。

    hls_aof_ratio   2.0;

    #单位:秒,指定HLS窗口大小,即m3u8中ts文件的时长之和,超过总时长后,丢弃第一个m3u8中的第一个切片,直到ts的总时长在这个配置项范围之内。即SRS保证:hls_window的值必须大于等于m3u8列表文件中所有ts切片时长的总和。

    hls_window      60;

            #hls错误策略

            #    ignore:当错误发生时,忽略错误并停止输出hls(默认)

            #    disconnect:当发生错误时,断开推流连接

            #    continue:当发生错误时,忽略错误并继续输出hls

    hls_on_error    ignore;

            #hls存储方式

            #    disk:把m3u8/ts写到磁盘(默认)

            #    ram:发送m3u8/ts到内存,但是必须使用srs自带的http server进行分发。

            #    both, disk and ram。

    hls_storage     disk;

    #当hls写到磁盘时,指定写入的目录。  

    hls_path        ./objs/nginx/html;

     #生成hls的m3u8文件的文件名,有一些变量可用于生成m3u8文件的文件名:

            #    [vhost],原始流来的vhost,比如rtmp://v.flyfn.com:1935/live/livestream,对应到srs中,vhost应是v.flyfn.com

            #    [app], 源rtmp流中的app,对应上面的播放地址中,为live

            #    [stream],源rtmp流中的流名称,对应上面播放地址中,为livestream

            #m3u8文件的绝对路径为[SRS_Path]/objs/nginx/html/[app]/[stream].m3u8

    hls_m3u8_file   [app]/[stream].m3u8;

            #生成的ts文件的名称,有许多的变量可用于生成ts文件的文件名:

            #[vhost], the vhost of stream.

            #[app], the app of stream.

            #[stream], the stream name of stream.

            #[2006], replace this const to current year.

            #[01], replace this const to current month.

            #[02], replace this const to current date.

            #[15], replace this const to current hour.

            #[04], repleace this const to current minute.

            #[05], repleace this const to current second.

            #[999], repleace this const to current millisecond.

            #[timestamp],replace this const to current UNIX timestamp in ms.

            #[seq], the sequence number of ts,顺序号,0,1,2…n

            #生成的ts文件的绝对路径:[SRS_Path]/objs/nginx/html/[app]/[stream]-[seq].ts

            #例如:[app]/[stream]/[2006][01]/[02]/[timestamp].ts生成的ts文件的绝对路径是:

            #[SRS_Path]/objs/nginx/html/[app]/[stream]/201505/15/1431619258.ts

    hls_ts_file     [app]/[stream]-[seq].ts;

    #是否使用floor的方式生成hls ts文件的路径。如实hls_ts_floor on; 使用timestamp/hls_fragment作为[timestamp]变量,即[timestamp]=timestamp/hls_fragment,并且使用enahanced算法生成下一个切片的差值。

    hls_ts_floor    off;

            #hls_entry_prefix: TS的base url。可选默认为空字符串;非空时加在ts前面作为base url。

            #对于ts切片:live/livestream-0.ts

            #若配置为:hls_entry_prefix http://your-server;

            #则最后的TS的URL是:http://your-server/live/livestream-0.ts

    hls_entry_prefix http://your-server;

    #内存hls的m3u8/ts挂载点。播放的时候到这个路径下找m3u8和ts文件。播放路径为:http://your-server/[vhost]/[app]/[stream].m3u8

    #若要支持内存分发HLS,即ts不写磁盘。1、需要开启SRS的http_server。2、修改 hls_storage ram;

    hls_mount       [vhost]/[app]/[stream].m3u8;

    #默认的音频编码。当流的编码改变时,会更新PMT/PAT信息;默认是aac,因此默认的PMT/PAT信息是aac;如果流是mp3,那么可以配置这个参数为mp3,避免PMT/PAT改变。

    hls_acodec      aac;

    #默认的视频编码。当流的编码改变时,会更新PMT/PAT信息;默认是h264。如果是纯音频HLS,可以配置为vn,可以减少SRS检测纯音频的时间,直接进入纯音频模式。

    hls_vcodec      h264;

     #是否删除过期的ts切片,不在m3u8中就是过期。可以关闭清除ts切片,实现时移和存储,使用自己的切片管理系统。

    hls_cleanup     on;

    #从notify服务器读取数据的长度

    hls_nb_notify   64;

    #是否按gop切片,即等待到关键帧后开始切片。测试发现OS X和android上可以不用按go切片。

    hls_wait_keyframe       on;

    }

    }

     

     

    五、SRS中关于HLS的Callback

    vhost v.flyfn.com {

    http_hooks {

    #当切片生成时,回调这儿url,使用POST回调。

            #已json编码格式POST。

            # {

            #     “action”: “on_hls”,

            #     “client_id”: 1985,

            #     “ip”: “192.168.1.10”, “vhost”: “video.test.com”, “app”: “live”,

            #     “stream”: “livestream”,

            #     “duration”: 9.36, // in seconds

            #     “cwd”: “/usr/local/srs”,

            #     “file”: “./objs/nginx/html/live/livestream/2015-04-23/01/476584165.ts”,

            #     “url”: “live/livestream/2015-04-23/01/476584165.ts”,

            #     “m3u8”: “./objs/nginx/html/live/livestream/live.m3u8″,

            #     “m3u8_url”: “live/livestream/live.m3u8”,

            #     “seq_no”: 100

            # }

            #下面是回调多个地址

    on_hls          http://127.0.0.1:8085/api/v1/hls http://localhost:8085/api/v1/hls;

    #HLS通知,实现CDN预分发

    on_hls_notify   http://127.0.0.1:8085/api/v1/hls/[app]/[stream][ts_url];

    }

    }

     

     

     

     

     

     

  • 搭建nginx+HLS服务器播放m3u8视频格式

    RTMP、HTTP-FLV、HLS,三大直播协议

    RTMP
    优点:
    RTMP 是专为流媒体开发的协议,对底层的优化比其它协议更加优秀,同时它 Adobe Flash 支持好,基本上所有的编码器(摄像头之类)都支持 RTMP 输出。现在 PC 市场巨大,PC 主要是 Windows,Windows 的浏览器基本上都支持 Flash。另外RTMP适合长时间播放,曾经有过测试,联系 100 万秒,即 10 天多连续播放没有出现问题。最后 RTMP 的延迟相对较低,一般延时在 1-3s 之间,一般的视频会议,互动式直播,完全是够用的。

    缺点:
    一方面是它是基于 TCP 传输,非公共端口,可能会被防火墙阻拦;另一方面,也是比较坑的一方面是 RTMP 为 Adobe 私有协议,很多设备无法播放,特别是在 iOS 端,需要使用第三方解码器才能播放。

    运用在现场直播方案:https://sdeno.com/?p=7926

     

    FLV
    FLV (Flash Video) 是 Adobe 公司推出的另一种视频格式,是一种在网络上传输的流媒体数据存储容器格式。
    优点:
    相较于 RTMP 协议,HTTP-FLV 能够好的穿透防火墙,它是基于 HTTP/80 传输,有效避免被防火墙拦截。除此之外,它可以通过 HTTP 302 跳转灵活调度/负载均衡,支持使用 HTTPS 加密传输,也能够兼容支持 Android,iOS 的移动端。

    缺点:
    由于它的传输特性,会让流媒体资源缓存在本地客户端,在保密性方面不够好。因为网络流量较大,它也不适合做拉流协议。

    —————————上述两个协议都是有Adobe公司推出的—————————

    HLS
    HLS (HTTP Live Streaming) 则是苹果公司基于 HTTP 的流媒体传输协议。
    主要应用于 iOS 设备,包含(iPhone, iPad, iPod touch) 以及 Mac OSX 提供音视频直播服务和录制内容(点播)等服务。
    相对于常见的流媒体协议,HLS 最大的不同在于它并不是一下请求完整的数据流。它会在服务器端将流媒体数据切割成连续的时长较短的 ts 小文件,并通过 M3U8 索引文件按序访问 ts 文件。客户端只要不停的按序播放从服务器获取到的文件,从而实现播放音视频。

    HLS 的优势:
    Apple 的全系列产品支持:由于 HLS 是苹果提出的,所以在 Apple 的全系列产品包括 iPhone、 iPad、safari 都不需要安装任何插件就可以原生支持播放 HLS, 现在 Android 也加入了对 HLS 的支持。
    穿透防火墙。基于 HTTP/80 传输,有效避免防火墙拦截
    性能高。通过 HTTP 传输, 支持网络分发,CDN 支持良好,且自带多码率自适应,Apple 在提出 HLS 时,就已经考虑了码流自适应的问题。

    HLS 的劣势:
    实时性差,延迟高。HLS 的延迟基本在 10s+ 以上
    文件碎片。特性的双刃剑,ts 切片较小,会造成海量小文件,对存储和缓存都有一定的挑战

    https://www.upyun.com/tech/article/352/RTMP%E3%80%81HTTP-FLV%E3%80%81HLS%EF%BC%8C%E4%BD%A0%E4%BA%86%E8%A7%A3%E5%B8%B8%E8%A7%81%E7%9A%84%E4%B8%89%E5%A4%A7%E7%9B%B4%E6%92%AD%E5%8D%8F%E8%AE%AE%E5%90%97.html

    —————————以上内容都是科普————————————-

    这里的教程如何使用HLS协议播放视频。
    本人使用的环境是centos6

    1,安装nginx,且安装nginx-rtmp-module模块

    nginx-rtmp-module-master

    https://sdeno.com/?p=5731

     

    2,配置nginx.conf

    查看mime.types文件是否有以下内容(一般都会有),如果没有就加上

    application/vnd.apple.mpegurl m3u8;
    video/mp2t ts;

     

    编辑nginx.conf

    http{
      server{
        #其他网站
      }
    
      server{
        #其他网站
      }
    
    
      server {
        listen 8080;
        server_name localhost;
    
        location /hls {
           types {
            application/vnd.apple.mpegurl m3u8;
            video/mp2ts ts;
           }
           root /tmp;
           add_header Cache-Control no-cache;
           add_header Access-Control-Allow-Origin *;
        }
    
    
        location /on_publish {
           return 201;
        }
        # 推流的监控台
        location /stat {
          rtmp_stat all;
          rtmp_stat_stylesheet stat.xsl;
        }
        location /stat.xsl {
          alias /opt/nginx/conf/stat.xsl;
        }
        location /control {
          rtmp_control all;
        }
    
        error_page 500 502 503 504 /50x.html;
        location = /50x.html {
          root html;
        }
      }
    
    }
    
    
    #rtmp跟http同级
    rtmp {
      server {
    
        listen 1935; #//服务端口
    
        #chunk_size 4096; #//数据传输块的大小
        application rtmplive {
          live on;
        }
        application hls { #rtmp推流请求路径 
          live on; 
          hls on; 
          hls_path /tmp/hls; #去创建这个目录,在tmp目录的文件服务器重启就会删除里面的文件
          hls_fragment 10; 
          hls_cleanup off;
        } 
      }
    }

    配置完成之后重启nginx。
    开启的端口是8080和1935,使用命令netstat -ltn查看是否有这两端口。
    主要防火墙是否允许对外访问这两端口。
    如果你是阿里云服务器,要开启端口查看https://sdeno.com/?p=5797
    http://ip:8080/ 看下你的网站是否能访问

    关于更多HLS在nginx中的配置可看看https://sdeno.com/?p=7902

     

    3,安装ffmpeg

    window 64位的下载:
    链接: https://pan.baidu.com/s/1jVOHOIAuEoNpCJQ7XeI7-A 提取码: g333

     

    centos安装:

    yum -y install epel-release

    CentOS 6比较简单,安装yum源之后直接安装即可:

    su -c 'yum localinstall --nogpgcheck https://download1.rpmfusion.org/free/el/rpmfusion-free-release-6.noarch.rpm https://download1.rpmfusion.org/nonfree/el/rpmfusion-nonfree-release-6.noarch.rpm'
    yum -y install ffmpeg ffmpeg-devel

    而CentOS 7需额外安装扩展源:

    su -c 'yum localinstall --nogpgcheck https://download1.rpmfusion.org/free/el/rpmfusion-free-release-7.noarch.rpm https://download1.rpmfusion.org/nonfree/el/rpmfusion-nonfree-release-7.noarch.rpm'
    
    rpm --import http://li.nux.ro/download/nux/RPM-GPG-KEY-nux.ro
    rpm -Uvh http://li.nux.ro/download/nux/dextop/el7/x86_64/nux-dextop-release-0-1.el7.nux.noarch.rpm
    
    yum -y install ffmpeg ffmpeg-devel

     

    4,视频转m3u8
    我是在window环境下转码的,执行

    D:\ffmpeg\bin\ffmpeg.exe -i E:\zszz\zszz.mp4 -c:v libx264 -hls_time 10 -hls_list_size 0 -c:a aac -strict -2 -f hls E:\zszz\1.m3u8

    没10秒切成一个ts视频,之后你会看到会有一个m3u8格式的文件和一堆ts视频,把这些文件都上传到/tmp/hls目录

     

    5,播放m3u8视频

    苹果设备直接就可以播放

    <video controls>
      <source src="1.m3u8"></source>
    </video>

    其他设备的需要第三方插件

    videojs

    <link href="video-js.min.css" rel="stylesheet">
    <script src="video.js"></script>
    <script src="videojs-contrib-hls.js"></script>
    
    <video class="video-js video-js vjs-default-skin" id="video1"></video>
    function run(str,url,type) {
      var player = videojs(str, {
         width:1920,//宽string|number
         height:450,//高:string|number
         controls:true,//控制条:boolean
         preload:"none",//预加载:string;'auto'|'true'|'metadata'|'none'
         // poster:'source/suoluetu.jpg',//预览图:string
         autoplay:false,//自动播放:boolean
         loop:true,//循环:boolean
         muted:true,//静音:boolean
         fluid:true,
         sources:[
          {
            src:url,
            type:type
          }
         ],
         controlBar: {
          muteToggle: false,
          volumeMenuButton:false//静音按钮
         }
      }, function () {
    
      });
    }
    
    run('video1','http://xxxx:8080/hls/1.m3u8','application/vnd.apple.mpegurl');

     

    其他测试地址:

    https://zuikzy.603ee.com/2019/05/06/Et6dCHH62ojQBCqB/playlist.m3u8

     

    6,总结通过测试了一下把1g的电影视频转成m3u8,在4g下进行播放还是可以的,总比去加载整个mp4文件后在播放实际。

    移动端ios和安装都可以播放,window pc端不支持

     

  • swiper匀速轮播

    swiper 匀速 不卡 不停顶 轮播

    为了满足产品各种需求看了下api实现以下效果。

    使用的是swiper 5,文档https://www.swiper.com.cn/api/index.html

     

    效果:https://sdeno.com/wp-content/uploads/2020/02/swiper_liner/