Web前端点播直播入门

·  阅读 872

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"

实现视频录制

  • 基于gerUserMediaMediaRecorder实现录像
  • 实例化一个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. 有解码需求的
      • 参考前两条,在解容器之后对每帧数据启用解密逻辑
分类:
前端
标签:
分类:
前端
标签: