Vue实现直播功能

Vue中在线直播

最近公司刚好在做直播，那么今天就记录一下遇到的坑，公司服务器用的亚马逊aws，所以直接看官方的api就可以了，aws官方地址aws直播api
先看下具体的实现后的效果图把

按照网上成熟的方法，使用的是video.js,然后aws做了一层封装，那么我们直接拿来使用把,这里使用vue版本的vue-video-player

1. 先安装下相关的包

npm install vue-video-player --save

2. 在main.js引入vue-video-player

// 第一个是videoJs的样式，后一个是vue-video-player的样式，因为考虑到我其他业务组件可能也会用到视频播放，所以就放在了main.js内
require('video.js/dist/video-js.css')
require('vue-video-player/src/custom-theme.css')
/*导入视频播放组件*/
import VideoPlayer from 'vue-video-player'
Vue.use(VideoPlayer)

3. 导入组件，修改配置参数

4. 修改参数,添加src

     playerOptions: {
       playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
       autoplay: false, //如果true,浏览器准备好时开始回放。
       controls: true, //控制条
       preload: "auto", //视频预加载
       muted: true, //默认情况下将会消除任何音频。
       loop: false, //导致视频一结束就重新开始。
       language: "zh-CN",
       aspectRatio: "16:9", // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
       fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
       sources: [
         {
           withCredentials: false,
           type: "application/x-mpegURL",
           //src: this.liveSrc
           src:
             "https://50f5175980ea.us-east-1.playback.live-video.net/api/video/v1/us-east-1.003054160756.channel.bSt8OCsmBtFq.m3u8"
         }
       ],
       poster: this.image, //你的封面地址
       //width: 200 || document.documentElement.clientWidth,
       notSupportedMessage: "此视频暂无法播放，请稍后再试", //允许覆盖Video.js无法播放媒体源时显示的默认信息。
       controlBar: {
         timeDivider: true, // 当前时间和持续时间的分隔符
         durationDisplay: true, // 显示持续时间
         remainingTimeDisplay: false, // 是否显示剩余时间功能
         fullscreenToggle: true // 是否显示全屏按钮
       }
     },

注意要先测试直播源可以成功播放才可以，否则就会报下这些错误

那么我们先按照官方的搭建一个本地的直播源测试吧

1. 先搭建html界面,注意要引入相关的js库和文件，我这里用hbuilder，因为用的比较顺手，而且预览模式类似于开了一个端口，通过get方式的方法，返回了一个本地服务，而不是直接本地双击打开html文件，访问静态文件哦~~~~

2. 通过端口访问，
   

3. 后来发现通过本地静态文件，也可以实现在线直播源播放
   
   ps：如果不想自己搭建本机服务测试，也可以直接使用awd提供的在线测试
   https://replit.com/@changdong0524/amazon-ivs-player-web-sample#samples/common/form-control.ts，但是要自己注册账号哦
   大概就是下面这样子哦
   
   大家自己去摸索一下就会了，修改input.value为直播源地址，然后在右边shell控制台启动就可以了

npm  install && npm  run  start

效果如下，是一模一样的

load这里的地址换成你自己的直播源m3u8格式就好了，我这里是已经搭建好的在线直播源

直播源没问题后，接下来就直接继续写项目代码

定义相关的监听函数，可以根据自己需要加上，常用的有下面几个

    onPlayerPlay(player) {
      console.log("onPlayerPlay", player);
    },
    onPlayerPause(player) {
      console.log("onPlayerPause", player);
    },
    playerStateChanged(player) {
      console.log("playerStateChanged", player);
    },

然后启动服务

npm  run start

发现报错，无法找到相关的视频，于是发现缺少相关的库，还得加上aws的库才可以
在整个项目的index.html中加入下面的库支持文件

最后完整效果就出来了

注意事项：
video-player标签的class必须设置成“video-player vjs-custom-skin”，你引入的样式才能起作用。 增加hls的支持。支持流媒体m3u8g等等格式播放。

增加hls.js支持，故此要安装依赖，如下：

npm install --save videojs-contrib-hls

这里提供下aws的官方仓库啊，需要自取哦
https://github.com/aws-samples

补充一下：如果直接在页面中实现的话，可能无法直接播放，会报错无法播放视频，我猜测可能有2个原因，见截图

1：异步获取后台返回的拉流地址的时候，需要一定的时间，这个时间直播组件已经初始化完毕，但是还没有获取到直播源地址，所以会报错找不到直播地址
2：直播组件也有自己一整套完整的生命周期，我们可以检测不同的生命周期，然后把直播源地址，在请求完毕后放入合适的时间，直播组件会一直请求这个直播地址，从而实现在线直播
这里我为了偷懒，暂时没有那么多时间去研究一下，等空了会去仔细研究一下，我是把他抽离出一个单组的子组件，通过props来实现地址的传递

效果一样一样的，也可以方便其他组件调用

最后为了方便管理，双手奉上最后的全部代码
start
1:main.js

// 第一个是videoJs的样式，后一个是vue-video-player的样式，因为考虑到我其他业务组件可能也会用到视频播放，所以就放在了main.js内
require('video.js/dist/video-js.css')
require('vue-video-player/src/custom-theme.css')
/*导入视频播放组件*/
import VideoPlayer from 'vue-video-player'
Vue.use(VideoPlayer)

2:videoPlayer.vue

3:detail.vue 父组件

3:index.html记得加入如下代码

end
加油~~~~