vue中实现视频直播（萤石云）/实时视频:

---

法一:使用ezuikit-js插件(accessToken+url)

适用情况：

1. 安装

  npm install ezuikit-js --save
1

2. 使用:

<template>
	<div id="video-container"></div>
</template>

<script>
import  EZUIKit from 'ezuikit-js';
export default {
    name: '',
    data() {
        return {
        	player:null,
        }
    },
    created(){
    	this.getVideoData()
    },
    methods:{
    	getVideoData(){
    		....
    		this.player = new EZUIKit.EZUIKitPlayer({
     			id: 'video-container', // 视频容器ID
     			accessToken: 'at.3bvmj4ycamlgdwgw1ig1jruma0wpohl6-48zifyb39c-13t5am6-yukyi86mz',
   				url: 'ezopen://open.ys7.com/203751922/1.live',
   				audio: 0, // 是否默认开启声音 0 - 关闭 1 - 开启
   				autoplay: true,
                width: 408,
                height: 237
			})
    	},
    },
    beforeDestroy() {
        this.player && this.player.stop() //销毁并停止直播视频
    }
}
</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

3.初始化时可传参数:

4.可调用的方法:

5.萤石云:

官网

开发文档

使用方法

6.最终效果:

法二:使用ezuikit.js文件(链接)

优点：不需要做控件按钮功能

适用情况：

1、官网下载js包

https://open.ys7.com/mobile/download.html

资源地址:https://download.csdn.net/download/weixin_53791978/86512096

2、（把下载好的ezuikit.js js包）放进vue 的 static 下

这里报错ezuikit is not undefined,就放到public下

3、public在index.html引入

<script src="static/ezuikit.js"></script>
1

4、使用:

<video id="videoCamera"
     style="object-fit: fill; width: 100%; height: 100%; background: #000;"
     :src="formData.videoCamera" autoplay="true" controls playsInline webkit-playsinline>
</video>  //记得给宽高

<script>
export default{
	data(){
		return{
			formData:{},
			palyer:null,// 页面跳转时注意关闭视频流，vue跳转原有任务不会停止或者在beforeDestroy销毁掉
		}
	},
	mounted(){
	
	},
	methods:{
		//获取播放地址
        getVideoCameraAddr(id, index) {
            const This = this
            let param = {
                id: id
            }
            videoCameraAddr(param).then(res => {
                if (res.data.code == 0) {
                        This.formData.videoCamera = res.data.data
                        This.palyer = null
                        setTimeout(function () {
                            This.player = new EZUIKit.EZUIPlayer('videoCamera')
                        }, 0)
                } else {
                    This.$message.error('获取视频监控摄相机播放地址失败' + res.data.msg)
                }
            })
        },
	},
	beforeDestroy(){
		this.palyer = null
	}
}
</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

法三:后端只给设备号

相关JS文件：https://download.csdn.net/download/weixin_53791978/87231692

<section class="sectionVideo">
  <div class="video_warp_item" v-for="(item, index) in liveAddress" :key="index">
     <video :id=item.tdh :src="item.url" autoplay muted controls playsInline webkit-playsinline></video>
  </div>
</section>
1
2
3
4
5

<script>
import { videoCameraId } from '@/api/manage/videoAPI.js'
import $ from 'jquery'  //  npm i jquery


export default {
    name: 'dashboard',
    data() {
        return {
            accessToken: '',
            liveAddress: [],
            diveType: '',
            players: [],
        }
    },
    methods: {
        // 获取磅点摄像头ID列表
        getbagndianID() {
            const This = this

            // 获取萤石云的accessToken
            $.ajax({
                "url": 'https://open.ys7.com/api/lapp/token/get',
                "type": 'POST',
                "dataType": "json",
                "data": {
                    appKey: '412f919adde14fe3af396d5bef2c6db1', //String	appKey	Y
                    appSecret: '7566546bfc7adc4f55b86af93703599c' //	String	appSecret	Y
                },
                "cache": false,
                "success": function (response) {
                    This.accessToken = response.data.accessToken;
                }
            })

            let param = {
                deptId: This.formData.deptId,
                stationId: This.formData.stationId,
                pageNum: "1", //	string	true	当前页数
                pageSize: "100", //	string	true	每页条数
            }
            videoCameraId(param).then(res => {
                if (res.success) {
                    // 根据列表长度获取播放地址
                    if (res.result.list.length <= 0) {
                        This.$message.error('暂无数据,磅点摄相机列表为空' + res.data.msg)
                    } else {
                        res.result.list.forEach((item, index) => {
                            this.getDeviceInfo(item.id, index, item.deviceNumber, This.accessToken);
                        })
                    }
                } else {
                    This.$message.error('获取视频监控摄相机ID列表失败' + res.data.msg)
                }
            })
        },
        // 查询设备类型
        getDeviceInfo(id, indexer, deviceNum, accessToken) {
            const that = this
            $.ajax({
                "url": 'https://open.ys7.com/api/lapp/device/info',
                "header": {
                    'Content-Type': 'application/x-www-form-urlencoded'
                },
                "type": 'POST',
                "dataType": "json",
                "data": {
                    accessToken: accessToken, //	String	授权过程获取的access_token	Y
                    deviceSerial: deviceNum, // G66585615  J29276929
                },
                "success": function (res) {
                    if (res.code == 200) {
                        if (res.data.model.indexOf('IPC') >= 0) { //摄像机
                            this.diveType = 1;
                            that.liveAddress = []
                            this.getUrl(accessToken, deviceNum, 1);
                            setTimeout(() => {
                                if (that.liveAddress.length > 0) {
                                    that.players = [];
                                    that.liveAddress.forEach((item, i) => {
                                        let player = new EZUIKit.EZUIPlayer(item.tdh)
                                        that.players.push(player);
                                    })
                                }
                            }, 500)
                        } else { //录像机
                            this.diveType = 2;
                            let tdS = [];
                            // 获取设备通道号
                            $.ajax({
                                "url": 'https://open.ys7.com/api/lapp/device/camera/list',
                                "header": {
                                    'Content-Type': 'application/x-www-form-urlencoded' //multipart/form-data text/plain
                                },
                                "type": 'POST',
                                "dataType": "json",
                                "data": {
                                    accessToken: accessToken, //	String	授权过程获取的access_token	Y
                                    deviceSerial: deviceNum
                                },
                                "success": function (response) {
                                    response.data.forEach((item) => {
                                        if (item.status == 1) { tdS.push(item) }
                                    })
                                    that.liveAddress = []
                                    tdS.forEach((item) => {
                                        that.getUrl(accessToken, deviceNum, item.channelNo);
                                    })
                                    setTimeout(() => {
                                        if (that.liveAddress.length > 0) {
                                            that.players = [];
                                            that.liveAddress.forEach((item, i) => {
                                                let player = new EZUIKit.EZUIPlayer(item.tdh)
                                                that.players.push(player);
                                            })
                                        }
                                    }, 500)
                                }
                            })
                        }
                    }
                },
            });
        },
        // 获取视频播放地址
        getUrl(accessToken, id, typeId) {
            const that = this
            $.ajax({
                "url": 'https://open.ys7.com/api/lapp/v2/live/address/get',
                "type": 'POST',
                "data": {
                    accessToken: accessToken, //	String	授权过程获取的access_token	Y
                    deviceSerial: id,
                    protocol: 2,
                    channelNo: typeId,
                },
                "dataType": "json",
                "success": function (res) {
                    let item = {
                        tdh: 'm' + res.data.id,
                        url: res.data.url
                    }
                    that.liveAddress.push(item)
                }
            })
        },
    },
    //销毁视频
    destroyed() {
        for (var j = 0; j < this.players.length; j++) {
            this.players[j].stop();
        }
    }
}
</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
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155