无 Flash 时代,让直播拥抱 H5(一)


直播是脱离于文字、图片来说,另外一种社交的方式。各大平台也在深耕这一领域,淘宝直播,花椒,映客,Now 直播,企鹅电竞。本人就职于腾讯 Now 直播前端开发,感觉直播能够尝试的领域真的太多太多,但是,Web 在这块一直是一个痛点。由于没有现成操作流的接口,只能简简单单的通过添加 video.src 尴尬的播放几段回放...... 这样造成的后果就是,在 Web 上,我们根本体会不到实时流畅的观看体验。

而且,根据 8 月份腾讯财报内容,直播贡献的收入增长的飞快。现在,我们也想让 Web 体会一把能够实时观看直播的方式,这应该怎么做呢?W3C 提出了 MSE 的标准,表义上来说就是,让前端能够操作视频流。HLS.js,FLV.js 本身也是基于 MSE 开发的。MSE 的出现,不仅能让 Web 接上直播,而且还可以根据协议自己控制相关的延迟率。

那直播,又和我们今天的主题 MSE/video 有啥关系呢?

在没有 MSE 的时候,直播形式要么在 flash 中播放,要么在客户端播放,要么利用 HLS 来手机端播放。不仅 HTML5 原生播放器的场景几乎可以说是没有,而且 H5 播放的延时性还非常高。最多我们也只能控制一下 视频播放 的表层工作,比如,暂停,播放,快进。例如:

<audio id="demo" src="audio.mp3"></audio>
<div>
  <button onclick="document.getElementById('demo').play()">播放声音</button>
  <button onclick="document.getElementById('demo').pause()">暂停声音</button>
  <button onclick="document.getElementById('demo').volume+=0.1">提高音量</button>
  <button onclick="document.getElementById('demo').volume-=0.1">降低音量</button>
</div>

这样,感觉和写 HTML 没啥区别,我们也并不能对流做一下神奇的操作,比如,跳帧,音视频同步,拿到 I/B/P 帧生成视频图像之类的。这其实只是给了我们另外一个界面的 UI API 而已,并不能让 所有能用代码写的程序,都可以用JavaScript来写 这一非常宏伟的目标。

后面,各台平台支持了 MSE,前端开发者从此也可以进行音视频的相关开发。因为,MSE 的主要工作是可以创建 media stream,并且喂给 video/audio 进行播放。从此,前端可以和写 C++ Java 的人有了共同的话题--二进制流的操作。

MSE 简介

MSE 是实际上是一系列 API 的集合。它的全称为: MediaSourceExtensions,看名字差不多都可以知道,MSE 就是一系列接口的拓展集合,里面包括了一系列 API:Media Source,Source Buffer 等。

我们来看一下 MSE 是如何完成基本流的处理的。

var vidElement = document.querySelector('video');

if (window.MediaSource) {
  var mediaSource = new MediaSource();
  vidElement.src = URL.createObjectURL(mediaSource);
  mediaSource.addEventListener('sourceopen', sourceOpen);
} else {
  console.log("The Media Source Extensions API is not supported.")
}

function sourceOpen(e) {
  URL.revokeObjectURL(vidElement.src);
  var mime = 'video/webm; codecs="opus, vp9"';
  var mediaSource = e.target;
  var sourceBuffer = mediaSource.addSourceBuffer(mime);
  var videoUrl = 'droid.webm';
  fetch(videoUrl)
    .then(function(response) {
      return response.arrayBuffer();
    })
    .then(function(arrayBuffer) {
      sourceBuffer.addEventListener('updateend', function(e) {
        if (!sourceBuffer.updating && mediaSource.readyState === 'open') {
          mediaSource.endOfStream();
        }
      });
      sourceBuffer.appendBuffer(arrayBuffer);
    });
}

上面的代码完成了相关的获取流和处理流的两个部分。其中,主要利用的是 MS 和 Source Buffer 来完成的。URL.revokeObjectURL 主要是用来生成一个内联链接的,例如: blob:http://villainhr/demo_123d1dticn1@df1

MSE 中主要内容就是 MS 和 SourceBuffer。后面几篇内容将是关于 H5 直播技术的一整个系列。

另外,腾讯 TLC 直播大会 5 折票只剩 3 天!!!

如果对直播感兴趣的同学,可以快速下手,今年没了,估计只能等明年的。

原文发布于微信公众号 - 前端小吉米(villainThr)

原文发表时间:2017-10-08

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏lonelydawn的前端猿区

Vuex从入门到精通(三)

开始 前言 这一节,我们将通过一个实战案例 : 动态展示从后台返回的新闻列表 允许用户根据来源, 和 内容&标题 中的关键字对新闻列表进行筛选 来加...

2919
来自专栏程序人生

如何提高代码质量?

好的程序员从来不靠格子衫或者颜值吃饭,就像你家 C 罗明明可以靠脸,却非要用不断精进的身体和技术迷倒你。

990
来自专栏MixLab科技+设计实验室

设计师会编程、程序员懂艺术:Semi Flat Design

本公众号定期更新关于 设计师、程序员发挥创意 互相融合的指南、作品。 主要技术栈: nodejs、react native、electron 本号正在更新的系列...

2946
来自专栏QQ会员技术团队的专栏

小兴逛Google I/O 2017(day3实况)

作者介绍:陈志兴,Google I/O 2017大会的小时光茶社特派员 ,腾讯SNG增值产品部内容中心Android组leader,主要负责手Q个性化业务、手Q...

18810
来自专栏Renderbus云渲染农场

适合本科生的建筑渲染软件有哪些?软件各有什么特点?

基本主流的建筑辅助设计软件VRay都能很好支持,如:rhino,sketchup,Revit,及建筑可视化的3ds max,Unreal等。

1716
来自专栏顶级程序员

Python自动生成表情包

源 / 创业智库 文 / 唐一 作为一个数据分析师,应该信奉一句话----"一图胜千言"。不过这里要说的并不是数据可视化,而是一款全民向的产品形态----表情...

3788
来自专栏CSDN技术头条

八个 Python 数据生态圈的前沿项目

Galvanize 最近在旧金山参加了 Dato 数据科学峰会,这次会议聚集了千余名来自业界和学术界的数据科学研究人员,他们交流并探讨关于数据科学、机器学习应用...

1917
来自专栏AzMark

3天破9亿!上万条评论解读《西虹市首富》是否值得一看

作者介绍:徐麟,目前就职于上海唯品会产品技术中心,哥大统计数据狗,从事数据挖掘&分析工作,喜欢用R&Python玩一些不一样的数据

1373
来自专栏斑斓

或许是领域建模的真相?

我们一提及领域建模,就好像回到了石器时代。然而这个谜题至今还未解决,就好像穴居人的生存方式,我们只能猜测、推测以及演绎,却不能真实复现。 Martin Fow...

2885
来自专栏程序你好

寻求Java微服务的简单性

简单性有很大的价值。当事情很简单时,它们更容易理解、更容易扩展和更容易修改。他们是更好的。简洁是对架构或框架的终极褒奖。 在本文中,我将研究四个不同的框架—-S...

914

扫码关注云+社区