|
|
<template>
<div v-loading="loading" style="width: 100%; height: 100%">
<div
ref="playerContainer"
class="video"
style="width: 100%; height: 100%"
></div>
</div>
</template>
<script>
import { clearAllDialog } from "@besovideo/webrtc-player";
import { PuPlayer } from "@besovideo/webrtc-player";
// import { authLogin } from "@/api/camearScreen";
import "@besovideo/webrtc-player/dist/main.es.css";
export default {
components: {},
props: {
puid: String,
},
data() {
return {
deveUi: "",
loading: false,
instance: null,
username: "admin",
password_encrypted:
"SHA256:6848d6405bf34bf9b2d82ed8822c756807632d3eaefedec90ac33cb32ac83671",
timestamp: "",
result: "",
token: "",
index: 0,
videoFit: "fill",
Controls: [
[
"volume",
"volumeSlider",
"information",
"screenshot",
"record",
"fullscreen",
"rotate",
"ptzControl",
],
],
};
},
computed: {},
watch: {},
methods: {
// 登录
// async login() {
// this.deveUi = this.puid;
// console.log(8888888888888888, this.$route.query);
// if (this.$route.query.deveUi) {
// this.deveUi = this.$route.query.deveUi;
// }
// this.timestamp = Date.parse(new Date()) / 1000;
// const { username, password_encrypted } = this;
// if (!username || !password_encrypted) return;
// try {
// let params = {
// username,
// password_encrypted,
// timestamp: this.timestamp,
// };
// await authLogin(params).then((res) => {
// console.log(res);
// this.token = res.data?.token;
// this.init();
// });
// } catch (e) {
// console.error(111, e);
// }
// },
// 登录
async login2() {
this.timestamp = Date.parse(new Date()) / 1000;
const { username, password_encrypted } = this;
if (!username || !password_encrypted) return;
try {
const r = await fetch("/bvcsp/v1/auth/login", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
username,
password_encrypted,
timestamp: this.timestamp,
}),
});
this.result = `${r.status} ${r.statusText}`;
if (r.ok || (r.status >= 200 && r.status < 300)) {
const res = await r.json();
this.result += ` code: ${res.code}, msg: ${res.msg}`;
// 设置token
this.token = res.data?.token;
this.isLogin = true;
this.setCookie("Authorization", this.token, res.data?.timeout);
return;
}
throw new Error(this.result);
} catch (e) {
console.error(e);
}
},
// 初始化
init() {
this.loading = true;
if (!this.token || !this.puid) return;
const { instance } = PuPlayer({
// (可选) 容器节点 注意一个容器内只能存在一个实例 当container为假值（包括false、null、undefined）时 将返回实例引用的dom节点 容器必须指定高度 参考高德地图
container: this.$refs.playerContainer,
// 必填 设备选项
puOption: {
// 设备id
// id: this.puid,
id: "PU_24882025",
// id: "PU_21328198",
// 设备通道号
index: 0,
},
muted: true,
// 必填 用户授权令牌
token: this.token,
videoFit: this.videoFit,
// (可选) 双击是否全屏
fullScreenOnDblclick: true,
// (可选) 启用控制器
enableController: true,
disabledControls: ["ptzControl", "rotate", "information"],
onConnected: () => {
console.log("onConnected 连接已建立");
},
onConnectedFailed: () => {
console.log("onConnectedFailed 连接建立失败");
},
onClose: () => {
console.log("onClose 连接已关闭（播放器关闭）");
},
onDisConnected: () => {
console.log("onDisConnected 连接已关闭（服务器断开连接）");
},
onDestroy: () => {
console.log("onDestroy 播放器实例已销毁");
},
});
this.instance = instance;
this.open();
},
// 销毁
destroy() {
// destroy前会执行close
this.instance?.destroy();
this.instance = null;
this.closed = true;
},
// 打开连接
async open() {
if (!this.instance) return;
try {
await this.instance.open();
this.closed = false;
this.loading = false;
} catch (e) {
console.log(e);
}
},
// 关闭连接
close() {
this.instance?.close();
this.closed = true;
},
},
created() {},
mounted() {
// 释放全部本地播放器打开过的dialog
clearAllDialog();
this.login2();
},
beforeDestroy() {
this.destroy();
},
};
</script>
|
|
poston 2023-4-4 20:16
favor
Owner