本科时候专业是树莓，工作中也时常遇到相关问题（视频播放，直播等业务），同事也会来找我，现对这几年的问题做个总结，持续更新。

Basic

HTML 标签

MSE

  • Media Source Extension
  • MediaSource && SourceBuffer && TrackBuffer && Video｜Audio Decoder
  • flv.js(封装视频流格式为目标的支持的格式)

Web Audio API

Media Stream API

WebRTC

1
MediaDevices.getUserMedia() 会提示用户给予使用媒体输入的许可，媒体输入会产生一个MediaStream，里面包含了请求的媒体类型的轨道。此流可以包含一个视频轨道（来自硬件或者虚拟视频源，比如相机、视频采集设备和屏幕共享服务等等）、一个音频轨道（同样来自硬件或虚拟音频源，比如麦克风、A/D转换器等等），也可能是其它轨道类型。

https://developer.mozilla.org/zh-CN/docs/Web/API/MediaDevices/getUserMedia

Canvas

WebGL

WebVR|XR

HLS协议

  • HTTP Live Streaming
  • 短连接 HTTP
  • 集合一段时间数据，生成TS切片文件，更新m3u8
  • 延时 >10秒
  • m3u8索引文件
    • 动态列表 live playlist
    • 静态列表 event playlist
    • 全量列表 vod playlist
  • TS容器格式
  • MSE帮助浏览器识别，把媒体内容封装成可识别的容器格式，如MP4
  • 单向广播

flv.js

  • 使flv格式能在浏览器上播放
  • H.264-视频
  • AAC｜MP3-音频
  • https://caniuse.com/#feat=mediasource - 浏览器
  • video && fetch|xhr|websocket - 浏览器支持

    http-flv

  • RTMP over HTTP
  • 长连接HTTP
  • 同RTMP，使用HTTP协议
  • (一定程度避免防火墙干扰，http302兼容，https，移动端支持)
  • 1-3秒延时
  • 跨平台差，Flash Player以外的平台都需要做移植
  • 适合即时，要互动的

RTMP

  • real time messaging protocol
  • 基于tcp

参考阅读文章

Video

  • container/wrapper
  • metadata
  • image
    • resolution
    • color
    • luminosity
    • frame rate
  • audio
  • audio

chromium-graphics

ffmepg

  • x265
  • https://stackoverflow.com/questions/36118658/how-to-install-libx265-for-ffmpeg-on-mac-osx
  • https://superuser.com/questions/785528/how-to-generate-an-mp4-with-h-265-codec-using-ffmpeg
  • https://caniuse.com/?search=hevc
  • https://ffmpeg.org/ffmpeg.html

    有个文件，腾讯云转码后播放到3：21的时候就卡住了

    1
    ffmpeg -i f0.mp4 -c:v libx264 -preset medium -crf 23 -c:a copy ouput_h264_f0.mp4
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    frame= 6049 fps=183 q=29.0 size=    5376kB time=00:03:21.24 bitrate= 218.8kbits/frame= 6129 fps=183 q=29.0 size=    5632kB time=00:03:24.31 bitrate= 225.8kbits/[h264 @ 0x7feac2012e00] Invalid NAL unit size (224994 > 215737).
    [h264 @ 0x7feac2012e00] Error splitting the input into NAL units.
    [mov,mp4,m4a,3gp,3g2,mj2 @ 0x7feac1008200] stream 1, offset 0x2402089: partial file
    f0.mp4: Invalid data found when processing input
    [mov,mp4,m4a,3gp,3g2,mj2 @ 0x7feac1008200] stream 1, offset 0x2402100: partial file
    f0.mp4: Invalid data found when processing input
    [mov,mp4,m4a,3gp,3g2,mj2 @ 0x7feac1008200] stream 1, offset 0x240214f: partial file
    f0.mp4: Invalid data found when processing input
    [mov,mp4,m4a,3gp,3g2,mj2 @ 0x7feac1008200] stream 1, offset 0x240219b: partial file
    f0.mp4: Invalid data found when processing input
    [mov,mp4,m4a,3gp,3g2,mj2 @ 0x7feac1008200] stream 1, offset 0x24021e9: partial file
    f0.mp4: Invalid data found when processing input
    [mov,mp4,m4a,3gp,3g2,mj2 @ 0x7feac1008200] stream 1, offset 0x240223f: partial file
    f0.mp4: Invalid data found when processing input
    [mov,mp4,m4a,3gp,3g2,mj2 @ 0x7feac1008200] stream 1, offset 0x240228d: partial file
    f0.mp4: Invalid data found when processing input
    Error while decoding stream #0:1: Invalid data found when processing input
    [mov,mp4,m4a,3gp,3g2,mj2 @ 0x7feac1008200] stream 1, offset 0x24022d9: partial file
    f0.mp4: Invalid data found when processing input
    [mov,mp4,m4a,3gp,3g2,mj2 @ 0x7feac1008200] stream 1, offset 0x2402327: partial file
    f0.mp4: Invalid data found when processing input
    [mov,mp4,m4a,3gp,3g2,mj2 @ 0x7feac1008200] stream 1, offset 0x240237e: partial file
    f0.mp4: Invalid data found when processing input
    frame= 6157 fps=182 q=-1.0 Lsize=    5971kB time=00:03:25.33 bitrate= 238.2kbits/s speed=6.06x    
    video:2845kB audio:2907kB subtitle:0kB other streams:0kB global headers:0kB muxing overhead: 3.804614%

webkit-scrolling

图像优化

reading

标签 + 认知通道效应 => 推荐

cocos3d

1
2
开启 WebGPU
Cocos Creator自3.6.2起开始支持WebGPU, 构建Web-Desktop的时候勾选WEBGPU即可. 构建WebGPU之后，先定位到构建好的资源文件所在文件夹，可以点击构建面板上的文件夹按钮直达，需要一个http-server或者nginx服务器来访问。 在此之前请先检查浏览器的兼容性，下章浏览器兼容性会有详细介绍

css GPU animation