首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

从nodejs获取缓存数据后,如何使用angular4播放直播视频

从nodejs获取缓存数据后,可以使用Angular 4来播放直播视频。以下是一个完善且全面的答案:

在使用Angular 4播放直播视频之前,首先需要从nodejs获取缓存数据。Node.js是一个基于Chrome V8引擎的JavaScript运行环境,它可以用于构建高性能的网络应用程序。通过使用Node.js,我们可以实现从服务器获取缓存数据的功能。

在Node.js中,可以使用一些流行的模块来实现缓存数据的获取,例如使用axios模块发送HTTP请求获取数据,或者使用node-fetch模块进行类似的操作。这些模块可以通过npm安装,并且可以在Node.js中使用。

以下是一个使用axios模块从nodejs获取缓存数据的示例代码:

代码语言:txt
复制
const axios = require('axios');

axios.get('http://your-nodejs-server/api/cache')
  .then(response => {
    // 在这里处理获取到的缓存数据
    const cacheData = response.data;

    // 调用播放直播视频的函数,将缓存数据传递给它
    playLiveVideo(cacheData);
  })
  .catch(error => {
    console.error('获取缓存数据失败:', error);
  });

在上述代码中,我们使用axios.get方法发送GET请求到指定的URL(例如http://your-nodejs-server/api/cache),并在成功获取到数据后,将数据传递给playLiveVideo函数进行播放。

接下来,我们需要使用Angular 4来播放直播视频。Angular是一个流行的前端开发框架,它提供了丰富的功能和工具来构建现代化的Web应用程序。

在Angular 4中,可以使用一些视频播放器库来实现直播视频的播放,例如video.jsplyr等。这些库可以通过npm安装,并且可以在Angular项目中使用。

以下是一个使用video.js库在Angular 4中播放直播视频的示例代码:

首先,安装video.js库:

代码语言:txt
复制
npm install video.js --save

然后,在Angular组件中引入video.js库:

代码语言:txt
复制
import videojs from 'video.js';

@Component({
  selector: 'app-live-video',
  templateUrl: './live-video.component.html',
  styleUrls: ['./live-video.component.css']
})
export class LiveVideoComponent implements OnInit {
  private player: videojs.Player;

  constructor() { }

  ngOnInit() {
    // 创建video.js播放器实例
    this.player = videojs('my-video');

    // 设置直播视频源
    this.player.src('http://your-live-video-url');

    // 播放直播视频
    this.player.play();
  }

  ngOnDestroy() {
    // 销毁video.js播放器实例
    if (this.player) {
      this.player.dispose();
    }
  }
}

在上述代码中,我们首先在组件中引入video.js库,并在ngOnInit生命周期钩子函数中创建一个video.js播放器实例。然后,我们设置直播视频的源(例如http://your-live-video-url),并调用play方法来播放直播视频。在组件销毁时,我们需要销毁video.js播放器实例,以释放资源。

需要注意的是,上述示例代码中的my-video是一个HTML元素的ID,用于指定视频播放器的容器。在组件的HTML模板中,需要添加一个具有相应ID的元素,以容纳视频播放器。

综上所述,通过使用Node.js从服务器获取缓存数据,然后使用Angular 4来播放直播视频,我们可以实现从nodejs获取缓存数据后如何使用angular4播放直播视频的功能。

推荐的腾讯云相关产品和产品介绍链接地址:

  • 腾讯云视频直播(https://cloud.tencent.com/product/css)
  • 腾讯云云服务器(https://cloud.tencent.com/product/cvm)
  • 腾讯云云数据库(https://cloud.tencent.com/product/cdb)
  • 腾讯云云原生应用引擎(https://cloud.tencent.com/product/tke)
  • 腾讯云云存储(https://cloud.tencent.com/product/cos)
  • 腾讯云区块链服务(https://cloud.tencent.com/product/bcs)
  • 腾讯云物联网(https://cloud.tencent.com/product/iot)
  • 腾讯云人工智能(https://cloud.tencent.com/product/ai)
  • 腾讯云移动开发(https://cloud.tencent.com/product/mad)
  • 腾讯云音视频(https://cloud.tencent.com/product/vod)
  • 腾讯云网络安全(https://cloud.tencent.com/product/saf)
  • 腾讯云服务器运维(https://cloud.tencent.com/product/cvm)
  • 腾讯云数据库(https://cloud.tencent.com/product/cdb)
  • 腾讯云云原生应用引擎(https://cloud.tencent.com/product/tke)
  • 腾讯云云存储(https://cloud.tencent.com/product/cos)
  • 腾讯云区块链服务(https://cloud.tencent.com/product/bcs)
  • 腾讯云元宇宙(https://cloud.tencent.com/product/vr)
  • 腾讯云云计算(https://cloud.tencent.com/product/ccs)

请注意,以上链接仅供参考,具体的产品选择应根据实际需求和情况进行评估和决策。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

熊猫TV直播H5播放器架构探索

在这样一个Flash时代,我们必须要有自己的新技术来支撑视频播放,尤其是视频直播的需求。...相信现在使用FLVJS做视频直播的朋友也都会遇到这样一个问题:音画不同步的现象随时间的增长越来越显著,那么如何改进技术消除这个问题呢?...浏览器的Video标签是针对点播设计的,出现卡顿一定是卡顿点开始继续播放,这种小规模无法被轻易感知的卡顿累计多了便会造成明显的延迟,那我们该如何处理呢?...这是我们一个具体的数据传输方式。首先是向缓存中填充数据,再通过消息通道通知下一个模块获取数据;之后会给出获取数据的长度,否则下一块模块无法确定获取数据量;接下来收到这些消息后下一模块从缓存中提取数据。...A:以视频帧为基准。根据视频帧的位置计算音频帧的位置,如果这帧出现缺失我们就补帧。 Q6.1:补前一帧与一帧的区别? A:根据不同场景选择最优化的方案,代码修改简便的角度我们会优先选择补前一帧。

2.7K20

理解直播及其工作原理

但是,播放如何知道在什么时间播放视频?通过清单或者播放列表发送到播放器的信息已经被广告中断信息修饰过,所以清单将明确指定何时播放广告、在何处获取广告以及向何处发送广告跟踪数据。 哪里可以插入广告?...广告可以插入到视频播放前(pre-roll)、视频播放中(mid-roll)或者在视频结束(post-roll)。插入位置的选择取决于视频服务提供商想要使用哪种广告位置组合。...视频分析:QoE和QoS 整个世界都在数据上运行,你的直播平台也不例外。视频直播提供商应该使用分析服务系统或者构建自己的分析系统来为直播收集使用、QoE和QoS数据。...播放器中收集到的最重要的数据包括: 延迟或者首屏延迟:测量用户按下播放视频显示的所需时间 缓冲时间:视频缓冲所需时间 缓冲比:在播放特定数量视频,缓冲时间会达到多少?...获取订阅者、视频等相关信息并将这些数据联系在一起所产生的有用数据会帮助市场、销售、内容生产/策划团队优化他们的未来活动。

1.7K40

为什么直播时要用CDN?

ABR和CDN 使用基于HTTP的视频传输协议的ABR可以通过CDN进行分发。在ABR直播中,编码器的输出数据被切割成小块,然后视频播放器依赖索引列表进行播放。...当播放器请求视频分片时,该请求先到达CDN,CDN节点会判断本地是否有缓存。如果视频并不在CDN缓存中,CDN就向直播源服务器转发该请求,并获取到对应的视频分片文件。...使用CDN进行直播时有哪些好处? 使用CDN进行直播视频对你的观众来说帮助很大,因为CDN将直接影响他们的观看体验,并帮助你获取或者留存更多的粉丝和观众。 接下来,让我们详细了解一下这些好处。...使用CDN进行直播时减少缓冲 为什么视频播放器会缓冲呢?当播放器向服务器请求视频分片,要花一段时间等待视频分片服务器到达播放器。...使用CDN进行直播有助于获得高质量视频 高质量ABR流媒体的实现关键是播放器可以每次独立地多码率配置文件中选择对应的视频分片进行播放

2.2K30

播放器秒开优化丨音视频工业实战

最简单的做法是,直播列表页点击某个直播卡片到直播服务器请求直播流地址以及各种直播间信息(主播信息、聊天信息、点赞信息、礼物信息等等),拿到直播流地址,交给播放播放。...业务侧提前获取流地址 另外,客户端业务侧还可以在进入直播间之前通过 HTTPDNS 来选择网络情况最好的 CDN 节点,在进入直播间时最好的节点拉取直播播放从而优化网络加载的时间,加快首屏渲染。...5.2、短视频前置 moov box 播放器在网络点播场景下去请求 MP4 视频数据,需要先获取到文件的 moov box,解析出该文件的编码、帧率等信息才能开始边下边播。...7.7、视频本地缓存 加载视频进行播放时,还可以再开一路存储任务,将视频数据缓存到本地,这样当视频下一次再被播放时就可以直接本地缓存请求数据,一方面可以节省带宽,另一方面可以提升数据加载的速度,从而提升首帧秒开速度...当然这里的本地缓存需要考虑到如何视频数据进行分片管理以及当缓存过大时如何缓存进行清理。

2.9K31

腾讯云在线教育企业上云图鉴

学生纯音频UDT协议转封装成RTMP协议旁路推送到直播系统。...直播录制文件生成回调接收到教育转码上传的整体流程,其中主要涉及3个服务(回调接收,离线转码,视频上传)、2个定时脚本(生成转码任务,发起视频上传)、1组数据库表。...点播平台根据调用方指定的加密参数模板,读取密钥获取方式、用户获取解密密钥的URL,然后指定KMS系统中获取视频加密密钥DK、EDK。...3.视频播放 回放绑定到直播任务上之后,用户可以使用腾讯云播放播放加密视频: 整体流程是:用户在播放加密视频的过程中,每当播放一个新的ts分片视频时,播放器首先请求“EXT-X-KEY”标签中的业务侧链接...1.播放器请求“EXT-X-KEY”标签中的链接获取密钥DK。 2.业务鉴权服务根据观看者身份认证信息进行鉴权。 3.为了应对高并发场景,这里对密钥进行缓存,所以鉴权通过后会先去缓存中读取秘钥。

2.7K12

面试题 | 什么是秒开视频如何去秒开视频

解决思路 获取关键帧显示,改写播放器逻辑让播放器拿到第一个关键帧就给予显示。 GOP 的第一个帧通常都是关键帧,由于加载的数据较少,可以达到 "首帧秒开"。...如果直播服务器支持 GOP 缓存,意味着播放器在和服务器建立连接可立即拿到数据,从而省却跨地域和跨运营商的回源传输时间。...假设一个视频的恒定帧率是 24fps(即 1 秒 24 帧图像),关键帧周期为 2s,那么一个 GOP 就是 48 张图像。 一般而言,每一秒视频至少需要使用一个关键帧。...播放端首屏时长的优化 首屏时间,指的是进入直播间开始到第一次看到直播画面的时间。首屏时间过长极易导致用户失去对直播的耐心,降低用户的留存。...但游戏直播对画面质量和连贯性的要求高,对应推流端编码数据量和其他类型直播相比大的多,如何降低首屏时间是一个不小的难题。

84030

不再碎片化学习,快速掌握 H5 直播技术

如果,使用该列表,就和播放一整个视频没有啥区别了。它是使用 #EXT-X-ENDLIST 表示文件结尾。...由于,每个 FLV 文件是通过 HTTP 的方式获取的,所以,它通过抓包得出的协议头需要使用 chunked 编码。...有兴趣的同学,可以继续深入了解,我的另外一篇博客:全面进阶 H5 直播。 当然,如果后期有机会,可以继续来实现以下如何进行实际的编码。...整个优先级为: ~ >> >> & ^ | 字节序 字节序说白了就是 bit 放置的顺序,因为历史遗漏原因,字节的放置有两种顺序: 大字节序(BigEndian): 将数据大到小放置,认为第一个字节是最高位...小字节序(LittleEndian):将数据从小到达防止,认为第一个字节是最低位。 这个概念在我们后面写入过程中,经常用到。当然,我们如何了解到某台电脑使用的是大字节还是小字节呢?

1.6K40

在线教育企业上云图鉴

整体架构 上图描述了腾讯云互动直播到回放生成的整体架构,其中涉及到的关键技术点有: 1.旁路直播 腾讯云互动直播使用UDT(私有RTP)协议,互动直播系统支持自动旁路,能够将老师音视频、学生音视频/学生纯音频...直播录制文件生成回调接收到教育转码上传的整体流程,其中主要涉及3个服务(回调接收,离线转码,视频上传)、2个定时脚本(生成转码任务,发起视频上传)、1组数据库表。...点播平台根据调用方指定的加密参数模板,读取密钥获取方式、用户获取解密密钥的URL,然后指定KMS系统中获取视频加密密钥DK、EDK。...3.视频播放 回放绑定到直播任务上之后,用户可以使用腾讯云播放播放加密视频: 整体流程是:用户在播放加密视频的过程中,每当播放一个新的ts分片视频时,播放器首先请求“EXT-X-KEY”标签中的业务侧链接...1.播放器请求“EXT-X-KEY”标签中的链接获取密钥DK。 2.业务鉴权服务根据观看者身份认证信息进行鉴权。 3.为了应对高并发场景,这里对密钥进行缓存,所以鉴权通过后会先去缓存中读取秘钥。

1.7K31

视频直播基础知识

4.1.3指标衡量 延迟测量比较困难,需要在修改视频数据,在扩展字段中,加上绝对时间戳,播放端收到播放数据,解码获取绝对时间戳,与本地当前时间进行比较,获得实际延迟时间,目前陌陌和快手都统计该指标...首次播放时长,与播放器的缓存策略有关,有些播放器是获取到第一个关键帧就开始播放,有些播放器会缓存部分数据,才开始播放,和用户的网络有关,同样的数据,如果用户网络不稳定,会导致传输时延比较长,还和cdn...经过这样的预测处理,在点击播放按钮时,将极大提高下载性能。 美颜等滤镜如何处理 如何降低延迟 n主动推送GOP至边缘节点,边缘节点缓存GOP,播放端则可以快速加载,减少回源延迟。...为了容忍这种网络错误,并达到让终端用户无感知,客户端播放器可以考虑建立一个FIFO的缓冲队列,解码器播放缓存队列读取数据缓存队列直播服务器源源不断的下载数据。...-- 播放缓存,导致播放很老的数据,特别是HLS,如果获取的是缓存中的m3u8,导致获取旧的ts,导致下载不成功。

7.5K93

你想知道的直播技术都在这里了

所以BGP技术对跨运营商的访问带来了巨大的便利,特别是直播场景。不同于传统的文件缓存场景,一个图片哪怕第一次是跨了遥远的距离源站获取,本地网络进行缓存,后面的访问都走本地网络。...P帧B帧对于I帧都有直接或者间接的依赖关系,所以播放器要解码一个视频帧序列,并进行播放,必须首先解码出I帧,其后续的B帧和P帧才能进行解码,这样服务端如何进行关键帧的缓存,则对直播的延时以及其他方面有非常大的影响...H.264视频数据和AAC音频数据使用硬解码(对应系统的API)或软解码(FFMpeg)来解压音视频数据; 经过解码得到原始的视频数据(YUV)和音频数据(AAC); 因为音频和视频解码是分开的,...针对视频播放的流程,我们做以下的优化: 首屏时间优化 步骤2入手,通过预设解码器类型,省去探测文件类型时间; 步骤5入手,缩小视频数据探测范围,同时也意味着减少了需要下载的数据量,特别是在网络不好的时候...,减少下载的数据量能为启动播放节省大量的时间,当检测到I帧数据就立马返回并进入解码环节。

3.2K90

目前直播技术汇总及低延时直播的方案汇总

,一旦发生丢包,TCP会将后续包缓存起来,等前面的包重传并接收到再继续发送,延迟会越来越大。...网上大都说的是WebRTC主要用于端对端的时候,比如人数较少的视频会议使用,但实际上已经有很多厂家已经使用WebRTC做了直播的方案。...播放终端的工作相对较小,通过流媒体服务器适配,一般终端不需要做任何改进,可以继续使用原有的协议和方法进行播出,例如http-flv协议或hls协议。当然也可以开发WebRTC的播放终端。...拉流端 拉流端要考虑的其实就是一个,那就是缓存的设置以及缓存的策略。这里因为不是专业的,只能说一下思路,就是获取缓存的长度和当前播放的位置,然后两者的差就是具体的延迟。...厂商的选择 即构科技(RTMP) 当初也考虑过使用WebRTC来做视频直播,但是后来经过调研后放弃转而使用RTMP来做视频直播

5.5K10

【UTP自动化测试平台系列之终章】前端探索之路

之前前端的用户信息缓存是交给后台还进行管理和存储的,如果进行了前后端分离,前端该如何保存用户信息呢?...特点:H5、NodeJS、RN等出现,前端开发还可胜任服务端乃至终端的开发。...提供了高效、简单的组件开发方式,使程序开发更加关注业务逻辑的实现,而不用关心如何加载组件和模块,如何引用及依赖注入的实现等。...五、Angular4在UTP的实践 UTP平台前端采用Angular4框架进行开发,使用了组件化开发、双向数据绑定、引入外部插件、cookie缓存、Http服务、单元测试等技术,经过了不断挖坑、填坑的过程...5.4 Mock技术引入:angular-mocks utp前后端分离架构分离,前后端交互使用了http get/post+json进行数据传输和获取,可以比较方便的进行后台服务的模拟。

2.5K110

直播软件系统源码,视频直播软件系统开发中的流媒体技术

因为RTMP协议传输的基本是FLV格式的流文件,必须使用flash播放器才能播放....目前video.js库支持该格式文件的播放 HTTP-FLV(用于拉流端) 本协议就是http+flv,将音视频数据封装成FLV格式,然后通过http协议传输到客户端,这个协议大大方便了浏览器客户端播放直播视频流....目前flv.js库支持该格式的文件播放 视频直播软件系统开发,流媒体技术主要有以下几种: 1、智能流技术 自动检测网络状况,并将音视频的属性调整到最佳,使用用户收到与其网络速度相符的媒体流,从而获取最佳的用户体验...3、缓存(caching)技术 解决由于异步网络、网络延迟和抖动导致的数据包错序的问题,数据包先缓存在本地,而缓存系统使用环形链表结构丢弃掉已经播放的内容,防止缓存溢出。...视频直播软件系统开发,如何搭建流媒体服务器: 下载对应的安装包,使用的Linux环境 下载 复制代码 解压 复制代码 到解压的目录下,执行命令,启动服务 在控制台输入 .

1.7K20

视频面试题集锦第 15 期 | 编辑 SDK 架构 | 直播回声 | 播放器架构

转码模块主要负责将编辑态的音视频素材及相关效果编码和封装为目标视频。 抽帧模块主要负责视频素材中抽取图片用于缩略图、封面等场景。 预览播放器模块则主要负责渲染播放编辑态的音视频素材及相关效果。...时间线是各音视频及特效素材如何串起来的基准。 配合这套数据结构的细分功能模块有: Reader:资源数据读取模块。...用于不同模块在生产和消费对接时缓存数据。 FrameFilter:帧处理模块。可以跟进设定的参数进行丢帧、补帧,输出指定帧率的音视频数据。 Effect:特效处理模块。提供滤镜、特效效果等能力。...播放器内核层:基于音视频核心层的能力来封装播放器内核能力,包括使用多线程、多缓冲区串联网络、解封装、解码、渲染等节点;支持播放、暂停、seek、刷新数据源等控制能力;提供播放状态获取播放事件回调、播放器错误上报等接口...播放器工具层:在播放器核心能力的基础上组装和扩展其他播放相关的其他能力,比如:边下边播视频缓存能力、播放远程配置能力、播放数据埋点上报能力等等。

23410

什么是CDN?

在本文中,我们将学习CDN是如何工作的,如果不使用CDN会发生什么,并了解什么是Cache-Hit和Cache-Miss。让我们开始吧!...视频质量较差:因为无法服务器快速获取高质量(高码率)视频播放器开始切换到低码率。ABR就是这样发挥作用的! 以上这些问题都会导致糟糕的体验,这可不是正确提供视频流服务的方式。...然后视频播放器被编程为向CDN请求视频,而不是直接访问源服务器。所以视频播放获取的是CDN的URL。 当第一个播放请求到达CDN,CDN缓存中可能没有内容,于是它便将请求转发给源服务器。...发生缓存未命中时,CDN将向源服务器请求未命中内容。源服务器响应,CDN将缓存内容并将其分发给客户端。...使用CDN的优势 在视频流服务(直播或者点播)中使用CDN有很多好处,让我们来看下: CDN减少源服务器上的负载, CDN的快速响应能确保播放器在其带宽良好时,请求高码率的视频块能够及时接收到,避免缓冲区数据不足的情况

1.3K21

直播延时优化丨音视频工业实战

直播播放延时,指的是主播推流一帧画面到用户观看到这帧画面之间的时间差。...要统计直播播放延时,可以在推流端编码视频时增加 SEI 信息,其中可以添加时间戳信息。在播放时,将 SEI 中的时间戳解出来,同时获取本地的时间戳,这两个时间戳的差值即直播播放延时。...当缓存时长在 [0, normal-low-cache) 区间时,播放使用慢速播放。...当缓存时长在 (normal-high-cache, limit-cache] 区间时,播放使用快速播放。...1.2、丢帧 当缓冲区的累积的数据已经非常多(通常是发生卡顿播放器等待数据加载时间较长造成),通过倍速播放可能需要较长的时间才能消耗掉累积起来的延时,这时候如果要快速的消耗掉这个延时,可以直接丢掉缓冲区的音视频

1.2K20

CloudBluePrint-Chapter 1.4 : 云上应用技术架构- CDN、流媒体、边缘计算

CDN通过在全球范围内的节点服务器上缓存这些静态资源,使得用户可以最近的节点获取资源,从而大大提升了加载速度和用户体验。...CDN通过在节点服务器上缓存视频数据,并优化数据传输路径,使得用户可以最近的节点获取数据,避免了因网络拥塞导致的缓冲和卡顿。应用程序接口(API)加速:API加速主要用于提高API请求的响应速度。...动态内容的处理对于动态内容,可能需要考虑是否使用CDN进行加速,以及如何进行加速。一种常见的做法是将动态内容和静态内容分开处理:静态内容通过CDN加速,动态内容直接源站获取。...应用场景实时直播:如新闻直播、游戏直播、教育直播等。视频点播:如网站视频、电影、电视剧等。网络音乐:如在线音乐播放、音乐点播等。远程教育:如在线课程、网络讲座等。...内容更新策略:由于流媒体服务可能会对内容进行缓存,因此可能需要考虑如何在内容更新时保证用户能够获取到最新的内容。这可能涉及到设置缓存策略、使用版本控制等。

33720

视频播放器的极致体验优化

这张图展示的是信息的预取,就是获取table里视频页中可以获取数据,以保证视频秒开,即点即放,即预取一定的数据,点开就播放。48k相当于大概不到一秒的数据,先下载后点开,就直接播放了。 2....直播播放的大体框架就是由下载管理、文件解析、缓存管理、视频解码、视频渲染、音频解码、音频处理、音频渲染这几部分组成。对于直播来说多了“缓存管理”这一模块,当缓存管理大到一定程度,需要进行变速或者丢帧。...其次是时间对齐,MP4 文件有时候音频时间0开始,但是视频可能是100ms开始,这时开始播放视频,假如第一帧视频出现,但音频就要从0开始播放到100再播放到33才有第二帧,这时大概有133毫秒的停顿...播放策略优化 第三部分是播放策略优化,对于直播来说,首先是cdn调度预取,当前页面直播列表要调度所有直播链接,获取直播地址,直接用当前的cdn的IP进行播放。...对于点播来说,首先页面预取加速就是点播在当前页面会有一个数据的预取,大概500毫秒数据时就可以点击播放,一般需要获取多少数据由服务器决定。

2.9K30

使用flv.js做直播

(HTML5 原生仅支持播放 mp4/webm 格式,不支持 FLV) flv.js 为什么要绕一圈,服务器获取FLV再解码转换再喂给Video标签呢?...在教你怎么优化前先要介绍下直播运行流程: 主播端在采集到一段时间的音视频数据,因为音视频数据庞大需要先压缩数据: 通过H264视频编码压缩数据数据 通过PCM音频编码压缩音频AAC数据 压缩完再通过...音视频服务器再通过HTTP协议通过和浏览器建立的长链接流式把FLV TAG传给浏览器。 flv.js 获取FLV TAG解析出压缩的音视频数据喂给Video播放。...知道流程我们就知道哪入手优化了: 主播端采集时收集了一段时间的音视频数据,它专业的叫法是GOP。...缩短这个收集时间(也就是减少GOP长度)可以优化延迟,但这样做的坏处是导致视频压缩率不高,传输效率低。 关闭音视频服务器的I桢缓存可以优化延迟,坏处是用户看到直播首屏的时间变大。

13.1K105

理论 | 使用flv.js做直播

(HTML5 原生仅支持播放 mp4/webm 格式,不支持 FLV) flv.js 为什么要绕一圈,服务器获取FLV再解码转换再喂给Video标签呢?...在教你怎么优化前先要介绍下直播运行流程: 主播端在采集到一段时间的音视频数据,因为音视频数据庞大需要先压缩数据: 通过H264视频编码压缩数据数据 通过PCM音频编码压缩音频AAC数据 压缩完再通过...音视频服务器再通过HTTP协议通过和浏览器建立的长链接流式把FLV TAG传给浏览器。 flv.js 获取FLV TAG解析出压缩的音视频数据喂给Video播放。...知道流程我们就知道哪入手优化了: 主播端采集时收集了一段时间的音视频数据,它专业的叫法是GOP。...缩短这个收集时间(也就是减少GOP长度)可以优化延迟,但这样做的坏处是导致视频压缩率不高,传输效率低。 关闭音视频服务器的I桢缓存可以优化延迟,坏处是用户看到直播首屏的时间变大。

3.6K10
领券