1,调整位置,标准有两个。
(1)能把刹车踩到底,且腿能弯曲。

(2)手能这么放

根据以上的方法去调整位置的前后和靠椅的角度。
2,左右镜子


靠着图去调
3,后视镜

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是来自Bilibli的开源项目。它解析FLV文件喂给原生HTML5 Video标签播放音视频数据,使浏览器在不借助Flash的情况下播放FLV成为可能。
H.264,音频编码必须是AAC或MP3, IE11和Edge浏览器不支持MP3音频编码,所以FLV里采用的编码最好是H.264+AAC,这个让音视频服务兼容不是问题。原生HTML5 Video标签 和 Media Source Extensions APIHTTP FLV 或者 WebSocket 中的一种协议来传输FLV。其中HTTP FLV需通过流式IO去拉取数据,支持流式IO的有fetch或者streamflv.min.js 文件大小 164Kb,gzip后 35.5Kb,flash播放器gzip后差不多也是这么大。Media Source Extensions,目前所有iOS和Android4.4.4以下里的浏览器都不支持,也就是说目前对于移动端flv.js基本是不能用的。
flv.js只做了一件事,在获取到FLV格式的音视频数据后通过原生的JS去解码FLV数据,再通过Media Source Extensions API 喂给原生HTML5 Video标签。(HTML5 原生仅支持播放 mp4/webm 格式,不支持 FLV)
flv.js 为什么要绕一圈,从服务器获取FLV再解码转换后再喂给Video标签呢?原因如下:
由于目前flv.js兼容性还不是很好,要用在产品中必要要兼顾到不支持flv.js的浏览器。兼容方案如下:
说了这么多介绍与原理,接下来教大家如何用flv.js搭建一个完整的直播系统。
我已经搭建好了一个demo可以供大家体验。
主播推流到音视频服务,音视频服务再转发给所有连接的客户端。为了让你快速搭建服务推荐我用go语言实现的livego,因为它可以运行在任何操作系统上,对Golang感兴趣?请看Golang 中文学习资料汇总。
livego,服务就启动好了。它会启动RTMP(1935端口)服务用于主播推流,以及HTTP-FLV(7001端口)服务用于播放。
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。
下面是一个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的配置文件中都有配置项:
譬如,每个ts切片为10秒,窗口为60秒,那么m3u8中会保存6个ts切片。
RTMP编码器推流到SRS,视音频编码为,视频:H.264 音频:AAC,其他编码的,可以通过SRS进行直播转码后,输出到SRS的其他Vhost中,然后生成HLS
如果不是H264/AAC,则停止输出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;
}
}
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];
}
}
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 切片较小,会造成海量小文件,对存储和缓存都有一定的挑战
—————————以上内容都是科普————————————-
这里的教程如何使用HLS协议播放视频。
本人使用的环境是centos6
1,安装nginx,且安装nginx-rtmp-module模块
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>
其他设备的需要第三方插件
<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 匀速 不卡 不停顶 轮播

为了满足产品各种需求看了下api实现以下效果。
使用的是swiper 5,文档https://www.swiper.com.cn/api/index.html
效果:https://sdeno.com/wp-content/uploads/2020/02/swiper_liner/