录屏

src/tenant/music/coursewarePlay/index.tsx

@@ -8,7 +8,8 @@ import {
   ref,
   watch,
   Transition,
-  computed
+  computed,
+  onBeforeUnmount
 } from 'vue'
 import iconBack from './image/back.svg'
 import styles from './index.module.less'
@@ -16,7 +17,11 @@ import 'plyr/dist/plyr.css'
 import request from '@/helpers/request'
 import { state } from '@/state'
 import { useRoute } from 'vue-router'
-import { postMessage, promisefiyPostMessage } from '@/helpers/native-message'
+import {
+  postMessage,
+  promisefiyPostMessage,
+  listenerMessage
+} from '@/helpers/native-message'
 import MusicScore from './component/musicScore'
 import iconDian from './image/icon-dian.svg'
 import iconPoint from './image/icon-point.svg'
@@ -258,6 +263,8 @@ export default defineComponent({
             type: 'fullscreen'
           }
         })
+        //检测是否录屏
+        handleLimitScreenRecord()
         setTimeout(() => {
           data.animationState = 'end'
         }, 500)
@@ -338,7 +345,68 @@ export default defineComponent({
           ev.data.show || (ev.data.playState == 'play' ? false : true)
       }
     }
+    //录屏时间触发
+    const handleLimitScreenRecord = async () => {
+      const result = await promisefiyPostMessage({
+        api: 'getDeviceStatus',
+        content: { type: 'video' }
+      })
+      const { status } = result?.content || {}
+      if (status == '1') {
+        data.itemList.forEach((item: any) => (item.autoPlay = false))
+        handleStop()
+        // 处理事件 - 事件事件后加载的
+        checkVideoPlay()
+        Dialog.alert({
+          title: '温馨提示',
+          message: '课件内容请勿录屏',
+          beforeClose: () => {
+            return new Promise(resolve => {
+              promisefiyPostMessage({
+                api: 'getDeviceStatus',
+                content: { type: 'video' }
+              }).then((res: any) => {
+                const content = res.content
+                if (content?.status == '1') {
+                  const activeItem = data.itemList[popupData.activeIndex]
+                  togglePlay(activeItem, false)
+                  resolve(false)
+                } else {
+                  const activeItem = data.itemList[popupData.activeIndex]
+                  togglePlay(activeItem, true)
+                  resolve(true)
+                }
+              })
+            })
+          }
+        })
+      }
+    }
+    // 切换播放
+    const togglePlay = (m: any, isPlay: boolean) => {
+      if (isPlay) {
+        m.videoEle?.play()
+      } else {
+        m.videoEle?.pause()
+      }
+    }
+    let timers: any = null
+    const checkVideoPlay = () => {
+      const activeVideoRef = data.videoItemRef?.getPlyrRef()
+      if (activeVideoRef) {
+        timers = setInterval(() => {
+          if (!activeVideoRef.paused()) {
+            activeVideoRef.pause()
+            clearInterval(timers)
+          }
+          activeVideoRef.pause()
+        }, 100)
+      }
 
+      setTimeout(() => {
+        clearInterval(timers)
+      }, 3000)
+    }
     onMounted(async () => {
       await getDetail()
       // const hasFree = String(data.detail?.accessScope) === '0'
@@ -361,8 +429,29 @@ export default defineComponent({
       // }
       // getCourseSchedule();
       window.addEventListener('message', iframeHandle)
+      // 禁止录屏 ios
+      listenerMessage('setVideoPlayer', result => {
+        if (result?.content?.status == 'pause') {
+          handleLimitScreenRecord()
+        }
+      })
+      // 禁止录屏 安卓
+      postMessage({
+        api: 'limitScreenRecord',
+        content: {
+          type: 1
+        }
+      })
+    })
+    onBeforeUnmount(() => {
+      // 取消 禁止录屏
+      postMessage({
+        api: 'limitScreenRecord',
+        content: {
+          type: 0
+        }
+      })
     })
-
     const playRef = ref()
     // 返回
     const goback = () => {