图网站的踩坑笔记,vue开发项目中通过api接口获取到了m3u8格式的音频,但是有的浏览器默认不支持,所以需要借助辅助手段来实现,下面介绍详细方法。
什么是m3u8?
m3u8是m3u的一种,是utf-8格式的,Apple 为了提高流播效率开发的技术,特点是将流媒体切分为若干 TS 片段(比如每10秒一段),然后通过一个扩展的 m3u 列表文件将这些 TS 片段集中起来供客户端播放器接收。可以做多码率的适配,根据网络带宽,客户端会自动选择一个适合自己码率的文件进行播放,保证视频流的流畅。
html5的video标签实现对HLS(m3u8格式)的支持方法
<script src="https://cdn.jsdelivr.net/hls.js/latest/hls.min.js"></script>
<video id="video"></video>
<script>
if(Hls.isSupported()) {
var video = document.getElementById('video');
var hls = new Hls();
hls.loadSource('http://www.streambox.fr/playlists/test_001/stream.m3u8');
hls.attachMedia(video);
hls.on(Hls.Events.MANIFEST_PARSED,function() {
video.play();
});
}
</script>
来源:http://www.qietu.com/hml5-video-m3u8-hls-min-js/
联网时代让电视这棵老树开出新花——内容大爆炸,一直以来的被动观看变得越来越多互动。然而我们却再也无法简单用一个数字键就切换到想看的节目,看一个内容要点很多次,观看路径被大大延长了。这恐怕也是IPTV/OTT以及有线互动电视的最大痛点,虽然运营商在EPG/UI和遥控器层面一直在努力,但截至目前效果并不理想,成为了电视用户在互动体验中的最大不足。
流媒体君新近体验了一个IPTV创新产品——纸屏(点看),打开了缩短IPTV/OTT大屏观看路径的新思路。
所谓纸屏(点看)是指通过用特定的点看笔或点看遥控器,轻点纸质介质上的图文,即可将对应的媒资内容(视频、应用等)在电视机上瞬间播放的电视体验新模式,而传统模式的投屏业务,必须以电子屏为访问入口。而纸屏(点看),则将更为普及的印刷品作为访问线上内容的入口、门户。
所见所点,内容即入口,是纸屏(点看)的最大优势。具有丰富的应用场景运营与想象空间。可应用于大屏、小屏;可应用于互联网公网、运营商专网;可满足于各年龄段的需求、尤其是老幼群体;可应用于视频内容运营、传统纸书升级、购物旅游生活等等。
https://v.qq.com/x/page/a0817f2ihe8.html(观看体验视频网址)
流媒体网认为,在点看这种应用新模式下,哪怕所需要播放的内容或业务处于再深的层级,都能通过点看这一简单动作被激活、播放。这对于电视大屏上内容的运营和融合生态的业务构建,具有极其便捷的优势。虽然看似有纸质媒介的壁垒,但是如果细思,不仅仅从产品角度,而是从运营角度考量,这里具备了极大的商业空间。
目前,该纸屏的点看业务,已经在四川电信IPTV上正式商用,平台能力覆盖1000万户4K及全4K机顶盒用户。四川电信为此专门推出了带有语音+点看功能的遥控器,以及相关的纸屏点看卡、点看杂志、点看图书、点看DM单业务卡。
以下为流媒体君给大家带来的体验感知
一、入口稀缺下的新途径思考
内容是海量的,入口是稀缺的,很多内容养在深闺人未识,这可能是IPTV/互联网电视最大的供需矛盾。而点看-----内容即入口,恰恰为此提供了一个全新的解决途径。
1、 直播频道入口
不用一直按上下键选择,也不用记住频道号,点一下就可以。跟IPTV适配之后,回看、时移、暂停等都可以点一下就实现。
2、 点播内容入口
相比直播频道,丰富却又多变的点播,可能难以仅靠用一张印刷品完成目的,但是,在便利的印刷条件和成本下,DM投送或IPTV影视月刊、甚至专门的影视杂志,即可以形成可读性的刊物,又能通过点看的方式满足用户的观看需。
试想下,相比现在IPTV等电视大屏上为了推介内容,要根据所提示的“首页—影视—动作”等等路径指引而言,点看的确在便利和体验上更胜一筹。
3、 增值业务生态重构
IPTV大屏首页推荐位就那么多,很多新业务往往都难以被用户所看到,而这也成为影响增值业务收入的重要原因。
对于用户来说,往往所见即所得,不会有过多的精力去层层点看。
对于运营商来说,现有的业务生态过于垂直,用户直进直出,难以横向拓展,导致了大部分的流量成为了单次的低效流量。而业务横向打通,则面临着技术和平台的重构。
或许,通过点看的模式,借助第三方形态进行业务的重新组合,便能在一定程度上解决业务的曝光和重构问题。
4、 行业应用的引导入口
依托点看技术和产品,还可以衍生出很多行业性的应用拓展,甚至是单独的产品,如教育、阅读、游戏、医疗、旅游、购物等等。以教育为例,如果能跟名校名师合作,孩子用遥控器点一下课本或者习题册就有名师讲解,家长们肯定大力支持。再比如购物,可以跟当地的商超合作,结合电商,用遥控器点一下就能查看商品并下单,前景也是极具想象力。
客人点一下就可以通过电视大屏了解当地好吃好玩的
二、点看产品的实际体验感知
这个产品应用场景很多,但我们的体验环境是业务尚未部署的北京公网(移动、歌华宽带),所以有些在四川IPTV实现的功能遗憾无法体验,此次流媒体君只体验了点看图书。
将电视机与点看遥控器进行成功蓝牙配对后,就可以开始“点看”之旅啦。操作形式类似英语幼教领域非常流行的点读笔,只是这里将笔换成了点看遥控器!
闲言少叙,正式体验!
点看图书即属于基于纸屏点看功能所衍生出的新型产品,既保留纸书文字表达思想的深度和想象空间,又新增对文字抽象意义的视频形象展示,从平面变成有声有色,二次元变成三次元,提供了全新体验。此外,还有对书中故事的拓展,并且能互动。
1)流媒体君首先体验的是一本以幼教内容为主的小册子,包含三字经、手指操、小故事、古诗、小百科等等。
想看哪个点一下
https://v.qq.com/x/page/d0817s6qh28.html(观看体验视频网址)
测试总结:响应速度快,所见即所得,面对图册,喜欢哪个内容点哪个,避免了一层层找入口、找内容的繁琐;这种方式不仅仅适合幼教,也适合各种类型的内容。各种内容不会再受限于首页位置不够,而且每个人都可以拥有自己的首页,喜欢戏曲的点戏曲,喜欢武侠的点武侠。
2)绘本的整读和点读
点一下整读贴纸,就会自动读下去;而点读则是想读哪里点哪里。另外还有故事回顾和画面阅读,总之,可以用多种维度深度的去了解一个绘本,同时还具有极强的业务想象空间。
https://v.qq.com/x/page/x0817izv0pz.html(观看体验视频网址)
测试总结:整读顺畅,点读相较于只有声音的那种更加生动。可以焕发纸质书的新生机。
3)延展和互动
有内容的拓展延伸(点拓展延伸):《不管怎样都爱你》讲的是妈妈的爱,就会有《爱在这里》的延展,各种小动物现身说法。
还有知识和能力的拓展延伸(点互动),通过互动小游戏,让孩子知道动物的保护色、培养一些良好的生活习惯等等。
找到相应贴纸,用遥控器方向键放到合适位置
另外,还有近似当下流行的AR体验——点纸板屏幕上就出来相应场景,然后点不同的动物形象它们就会立体化的出现,让孩子们玩中学、学中玩。
测试总结:将知识与游戏结合起来,而且以用遥控器点为主,不管低龄幼儿还是任何人,都可以顺畅操作。尤其对于大屏互动而言,意义非凡。
据悉,后续还将制作文学、科技、历史、地理、字词典等各类“点看图书”,仅图书点看一项便有诸多想象空间。而医疗、旅游、视频内容等等可开发的产品众多。同一个平台,可以为用户定制、提供足够多个内容、风格迥异且低成本的EPG、web页面,可帮助众多SP实现低成本向用户推荐自己内容的平台!
写在最后的话:
对于纸屏(点看)这个产品,评价较为分化,有认为该产品过重,遥控器、纸屏、推广都存在着较大的门槛,难以成规模;也有人认为该业务“一点即达、内容即入口”具有极大的商业价值。
流媒体网认为,以上两种说法都存在一定的道理,如果仅仅将纸屏(点看)看着一个产品或业务的话,其优劣都较为明显。但是,如果把他看成是一种运营或给大屏赋能的模式呢?那么在技术、市场、产品具备的情况下,将拥有极其充分运营空间和价值!
2019年1月15日,在战略转型和产业变革的机遇期,流媒体网联合易目唯共同举办的金屏奖,将以“运•赢下半场”为主题,围绕视听行业价值创新、运营创新、产品创新等方面设置多个奖项。了解更多金屏奖详情,请关注流媒体网,今日流媒体小程序!
要选型一个流媒体服务器,故搜罗网上资料,整理出以下内容供参考
出处皆已标注链接
目录
流媒体协议
直播流媒体协议
理解RTMP、HttpFlv和HLS的正确姿势
流媒体文件支持格式
市面上主流的流媒体服务器归纳
38款流媒体服务器开源软件
主流流媒体服务器介绍:
AMS/wowza/red5/SRS主要功能对照分析:
AMS(FMS)流媒体服务器系统
wowza流媒体服务器系统
Red5流媒体服务器系统
SRS流媒体服务器系统
SRS之深入浅出看流媒体:
Linux下视频流媒体服务器搭建详解
websocket+Media Source Extensions API
EasyDarwin
最终选型
其他资料
流媒体协议
RTMP&HLS(专用协议流式)实时流传输既可传输实况直播,也可传输完整的音视频文件
HTTP渐进式(基于TCP):顺序流媒体不可用于实况直播,仅能传输完整的音视频文件
原则上,RTSP,RTMP,HTTP 都可以做直播和点播,
但一般做 直播用 RTSP和RTMP,做点播用 HTTP。
直播流媒体协议
https://blog.csdn.net/u011216417/article/details/72835402
RTP/RTCP/RTSP/WebRTC/RTMP/HLS
理解RTMP、HttpFlv和HLS的正确姿势
https://www.jianshu.com/p/32417d8ee5b6
流媒体文件支持格式
MP4
3GP
FLV
F4V
MPEG-TS
市面上主流的流媒体服务器归纳
FMS(AMS)(Flash mediaserver) 商业级 收费
Red5 开源 (稳定性与性能差,大多作为个人使用)
Nginx-RTMP(主要用于点播)开源
Wowza (Wowza Streaming Engine) 商业级 收费
SRS (Simple Rtmp Server)
阿里云(视频点播/直播等) 商业级 收费
若有兴趣可以看看其他市面上的流服务器:
38款流媒体服务器开源软件
https://www.cnblogs.com/lidabo/p/7418505.html
主流流媒体服务器介绍:
https://blog.csdn.net/datamining2005/article/details/55260491
FMS 4.x版本可破解版本
Red5稳定性不够
Nginx推流伪流媒体(http渐进式)
AMS/wowza/red5/SRS主要功能对照分析:
http://www.cuplayer.com/player/PlayerCodeCourse/2017/11093244.html
AMS(FMS)流媒体服务器系统
Flash Media Server (简称FMS),后更名为Adobe Flash Media Server (简称AMS)。它是较早(2002年)做流媒体服务器产品的,原公司是Macromedia,后来被Adobe收购了,它是流视频和实时通信领域业界领先的解决方案,该产品可以快速搭建起一套流媒体直播、点播服务器。
wowza流媒体服务器系统
wowza全名是Wowza Streaming Engine,是一款非常优秀的流媒体服务器产品。也算是除了FMS产品之外的一个老版子产品,产品发布于2007年,他在HLS(m3u8)分发方面是非常不错的。从wowza2.0到现在的wowza4.5,都曾关注和使用过他们的产品,总体来说性价比还是蛮高的。
Red5流媒体服务器系统
Red5 (media server) 流媒体系统,免费开源的是它最大的优点,也因此有很多用户在使用它们的产品,然后不足在于占用服务器资源较高。
SRS流媒体服务器系统
SRS(Simple Rtmp Server)定位是运营级的互联网直播服务器集群,追求更好的概念完整性和最简单实现的代码,这是该产品自己官方的介绍。值得一说的是,前面几个产品都是国外的,而这个作者是国内的。
SRS之深入浅出看流媒体:
https://blog.csdn.net/zjqlovell/article/details/50786040
Linux下视频流媒体服务器搭建详解
https://blog.csdn.net/u011596455/article/details/79431116
websocket+Media Source Extensions API
当然也看到有人提出 websocket+Media Source Extensions API(比较小众就不尝试了,等下出问题了歇逼)
初级调研排除收费与Red5,接下来准备对比Nginx-RTMP于SRS和DSS这三种流服务器。
因为目标APP暂不提供直播功能,在点播领域的话使用HTTP协议即可。
EasyDarwin
恰巧国内有专门做开源解决方案EasyDarwin封装了一整套流媒体框架
http://www.easydarwin.org/pdf/EasyDarwin_Introduction.pdf
所以花时间研究了下EasyDarwin这套解决方案。
发现!你妹,EasyDSS解决方案也分为开源和商业,开源的项目没卵用,真正有用的项目是要钱的,基础的点播模块还需要商业版才能使用,凸,故放弃。
流媒体平台框架 EasyDarwin
https://www.oschina.net/p/easydarwin
EasyDarwin开源项目(7Project):
EasyDarwin开源项目至今包括有:EasyDarwin(开源流媒体服务器)、EasyCMS(中心管理服务器)、EasyCamera(云摄像机服务)、EasyClient(云平台客户端)、EasyAACEncoder(开源音频编码项目)、EasyAudioDecoder(开源音频解码项目)、EasyProtocol(开源云平台协议)等多个项目,完整地构架了一套开源流媒体云平台方案。
EasyDarwin商业项目(8Project)
同时,EasyDarwin开源团队也开发了很多流媒体方面的商业项目,包括有:
EasyPlayer 是一款精炼、高效、稳定的流媒体播放器,分为RTSP版和Pro版本,EasyPlayer RTSP版本支持Windows(支持多窗口、包含ActiveX,npAPI Web插件)、Android、iOS多个平台,EasyPlayerPro支持Android、iOS,支持各种各样的流媒体音视频直播/点播播放,项目地址:https://github.com/EasyDarwin/EasyPlayer;
EasyPusher 是一款简单、高效、稳定的一款标准RTSP/RTP协议直播推送库,支持将H.264/G.711/G.726/AAC等音视频数据推送到RTSP流媒体服务器进行低延时直播或者视频通信,支持Windows、Linux、ARM、Android、iOS等平台,EasyPusher配套EasyDarwin流媒体服务器、EasyPlayer RTSP播放器适用于特殊行业的低延时应急指挥需求!项目地址:https://github.com/EasyDarwin/EasyPusher;
EasyNVR 摄像机(通用RTSP、Onvif摄像机)接入服务,EasyNVR能够通过简单的摄像机通道配置、存储配置、云平台对接配置、CDN配置等,将统监控行业里面的高清网络摄像机IP Camera、NVR、移动拍摄设备接入到EasyNVR,EasyNVR能够将这些视频源 的音视频数据采集到设备端,进行全平台终端直播、录像存储、录像检索和录像回放。并且EasyNVR能够将视频源的直播数据对接到第三方视频平台、CDN网络,实现互联网直播分发,具体接入方法见https://github.com/EasyDarwin/EasyNVR;
EasyIPCamera 是一套精炼、高效、稳定的RTSP服务器组件,调用简单灵活,轻松嵌入部署到IPCamera中,并发性能属于行业领先水平,广泛应用于IPCamera RTSP服务、Android/Windows投屏/同屏直播服务,例如课堂教学同屏、会议同屏、广告投放同屏等!项目地址:https://github.com/EasyDarwin/EasyIPCamera;
EasyRTMP 是一套调用简单、功能完善、运行高效稳定的RTMP功能组件,经过多年实战和线上运行打造,支持RTMP推送断线重连、环形缓冲、智能丢帧、网络事件回调,支持Windows、Linux、arm(hisiv100/hisiv200/hisiv300/hisiv400/etc..)、Android、iOS平台,支持市面上绝大部分的RTMP流媒体服务器,包括Red5、Ngnix_rtmp、crtmpserver等主流RTMP服务器,能够完美应用于各种行业的直播需求,手机直播、桌面直播、摄像机直播、课堂直播等等方面!项目地址:https://github.com/EasyDarwin/EasyRTMP;
EasyRTSPClient 是一套简单、稳定、高效、易用的RTSPClient工具库,支持Windows、Linux、ARM、Android、iOS等几乎所有平台,支持RTP Over TCP/UDP,支持断线重连,能够接入市面上99%以上的IPC,调用简单且成熟稳定,能广泛应用于播放器、NVR、流媒体系统级联等产品中!项目地址:https://github.com/EasyDarwin/EasyRTSPClient;
EasyHLS 是一套简单、可靠、高效、稳定的HLS直播切片SDK,能够将实时的H.264视频和AAC音频流实时切片成可供WEB、Android、iOS、微信等全平台客户端观看的HLS(m3u8+ts)直播流,搭配EasyRTSPClient、EasyAACEncoder等项目,可将大部分的安防摄像机对外进行HLS直播发布,同时也可灵活集成在各种流媒体服务中!项目地址:https://github.com/EasyDarwin/EasyHLS;
EasyRMS 是一套基于HLS协议的录像与回放服务器,EasyRMS能够将RTSP源获取到本地进行本地存储或者存储到阿里云对象存储OSS云存储等第三方存储平台,同时EasyRMS提供录像的检索与查询接口,检索出录像的HLS地址进行录像回放!项目地址:https://github.com/EasyDarwin/EasyRMS;
EasyDarwin云平台
EasyDarwin云平台是一套由EasyDarwin、EasyCMS、EasyCamera、EasyClient、nginx、redis构成的完整云平台架构,支持分布式、跨平台、多点部署,流媒体服务器支持负载均衡,按需直播,非常适用于互联网化的安防、智能家居、幼教平台、透明厨房、透明家装等多个行业应用:
最终选型
最后纠结的将范围缩短为三个项目:DSS和SRS和Nginx
接下来分析这两种流媒体对视频点播的支持程度
分别展开介绍:
1.DSS:苹果公司的Darwin Streaming Server(简称DSS)完全免费,没有任何功能限制,且符合国际标准。但DSS在linux上的安装比较繁琐,所以大多数人会选择easyDSS(就是上面提到的EasyDarwin)
2.SRS:(Simple Rtmp Server)一个采用MIT协议授权的国产的简单的RTMP/HLS 直播服务器,其核心的价值理念在于简单高效
一位疯狂舔SRS的小哥哥说<SRS超级强,无所不能秒杀其他同类媒体服务器>
https://blog.51cto.com/renjunjie622/1782407
后SRS官方改名为:ossrs
github:
产品定位:https://github.com/ossrs/srs/wiki/v1_CN_Product
产品发展:https://ossrs.net/srs.release/releases/
总的来看SRS还是可以的…
附带资料:
完整的直播+点播全端解决方案 https://blog.csdn.net/dipolar/article/details/64122168
3.Nginx-RTMP:
战斗民族俄罗斯人民开发的一款NGINX的流媒体插件,除了直播发布音视频流之外具备流媒体服务器的常见功能
比如推拉流媒体资源
基于HTTP的FLV/MP4 VOD点播
HLS (HTTP Live Streaming) M3U8的支持
基于http的操作(发布、播放、录制)
可以很好的协同现有的流媒体服务器以及播放器一起工作
在线调用ffmpeg对流媒体进行转码
H264/AAC音视频编码格式的支持
linux/BSD/MAC系统的支持
因为我们如果做的点播的话不涉及直播板块,几乎还是使用HTTP协议,根据之前的一篇博文:(NGINX-RTMP风生水起有几个很重要的因素。首先2012年开始CDN业务开始快速增长,随之直播业务也需求暴涨,没有特别满意的流媒体服务器;其次,NGINX在HTTP领域绝对是霸主,大家对于NGINX系的熟悉程度很高,便于维护;再次,直播点播使用一套服务器,很有诱惑力,这可以算是“万金油”效应,很多套服务器搞得焦头烂额,肯定一套服务器能解决问题;最后,CDN是运维比技术牛逼的行业,运维的信心都是运行出来的,NGINX运行那么良好,那么NGINX-RTMP也肯定不错。)
综上所述,DSS我对他没有什么好感,SRS是挺牛逼的但是总觉得用的话是大材小用,毕竟人家还是主做流直播的,转点播也需要一点功夫。个人觉得可以上一波NGINX,一个原因是主要目标是视频点播,上的还是HTTP服务,其次是Nginx这块我们可能上手也比较OK。
其他资料
https://www.idcicp.com/assist/assistInfo_22381.html
CPU:两颗至强E5530
内存:16GB
硬盘:2T
操作系统:CentOS 6.5 64bit
这样子的一个配置大致是能满足一个200-300人同时在线的短视频app的需求的
http://www.webxun.com/newsxq_201.html
暂不考虑直播功能(美颜的算法与聊天室功能还是服务器压力)
https://bbs.csdn.net/topics/300252276
lvc的live555的server端也小有名气
https://blog.csdn.net/dxpqxb/article/details/83012950
srs andrioid直播推流(可以学习一下,不过先不碰直播这个板块吧)
https://blog.csdn.net/yb1314111/article/details/84983568
抖音短视频源码中视频排序模块热门列表解决方案
https://blog.csdn.net/vn9PLgZvnPs1522s82g/article/details/78780562
利用Simple-RTMP-Server搭建RTMP和HLS直播服务
https://blog.csdn.net/elesos/article/details/80899787
利用Nginx搭建RTMP视频直播,点播服务器,ffmpeg推流,回看
下载的一些p2p流媒体服务的研究资料
链接:https://pan.baidu.com/s/1hwMk_YdeGFI1nwC6BVM3XQ
提取码:rcjq
————————————————
版权声明:本文为CSDN博主「我的浪漫与极端」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/u013202518/java/article/details/89956990
*请认真填写需求信息,我们会在24小时内与您取得联系。