62 lines
1.2 KiB
Markdown
62 lines
1.2 KiB
Markdown
|
# lives
|
|||
|
|
|
|||
|
|
> A Vue.js project
|
|||
|
|
|
|||
|
|
## 使用
|
|||
|
|
|
|||
|
|
1. 安装依赖
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
// 安装
|
|||
|
|
npm install --save flv.js
|
|||
|
|
npm install --save js-md5
|
|||
|
|
npm install --save js-base64
|
|||
|
|
npm install --save axios
|
|||
|
|
|
|||
|
|
// 依赖包
|
|||
|
|
"dependencies": {
|
|||
|
|
"axios": "^0.27.2",
|
|||
|
|
"flv.js": "^1.6.2",
|
|||
|
|
"js-base64": "^3.7.2",
|
|||
|
|
"js-md5": "^0.7.3",
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
2. 引入插件
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
// Test.vue
|
|||
|
|
import Live from '@/utils'
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
3. 调用 api
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
<template>
|
|||
|
|
<!-- 为需要注入分屏插件的容器元素设置 id，并设定宽高 -->
|
|||
|
|
<div id="wrapper" style="width: 1200px;height: 800px"> </div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
// 调用 init 方法，传入绑定的 dom 元素注入分屏插件
|
|||
|
|
mounted () {
|
|||
|
|
// 1. 登录
|
|||
|
|
Live.login('http://122.112.239.62', '9000', 'jxj', 'admin123')
|
|||
|
|
// 2. 绑定插件
|
|||
|
|
this.screens = Live.init(document.getElementById('wrapper'))
|
|||
|
|
// 3. 配置参数加载视频
|
|||
|
|
this.screens.setOptions(/* 这里传入配置对象 */ {
|
|||
|
|
deviceId: '1202291000447',
|
|||
|
|
channelNum: 1,
|
|||
|
|
streamType: 0,
|
|||
|
|
mediaType: 'FLV',
|
|||
|
|
recordTimeStart: '2022-07-16 04:00:00',
|
|||
|
|
recordTimeEnd: '2022-07-16 06:00:00',
|
|||
|
|
source: 'device',
|
|||
|
|
isDownload: 0,
|
|||
|
|
tokenType: 'Dynamic',
|
|||
|
|
expireTime: '0',
|
|||
|
|
https: false
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
```
|