360前端星计划之web前端点播直播

什么是视频

• 格式与内容
  • 文件扩展名（媒体封装格式）
  • 媒体封装格式不等于音视频编码格式
  • 文件内容：
    • 头信息（格式、时长、帧率、码率、分辨率）
    • 索引信息
    • 视频数据
      • 视频大多采用YUV颜色空间做抽样存储
      • 帧内预测和帧间预测复用可以进一步有效的压缩数据
      • P帧（前向预测帧）、B项（双向预测帧）、I帧（参考帧）
      • 通过上述技术综合，生成视频编码器
    • 音频数据
      • 对连续的声波进行采样，做数字化存储
      • 还原数字信号为模拟音频信号
      • 音频压缩：预测、变换
    • 附加增强数据
  • 传输协议
    • 流媒体（直播）
      • HLS：“流媒体”协议
      • HTTP（S）-FLV：基于HTTP
      • RTMP、RTP/RTSP等
    • 点播
      • HTTP（通过Range方式或者参数方式完成Seek）
    • Web端（HTTPS、WS、P2P）
  • 播放器原理
    • 解协议（加载数据）
    • 解封装（解复用）
    • 解码
    • 渲染

Web端API

• 判断浏览器视频兼容情况
  • 使用videoEl.canPlayType判断
• 基于Video时间轴控制实现交互式视频
• 基于FileReader API播放本地文件
• 基于getUserMedia调用摄像头
• 基于MediaRecorder实现录像
• 基于MediaSource播放JS拉取的媒体数据
  • 创建动态媒体源，关联到video元素上
• Web端点播直播&播放器解决方案
  • 点播：创作者=>上传=>转码=>存储<=>CDN分发<=>观众
  • 直播：创作者=>推流<=>存储=>转码<=>CDN分发<=>观众
  • 媒体类型：HTTPS-MP4（点播），HTTP（S）-FLV（点播、直播）、HTTP（s）-HLS（点播、直播（高延迟））
  • 原生浏览器支持的（直接原生video播放）
  • 原生浏览器不支持的
    • JS解协议下载数据、解容器、重新封装，通过MSE喂给Video解码、渲染播放
    • 解码器不支持
      • JS下载数据，WASM解容器、解码，通过WebGL&WebAudio渲染播放
    • 需要解密
      • 解容器之后对每帧数据进行解密