flv.js实战入门攻略使用flv.js做直播_直播小白知识

为什么要在这个时候探索flv.js做直播呢?原因在于各大浏览器厂商已经默认禁用Flash,之前常见的Flash直播方案需要用户同意使用Flash后才可以正常使用直播功能,这样的用户体验很致命。在介绍flv.js之前先介绍下常见的直播协议以及给出我对它们的延迟与性能所做的测试得出的数据。如果你看的很吃力可以先了解下音视频技术的一些基础概念。常见直播协议RTMP

flv.js实战入门攻略使用flv.js做直播

为什么要在这个时候探索flv.js做直播呢?原因在于各大浏览器厂商已经默认禁用Flash,之前常见的Flash直播方案需要用户同意使用Flash后才可以正常使用直播功能,这样的用户体验很致命。

flv.js实战入门攻略使用flv.js做直播_直播小白知识

在介绍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
RTMPFlash1s430M11%
HTTP-FLVVideo1s310M4.4%
HLSVideo20s205M3%

在支持浏览器的协议里,延迟排序是: 
RTMP = HTTP-FLV = WebSocket-FLV < HLS
而性能排序恰好相反: 
RTMP > HTTP-FLV = WebSocket-FLV > HLS
也就是说延迟小的性能不好。

可以看出在浏览器里做直播,使用HTTP-FLV协议是不错的,性能优于RTMP+Flash,延迟可以做到和RTMP+Flash一样甚至更好。

flv.js 简介

flv.js是来自Bilibli的开源项目。它解析FLV文件喂给原生HTML5 Video标签播放音视频数据,使浏览器在不借助Flash的情况下播放FLV成为可能。

flv.js 优势

  • 由于浏览器对原生Video标签采用了硬件加速,性能很好,支持高清。

  • 同时支持录播和直播

  • 去掉对Flash的依赖

flv.js 限制

  • FLV里所包含的视频编码必须是H.264,音频编码必须是AAC或MP3, IE11和Edge浏览器不支持MP3音频编码,所以FLV里采用的编码最好是H.264+AAC,这个让音视频服务兼容不是问题。

  • 对于录播,依赖 原生HTML5 Video标签 和 Media Source Extensions API

  • 对于直播,依赖录播所需要的播放技术,同时依赖 HTTP FLV 或者 WebSocket 中的一种协议来传输FLV。其中HTTP FLV需通过流式IO去拉取数据,支持流式IO的有fetch或者stream

  • flv.min.js 文件大小 164Kb,gzip后 35.5Kb,flash播放器gzip后差不多也是这么大。

  • 由于依赖Media Source Extensions,目前所有iOS和Android4.4.4以下里的浏览器都不支持,也就是说目前对于移动端flv.js基本是不能用的。

flv.js依赖的浏览器特性兼容列表

  • HTML5 Video

  • Media Source Extensions

  • WebSocket

  • HTTP FLV: fetch 或 stream

flv.js 原理

flv.js只做了一件事,在获取到FLV格式的音视频数据后通过原生的JS去解码FLV数据,再通过Media Source Extensions API 喂给原生HTML5 Video标签。(HTML5 原生仅支持播放 mp4/webm 格式,不支持 FLV)

flv.js 为什么要绕一圈,从服务器获取FLV再解码转换后再喂给Video标签呢?原因如下:

  1. 兼容目前的直播方案:目前大多数直播方案的音视频服务都是采用FLV容器格式传输音视频数据。

  2. FLV容器格式相比于MP4格式更加简单,解析起来更快更方便。

flv.js兼容方案

由于目前flv.js兼容性还不是很好,要用在产品中必要要兼顾到不支持flv.js的浏览器。兼容方案如下:

PC端

  1. 优先使用 HTTP-FLV,因为它延迟小,性能也不差1080P都很流畅。

  2. 不支持 flv.js 就使用 Flash播放器播 RTMP 流。Flash兼容性很好,但是性能差默认被很多浏览器禁用。

  3. 不想用Flash兼容也可以用HLS,但是PC端只有Safari支持HLS

移动端

  1. 优先使用 HTTP-FLV,因为它延迟小,支持HTTP-FLV的设备性能运行 flv.js 足够了。

  2. 不支持 flv.js 就使用 HLS,但是 HLS延迟非常大。

  3. HLS 也不支持就没法直播了,因为移动端都不支持Flash。

flv.js实战

说了这么多介绍与原理,接下来教大家如何用flv.js搭建一个完整的直播系统。
我已经搭建好了一个demo可以供大家体验。

搭建音视频服务

主播推流到音视频服务,音视频服务再转发给所有连接的客户端。为了让你快速搭建服务推荐我用go语言实现的livego,因为它可以运行在任何操作系统上。

  1. 下载livego,注意选对你的操作系统和位数。

  2. 解压,执行livego,服务就启动好了。它会启动RTMP(1935端口)服务用于主播推流,以及HTTP-FLV(7001端口)服务用于播放。

实现播放页

在react体系里使用react flv.js 组件reflv 快速实现。
先安装npm i reflv,再写代码:

import React, { PureComponent } from 'react';
import Reflv from 'reflv';

export class HttpFlv extends PureComponent {
  render() {
    return (
      <Reflv
        url={`http://localhost:7001/live/test.flv`}
        type="flv"
        isLive
        cors
      />
    )
  }
}

让以上代码在浏览器里运行。这是你还看不到直播,是因为还没有主播推流。

  • 你可以使用OBS来推流,注意要配置好OBS:
    <img width=”961″ alt=”screen shot 2017-06-07 at 5 41 32 pm” src=”https://user-images.githubuse…

  • 也可以使用ffmpeg来推流,推流命令ffmpeg%20-f%20avfoundation%20-i%20″0″ -vcodec h264 -acodec aac -f flv rtmp://localhost/live/test

flv.js延迟优化

按照上面的教程运行起来的直播延迟大概有3秒,经过优化可以到1秒。在教你怎么优化前先要介绍下直播运行流程:

  1. 主播端在采集到一段时间的音视频原数据后,因为音视频原数据庞大需要先压缩数据:

    • 通过H264视频编码压缩数据数据

    • 通过PCM音频编码压缩音频AAC数据

  2. 压缩完后再通过FLV容器格式封装压缩后的数据,封装成一个FLV TAG

  3. 再把FLV TAG通过RTMP协议推流到音视频服务器,音视频服务器再从RTMP协议里解析出FLV TAG。

  4. 音视频服务器再通过HTTP协议通过和浏览器建立的长链接流式把FLV TAG传给浏览器。

  5. flv.js 获取FLV TAG后解析出压缩后的音视频数据喂给Video播放。

知道流程后我们就知道从哪入手优化了:

  • 主播端采集时收集了一段时间的音视频原数据,它专业的叫法是GOP。缩短这个收集时间(也就是减少GOP长度)可以优化延迟,但这样做的坏处是导致视频压缩率不高,传输效率低。

  • 关闭音视频服务器的I桢缓存可以优化延迟,坏处是用户看到直播首屏的时间变大。

  • 减少音视频服务器的buffer可以优化延迟,坏处是音视频服务器处理效率降低。

  • 减少浏览器端flv.js的buffer可以优化延迟,坏处是浏览器端处理效率降低。

  • 浏览器端开启flv.js的Worker,多进程运行flv.js提升解析速度可以优化延迟,这样做的flv.js配置代码是:

{
     enableWorker: true,
     enableStashBuffer: false,
     stashInitialSize: 128,
}

这里是优化后的完整代码

阅读原文

海计划公众号
(0)
上一篇 2020/04/05 01:53
下一篇 2020/04/05 01:53

您可能感兴趣的内容

  • iTyped.js基础指南_简单的 JavaScript 打字动画效果

    iTyped.js基础指南 官方网址:https://ityped.surge.sh/ GitHub:https://github.com/luisvinicius167/ityp…

    2020/03/06
  • Js调试:console对象入门基础_调试入门指南

    console.log(),console.info(),console.debug()console.log方法用于在控制台输出信息。它可以接受一个或多个参数,将它们连接起来输出。console.log(‘Hello World’)
    // Hello World
    console.log(‘a’, ‘b’, ‘c’)
    // a b c
    console.log

    2020/03/29
  • Redis在Php项目中的实际应用场景小白常识_redis使用攻略

    商品维度计数对商品喜欢数,评论数,鉴定数,浏览数进行计数
    说起电商,肯定离不开商品,而附带商品有各种计数(喜欢数,评论数,鉴定数,浏览数,etc)Redis的命令都是原子性的,你可以轻松地利用INCR,DECR等命令来计数。 采用Redis 的类型: Hash. 如果你对redis数据类型不太熟悉,可以参考
    http://redis.io/topics/d

    2020/03/31
  • JS 的 Element元素对象入门知识_元素菜鸟教程

    在 HTML DOM 中, 元素对象代表着一个 HTML 元素。元素对象 的 子节点可以是, 可以是元素节点,文本节点,注释节点。NodeList 对象 代表了节点列表,类似于 HTML元素的子节点集合。Element对象的属性和方法1.元素特性相关属性  element.id 设置/返回元素的id  element.tagName 设置/返回元

    2020/03/26
  • 郑州网站建设告诉你移动端网站关键词怎么优化基础指南_seo小白基础

    郑州网站建设告诉你移动端网站关键词怎么优化?现在人人都要用手机,手机已经成为我们生活中不可或缺的一部分,随着互联网的发展,移动端也越来越重要了移动端网站关键词怎么优化?随着现在互联网的快速发展,据目前的用户搜索习惯来看,移动端网站的索引已经开始优先于PC端网站的索引了,移动端的优质流量开始远远大于PC端了,很多企业都开始关注移动端关键词排名,移动端和PC端排

    2020/04/03
  • 一个程序员的自我修养使用帮助_程序员菜鸟教程下载

    混迹江湖多年,见过了太多的程序员。有天赋异禀的大牛,如周伯通和杨过一般的武学奇才。也有资质平庸的大牛,如郭靖一般,资质平庸但异常努力,稳扎稳打,最终成为一代宗师。更见过许多PPT架构师,嘴炮程序员。这类人凭借名校出身,混迹职场多年,运气好的话,往往可以混个一官半职。其实他们写过的代码加起来不过百余行而已,走到哪里都是各种热门技术,什么云计算,微服务之类尽在掌

    2020/03/23
  • The Web Font菜鸟教程_提供在线预览的文字组合排版工具

    The Web Font基础指南 官方网址:http://font-combinator.com/ 简介描述:提供在线预览的文字组合排版工具 The Web Font Combin…

    2020/03/06
  • 在线运行编程网站使用指南_编程指南教程

    学编程的程序员小伙伴越来越多了,在学习的过程中会发现很多知识点如果不在工作中运用或者手写带验证的话,很容易忘记。任何技能的掌握都是需要不断练习的。在此整理一些在线运行编程的网站TopCoder 网址为:https://www.topcoder.com/TopCoder是最开始的在线竞技编程平台之一。它提供了很多的算法挑战,用户可以使用平台上的编辑器直接完成挑

    2020/03/30
  • 微信小程序报错Do not have xx handler in current page的解决方法总汇入门知识_小程序小白指南

    最近在做小程序开发的时候,发现小程序老是报Do not have xxx handler in current page… 惊不惊喜,意不意外,这是什么原因引起的呢?下面就整排查错误的解决办法。排查解决Do not have xx handler in current page错误的3种方法:1. 检查报错对应js在Page之外是不是var了一些不对的值

    2020/04/05
  • CSS多级菜单的实现指南教程_菜单入门百科

    这是一个相当炫的功能,让网页看起来像桌面程序,如window的开始菜单。实现原理基本和纯CSS相册差不多,但要注意的事项比较多,让我们一步步来吧。先来一个非常简单的一级菜单与悬停效果。

    2020/03/23
  • MutationObserver是什么?使用攻略_用法指南攻略

    MutationObserver概览MutationObserver interface可以用来监测DOM树的变化。MutationObserver 是旧的DOM3事件规范Mutation Events特性的一个替换。在DOM事件触发的时候,会触发MutationObserver中传入的callback。DOM监听是不会立刻开始的,必须调用observer(

    2020/03/20
  • bootstrap-datetimepicker基础入门_Bootstrap日期和时间表单组件

    bootstrap-datetimepicker基础入门 官方网址:http://eonasdan.github.io/bootstrap-datetimepicker/ GitH…

    2020/03/06
  • 使用imba.io框架,得到比 vue 快50倍的性能基准基础入门_框架菜鸟教程

    我是标题党吗?是,但也不是。以图为证。上图表示了vue, react 以及 imba 在 todo 这个项目中拥有60个 todoItem 不同进行 crud 操作的表现。可以看到 imba 达到了每秒操作5w次以上。如果你也想试一试该测试,可以访问 Todos Bench。测试使用的是 Benchmark.js。imba 简单介绍imba 是一种新的编程语

    2020/03/29
  • 有道众包小白攻略_AI数据生产平台

    有道众包小白攻略 官方网址:http://zb.youdao.com 简介描述:AI数据生产平台 网易旗下的一个平台,在这里有很多小兼职可以做:图片内容转写2元,英文英频转写2.4…

    2020/03/06
  • Jiko入门基础教程_现代化的,易于使用的面向Javascript的模板引擎

    Jiko入门基础教程 官方网址:http://jiko.neoname.eu/ GitHub:https://github.com/nicolas-van/jiko 简介描述:现代…

    2020/03/06
  • CSS实用技巧:文字处理小白帮助_文字菜鸟知识

    前言作为程序员的我们,书写代码也需要大量的技巧。一份良好的代码能让人耳目一新,让人容易理解,同时也让自己成就感满满。因此,在这里简单的整理一些CSS开发技巧,希望能让你写出耳目一新、容易理解、舒服自然的代码。本小结主要是围绕css对文字处理的技巧,有兴趣的小伙伴可以收藏一下。文本对齐方式CSS最常用的对齐方式,居中对齐、左对齐(默认)、右对齐,而且实现起来也

    2020/03/24