Skip to content

N
najiu-skynet-admin
Commit 2defcd63 authored by 朱松文's avatar 朱松文
Browse files
Options

视频demo

parent 9979eec8
Hide whitespace changes
Inline Side-by-side
Showing with 397 additions and 88 deletions
package-lock.json
View file @ 2defcd63
......@@ -1439,6 +1439,12 @@
}
}
},
"@types/video.js": {
"version": "7.3.26",
"resolved": "https://registry.npmjs.org/@types/video.js/-/video.js-7.3.26.tgz",
"integrity": "sha512-RspjR7uqX6+zRXJLQ5NrsPPppxJ/jta2X7U/7E5LZDSztVMy9+AjB1SOWcC3td1JzoEo67f0ns1tZo36zBCUqQ==",
"dev": true
},
"@types/webpack": {
"version": "4.41.31",
"resolved": "https://registry.nlark.com/@types/webpack/download/@types/webpack-4.41.31.tgz",
......@@ -1771,6 +1777,44 @@
"eslint-visitor-keys": "^2.0.0"
}
},
"@videojs/http-streaming": {
"version": "2.10.2",
"resolved": "https://registry.npmjs.org/@videojs/http-streaming/-/http-streaming-2.10.2.tgz",
"integrity": "sha512-JTAlAUHzj0sTsge2WBh4DWKM2I5BDFEZYOvzxmsK/ySILmI0GRyjAHx9uid68ZECQ2qbEAIRmZW5lWp0R5PeNA==",
"dev": true,
"requires": {
"@babel/runtime": "^7.12.5",
"@videojs/vhs-utils": "3.0.3",
"aes-decrypter": "3.1.2",
"global": "^4.4.0",
"m3u8-parser": "4.7.0",
"mpd-parser": "0.19.0",
"mux.js": "5.13.0",
"video.js": "^6 || ^7"
}
},
"@videojs/vhs-utils": {
"version": "3.0.3",
"resolved": "https://registry.npmjs.org/@videojs/vhs-utils/-/vhs-utils-3.0.3.tgz",
"integrity": "sha512-bU7daxDHhzcTDbmty1cXjzsTYvx2cBGbA8hG5H2Gvpuk4sdfuvkZtMCwtCqL59p6dsleMPspyaNS+7tWXx2Y0A==",
"dev": true,
"requires": {
"@babel/runtime": "^7.12.5",
"global": "^4.4.0",
"url-toolkit": "^2.2.1"
}
},
"@videojs/xhr": {
"version": "2.6.0",
"resolved": "https://registry.npmjs.org/@videojs/xhr/-/xhr-2.6.0.tgz",
"integrity": "sha512-7J361GiN1tXpm+gd0xz2QWr3xNWBE+rytvo8J3KuggFaLg+U37gZQ2BuPLcnkfGffy2e+ozY70RHC8jt7zjA6Q==",
"dev": true,
"requires": {
"@babel/runtime": "^7.5.5",
"global": "~4.4.0",
"is-function": "^1.0.1"
}
},
"@vue/babel-helper-vue-jsx-merge-props": {
"version": "1.2.1",
"resolved": "https://registry.nlark.com/@vue/babel-helper-vue-jsx-merge-props/download/@vue/babel-helper-vue-jsx-merge-props-1.2.1.tgz",
......@@ -2595,6 +2639,12 @@
"@xtuc/long": "4.2.2"
}
},
"@xmldom/xmldom": {
"version": "0.7.5",
"resolved": "https://registry.npmjs.org/@xmldom/xmldom/-/xmldom-0.7.5.tgz",
"integrity": "sha512-V3BIhmY36fXZ1OtVcI9W+FxQqxVLsPKcNjWigIaa81dLC9IolJl5Mt4Cvhmr0flUnjSpTdrbMTSbXqYqV5dT6A==",
"dev": true
},
"@xtuc/ieee754": {
"version": "1.2.0",
"resolved": "https://registry.nlark.com/@xtuc/ieee754/download/@xtuc/ieee754-1.2.0.tgz",
......@@ -2647,6 +2697,18 @@
"integrity": "sha1-vxEWycdYxRt6kz0pa3LCIe2UKLY=",
"dev": true
},
"aes-decrypter": {
"version": "3.1.2",
"resolved": "https://registry.npmjs.org/aes-decrypter/-/aes-decrypter-3.1.2.tgz",
"integrity": "sha512-42nRwfQuPRj9R1zqZBdoxnaAmnIFyDi0MNyTVhjdFOd8fifXKKRfwIHIZ6AMn1or4x5WONzjwRTbTWcsIQ0O4A==",
"dev": true,
"requires": {
"@babel/runtime": "^7.12.5",
"@videojs/vhs-utils": "^3.0.0",
"global": "^4.4.0",
"pkcs7": "^1.0.4"
}
},
"ajv": {
"version": "6.12.6",
"resolved": "https://registry.nlark.com/ajv/download/ajv-6.12.6.tgz?cache=0&sync_timestamp=1631470871211&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fajv%2Fdownload%2Fajv-6.12.6.tgz",
......@@ -5262,6 +5324,12 @@
}
}
},
"dom-walk": {
"version": "0.1.2",
"resolved": "https://registry.npmjs.org/dom-walk/-/dom-walk-0.1.2.tgz",
"integrity": "sha512-6QvTW9mrGeIegrFXdtQi9pk7O/nSK6lSdXW2eqUspN5LWD7UTji2Fqw5V2YLjBpHEoU9Xl/eUWNpDeZvoyOv2w==",
"dev": true
},
"domain-browser": {
"version": "1.2.0",
"resolved": "https://registry.nlark.com/domain-browser/download/domain-browser-1.2.0.tgz?cache=0&sync_timestamp=1627591557212&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fdomain-browser%2Fdownload%2Fdomain-browser-1.2.0.tgz",
......@@ -6629,6 +6697,16 @@
"integrity": "sha1-jFoUlNIGbFcMw7/kSWF1rMTVAqs=",
"dev": true
},
"global": {
"version": "4.4.0",
"resolved": "https://registry.npmjs.org/global/-/global-4.4.0.tgz",
"integrity": "sha512-wv/LAoHdRE3BeTGz53FAamhGlPLhlssK45usmGFThIi4XqnBmjKQ16u+RNbP7WvigRZDxUsM0J3gcQ5yicaL0w==",
"dev": true,
"requires": {
"min-document": "^2.19.0",
"process": "^0.11.10"
}
},
"globals": {
"version": "11.12.0",
"resolved": "https://registry.nlark.com/globals/download/globals-11.12.0.tgz?cache=0&sync_timestamp=1628810148451&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fglobals%2Fdownload%2Fglobals-11.12.0.tgz",
......@@ -7313,6 +7391,12 @@
"integrity": "sha1-8w9xbI4r00bHtn0985FVZqfAVgc=",
"dev": true
},
"individual": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/individual/-/individual-2.0.0.tgz",
"integrity": "sha1-gzsJfa0jKU52EXqY+zjg2a1hu5c=",
"dev": true
},
"infer-owner": {
"version": "1.0.4",
"resolved": "https://registry.nlark.com/infer-owner/download/infer-owner-1.0.4.tgz",
......@@ -7688,6 +7772,12 @@
"integrity": "sha1-8Rb4Bk/pCz94RKOJl8C3UFEmnx0=",
"dev": true
},
"is-function": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/is-function/-/is-function-1.0.2.tgz",
"integrity": "sha512-lw7DUp0aWXYg+CBCN+JKkcE0Q2RayZnSvnZBlwgxHBQhqt5pZNVy4Ri7H9GmmXkdu7LUthszM+Tor1u/2iBcpQ==",
"dev": true
},
"is-glob": {
"version": "4.0.1",
"resolved": "https://registry.nlark.com/is-glob/download/is-glob-4.0.1.tgz",
......@@ -7993,6 +8083,12 @@
"verror": "1.10.0"
}
},
"keycode": {
"version": "2.2.0",
"resolved": "https://registry.npmjs.org/keycode/-/keycode-2.2.0.tgz",
"integrity": "sha1-PQr1bce4uOXLqNCpfxByBO7CKwQ=",
"dev": true
},
"killable": {
"version": "1.0.1",
"resolved": "https://registry.npm.taobao.org/killable/download/killable-1.0.1.tgz",
......@@ -8244,6 +8340,17 @@
"yallist": "^3.0.2"
}
},
"m3u8-parser": {
"version": "4.7.0",
"resolved": "https://registry.npmjs.org/m3u8-parser/-/m3u8-parser-4.7.0.tgz",
"integrity": "sha512-48l/OwRyjBm+QhNNigEEcRcgbRvnUjL7rxs597HmW9QSNbyNvt+RcZ9T/d9vxi9A9z7EZrB1POtZYhdRlwYQkQ==",
"dev": true,
"requires": {
"@babel/runtime": "^7.12.5",
"@videojs/vhs-utils": "^3.0.0",
"global": "^4.4.0"
}
},
"make-dir": {
"version": "3.1.0",
"resolved": "https://registry.npm.taobao.org/make-dir/download/make-dir-3.1.0.tgz",
......@@ -8448,6 +8555,15 @@
"integrity": "sha1-ggyGo5M0ZA6ZUWkovQP8qIBX0CI=",
"dev": true
},
"min-document": {
"version": "2.19.0",
"resolved": "https://registry.npmjs.org/min-document/-/min-document-2.19.0.tgz",
"integrity": "sha1-e9KC4/WELtKVu3SM3Z8f+iyCRoU=",
"dev": true,
"requires": {
"dom-walk": "^0.1.0"
}
},
"mini-css-extract-plugin": {
"version": "0.9.0",
"resolved": "https://registry.nlark.com/mini-css-extract-plugin/download/mini-css-extract-plugin-0.9.0.tgz?cache=0&sync_timestamp=1631375762466&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fmini-css-extract-plugin%2Fdownload%2Fmini-css-extract-plugin-0.9.0.tgz",
......@@ -8589,6 +8705,18 @@
"run-queue": "^1.0.3"
}
},
"mpd-parser": {
"version": "0.19.0",
"resolved": "https://registry.npmjs.org/mpd-parser/-/mpd-parser-0.19.0.tgz",
"integrity": "sha512-FDLIXtZMZs99fv5iXNFg94quNFT26tobo0NUgHu7L3XgZvEq1NBarf5yxDFFJ1zzfbcmtj+NRaml6nYIxoPWvw==",
"dev": true,
"requires": {
"@babel/runtime": "^7.12.5",
"@videojs/vhs-utils": "^3.0.2",
"@xmldom/xmldom": "^0.7.2",
"global": "^4.4.0"
}
},
"ms": {
"version": "2.1.2",
"resolved": "https://registry.nlark.com/ms/download/ms-2.1.2.tgz",
......@@ -8617,6 +8745,15 @@
"integrity": "sha1-FjDEKyJR/4HiooPelqVJfqkuXg0=",
"dev": true
},
"mux.js": {
"version": "5.13.0",
"resolved": "https://registry.npmjs.org/mux.js/-/mux.js-5.13.0.tgz",
"integrity": "sha512-PkmnzHcTQjUBEHp3KRPQAFoNkJtKlpCEvsYtXDfDrC+/WqbMuxHvoYfmAbHVAH7Sa/KliPVU0dT1ureO8wilog==",
"dev": true,
"requires": {
"@babel/runtime": "^7.11.2"
}
},
"mz": {
"version": "2.7.0",
"resolved": "https://registry.npm.taobao.org/mz/download/mz-2.7.0.tgz",
......@@ -9485,6 +9622,15 @@
"pinkie": "^2.0.0"
}
},
"pkcs7": {
"version": "1.0.4",
"resolved": "https://registry.npmjs.org/pkcs7/-/pkcs7-1.0.4.tgz",
"integrity": "sha512-afRERtHn54AlwaF2/+LFszyAANTCggGilmcmILUzEjvs3XgFZT+xE6+QWQcAGmu4xajy+Xtj7acLOPdx5/eXWQ==",
"dev": true,
"requires": {
"@babel/runtime": "^7.5.5"
}
},
"pkg-dir": {
"version": "4.2.0",
"resolved": "https://registry.nlark.com/pkg-dir/download/pkg-dir-4.2.0.tgz",
......@@ -11068,6 +11214,15 @@
"aproba": "^1.1.1"
}
},
"rust-result": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/rust-result/-/rust-result-1.0.0.tgz",
"integrity": "sha1-NMdbLm3Dn+WHXlveyFteD5FTb3I=",
"dev": true,
"requires": {
"individual": "^2.0.0"
}
},
"rxjs": {
"version": "6.6.7",
"resolved": "https://registry.nlark.com/rxjs/download/rxjs-6.6.7.tgz",
......@@ -11083,6 +11238,15 @@
"integrity": "sha1-mR7GnSluAxN0fVm9/St0XDX4go0=",
"dev": true
},
"safe-json-parse": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/safe-json-parse/-/safe-json-parse-4.0.0.tgz",
"integrity": "sha1-fA9XjPzNEtM6ccDgVBPi7KFx6qw=",
"dev": true,
"requires": {
"rust-result": "^1.0.0"
}
},
"safe-regex": {
"version": "1.1.0",
"resolved": "https://registry.npm.taobao.org/safe-regex/download/safe-regex-1.1.0.tgz",
......@@ -12919,6 +13083,12 @@
"requires-port": "^1.0.0"
}
},
"url-toolkit": {
"version": "2.2.3",
"resolved": "https://registry.npmjs.org/url-toolkit/-/url-toolkit-2.2.3.tgz",
"integrity": "sha512-Da75SQoxsZ+2wXS56CZBrj2nukQ4nlGUZUP/dqUBG5E1su5GKThgT94Q00x81eVII7AyS1Pn+CtTTZ4Z0pLUtQ==",
"dev": true
},
"use": {
"version": "3.1.1",
"resolved": "https://registry.nlark.com/use/download/use-3.1.1.tgz",
......@@ -13017,6 +13187,42 @@
"extsprintf": "^1.2.0"
}
},
"video.js": {
"version": "7.15.4",
"resolved": "https://registry.npmjs.org/video.js/-/video.js-7.15.4.tgz",
"integrity": "sha512-hghxkgptLUvfkpktB4wxcIVF3VpY/hVsMkrjHSv0jpj1bW9Jplzdt8IgpTm9YhlB1KYAp07syVQeZcBFUBwhkw==",
"dev": true,
"requires": {
"@babel/runtime": "^7.12.5",
"@videojs/http-streaming": "2.10.2",
"@videojs/vhs-utils": "^3.0.3",
"@videojs/xhr": "2.6.0",
"aes-decrypter": "3.1.2",
"global": "^4.4.0",
"keycode": "^2.2.0",
"m3u8-parser": "4.7.0",
"mpd-parser": "0.19.0",
"mux.js": "5.13.0",
"safe-json-parse": "4.0.0",
"videojs-font": "3.2.0",
"videojs-vtt.js": "^0.15.3"
}
},
"videojs-font": {
"version": "3.2.0",
"resolved": "https://registry.npmjs.org/videojs-font/-/videojs-font-3.2.0.tgz",
"integrity": "sha512-g8vHMKK2/JGorSfqAZQUmYYNnXmfec4MLhwtEFS+mMs2IDY398GLysy6BH6K+aS1KMNu/xWZ8Sue/X/mdQPliA==",
"dev": true
},
"videojs-vtt.js": {
"version": "0.15.3",
"resolved": "https://registry.npmjs.org/videojs-vtt.js/-/videojs-vtt.js-0.15.3.tgz",
"integrity": "sha512-5FvVsICuMRx6Hd7H/Y9s9GDeEtYcXQWzGMS+sl4UX3t/zoHp3y+isSfIPRochnTH7h+Bh1ILyC639xy9Z6kPag==",
"dev": true,
"requires": {
"global": "^4.3.1"
}
},
"vm-browserify": {
"version": "1.1.2",
"resolved": "https://registry.nlark.com/vm-browserify/download/vm-browserify-1.1.2.tgz",
......
src/assets/scss/myVideo.scss 0 → 100644
View file @ 2defcd63
.najiu-dog-track {
position: absolute;
top: 30px;
left: 60px;
width: 30px;
height: 80px;
border: 1px solid red;
}
\ No newline at end of file
src/components/MyVideo/index.vue 0 → 100644
View file @ 2defcd63
<template>
<video id="najiu-player" class="video-js" muted preload="auto">
<source :src="src" type="video/mp4" />
<p class="vjs-no-js">当前浏览器不支持视频播放</p>
</video>
</template>
<script lang="ts">
import { Component, Vue, Prop } from "vue-property-decorator";
import "video.js/dist/video-js.min.css";
import videojs from "video.js";
import "@/components/MyVideo/track/index";
import "@/assets/scss/myVideo.scss";
@Component({})
export default class MyVideo extends Vue {
@Prop() private src!: string;
@Prop() private width!: number;
player = null;
mounted() {
this.$nextTick(() => {
this.player = videojs(
"najiu-player",
{
controls: true,
autoplay: true,
width: this.width,
},
function onPlayerReady() {
console.log("ready", this);
//@ts-ignore
this.addChild("DogTrack");
this.play();
}
);
});
}
beforeDestroy() {
if (this.player) {
this.player.dispose();
}
}
}
</script>
src/components/MyVideo/track/index.ts 0 → 100644
View file @ 2defcd63
import videojs from 'video.js'
const Component = videojs.getComponent('Component');
class DogTrack extends Component {
constructor(player, options) {
super(player, options);
player.on("timeupdate", (e) => this.update(e))
}
createEl(): HTMLDivElement {
const el = document.createElement("div")
el.classList.add("najiu-dog-track")
return el;
}
update(e) {
//@ts-ignore
console.log("update", this.player_.currentTime())
}
}
videojs.registerComponent("DogTrack", DogTrack)
\ No newline at end of file
src/mock/cameraData.ts 0 → 100644
View file @ 2defcd63
export default {
cameras: [
{
areaName: "开福区",
list: [
{ id: 1, name: "捞刀河街道楚家湖路爱民公园", total: 6588 },
{ id: 2, name: "开福大道与横四路交叉路口", total: 188 },
],
},
{
areaName: " 芙蓉区",
list: [
{ id: 3, name: "芙蓉路与雀园路交叉路口", total: 757 },
{ id: 4, name: "合平路与泉坝路交叉路口东北角", total: 0 },
{ id: 5, name: "八一路韶山路口", total: 2 },
],
},
{
areaName: " 芙蓉区",
list: [
{ id: 3, name: "芙蓉路与雀园路交叉路口", total: 757 },
{ id: 4, name: "合平路与泉坝路交叉路口东北角", total: 0 },
{ id: 5, name: "八一路韶山路口", total: 2 },
],
},
],
dogData: [
{
id: 1,
beginTime: "2021-09-13 09:51:47",
endTime: "2021-09-13 10:05:26",
totalTime: "13:39",
isHand: false,
dogType: "威尔士柯基犬",
hairColor: "黑白相间",
picture:
"http://10.2.100.131/tianwang/images/%E8%A7%86%E9%A2%91%E7%BB%93%E6%9E%84%E5%8C%96/u283.png",
},
{
id: 2,
beginTime: "2021-09-13 09:51:47",
endTime: "2021-09-13 10:05:26",
totalTime: "19:25",
isHand: true,
dogType: "卡斯罗犬",
hairColor: "黑色",
picture:
"http://10.2.100.131/tianwang/images/%E8%A7%86%E9%A2%91%E7%BB%93%E6%9E%84%E5%8C%96/u301.png",
},
{
id: 3,
beginTime: "2021-09-13 09:51:47",
endTime: "2021-09-13 10:05:26",
totalTime: "19:25",
isHand: true,
dogType: "卡斯罗犬",
hairColor: "黑色",
picture:
"http://10.2.100.131/tianwang/images/%E8%A7%86%E9%A2%91%E7%BB%93%E6%9E%84%E5%8C%96/u319.png",
},
{
id: 4,
beginTime: "2021-09-13 09:51:47",
endTime: "2021-09-13 10:05:26",
totalTime: "19:25",
isHand: true,
dogType: "卡斯罗犬",
hairColor: "黑色",
picture:
"http://10.2.100.131/tianwang/images/%E8%A7%86%E9%A2%91%E7%BB%93%E6%9E%84%E5%8C%96/u337.png",
},
{
id: 5,
beginTime: "2021-09-13 09:51:47",
endTime: "2021-09-13 10:05:26",
totalTime: "19:25",
isHand: true,
dogType: "卡斯罗犬",
hairColor: "黑色",
picture:
"http://10.2.100.131/tianwang/images/%E8%A7%86%E9%A2%91%E7%BB%93%E6%9E%84%E5%8C%96/u355.png",
},
],
};
\ No newline at end of file
src/views/dashboard/index.vue
View file @ 2defcd63
......@@ -10,7 +10,13 @@
<Camera v-for="(camera, i) in cameras" :key="i" :cameraItem="camera" />
</div>
</div>
<div class="player">player</div>
<div class="player" ref="player-container">
<MyVideo
v-if="width > 0"
src="http://skynet-test.inajiu.com:7011/sn-web/video/video"
:width="width"
/>
</div>
<div class="video-list">
<div class="title">犬只记录</div>
<div class="detail">
......@@ -21,102 +27,32 @@
</template>
<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { Component } from "vue-property-decorator";
import Camera from "@/components/Camera/index.vue";
import { DashBoardData } from "./data";
import DogInfo from "@/components/DogInfo/index.vue";
import Search from "@/components/Camera/search.vue";
import BaseVue from "@/types/baseVue";
import MyVideo from "@/components/MyVideo/index.vue";
import CameraData from "@/mock/cameraData";
@Component({ components: { Camera, DogInfo, Search } })
@Component({ components: { Camera, DogInfo, Search, MyVideo } })
export default class Dashboard extends BaseVue {
data(): DashBoardData {
return {
cameras: [
{
areaName: "开福区",
list: [
{ id: 1, name: "捞刀河街道楚家湖路爱民公园", total: 6588 },
{ id: 2, name: "开福大道与横四路交叉路口", total: 188 },
],
},
{
areaName: " 芙蓉区",
list: [
{ id: 3, name: "芙蓉路与雀园路交叉路口", total: 757 },
{ id: 4, name: "合平路与泉坝路交叉路口东北角", total: 0 },
{ id: 5, name: "八一路韶山路口", total: 2 },
],
},
{
areaName: " 芙蓉区",
list: [
{ id: 3, name: "芙蓉路与雀园路交叉路口", total: 757 },
{ id: 4, name: "合平路与泉坝路交叉路口东北角", total: 0 },
{ id: 5, name: "八一路韶山路口", total: 2 },
],
},
],
dogData: [
{
id: 1,
beginTime: "2021-09-13 09:51:47",
endTime: "2021-09-13 10:05:26",
totalTime: "13:39",
isHand: false,
dogType: "威尔士柯基犬",
hairColor: "黑白相间",
picture:
"http://10.2.100.131/tianwang/images/%E8%A7%86%E9%A2%91%E7%BB%93%E6%9E%84%E5%8C%96/u283.png",
},
{
id: 2,
beginTime: "2021-09-13 09:51:47",
endTime: "2021-09-13 10:05:26",
totalTime: "19:25",
isHand: true,
dogType: "卡斯罗犬",
hairColor: "黑色",
picture:
"http://10.2.100.131/tianwang/images/%E8%A7%86%E9%A2%91%E7%BB%93%E6%9E%84%E5%8C%96/u301.png",
},
{
id: 3,
beginTime: "2021-09-13 09:51:47",
endTime: "2021-09-13 10:05:26",
totalTime: "19:25",
isHand: true,
dogType: "卡斯罗犬",
hairColor: "黑色",
picture:
"http://10.2.100.131/tianwang/images/%E8%A7%86%E9%A2%91%E7%BB%93%E6%9E%84%E5%8C%96/u319.png",
},
{
id: 4,
beginTime: "2021-09-13 09:51:47",
endTime: "2021-09-13 10:05:26",
totalTime: "19:25",
isHand: true,
dogType: "卡斯罗犬",
hairColor: "黑色",
picture:
"http://10.2.100.131/tianwang/images/%E8%A7%86%E9%A2%91%E7%BB%93%E6%9E%84%E5%8C%96/u337.png",
},
{
id: 5,
beginTime: "2021-09-13 09:51:47",
endTime: "2021-09-13 10:05:26",
totalTime: "19:25",
isHand: true,
dogType: "卡斯罗犬",
hairColor: "黑色",
picture:
"http://10.2.100.131/tianwang/images/%E8%A7%86%E9%A2%91%E7%BB%93%E6%9E%84%E5%8C%96/u355.png",
},
],
};
return CameraData;
}
width = 0;
height = 0;
mounted() {
this.$nextTick(() => {
const p = this.$refs["player-container"];
//@ts-ignore
this.width = p.offsetWidth;
//@ts-ignore
this.height = p.offsetHeight;
console.log("&&&&", p, this.width, this.height);
});
}
//#endregion
}
</script>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment