前端开发之流媒体播放：直播，视频流开发研究

视频流

流媒体：(Stream media) 一连串的多媒体资料压缩后，经过互联网分段发送，在互联网上即时传输影音的一种技术，影音数据包像流水一般在互联网上传输。
特点：支持实时播放，需要源媒体(摄像机、音频接口、屏幕捕捉软件)、将内容数字化的编码器、媒体发布者和内容传输网络；不需要在源点录制。
与本地影音播放区别：无需下载整个媒体文件；需要网络的支持; 浏览器播放开发方式不同。
需要特定的网络数据传输协议(媒体串流通讯协议)：常用的有 rtmp http-flv hls

支持直播类协议

RTMP协议

由来：(Real-Time Messaging Protocol) Macromedia公司(后被Adobe 公司收购)开发的为通过互联网在flash播放器和服务器之间传输流媒体影音和数据的一种专有协议。
特点：基于flash的，需要浏览器对flash的支持
默认使用TCP/IP端口1935的纯粹(plain)协议
具有很多变种：
- RTMPS(通过TLS/SSL连接传输RTMP)、
- RTMPE(使用Adobe自有的加密机制加密的RTMP,加密机制时行业标准的原函数)、
- RTMPT(用HTTP封装的以穿透防火墙，通常在TCP端口80和443上使用明文请求来绕过大多数的公司流量过滤；封装的会话中可能携带RTMP、RTMPS或RTMPE数据包)、
- RTMPFP(使用UDP的RTMP，取代RTMP Chunk Stream，Adobe Systems 开发了安全的是是媒体流协议包，可以让最终用户之间互连[p2p])
也可支持其他应用程序：Adobe LiveCycle Data Services ES

常用框架 videojs-flash

安装引用
- CDN引用
```javascript
<script src="https://cdn.jsdelivr.net/npm/videojs-flash@2/dist/videojs-flash.min.js"></script>
</li>
</ul></li>
</ol>

<pre><code class="line-numbers"> - npm 安装
```javascript
  npm install video.js
  npm install videojs-flash
```
2. 开发示例

```javascript
  <video id="my-video"></video>
  
  //直接引用 <script src="//path/to/video.min.js"></script>
  //直接引用 <script src="//path/to/videojs-flash.min.js"></script>
  
  import videojs from 'video.js'
  import 'videojs-flash'
  import 'video.js/dist/video-js.min.css'
  
  <script>
  let player = videojs('my-video', {
  controls: true, //视频控件
  autoplay: true, // 自动播放 **** 重点 width|height 需要大于 400*300 才支持 ****
  width: 400,
  height: 300,
  fluid: true, // 填充模式
  liveui: true, // ui组件
  sources：[
  {src:''},
  {src:''}
  ], //视频资源地址
  techOrder: ['flash'], // 技术模式的顺序 rtmp 要配置 flash
  notSupportMessage: '您的浏览器不支持视频播放',
  }, function onPlayerReady(){this.play()//资源加载成功自动播放视频});
  });
  //页面销毁时要做视频的销毁不过`videojs`的`dispose()` 会将dom元素也销毁，所以要注意再次加载dom元素
  beforeDestroy() {
  videojs('realVideoBox').dispose('true')
  },
  </script>
  
  不过chrome 即将不再支持flash，所以接下来解释其他不需flash的协议
  
  浏览器不支持flash解决方案 http-flv 协议的flv.js（哔哩哔哩开源的）的框架
  1. FLV (Flash Video) 网络视频格式，用作流媒体格式， Adobe 公司开发，由The FLV Header, The FLV Body 以及其它 Tag 组成，不需要大的媒体头加载速度快，文件后缀为 .flv。
  2. HTTP-FLV 是将流媒体数据封装成FLV格式，通过HTTP传输给客户端。
  3. 依靠 MIME 的特性，根据协议中的Content-Type 选择相应的程序去处理相应的内容，使得内容可以通过HTTP传输
  4. 特点：
    - 低延迟，http协议易于传输，
    - 服务器端：将RTMP 转换成 flv，(rtmp目前是唯一一种推流的协议)
    - 被广泛支持，除了苹果公司的产品
    - 支持302重定向 (负载均衡)
    - 可穿透防火墙
  5. 使用：
    - 客户端：支持 HTML5浏览器、Android
    - 服务端：只需一个支持下载的 http 网络主机
  6. flv.js 框架：将flv文件解析成html5的video标签数据
  7. flv.js 开发示例：
```
<video id="videoElement"></video>
<script src="flv.min.js"></script>
<script>
      if(!flvjs.isSupported()){alert('不支持');return;}
      let videoElement = document.getElementById('realVideoBox');
      this.flvPlayer = flvjs.createPlayer({
        type: 'flv',
        isLive:true,
        controls: true,
        url: ''
      });
      this.flvPlayer.attachMediaElement(videoElement);
      this.flvPlayer.load();
      this.flvPlayer.play();
</script>
```
  - api: flv.js
  多视频展示开发
  1. 需求描述：多个视频流同时展示，一屏展示多个flvPlayer
  2. 解决方案：创建一个flvplayer对象组，并对对象组进行操作
```
<video id="videoElement1"></video>
<video id="videoElement2"></video>
<video id="videoElement3"></video>
<script src="flv.min.js"></script>
<script>
  let players = []; //flvPlayer 对象组
  initPlayer('videoElement1', 'src1');
  initPlayer('videoElement2', 'src2');
  initPlayer('videoElement3', 'src3');

  function initPlayer(el, url){
    if(!flvjs.isSupported()){alert('不支持');return;}
      let videoElement = document.getElementById(el),
          flvPlayer = flvjs.createPlayer({
        type: 'flv',
        isLive:true,
        controls: true,
        url: url
      });
      flvPlayer.attachMediaElement(videoElement);
      flvPlayer.load();
      flvPlayer.play();

      //将对象存入组
      players.push(flvPlayer);
  }
</script>
```
  hls协议
  1. HTTP Live Streaming 苹果公司开发的, 为苹果产品播放流媒体文件提供支持。
  2. 数据包格式：.mu38。

视频流

支持直播类协议

RTMP协议

常用框架 videojs-flash

浏览器不支持flash解决方案 http-flv 协议的flv.js（哔哩哔哩开源的）的框架

多视频展示开发

hls协议