Web在线视频方案浅谈

• 写在前面

最近因为项目预研,花时间和精力了解并总结了现如今web在线视频的一些解决方案,由于资历薄浅,措辞或是表述难免出现遗漏,还望各位海涵,有好的建议或方案还望赐教,定细心学习品位.

如今的web技术日新月异,凭借着自身与平台无关的特性发展的异常火爆,各种新技术的出现,催生了大前端的概念,各种系统都开始向着B/S架构靠拢,在公司产品向着web化进化的过程中,难免会遇到各种各样的问题,其中在线视频就是一个比较难的突破点,尤其是在pc/移动端、浏览器兼容性、时效性、性能等方面都或多或少的影响着现有各种解决方案的步伐，当然我也相信随着html5带动起来的软硬件web技术的发展大潮，必定在最后出现一种比较完美解决方案。

• 概述

Web在线视频从种类分主要分2种，直播和回放，它们各自的业务和需求都不尽相同；从Web视频宿主分类那就只有浏览器(或webbrowers)，说起浏览器在这里稍微多说几句，现在的浏览器可谓品种繁多，并且浏览器的品质也层次不齐，不过从内核划分的话就主要有这几种了(trident/gecko/presto/webkit(hot)/blink),那剩下的就是给这些内核穿衣服了，然后包装成各式各样的浏览器，有几个国内的浏览器就比较恶心了；从Web视频的传输来讲主要应该分为(websocket/socket);从Web视频支持的视频格式不好划分，因为使用不同的技术这个格式也不尽相同；

• WebRTC

WebRTC(百度百科)，名称源自网页实时通信（Web Real-Time Communication）的缩写，是一个支持网页浏览器进行实时语音对话或视频对话的技术，是谷歌2010年以6820万美元收购Global IP Solutions公司而获得的一项技术。同时，Google也希望和致力于让WebRTC的技术成为HTML5标准之一，可见Google布局之深远。WebRTC提供了视频会议的核心技术，包括音视频的采集、编解码、网络传输、显示等功能，并且还支持跨平台：windows，linux，mac，android。

(图1：WebRTC架构图 (图片来源百度百科))

	是否插件	支持商	优点	缺点
PC浏览器端	×	google	浏览器端简单调用，可以高度自定义业务集成,马上并入Html5趋于标准	未普及、浏览器支持程度不够、服务器编译架设麻烦
移动浏览器端	×	google

下面是园友对WebRTC的研究：

1. RTC.Blacker
2. 孤竹君

PS：WebRTC 是谷歌支持的开源技术，致力于推进到HTML5标准当中，目前大部分浏览器已经在支持当中，如果单纯的开发浏览器端-浏览器端的app，那么只需要掌握一些调用接口知识和前端功底，如果要实现其他视频采集源，那就要去研究和编译WebRTC服务器端代码，并进行改造到符合自己业务需要。

• Html5

万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言（HTML5）的第五次重大修改。2014年10月29日，万维网联盟宣布，经过接近8年的艰苦努力，该标准规范终于制定完成。

1. Video
   HTML5 规定了一种通过 video 元素来包含视频的标准方法，该元素目前支持三种视频格式Ogg、MPEG4、WebM

   	是否插件	支持商	优点	缺点
   PC浏览器端	×	w3c	浏览器端简单调用，是页面标准元素,PC移动端通用	正在普及中、支持视频单一、直播比较困难
   移动浏览器端	×	w3c

   视频格式细说参考：勿在浮沙筑高台      VIDEO ON THE WEB

2. Canvas+JavaScript+WebSocket+Node.js
   这个方案是在我搜索资料中无意发现的一种，觉得比较新意，所以列在这里，可以作为一种参考或是实验的方式。请参考下面文章
   使用 WebSockets 进行 HTML5 视频直播

PS:一个新鲜的技术或是标准都是需要一个发展的过程，我们在选择技术和标准的时候可以适当考虑一下新技术新标准，以此来推动该项技术或是标准的发展，不过这个听着简单做起来还是比较难的。现在YouTube已经开始全面html5化了。国内的优酷在看视频的时候已经有了html5选项。

• ActiveX

ActiveX(百度百科) 是一个开放的集成平台，为开发人员、 用户和 Web生产商提供了一个快速而简便的在 Internet 和 Intranet 创建程序集成和内容的方法。 使用 ActiveX, 可轻松方便的在 Web页中插入 多媒体效果、 交互式对象、以及复杂程序，创建用户体验相当的高质量多媒体CD-ROM 。ActiveX插件以前也叫做OLE控件或OCX控件，它是一些软件组件或对象，可以将其插入到WEB网页或其它应用程序中。

	是否插件	支持商	优点	缺点
PC浏览器端	√	microsoft	基于windows平台技术，可以通过js调用接口开发。对PC播放器简单封装，不需二次开发	只支持IE浏览器，安全性不高
移动浏览器端	-	-

PS：通过对该插件进行NPAPI接口的封装以后，可以在Chrome或是Firefox中调用，不过这项支持正在被google等公司抛弃。

• Silverlight

Microsoft Silverlight是一个跨浏览器的、跨平台的插件，为网络带来下一代基于.NETFramework的媒体体验和丰富的交互式应用程序。Silverlight提供灵活的编程模型，并可以很方便地集成到现有的网络应用程序中。Silverlight可以对运行在Mac或Windows上的主流浏览器提供高质量视频信息的快速、低成本的传递。Microsoft .NET Framework3.0（Windows 编程基础结构）中的呈现技术XAML（可扩展应用程序标记语言）遵循WPF(Windows Presentation Foundation），它是Silverlight呈现功能的基础。对于开发设计人员而言，Silverlight是一种融合了微软的多种技术的Web呈现技术。它提供了一套开发框架，并通过使用基于向量的图像图层技术，支持任何尺寸图像的无缝整合，对基于asp .net、AJAX在内的Web开发环境实现了无缝连接。

	是否插件	支持商	优点	缺点
PC浏览器端	√	microsoft	可以使用C#、js语言开发调用、重点加强视频功能	未普及、被Html5浪潮打压导致未迅猛发展
移动浏览器端	-	-

PS：这个技术的出现，可谓是一统天下的气势，随着时间的流逝，“主角光环“在慢慢的消失，究其原因我估计没有几个人能够比较全面的分析或是说明白。希望在特定环境或领域能够有所作为。

• Flash

Flash又被称之为闪客，是由macromedia公司推出的交互式矢量图和 Web 动画的标准，由Adobe公司收购。网页设计者使用 Flash 创作出既漂亮又可改变尺寸的导航界面以及其他奇特的效果。Flash的前身是Future Wave公司的Future Splash，是世界上第一个商用的二维矢量动画软件，用于设计和编辑Flash文档。1996年11月，美国Macromedia公司收购了Future Wave，并将其改名为Flash。后又于2005年12月3日被Adobe公司收购。Flash通常也指Macromedia Flash Player（现Adobe Flash Player）。2012年8月15日，Flash退出Android平台，正式告别移动端。

	是否插件	支持商	优点	缺点
PC浏览器端	√	adobe	PC端太流行，各大视频网站只要采取技术	漏洞太多、浏览器容易崩溃
移动浏览器端	-	-

PS：从开始到现在一直被模仿从未被超越，不过随着退出移动界，html5的兴起，它的存亡也可能会是稍纵即逝，让我们珍惜现在所拥有的，怀着一颗感恩的心来静静的等待，等待。

• 总结

1. 整体看来短期内ActiveX技术和Flash技术还是会作为Web视频的首选解决方案。
2. Html5的视频标准正在逐渐流行起来,对于移动端的浏览器视频方案目前来看只剩下html5标准，所以很期待。
3. 对于一些特定行业或商务的应用还是可以选择比较适合自己的方案，比如Silverlight。
4. 很期待园友们提出其他方案和好的建议，供大家参考。

• 参考资料

1. 百度百科
2. 博客园