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

一、Web端实现

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

npm install --save @liveqing/liveplayer
1

然后在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/'}
            ])
        ]
    }
 }
1
2
3
4
5
6
7
8
9
10
11
12

如果上面的方法不起作用的话，可以把上面三个文件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>   
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58

以上就是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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51