Web前端点播直播入门

qqcr
2,079 阅读3分钟

360前端星计划day5

什么是视频

格式与内容

  • 文件扩展名 \approx 媒体封装格式（媒体容器类型，打包成一个独立文件用来存储）
  • 音视频编码格式 \neq 音视频编码格式（使用了谁家的编码器）
  • 文件内容
    • 头信息（格式、时长、帧率、码率、分辨率...）
    • 索引信息：二进制存储的位置
    • 视频数据
    • 音频数据
    • 附加增强数据：存储之外的信息，扩展应用场景

视频数据

  • 显示器颜色基于RGB颜色空间模型
  • 视频领域大多基于YUV颜色空间做抽样存储
  • 帧内预测 & 帧间预测复用进一步有效的压缩数据
  • 三类帧：P帧（前向帧预测）、B帧（双向预测帧）、I帧（参考帧）
  • 基于通用标准集N多技术于一身 -> 视频编码器 H.264(avc),H.265,VP8,VP9...

音频数据

  • 声音：不同振幅&频率而产生的机械波；数字形式是一维波形
  • 对自然中连续的声波采样，做数字化PCM存储
  • 扬声器还原PCM熟悉信号为模拟音频信号
  • 音频压缩基本算法：预测、变换
  • 基于通用标准集N多技术于一身 -> 音频编码器 AAC、MP3...

传输协议

  • 传统场景：
    1. 流媒体（直播）
      • HLS：苹果为利用现有CDN设施而发明的“流媒体”协议（不是真正的流）
      • HTTP(S)-FLV：基于HTTP的流媒体协议
      • RTMP、RTP/RTSP、TS、MMS...（浏览器不能使用）
    2. 点播
      • HTTP(S)：通过Range方式或参数方式完成Seek
  • Web端
    • HTTP(S)、WS(S)、P2P

播放器原理

  1. 解协议（加载数据）
  2. 解封装（容器类型，从容器打开拿出来，解复用）
  3. 解码
  4. 渲染

Web端API

媒体兼容判断

const video = document.createElement("video");
const ret = video.canPlayType(type); //返回：如果不知道解码器maybe，知道解码器可能返回probably

交互式视频

基于video时间轴控制

播放本地视频文件

FileReader API设置video.src

播放硬件资源（调用摄像头或麦克风）

  • 基于getUserMedia window.navigator.mediaDevices.getUserMedia 或者window.navigator.getUserMedia
  • iframe引入页要调媒体设备，需要父页面中给iframe设置allow="microphone;camera;midi;encrypted-media"

实现视频录制

  • 基于gerUserMedia和MediaRecorder实现录像
  • 实例化一个MediaRecorder对象，传入拿到的camera，然后进行事件的监听

播放JS拉取的媒体数据

  • 基于MediaSource
  • XMLHttpRequest设置xhr.responseType = 'arraybuffer'
  • 创建MediaSource媒体源实例进行事件监听
  • 真正使用时：以流式请求方式，而不是一次获取buffer

点播直播&播放方案

点播和直播的区别

点播：已经存储好的内容，直播：实时

  1. 应用流程
    • 点播：创作者=>上传=>转码=>存储<=>CDN分发<=>观众
    • 直播：创作者=>推流<=>存储<=>转码<=>CDN分发<=>观众
  2. 媒体类型的选择
    • HTTP(S)-MP4..点播服务
    • HTTP(S)-FLV 点播、直播
    • HTTP(S)-HLS 点播、直播（基于切片，高延迟）

浏览器播放器方案

  1. 原生浏览器支持的：原生<video>
  2. 原生浏览器不支持的：
    1. 协议或容器类型不支持
      • JS解协议下载数据、解容器、重新封装，然后通过MediaSource喂给video解码、渲染播放
    2. 解码器不支持
      • JS下载数据，WASM解容器、解码，通过WebGL&WebAudio渲染播放
    3. 有解码需求的
      • 参考前两条，在解容器之后对每帧数据启用解密逻辑
avatar
文章
阅读
粉丝