详解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.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 // 是否显示全屏按钮
       }
     },

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

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

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

通过端口访问，

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

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
加油~~~~

到此这篇关于Vue实现直播功能的文章就介绍到这了,更多相关Vue实现直播内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！