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。

webrtc

(图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. 博客园
欢迎转载,请保留著作信息
原文地址:https://www.cnblogs.com/dehai168/p/4726217.html