前端开发之流媒体播放:直播,视频流开发研究

视频流

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

支持直播类协议

RTMP协议

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