小程序，大世界-web点播直播入门-代码的自我修养-进阶的直梯

小程序，大世界

简介

小程序解决了什么问题

小程序技术栈

• HTML/CSS/JavaScript
• NodeJS
• 移动适配
• HTTP协议/HTTPS
• OAuth2
• GIT

类似小程序的技术

• Cordova：通过webview渲染，通过插件调用系统服务
• PWA：Service Worker和Push API
• React Native/Weex：JavaScript通过JavaScriptCore等执行，并通过Bridges和Native组件交互
• Flutter：Dart直接与独立系统与独立系统等UI库进行交互

小程序技术框架（微信小程序）

• 文件结构及其含义
  • .json 后缀等JSON配置文件
  • .wxml后缀等wxml模版文件
  • .wxss后缀等wxss样式文件
  • .js后缀等JS脚本逻辑文件
• 双线程模型
  
• 生命周期
  <img src=“https://img-blog.csdnimg.cn/20200412095201505.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5NjMwODc1,size_16,color_FFFFFF,t_70” width=“60%”)

小程序等发展

• 多端同构框架
• 自动化
• 硬件框架
• 云IDE
• W3C小程序工作组

web点播直播入门

什么是视频

• 格式与内容
  • 文件扩展名≈媒体封装格式(媒体容器类型)
  • 媒体封装格式≠音视频编码格式(使用了谁家的编码器)
  • 文件内容：
    1. 头信息(格式、时长、帧率、码率、分辨率…)
    2. 索引信息
    3. 视频数据
    4. 音频数据
    5. 附加增强数据…
• 视频数据
  • 显示器颜色呈现基于RGB(红绿蓝)颜色空间模型
  • 视频领域大多基于YUV颜色空间做抽样存储
  • 帧内预测&帧间预测复用进一步有效的压缩数据
  • P帧(前向预测帧)、B帧(双向预测帧)、I帧(参考帧)
  • 基于通用标准集N多技术于一身 — 视频编码器
  • H.264(AVC)、H.265(HEVC)、VP8、VP9…
• 音频数据
  • 声音：不同振幅&频率而产生的机械波；数字形式是一维波形
  • 对自然中连续的声波采样，做数字化PCM存储
  • 扬声器还原PCM(脉冲编码调制)数字信号为模拟音频信号
  • 音频压缩基本算法：预测、变换
  • 基于通用标准集N多技术于一身 — 音频编码器​​​​​​​AAC、MP3…
• 传输协议
  1. 传统场景
     • 流媒体(直播)
       • HLS：苹果为利用现有CDN设施而发明的"流媒体"协议
       • HTTP(S)-FLV：基于HTTP的流媒体协议
       • RTMP、RTP/RTSP、TS、MMS…
     • 点播传输
       • HTTP(S)：通过Range方式或参数方式完成Seek
  2. Web端
     • HTTP(S)、WS(S)、P2P…

好玩等web端api

• 判断浏览器端视频兼容情况
• 基于Video时间轴控制实现交互式视频
• 基于 FileReader API 播放本地文件
• 基于 getUserMedia 调用摄像头或麦克风
• 基于 getUserMedia、MediaRecorder 实现录像
• 基于MediaSource播放JS拉取的媒体数据

Web端点播直播&播放器解决方案

• 点播直播的区别
  • 应用流程
    • 点播：创作者 => 上传 => 转码 => 存储 <=> CDN分发 <=> 观众
    • 直播：创作者 => 推流 <=> 存储 <=> 转码 <=> CDN分发 <=> 观众
  • 媒体类型的选择
    • HTTP(S)-MP4…：点播服务
    • HTTP(S)-FLV点播、直播
    • HTTP(S)-HLS点播、直播(高延迟)

代码的自我修养

• 代码规范
• 格式
• 流程化

技术翻译：进阶的直梯

• 技术翻译端意义：
  1. 翻译技术文章，学习新技术思想
  2. 翻译技术文档，掌握标准和工具
  3. 翻译技术图书，获得名声和报酬
• 技术翻译端标准：准确、地道、简洁
• 技术翻译的方法
  • 消化吸收原文
  • 母语地道表达
  • 就是翻译意思
• 技术翻译要坚持技术驱动