详解Vue实现直播功能详解Vue实现直播功能

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

文章图片

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

npm install vue-video-player --save

在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)

导入组件，修改配置参数

修改参数,添加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.liveSrcsrc:"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 // 是否显示全屏按钮}},

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

文章图片

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

body {margin: 0; }.video-container {width: 640px; height: 480px; margin: 15px; }

通过端口访问，

文章图片

后来发现通过本地静态文件，也可以实现在线直播源播放

文章图片

ps：如果不想自己搭建本机服务测试，也可以直接使用awd提供的在线测试
https://replit.com/@changdong0524/amazon-ivs-player-web-sample#samples/common/form-control.ts，但是要自己注册账号哦
大概就是下面这样子哦

文章图片

大家自己去摸索一下就会了，修改input.value为直播源地址，然后在右边shell控制台启动就可以了

npminstall && npmrunstart

效果如下，是一模一样的

文章图片

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

文章图片

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

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

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

然后启动服务

npmrun 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
【详解Vue实现直播功能】补充一下：如果直接在页面中实现的话，可能无法直接播放，会报错无法播放视频，我猜测可能有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 父组件

.playWrap {display: flex; background: #fff; margin-top: 20px; }.leftInfo {list-style: none; border: 1px solid #cfcfcf; }.playLeft {width: 48%; /* border: 1pxsolid #f5f5f5; */}.playRight {width: 48%; margin-left: 2%; }.playItem {display: flex; align-items: center; padding: 10px 0; border-bottom: 1px solid #cfcfcf; }.playItem:last-child {border-bottom: none; }.playContent {margin-left: 20px; color: #999; }.matchImg {width: 80px; height: 80px; margin-right: 10px; }.playImage {width: 80px; height: 80px; }.playWrap {display: flex; }.livePicture {width: 40%; height: 400px; }