lives
A Vue.js project
使用
- 安装依赖
// 安装
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",
}
- 引入插件
// Test.vue
import Live from '@/utils'
- 调用 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
})
},