悠哉摸鱼大王

视频流协议决定了音视频数据如何在网络上“跑”。前端主要关注的是拉流（观看） 协议。 一、 常见协议深度对比 协议 基础 延迟 浏览器支持 典型应用 HLS HTTP (ts...

在前端开发中，我们很少从零编写播放器。根据不同的协议和业务需求，有许多优秀的开源工具可供选择。 一、 底层协议库 这些库主要负责解封装 (Demuxing) 和 数据拼装，...

本篇主要介绍直播系统的核心工作流程。直播与普通点播视频最大的区别在于其实时性，这要求系统在数据的采集、传输、处理和分发每一个环节都要进行低延迟优化。本篇将详细拆解推流、拉流...

本篇深入探讨视频在浏览器中是如何从二进制数据变成画面的，涵盖播放链路、同步机制以及核心 API 的使用。 一、 视频播放链路（Pipeline） 一个完整的视频播放过程通常...

本篇主要介绍音视频开发中的最基础概念，包括文件结构、核心术语、编码格式以及浏览器层面的基础限制。 一、 视频文件结构 一个视频文件一般是由文件信息和音视频文件组成，视频文件...

>作者：陈盛靖 ## 一、背景 业务群里面经常反馈，视频播放卡顿，视频播放总是停留在某一时刻就播放不了了。后面经过排查，发现这是因为弱网导致的。然而，用户数量众多，隔三差五...

前言 由于浏览器无法直接显示 NV12 格式，需要转换为 RGB 才能在 Canvas 或 Image 中显示。 基础概念 什么是 YUV？ YUV 是一种颜色编码系统，与...

本课程主要从 音视频采集 音视频编码 音视频协议封装 音视频传输 音视频协议解封装 音视频解码 音视频播放 这几个模块进行讲解。 第一章：音视频采集 主要介绍音频和视频在w...

前言 众所周知，当使用http访问设备摄像头、麦克风等，需要在浏览器中配置安全策略。但是这种方式并不是万无一失的。 最近，博主遇到了这样一个问题，在本地开发时，可以正常访问...

先说需求场景：websocket传输PCM数据，调用ASR服务，实现语音识别功能 SpeechRecognition 在调用自有的服务进行语音识别之前，我们使用的是浏览器自...

整体流程概览： 一、如何获取pcm 如果返回的是base64 编码的 PCM，可以直接使用sse的方式接收，把 base64→Uint8Array→Float32，然后排队...

开发环境和生产环境nextjs的产物区别 Next.js 中“静态资源”的几种类型： 类型 放置位置 访问路径 示例 公开资源（public） /public /xxx /...

初始化项目 安装nextjs，直接看官网不赘述nextjs。 UI方面采用的是Magic UI + shadcn。 因为之前从来没用用过react，第一次接触shadcn这...

初始化项目 使用vue-press作为文档框架，使用vue3+ts+vite作为组件库和测试项目框架，Pnpm Workspaces 作为 Monorepo 项目的依赖管理...

作为前端，当你入职一家公司，拿到新发的电脑，你会对电脑干点啥，装开发环境？装软件？你是否铺天盖地到处找之前电脑备份的东西？又或者是想不起来有什么上一台电脑好用的软件叫什么名...