Vue视频直播，解决Web端+小程序端同时播放问题

一、Web端实现

Web端是vue2，用的是LiveQing，支持多种格式视频播放（我这里测试的m3u8和rtmp格式），可以去官网（https://www.liveqing.com/docs/download/LiveQing.html）看。
首先安装插件

npm install --save @liveqing/liveplayer

        

          
        
        
        

          

          AI 代码解读
        
      
      

然后在vue.config.js里面加上如下内容：

const CopyWebpackPlugin = require('copy-webpack-plugin')
module.exports = {
   
   
    configureWebpack: {
   
   
        plugins: [
            new CopyWebpackPlugin([
                {
   
    from: 'node_modules/@liveqing/liveplayer/dist/component/crossdomain.xml'},
                {
   
    from: 'node_modules/@liveqing/liveplayer/dist/component/liveplayer.swf'},
                {
   
    from: 'node_modules/@liveqing/liveplayer/dist/component/liveplayer-lib.min.js', to: 'js/'}
            ])
        ]
    }
 }

        

          
        
        
        

          

          AI 代码解读
        
      
      

如果上面的方法不起作用的话，可以把上面三个文件crossdomain.xml、liveplayer.swf、liveplayer-lib.min.js 丢到public目录

然后在页面上增加播放控制，具体代码如下：

<template>
    <div class="page-container">
        <LivePlayer
            ref="livePlayer"
            :video-title="obj.title"
            :videoUrl="obj.videoUrl"
            @snapOutside="snapOutside"
            @ended="ended"
            fluent
            :autoplay="autoplay"
            live
            stretch
            :poster="obj.pictures"
        />
    </div>
</template>
<script>
    import LivePlayer from '@liveqing/liveplayer'
    export default {
   
   
        name: 'Dir',
        components: {
   
   
            LivePlayer
        },
        data() {
   
   
            autoplay: true,
            obj:{
   
   },
        }, 
        methods:{
   
   
            getData(){
   
   
                // 访问后台获取视频直播详情
                this.$http.get(url).then(res=>{
   
   
                    this.obj = res.data
                })
            },
            pause: function () {
   
   
                this.$refs.livePlayer.pause();
            },
            play: function () {
   
   
                this.$refs.livePlayer.play();
            },
            ended: function () {
   
   
                console.info('ended......')
            },
            snap: function () {
   
   
                this.$refs.livePlayer.snap();
            },
            snapOutside: function (snapData) {
   
   
                console.info(snapData)
            }
        },
        mounted() {
   
   
            this.$nextTick(() => {
   
   
                //获取视频直播详情
                this.getData()
            })
        }
   }
</script>

        

          
        
        
        

          

          AI 代码解读
        
      
      

以上就是Web端视频直播的实现了

二、小程序端

小程序用的框架是美团的mpvue，但无法使用LiveQing这种靠操作DOM实现的方式来完成。最后是使用了小程序官方的live-player，可点击这里查看官方文档。目前仅支持 flv, rtmp 格式视频流。

需要注意的是在模拟器无法播放，模拟器上会呈现黑屏，只能在真机上调试

首先需要在公众号平台上开通音视频直播能力，

再把后台接口地址、视频直播地址域名添加到微信的域名信息设置。

具体代码如下：

<template >
  <div class="page-detail">
    <live-player style="width:100%;225px;" catchtouchmove :src="obj.videoUrl" mode="live" autoplay bindstatechange="statechange" binderror="error" bindfullscreenchange="fullscreenchangemethod" id="player" />
 </div>
</template>

<script>
export default {
   
   
    data() {
   
   
      return {
   
   
        obj:{
   
   },
        moduleName:'LiveVideo',
        player: null
      }
    },   
    onLoad(option){
   
   
      var that = this;
      that.player = wx.createLivePlayerContext("player"); 
      that.getData();
    },
    methods: {
   
   
      statechange(e) {
   
   
        console.log('live-player code:', e.detail.code)
      },
      error(e) {
   
   
        console.error('live-player error:', e.detail.errMsg)
      },
      isExsit(res) {
   
   
        if (res != null && res != '' && res != 'null') {
   
   
          return true
        }
        return false
      },
      getData(){
   
   
        var that = this;
        wx.request({
   
   
          url: _url, //后台获取视频直播详情地址
          method: 'GET', //方法POST、PUT、DELETE、GET
          header: {
   
    //请求头
            'content-type': 'application/json',
            'Authorization': that.globalData.token
          },
          success(res){
   
   
            that.obj = res.data.data
          }
        })
      },
    }
  }    
</script>

        

          
        
        
        

          

          AI 代码解读