3 changed files with 292 additions and 5 deletions
@ -0,0 +1,181 @@ |
|||
|
|||
|
|||
<template> |
|||
<div class="flexBox"> |
|||
<input type="text" v-model="rtspUrl"> |
|||
<button @click="open">打开rtsp</button> |
|||
<button @click="close">关闭rtsp</button> |
|||
</div> |
|||
<div class="mpegPlayer" ref="mpegPlayer"></div> |
|||
<div>{{msg}}</div> |
|||
|
|||
<div class="flexBox"> |
|||
<input type="text" v-model="rtspUrl2"> |
|||
<button @click="open2">打开rtsp</button> |
|||
<button @click="close2">关闭rtsp</button> |
|||
</div> |
|||
<div class="mpegPlayer" ref="mpegPlayer2"></div> |
|||
<div>{{msg2}}</div> |
|||
|
|||
<div class="flexBox"> |
|||
<input type="text" v-model="rtspUrl3"> |
|||
<button @click="open3">打开rtsp</button> |
|||
<button @click="close3">关闭rtsp</button> |
|||
</div> |
|||
<div class="mpegPlayer" ref="mpegPlayer3"></div> |
|||
<div>{{msg3}}</div> |
|||
|
|||
<div class="flexBox"> |
|||
<input type="text" v-model="rtspUrl4"> |
|||
<button @click="open4">打开rtsp</button> |
|||
<button @click="close4">关闭rtsp</button> |
|||
</div> |
|||
<div class="mpegPlayer" ref="mpegPlayer4"></div> |
|||
<div>{{msg4}}</div> |
|||
|
|||
<div class="flexBox"> |
|||
<input type="text" v-model="rtspUrl5"> |
|||
<button @click="open5">打开rtsp</button> |
|||
<button @click="close5">关闭rtsp</button> |
|||
</div> |
|||
<div class="mpegPlayer" ref="mpegPlayer5"></div> |
|||
<div>{{msg5}}</div> |
|||
|
|||
<div class="flexBox"> |
|||
<input type="text" v-model="rtspUrl6"> |
|||
<button @click="open6">打开rtsp</button> |
|||
<button @click="close6">关闭rtsp</button> |
|||
</div> |
|||
<div class="mpegPlayer" ref="mpegPlayer6"></div> |
|||
<div>{{msg6}}</div> |
|||
|
|||
</template> |
|||
<script setup lang="ts"> |
|||
import { ref } from 'vue' |
|||
import MpegPlayer from 'jsmpeg-player' |
|||
const { ipcRenderer } = require('electron') |
|||
const rtspUrl = ref('') |
|||
const rtspUrl2 = ref('') |
|||
const rtspUrl3 = ref('') |
|||
const rtspUrl4 = ref('') |
|||
const rtspUrl5 = ref('') |
|||
const rtspUrl6 = ref('') |
|||
const mpegPlayer = ref() |
|||
const mpegPlayer2= ref() |
|||
const mpegPlayer3= ref() |
|||
const mpegPlayer4= ref() |
|||
const mpegPlayer5= ref() |
|||
const mpegPlayer6= ref() |
|||
const msg = ref('') |
|||
const msg2 = ref('') |
|||
const msg3 = ref('') |
|||
const msg4 = ref('') |
|||
const msg5 = ref('') |
|||
const msg6 = ref('') |
|||
let player: any = null |
|||
let player2: any = null |
|||
let player3: any = null |
|||
let player4: any = null |
|||
let player5: any = null |
|||
let player6: any = null |
|||
//////////////////////////////////////////// |
|||
const open = () => { |
|||
const res = ipcRenderer.sendSync('openRtsp', rtspUrl.value) |
|||
if (res.code === 200) { |
|||
player = new MpegPlayer.VideoElement(mpegPlayer.value, res.ws) |
|||
} |
|||
msg.value = res.msg |
|||
} |
|||
const close = () => { |
|||
const res = ipcRenderer.sendSync('closeRtsp', rtspUrl.value) |
|||
msg.value = res.msg |
|||
} |
|||
//////////////////////////////////////////// |
|||
const open2 = () => { |
|||
const res = ipcRenderer.sendSync('openRtsp', rtspUrl2.value) |
|||
if (res.code === 200) { |
|||
player2 = new MpegPlayer.VideoElement(mpegPlayer2.value, res.ws) |
|||
} |
|||
msg2.value = res.msg |
|||
} |
|||
const close2 = () => { |
|||
const res = ipcRenderer.sendSync('closeRtsp', rtspUrl2.value) |
|||
msg2.value = res.msg |
|||
} |
|||
//////////////////////////////////////////// |
|||
const open3 = () => { |
|||
const res = ipcRenderer.sendSync('openRtsp', rtspUrl3.value) |
|||
if (res.code === 200) { |
|||
player3 = new MpegPlayer.VideoElement(mpegPlayer3.value, res.ws) |
|||
} |
|||
msg3.value = res.msg |
|||
} |
|||
const close3 = () => { |
|||
const res = ipcRenderer.sendSync('closeRtsp', rtspUrl3.value) |
|||
msg3.value = res.msg |
|||
} |
|||
//////////////////////////// |
|||
const open4 = () => { |
|||
const res = ipcRenderer.sendSync('openRtsp', rtspUrl4.value) |
|||
if (res.code === 200) { |
|||
player4 = new MpegPlayer.VideoElement(mpegPlayer4.value, res.ws) |
|||
} |
|||
msg4.value = res.msg |
|||
} |
|||
const close4 = () => { |
|||
const res = ipcRenderer.sendSync('closeRtsp', rtspUrl4.value) |
|||
msg4.value = res.msg |
|||
} |
|||
//////////////////////////// |
|||
const open5 = () => { |
|||
const res = ipcRenderer.sendSync('openRtsp', rtspUrl5.value) |
|||
if (res.code === 200) { |
|||
player5 = new MpegPlayer.VideoElement(mpegPlayer5.value, res.ws) |
|||
} |
|||
msg5.value = res.msg |
|||
} |
|||
const close5 = () => { |
|||
const res = ipcRenderer.sendSync('closeRtsp', rtspUrl5.value) |
|||
msg5.value = res.msg |
|||
} |
|||
//////////////////////////// |
|||
const open6 = () => { |
|||
const res = ipcRenderer.sendSync('openRtsp', rtspUrl6.value) |
|||
if (res.code === 200) { |
|||
player6 = new MpegPlayer.VideoElement(mpegPlayer6.value, res.ws) |
|||
} |
|||
msg6.value = res.msg |
|||
} |
|||
const close6 = () => { |
|||
const res = ipcRenderer.sendSync('closeRtsp', rtspUrl6.value) |
|||
msg6.value = res.msg |
|||
} |
|||
</script> |
|||
<style> |
|||
* { |
|||
padding: 0; |
|||
margin: 0; |
|||
} |
|||
.flexBox { |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
height: 50px; |
|||
} |
|||
.flexBox input { |
|||
height: 30px; |
|||
width: 500px; |
|||
box-sizing: border-box; |
|||
padding-left: 8px; |
|||
} |
|||
.flexBox button { |
|||
height: 30px; |
|||
padding: 0 12px; |
|||
} |
|||
.mpegPlayer { |
|||
width: 800px; |
|||
height: 450px; |
|||
background: #ccc; |
|||
} |
|||
</style> |
|||
|
|||
Loading…
Reference in new issue