直播修改

src/views/pms/video_center/sip/components/player/deviceLiveStream.vue

@@ -35,7 +35,7 @@
     </el-row>
     <player
       ref="playerRef"
-      :playerinfo="playinfo"
+      :playerInfo="playinfo"
       class="components-container"
       style="margin-top: 10px"
     />

src/views/pms/video_center/sip/components/player/easy.vue

@@ -0,0 +1,274 @@
+<template>
+  <div ref="easyPlayerRef" style="width: 200px; height: 300px; background-color: #000000"></div>
+</template>
+
+<script setup>
+import { ref, reactive, onMounted, onBeforeUnmount, nextTick, watch } from 'vue'
+import { ptzdirection, ptzscale } from '@/api/pms/video/sipdevice'
+
+// 响应式数据
+const easyPlayerRef = ref(null)
+const playInfo = ref({})
+const playInfo2 = ref({})
+const playtype = ref('play')
+const props = defineProps({
+  playerInfo: {
+    type: Object,
+    default: null
+  },
+  width: {
+    type: String,
+    default: '1000px'
+  },
+  height: {
+    type: String,
+    default: '630px'
+  }
+})
+
+const videoUrl = ref('')
+const isPlay = ref(false)
+
+const config = reactive({
+  hasAudio: true,
+  isLive: true,
+  MSE: false,
+  WCS: false
+})
+
+// 方法定义
+const play = async (url) => {
+  console.log('EasyPlayer 播放视频 url: ', url)
+  videoUrl.value = url
+  await onDestroy()
+  playCreate()
+  onPlayer()
+}
+
+const pause = () => {
+  onPause()
+}
+
+const destroy = () => {
+  onDestroy()
+}
+
+const registercallback = (events, func) => {}
+
+const onUse = (type) => {
+  if (type === 'hasAudio') {
+    config.hasAudio = !config.hasAudio
+  } else {
+    config.MSE = false
+    config.WCS = false
+    if (type === 'MSE') config.MSE = true
+    if (type === 'WCS') config.WCS = true
+  }
+  if (isPlay.value) {
+    onDestroy().then(() => {
+      playCreate()
+      onPlayer()
+    })
+  }
+}
+
+const setFullscreen = () => {
+  if (playInfo.value) {
+    playInfo.value.setFullscreen(true)
+  }
+}
+
+const onPause = () => {
+  if (playInfo.value) {
+    playInfo.value.pause()
+  }
+}
+
+const onMute = () => {
+  if (playInfo.value) {
+    playInfo.value.setMute(true)
+  }
+}
+
+const onPlayer = () => {
+  isPlay.value = true
+  nextTick(() => {
+    if (playInfo.value) {
+      playInfo.value
+        .play(videoUrl.value)
+        .then(() => {})
+        .catch((e) => {
+          console.error(e)
+        })
+    }
+  })
+}
+
+const onPlayerPlayback = () => {
+  onDestroy().then(() => {
+    playCreate()
+    config.isLive = false
+    nextTick(() => {
+      if (playInfo.value) {
+        playInfo.value
+          .play(videoUrl.value)
+          .then(() => {})
+          .catch((e) => {
+            console.error(e)
+          })
+      }
+    })
+  })
+}
+
+const onStop = async () => {
+  isPlay.value = false
+  await onDestroy()
+  playCreate()
+}
+
+const onDestroy = () => {
+  return new Promise((resolve) => {
+    if (playInfo.value) {
+      playInfo.value.destroy()
+      playInfo.value = null
+    }
+    setTimeout(() => {
+      resolve()
+    }, 100)
+  })
+}
+
+const onReplay = async () => {
+  await onDestroy()
+  playCreate()
+  onPlayer()
+}
+
+// 处理PTZ控制
+const handlePtz = (arrow) => {
+  let leftRight = 0
+  let upDown = 0
+  if (arrow === 'left') {
+    leftRight = 2
+  } else if (arrow === 'right') {
+    leftRight = 1
+  } else if (arrow === 'up') {
+    upDown = 1
+  } else if (arrow === 'down') {
+    upDown = 2
+  }
+
+  const data = {
+    leftRight: leftRight,
+    upDown: upDown,
+    moveSpeed: 125
+  }
+
+  if (playInfo.value && playInfo.value.playtype !== '') {
+    ptzdirection(playInfo.value.deviceId, playInfo.value.channelId, data).then(async (response) => {
+      //console.log("云台方向控制：" + JSON.stringify(response))
+    })
+  }
+}
+
+const playCreate = () => {
+  const container = easyPlayerRef.value
+  if (!container) return
+
+  const easyplayer = new EasyPlayerPro(container, {
+    isLive: config.isLive,
+    bufferTime: 0.2,
+    stretch: false,
+    MSE: config.MSE,
+    WCS: config.WCS,
+    hasAudio: config.hasAudio,
+    watermark: { text: { content: '' }, right: 10, top: 10 },
+    isBand: true,
+    btns: {
+      play: true,
+      audio: true,
+      record: true,
+      zoom: true,
+      ptz: true,
+      quality: true,
+      stretch: false,
+      screenshot: true,
+      fullscreen: true
+    }
+  })
+
+  easyplayer.on('fullscreen', function (flag) {
+    console.log('is fullscreen', flag)
+  })
+
+  easyplayer.on('ptz', (direction) => {
+    handlePtz(direction)
+  })
+
+  easyplayer.on('playbackRate', (rate) => {
+    easyplayer.setRate(rate)
+  })
+
+  easyplayer.on('playbackSeek', (data) => {
+    console.log('playbackSeek', data)
+  })
+
+  playInfo.value = easyplayer
+  if (playInfo2.value && playInfo2.value.channelId && playInfo2.value.deviceId) {
+    playInfo.value.channelId = playInfo2.value.channelId
+    playInfo.value.deviceId = playInfo2.value.deviceId
+  }
+
+  playInfo.value.playtype = playtype.value
+}
+watch(
+  () => props.playerInfo,
+  (newVal, oldVal) => {
+    playInfo.value = newVal
+    playInfo2.value = newVal
+    if (newVal && newVal.playtype !== '') {
+      playtype.value = newVal.playtype
+    }
+  }
+)
+// 生命周期钩子
+onMounted(() => {
+  playInfo.value = props.playerInfo
+  playInfo2.value = props.playerInfo
+  if (playInfo.value && playInfo.value.playtype !== '') {
+    playtype.value = playInfo.value.playtype
+  }
+  playCreate()
+})
+
+onBeforeUnmount(() => {
+  onDestroy()
+})
+
+defineExpose({
+  play,
+  pause,
+  destroy,
+  registercallback,
+  onUse,
+  setFullscreen,
+  onPause,
+  onMute,
+  onPlayer,
+  onPlayerPlayback,
+  onStop,
+  onReplay
+})
+</script>
+
+<style>
+.LoadingTitle {
+  min-width: 70px;
+}
+
+/* 隐藏logo */
+.iconqingxiLOGO {
+  display: none !important;
+}
+</style>

src/views/pms/video_center/sip/components/player/easyplayer.vue

@@ -3,11 +3,28 @@
 </template>
 
 <script setup>
-import { ref, reactive, onMounted, onBeforeUnmount, nextTick } from 'vue'
+import { ref, reactive, onMounted, onBeforeUnmount, nextTick, watch } from 'vue'
+import { ptzdirection, ptzscale } from '@/api/pms/video/sipdevice'
 
 // 响应式数据
 const easyPlayerRef = ref(null)
-let playerInfo = ref(null)
+const playInfo = ref({})
+const playInfo2 = ref({})
+const playtype = ref('play')
+const props = defineProps({
+  playerInfo: {
+    type: Object,
+    default: null
+  },
+  width: {
+    type: String,
+    default: '1000px'
+  },
+  height: {
+    type: String,
+    default: '630px'
+  }
+})
 
 const videoUrl = ref('')
 const isPlay = ref(false)
@@ -56,28 +73,28 @@ const onUse = (type) => {
 }
 
 const setFullscreen = () => {
-  if (playerInfo.value) {
-    playerInfo.value.setFullscreen(true)
+  if (playInfo.value) {
+    playInfo.value.setFullscreen(true)
   }
 }
 
 const onPause = () => {
-  if (playerInfo.value) {
-    playerInfo.value.pause()
+  if (playInfo.value) {
+    playInfo.value.pause()
   }
 }
 
 const onMute = () => {
-  if (playerInfo.value) {
-    playerInfo.value.setMute(true)
+  if (playInfo.value) {
+    playInfo.value.setMute(true)
   }
 }
 
 const onPlayer = () => {
   isPlay.value = true
   nextTick(() => {
-    if (playerInfo.value) {
-      playerInfo.value
+    if (playInfo.value) {
+      playInfo.value
         .play(videoUrl.value)
         .then(() => {})
         .catch((e) => {
@@ -92,8 +109,8 @@ const onPlayerPlayback = () => {
     playCreate()
     config.isLive = false
     nextTick(() => {
-      if (playerInfo.value) {
-        playerInfo.value
+      if (playInfo.value) {
+        playInfo.value
           .play(videoUrl.value)
           .then(() => {})
           .catch((e) => {
@@ -112,9 +129,9 @@ const onStop = async () => {
 
 const onDestroy = () => {
   return new Promise((resolve) => {
-    if (playerInfo.value) {
-      playerInfo.value.destroy()
-      playerInfo.value = null
+    if (playInfo.value) {
+      playInfo.value.destroy()
+      playInfo.value = null
     }
     setTimeout(() => {
       resolve()
@@ -128,6 +145,33 @@ const onReplay = async () => {
   onPlayer()
 }
 
+// 处理PTZ控制
+const handlePtz = (arrow) => {
+  let leftRight = 0
+  let upDown = 0
+  if (arrow === 'left') {
+    leftRight = 2
+  } else if (arrow === 'right') {
+    leftRight = 1
+  } else if (arrow === 'up') {
+    upDown = 1
+  } else if (arrow === 'down') {
+    upDown = 2
+  }
+
+  const data = {
+    leftRight: leftRight,
+    upDown: upDown,
+    moveSpeed: 125
+  }
+
+  if (playInfo.value && playInfo.value.playtype !== '') {
+    ptzdirection(playInfo.value.deviceId, playInfo.value.channelId, data).then(async (response) => {
+      //console.log("云台方向控制：" + JSON.stringify(response))
+    })
+  }
+}
+
 const playCreate = () => {
   const container = easyPlayerRef.value
   if (!container) return
@@ -158,6 +202,10 @@ const playCreate = () => {
     console.log('is fullscreen', flag)
   })
 
+  easyplayer.on('ptz', (direction) => {
+    handlePtz(direction)
+  })
+
   easyplayer.on('playbackRate', (rate) => {
     easyplayer.setRate(rate)
   })
@@ -166,11 +214,31 @@ const playCreate = () => {
     console.log('playbackSeek', data)
   })
 
-  playerInfo.value = easyplayer
-}
+  playInfo.value = easyplayer
+  if (playInfo2.value && playInfo2.value.channelId && playInfo2.value.deviceId) {
+    playInfo.value.channelId = playInfo2.value.channelId
+    playInfo.value.deviceId = playInfo2.value.deviceId
+  }
 
+  playInfo.value.playtype = playtype.value
+}
+watch(
+  () => props.playerInfo,
+  (newVal, oldVal) => {
+    playInfo.value = newVal
+    playInfo2.value = newVal
+    if (newVal && newVal.playtype !== '') {
+      playtype.value = newVal.playtype
+    }
+  }
+)
 // 生命周期钩子
 onMounted(() => {
+  playInfo.value = props.playerInfo
+  playInfo2.value = props.playerInfo
+  if (playInfo.value && playInfo.value.playtype !== '') {
+    playtype.value = playInfo.value.playtype
+  }
   playCreate()
 })