Showing
4 changed files
with
23 additions
and
19 deletions
| @@ -15,7 +15,7 @@ | @@ -15,7 +15,7 @@ | ||
| 15 | /> | 15 | /> |
| 16 | <title></title> | 16 | <title></title> |
| 17 | <link rel="icon" href="/favicon.ico" /> | 17 | <link rel="icon" href="/favicon.ico" /> |
| 18 | - <script src="/public/jessibuca/jessibuca.js"></script> | 18 | + <script src="/jessibuca/jessibuca.js"></script> |
| 19 | </head> | 19 | </head> |
| 20 | 20 | ||
| 21 | <body> | 21 | <body> |
| @@ -6,12 +6,12 @@ | @@ -6,12 +6,12 @@ | ||
| 6 | </div> | 6 | </div> |
| 7 | </template> | 7 | </template> |
| 8 | <script lang="ts"> | 8 | <script lang="ts"> |
| 9 | - // @ts-nocheck | ||
| 10 | import { onMounted, onUnmounted, ref, nextTick } from 'vue'; | 9 | import { onMounted, onUnmounted, ref, nextTick } from 'vue'; |
| 10 | + import Jessibuca from '../types/jessibuca'; | ||
| 11 | export default { | 11 | export default { |
| 12 | name: 'JessibucaDemo', | 12 | name: 'JessibucaDemo', |
| 13 | setup() { | 13 | setup() { |
| 14 | - let jessibuca = null; | 14 | + let jessibuca: Jessibuca | null = null; |
| 15 | const container = ref(null); | 15 | const container = ref(null); |
| 16 | const buffer = ref(null); | 16 | const buffer = ref(null); |
| 17 | const showBandwidth = ref(false); | 17 | const showBandwidth = ref(false); |
| @@ -42,7 +42,7 @@ | @@ -42,7 +42,7 @@ | ||
| 42 | ifFlv: false, | 42 | ifFlv: false, |
| 43 | forceNoOffscreen: forceNoOffscreen.value, | 43 | forceNoOffscreen: forceNoOffscreen.value, |
| 44 | isNotMute: false, | 44 | isNotMute: false, |
| 45 | - decoder: '/public/jessibuca/decoder.js', | 45 | + decoder: '/jessibuca/decoder.js', |
| 46 | }) as Jessibuca; | 46 | }) as Jessibuca; |
| 47 | 47 | ||
| 48 | // jessibuca.on('load', function () { | 48 | // jessibuca.on('load', function () { |
| @@ -128,7 +128,7 @@ | @@ -128,7 +128,7 @@ | ||
| 128 | onMounted(async () => { | 128 | onMounted(async () => { |
| 129 | createJessibuca(); | 129 | createJessibuca(); |
| 130 | await nextTick(); | 130 | await nextTick(); |
| 131 | - jessibuca.play(playUrl.value); | 131 | + jessibuca?.play(playUrl.value); |
| 132 | }); | 132 | }); |
| 133 | 133 | ||
| 134 | onUnmounted(() => { | 134 | onUnmounted(() => { |
| @@ -137,11 +137,12 @@ | @@ -137,11 +137,12 @@ | ||
| 137 | 137 | ||
| 138 | const play = () => { | 138 | const play = () => { |
| 139 | if (playUrl.value) { | 139 | if (playUrl.value) { |
| 140 | - jessibuca.play(playUrl.value); | 140 | + jessibuca?.play(playUrl.value); |
| 141 | } | 141 | } |
| 142 | }; | 142 | }; |
| 143 | + | ||
| 143 | const pause = () => { | 144 | const pause = () => { |
| 144 | - jessibuca.pause(); | 145 | + jessibuca?.pause(); |
| 145 | playing.value = false; | 146 | playing.value = false; |
| 146 | }; | 147 | }; |
| 147 | 148 |
| @@ -74,16 +74,16 @@ export const searchFormSchema: FormSchema[] | any = [ | @@ -74,16 +74,16 @@ export const searchFormSchema: FormSchema[] | any = [ | ||
| 74 | placeholder: '请选择设备类型', | 74 | placeholder: '请选择设备类型', |
| 75 | }, | 75 | }, |
| 76 | }, | 76 | }, |
| 77 | - { | ||
| 78 | - field: 'channelName', | ||
| 79 | - label: '通道名称', | ||
| 80 | - component: 'Input', | ||
| 81 | - colProps: { span: 6 }, | ||
| 82 | - componentProps: { | ||
| 83 | - maxLength: 255, | ||
| 84 | - placeholder: '请输入通道名称', | ||
| 85 | - }, | ||
| 86 | - }, | 77 | + // { |
| 78 | + // field: 'channelName', | ||
| 79 | + // label: '通道名称', | ||
| 80 | + // component: 'Input', | ||
| 81 | + // colProps: { span: 6 }, | ||
| 82 | + // componentProps: { | ||
| 83 | + // maxLength: 255, | ||
| 84 | + // placeholder: '请输入通道名称', | ||
| 85 | + // }, | ||
| 86 | + // }, | ||
| 87 | { | 87 | { |
| 88 | field: 'manufacturer', | 88 | field: 'manufacturer', |
| 89 | label: '厂家', | 89 | label: '厂家', |
| @@ -34,6 +34,8 @@ | @@ -34,6 +34,8 @@ | ||
| 34 | 34 | ||
| 35 | const videoPlayEl = ref<HTMLVideoElement>(); | 35 | const videoPlayEl = ref<HTMLVideoElement>(); |
| 36 | 36 | ||
| 37 | + const JessibucaRef = ref(); | ||
| 38 | + | ||
| 37 | const videoPlayInstance = ref<Nullable<VideoJsPlayer>>(); | 39 | const videoPlayInstance = ref<Nullable<VideoJsPlayer>>(); |
| 38 | 40 | ||
| 39 | const getOptions = computed(() => { | 41 | const getOptions = computed(() => { |
| @@ -80,8 +82,7 @@ | @@ -80,8 +82,7 @@ | ||
| 80 | emit('ready', unref(videoPlayInstance)); | 82 | emit('ready', unref(videoPlayInstance)); |
| 81 | }); | 83 | }); |
| 82 | }; | 84 | }; |
| 83 | - | ||
| 84 | - //播放/暂停 | 85 | + //播放/暂停s |
| 85 | const handleClick = () => { | 86 | const handleClick = () => { |
| 86 | console.log('播放/暂停'); | 87 | console.log('播放/暂停'); |
| 87 | unref(isPlay) && unref(videoPlayInstance)?.pause(); | 88 | unref(isPlay) && unref(videoPlayInstance)?.pause(); |
| @@ -89,6 +90,7 @@ | @@ -89,6 +90,7 @@ | ||
| 89 | }; | 90 | }; |
| 90 | 91 | ||
| 91 | const handleTopClick = async () => { | 92 | const handleTopClick = async () => { |
| 93 | + console.log(unref(JessibucaRef), 'JessibucaRef'); | ||
| 92 | console.log('上'); | 94 | console.log('上'); |
| 93 | handleControl('up'); | 95 | handleControl('up'); |
| 94 | setTimeout(() => { | 96 | setTimeout(() => { |
| @@ -171,6 +173,7 @@ | @@ -171,6 +173,7 @@ | ||
| 171 | 173 | ||
| 172 | <JessibucaDemo | 174 | <JessibucaDemo |
| 173 | class="video-js vjs-big-play-centered vjs-show-big-play-button-on-pause !w-8/10 !h-full" | 175 | class="video-js vjs-big-play-centered vjs-show-big-play-button-on-pause !w-8/10 !h-full" |
| 176 | + ref="JessibucaRef" | ||
| 174 | /> | 177 | /> |
| 175 | <div class="!w-2/10 bg-white flex items-center flex-col"> | 178 | <div class="!w-2/10 bg-white flex items-center flex-col"> |
| 176 | <h1>云台控制</h1> | 179 | <h1>云台控制</h1> |