首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >使用flv.js做直播

使用flv.js做直播

作者头像
IMWeb前端团队
发布于 2017-12-29 10:52:53
发布于 2017-12-29 10:52:53
13.7K00
代码可运行
举报
文章被收录于专栏:IMWeb前端团队IMWeb前端团队
运行总次数:0
代码可运行

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

在介绍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

RTMP

Flash

1s

430M

11%

HTTP-FLV

Video

1s

310M

4.4%

HLS

Video

20s

205M

3%

在支持浏览器的协议里,延迟排序是:

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,音频编码必须是AACMP3, 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依赖的浏览器特性兼容列表

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移动端
  4. 优先使用 HTTP-FLV,因为它延迟小,支持HTTP-FLV的设备性能运行 flv.js 足够了。
  5. 不支持 flv.js 就使用 HLS,但是 HLS延迟非常大。
  6. 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,再写代码:
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
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:
  • 也可以使用ffmpeg来推流,推流命令ffmpeg -f avfoundation -i "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, } 这里是优化后的完整代码
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
HTTP-FLV直播初探
目前几种视频流的简单对比: 协议 httpflv rtmp hls dash 传输方式 http流 tcp流 http http 视频封装格式 flv flv tag Ts文件 Mp4 3gp webm 延时 低 低 高 高 数据分段 连续流 连续流 切片文件 切片文件 Html5播放 可通过html5解封包播放(flv.js
smy
2018/04/03
8.3K0
淘汰的RTMP、HTTP-FLV、HLS直播技术,拥抱互联网直播的未来--WEBRTC、WEBSOCKET
随着移动互联网时代的到来,各大互联网厂商和流媒体协议组织涌现出丰富多彩各种各样的直播流媒体协议,其中比较出名的经典流媒体协议有RTMP/RTSP/HTTP-FLV/HTTP-HLS/WEBRTC等,协议简介如下:
Openskeye
2023/03/29
2.3K0
flv.js怎么用?全面解读flv.js代码
flv.js项目的代码有一定规模,如果要研究的话,我建议从demux入手,理解了demux就掌握了媒体数据处理的关键步骤,前面的媒体数据下载和后面的媒体数据播放就变得容易理解了。
smy
2019/01/07
8.4K0
几种浏览器播放RTSP视频流解决方案
Streamedian 提供了一种“html5_rtsp_player + websock_rtsp_proxy”的技术方案,可以通过html5的video标签直接播放RTSP的视频流。
音视频牛哥
2021/03/22
20K0
几种浏览器播放RTSP视频流解决方案
视频直播技术干货:一文读懂主流视频直播系统的推拉流架构、传输协议等
本文由蘑菇街前端开发工程师“三体”分享,原题“蘑菇街云端直播探索——启航篇”,有修订。
JackJiang
2022/05/31
5.5K1
视频直播技术干货:一文读懂主流视频直播系统的推拉流架构、传输协议等
HTTP-FLV详解及分析
传统的直播协议要么使用 Adobe 的基于 TCP 的 RTMP 协议, 要么使用 Apple 的基于 HTTP 的 HLS 协议。本文介绍另外一种结合了 RTMP 的低延时, 以及可以复用现有 HTTP 分发资源的流式协议 HTTP-FLV。
Gnep@97
2023/11/12
2.4K0
HTTP-FLV详解及分析
SRS(Simple Realtime Server) 开源直播/双录服务器
SRS(Simple Realtime Server) 是一个纯 C++ 编写的高性能开源流媒体服务器,目标是打造简单、高效、易用、支持多协议的直播服务系统。自 2013 年开源以来,已成为国内外广泛使用的 RTMP/WebRTC 服务端方案之一。
井九
2025/07/11
2230
SRS(Simple Realtime Server) 开源直播/双录服务器
直播技术协议介绍
目前web前端采用的直播技术一般分为以下几类:rtp/rtcp、rtmp、http-flv、hls。下面介绍不同协议
IMWeb前端团队
2019/12/03
2.6K0
直播技术协议介绍
集RTMP, HLS, FLV, WebSocket 于一身的网页直播/点播播放器EasyPlayer.js引用videojs无法自动播放问题解决
EasyPlayer几乎涵盖了开发者所需的全部平台,尤其是在web端的EasyPlayer.js时遇到的播放器接入的问题,比如:不懂前端的js代码、没有公网服务器放置这些js脚本和网页、微信对接入IP播放地址有限制等。EasyPlayer.js,极大地方便了开发者在解决B/S型业务开发,集 rtmp,hls,flv,websocket 于一身的网页直播/点播播放器。
EasyNVR
2020/04/23
7.1K0
集RTMP, HLS, FLV, WebSocket 于一身的网页直播/点播播放器EasyPlayer.js引用videojs无法自动播放问题解决
用一个 flv.js 播放监控的例子,带你深撅直播流技术
本文记录一下在使用 flv.js 播放监控视频时踩过的各种各样的坑。虽然官网给的 Getting Started 只有短短几行代码,跑一个能播视频的 demo 很容易,但是播放时各种各样的异常会搞到你怀疑人生。
杨成功
2022/03/09
4.4K0
用一个 flv.js 播放监控的例子,带你深撅直播流技术
直播软件系统源码,视频直播软件系统开发中的流媒体技术
视频直播软件系统开发,常用的流媒体传输协议有RTMP,RTSP,HLS,HTTP-FLV
布谷鸟小刘
2021/02/03
2.2K0
抓取抖音 快手 摄像头直播流
RTMP 协议为流媒体而设计,在推流中用的比较多,同时大多 CDN 厂商支持RTMP 协议。
逍遥子大表哥
2022/11/12
4.4K0
抓取抖音 快手 摄像头直播流
接上篇-nginx-http-flv-module更新说明(二)
最近这段时间主要在不同平台测试模块的稳定性,目前播放这一块没发现问题,由于条件限制,除了FreeBSD平台没测试过,Windows 7,Debian 7.x和macOS Sierra都测试过了,由于Nginx官方对Windows支持不太好,没用Windows平台最强大的IOCP接口(使用的select),所以导致Windows平台上运行效率不太高,表现在推流等待时间长,3s+,首屏时间很长,4s+,select本身原因限制客户端个数,默认是1024。推流等待时间和首屏时间最短的是macOS Sierra,本机上测试时基本上是秒推秒开。昨晚专门注意了一下,在macOS Sierra下编译时,SO_REUSEPORT和TCP_FASTOPEN两项都支持,前者让Nginx的每个子进程都可以listen,都有一个专门的accept队列,解决了惊群效应;后者则是在发起SYN时就已经携带实际数据,而不是握手完毕后再传输实际数据。秒推秒开可能跟这两个选项有关。但是macOS Sierra并不支持将某个进程绑定到某个CPU上,所以可能进程上下文切换会有开销,系统负载较大时可能效率不如Linux。由于macOS Sierra是公司的电脑,所以未做压力测试。我的笔记本装的是Debian 7.x,因为内核版本较低,所以macOS Sierra上支持的两个选项都不支持。测试时推流等待时间和首屏时间都介于Windows 7和macOS Sierra之间,在服务器上测试时(系统CentOS 6.4,支持SO_REUSEPORT但是不支持TCP_FASTOPEN)跟macOS Sierra上差不多,但是考虑到服务器的CPU性能强大得多,所以负载不高情况下,macOS Sierra的表现是最好的。由于macOS Sierra是从Mac OS X更新来的,而Mac OS X的底层最初是在FreeBSD基础上开发的,所以推测在FreeBSD上的表现应该也不错。
后端技术探索
2018/08/10
2K0
视频直播基础技术总结1
1. 视频直播 视频直播的5个关键的流程:录制->编码->网络传输->解码->播放 视频直播平台一般包括推流端,后台系统和客户端。通常包括直播内容采集、直播后台系统和直播内容播放三个模块。 1)内容采集:采集的方式有很多,从一般几十块PC摄像头到几十万的专业录制编码设备,还有移动端的手机前后置摄像头;分布式推流:这里是比较成熟的架构,用户在推流之前会通过名字服务,一般是DNS智能解析或是自有按IP调度系统获取最靠谱的推流节点,然后把流上传到服务器。 2)直播后台系统:在分布式推流节点“接入”了用户流之后,后续一系列的分发、转码、截图、录制、存储等构成了直播后台系统;这里根据不同的业务需求,需要有不同的后台服务来支撑。 3)直播内容播放:这个就比较好理解了,一般输出是PC屏幕、手机、现在还有VR头盔。 2. 移动直播编解码 推流编码: 推荐Andorid4.3(API18)或以上使用硬编,以下版本使用软编;iOS使用全硬编方案; 播放解码:Andorid、iOS播放器都使用软解码方案,经过我们和大量客户的测试以及总结,虽然牺牲了功耗,但是在部分细节方面表现会较优,且可控性强,兼容性也强,出错情况少,推荐使用。 软硬编解码优缺点对比:
全栈程序员站长
2022/09/15
1.3K0
视频直播基础技术总结1
音视频封装:FLV格式详解和打包H264、AAC方案(上)
flv即flash video,是Adobe公司推出的一种音视频封装格式,这家公司在音视频、图像图形领域也算是神一般的存在,多少都用过他们家的产品。常见的Photoshop和Flash palyer就是他们家的。今天要讲到的flv也是他们推出来的,也是Flash palyer播放的标准音视频格式。在HTML5出来之前,想在web上播放音视频,基本都靠flash插件。
潇湘落木
2020/11/12
6.9K0
音视频封装:FLV格式详解和打包H264、AAC方案(上)
Web直播,你需要先知道这些
本文由 IMWeb 团队成员 万宽红Terrancewan 首发于社区网站 imweb.io。点击阅读原文查看 IMWeb 社区更多精彩文章。 前段时间接触了一些音视频、web直播相关的东西,加上Flash的即将终结、WebRTCd的兴起、小程序的流行,这里总结了一点个人学习收获和大家分享。 Web直播,你需要先知道这些 直播知识小科普 一个典型的直播流程:录制->编码->网络传输(推流->服务器处理->CDN分发)->解码->播放 IPB:一种常用的视频压缩方案,用I帧表示关键帧,B帧表示前向差别帧,P
用户1097444
2022/06/29
2.1K0
Web直播,你需要先知道这些
在HTML5上开发音视频应用的五种思路
无论是实时视频监控还是直播点播等应用场景,最起码的一个操作就是播放视频。其中最基本的思路就是利用OS的API在PC开发桌面应用、在移动端开发Native App,目前这种技术已经成熟,大厂小厂都是这么做的,但是缺点也很明显:开发比较费时费力,需要IOS开发一遍再去Android开发一遍。特别对于一些非刚性需求比如用户家里有一两个监控摄像头,一个礼拜也不会打开看几次,你却要他下载和安装一个APP进行操作,用户安装意愿其实非常低。
音视频开发进阶
2019/12/05
3.3K0
在HTML5上开发音视频应用的五种思路
Web直播,你需要先知道这些
实际情况下,当用户数量很大时,对推流设备的性能要求很高,复杂的权限管理也难以实现,采用P2P的架构基本不可行。对于个别用户提供上行流、海量用户只进行拉流的场景,腾讯课堂实现了一种P2S的解决方案。进一步学习可阅读jaychen的系列文章《WebRTC直播技术》。
IMWeb前端团队
2019/12/03
2.2K0
Web直播,你需要先知道这些
Electron 低延迟视频流播放方案探索
去年最后一篇文章介绍了我们的 Electron 桌面客户端的一些优化措施,这篇文章也跟我们正在开发的 Electron 客户端有一定关系。最近我们正在预研在 Electron 页面中实时播放会议视频流的方案。
_sx_
2020/04/10
7K0
Electron 低延迟视频流播放方案探索
玩转直播系列之从 0 到 1 构建简单直播系统(1)
随着5G时代的到来,音视频行业也可能迎来一个行业的春天,直播则是新视频行业一直以来的一个重要的产品形态,从最初的秀场直播,游戏直播,到今年由于疫情,目前比较火的在线教育直播,带货直播等,各类新的直播形式则是越来越多的展示在大众面前。
2020labs小助手
2021/05/07
1.6K0
推荐阅读
相关推荐
HTTP-FLV直播初探
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档