Vue实现直播功能

Vue中在线直播

最近公司刚好在做直播,那么今天就记录一下遇到的坑,公司服务器用的亚马逊aws,所以直接看官方的api就可以了,aws官方地址aws直播api
先看下具体的实现后的效果图把
Vue实现直播功能_第1张图片
按照网上成熟的方法,使用的是video.js,然后aws做了一层封装,那么我们直接拿来使用把,这里使用vue版本的vue-video-player

  1. 先安装下相关的包
npm install vue-video-player --save
  1. 在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)
  1. 导入组件,修改配置参数
          
  1. 修改参数,添加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 // 是否显示全屏按钮
       }
     },

注意要先测试直播源可以成功播放才可以,否则就会报下这些错误
Vue实现直播功能_第2张图片
那么我们先按照官方的搭建一个本地的直播源测试吧

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



    
    
    


    
  1. 通过端口访问,
    Vue实现直播功能_第3张图片

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

npm  install && npm  run  start

效果如下,是一模一样的
Vue实现直播功能_第6张图片
load这里的地址换成你自己的直播源m3u8格式就好了,我这里是已经搭建好的在线直播源
Vue实现直播功能_第7张图片

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

  

  

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

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

然后启动服务

npm  run start

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

  
  
  

Vue实现直播功能_第8张图片

最后完整效果就出来了Vue实现直播功能_第9张图片

注意事项:
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个原因,见截图
Vue实现直播功能_第10张图片

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

Vue实现直播功能_第11张图片
Vue实现直播功能_第12张图片
效果一样一样的,也可以方便其他组件调用
Vue实现直播功能_第13张图片
最后为了方便管理,双手奉上最后的全部代码
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
加油~~~~

你可能感兴趣的