Vue配置RTMP直播流

什么是HLS,RTSP,RTMP

HLS 协议:基于HTTP协议的流直播(wikipedia)。苹果推出的解决方案,将视频分成 5-10 秒的视频小分片,然后用 m3u8 索引表进行管理。由于客户端下载到的视频都是 5-10 秒的完整数据,故视频的流畅性很好,但也同样引入了很大的延迟(HLS 的一般延迟在 10-30s 左右)。相比于 FLV, HLS 在iPhone 和大部分 Android 手机浏览器上的支持非常给力,所以常用于 QQ 和微信朋友圈的 URL 分享。

RTSP(Real-Time Stream Protocol)由Real Networks 和Netscape共同提出的,基于文本的多媒体播放控制协议. RTSP定义流格式,流数据经由RTP传输;RTSP实时效果非常好,适合视频聊天,视频监控等方向。

RTMP 实时消息传输协议,由Adobe公司研发,但当前还没有收入国际标准(wikipedia)。协议比较全能,既可以用来推送又可以用来直播,其核心理念是将大块的视频帧和音频帧“剁碎”,然后以小数据包的形式在互联网上进行传输,且支持加密,因此隐私性相对比较理想,但拆包组包的过程比较复杂,所以在海量并发时容易出现一些不可预期的稳定性问题。

百度一遍,RTMP播放,一堆资料,也有基于video.js封装的vue-video-player组件,这两者我都尝试了,很尴尬的是,引入原生video.js成功了,但是使用vue-video-player却失败了,所以还是不要用vue-video-player这个组件,这个组件已经很久没维护,还是用video.js吧!

在引入的时候要注意 video.js 的版本,6.0以上的版本有可能会出现问题,如果不行的话建议切换 5.6.0 版本,我这里安装的还有flash插件:

"video.js": "5.6.0",
"videojs-flash": "^2.2.0",
"videojs-swf": "^5.4.2",

简单封装

<template>
  <video :id="'player'+id" class="video-js" preload="auto" style="width: 100%;height: 100%;" controls muted data-setup='{"html5" : { "nativeTextTracks" : false }}'>
    <source :src="videoSrc" type="rtmp/flv">
  </video>
</template>

<script>
import videojs from 'video.js';
import 'video.js/dist/video-js.css';
import 'videojs-flash';
import SWF_URL from 'videojs-swf/dist/video-js.swf';
videojs.options.flash.swf = SWF_URL;
export default {
  name: 'video-player',
  props: {
    id: {
      type: [String, Number]
    }
  },
  data() {
    return {
      player: null,
      videoSrc: null
    };
  },
  mounted() {
    this.player = videojs('player' + this.id);
  },
  methods: {
    changeVideo(source) {
      this.player = videojs('player' + this.id);
      this.videoSrc = source;
      this.player.src({
        src: this.videoSrc,
        type: 'rtmp/flv'
      });
      this.player.play();
    }
  },
  beforeDestroy: function() {
    this.player.dispose();
  }
};
</script>
<style lang="scss">
.video-js .vjs-big-play-button {
  display: none;
}
</style>

这里我做了一个初始化的设置,并且传id给每一个播放器。changeVideo这个接父组件传来的src,来动态的切换视频。一定要记得在beforeDestroy时把组件进行销毁!

这里,还需要对webpack做一个处理,因为里面引入了swf文件,我这里用的是cli3搭建的,vue.config.js配置如下:

configureWebpack: config => {
    config.module.rules.push({
        test: /\.swf$/,
        use: [{
            loader: 'url-loader',
            options: {
                limit: 1024,
                name: 'file/[path][name].[hash:7].[ext]'
            }
        }]
    })
},

webpack.base.js配置如下:

module: {
  rules: [
    {
      test: /\.swf$/,
      loader: 'url-loader',
      options: {
        limit: 1024,
        name: 'file/[path][name].[hash7].[ext]'
      }
    }
  ]
}

总结

最后总结一下,RTMP播放质量高效果好,可以说是当下最值得应用的监控视频接入技术了,当然了,需要flash也确实要考虑进来,这个接入方案在未来估计也会逐渐的降温,然后是hls方案,这个对移动端的适配挺好,安卓和苹果的浏览器都提供了原生支持,所以移动端开发应该优先考虑这个方案,唯一的缺点就是延迟比较大,但是以后5G普及之后,这应该就不是什么缺点了!

放一张效果图:

Vue配置RTMP直播流

另外,用HLS格式,做了一个电视点播:http://tv.wangdaodao.com/,基本上满足了视频点播的需求。

Vue配置RTMP直播流

已有 2 条评论

  1. 回复

    浏览器一般不支持RTMP播放,只能HLS播放~

    1. 王叨叨 王叨叨 [作者]
      回复

      得装flash插件才行,兼容性还是hls好一点点。

添加新评论