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

曾经终败给现在 2023-10-04 17:02 25阅读 0赞

#### 一、Web端实现 ####

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

npm install --save @liveqing/liveplayer

然后在`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/'}
                ])
            ]
        }
     }

如果上面的方法不起作用的话，可以把上面三个文件`crossdomain.xml`、`liveplayer.swf`、`liveplayer-lib.min.js` 丢到`public`目录  
![在这里插入图片描述][f0a944d40e73466e84a8ea148b57be35.png]  
然后在页面上增加播放控制，具体代码如下：

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

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

#### 二、小程序端 ####

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

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

首先需要在公众号平台上开通音视频直播能力，  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5bem6L6555qE5aSp5aCC_size_20_color_FFFFFF_t_70_g_se_x_16]  
再把后台接口地址、视频直播地址域名添加到微信的域名信息设置。

具体代码如下：

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

[https_www.liveqing.com_docs_download_LiveQing.html]: https://www.liveqing.com/docs/download/LiveQing.html
[f0a944d40e73466e84a8ea148b57be35.png]: https://img-blog.csdnimg.cn/f0a944d40e73466e84a8ea148b57be35.png
[Link 1]: https://developers.weixin.qq.com/miniprogram/dev/component/live-player.html
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5bem6L6555qE5aSp5aCC_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/436a68ab47d343b6bf06f18ee340d416.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5bem6L6555qE5aSp5aCC,size_20,color_FFFFFF,t_70,g_se,x_16