Browse Source

添加禁止录屏功能

lex 10 months ago
parent
commit
a2a53f18d4
1 changed files with 104 additions and 2 deletions
  1. 104 2
      src/views/coursewarePlay/index.tsx

+ 104 - 2
src/views/coursewarePlay/index.tsx

@@ -16,7 +16,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 {
+  listenerMessage,
+  postMessage,
+  promisefiyPostMessage
+} from '@/helpers/native-message';
 import MusicScore from './component/musicScore';
 import iconDian from './image/icon-dian.svg';
 import iconPoint from './image/icon-point.svg';
@@ -124,7 +128,8 @@ export default defineComponent({
 
       videoState: 'init' as 'init' | 'play',
       videoItemRef: null as any,
-      animationState: 'start' as 'start' | 'end'
+      animationState: 'start' as 'start' | 'end',
+      disableScreenRecordingFlag: '0' // disable recording
     });
     const activeData = reactive({
       isAutoPlay: true, // 是否自动播放
@@ -338,7 +343,88 @@ export default defineComponent({
       }
     };
 
+    // 切换播放
+    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);
+    };
+    //录屏时间触发
+    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();
+        showDialog({
+          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 sysParamConfig = async () => {
+      try {
+        const { data } = await request.get(
+          state.platformApi + '/sysConfig/queryByParamName',
+          {
+            params: {
+              paramName: 'disable_screen_recording_flag'
+            }
+          }
+        );
+        data.disableScreenRecordingFlag = data.paramValue || '';
+      } catch {
+        //
+      }
+    };
     onMounted(async () => {
+      await sysParamConfig();
       await getDetail();
       const hasFree = String(data.detail?.accessScope) === '0';
       if (!hasFree) {
@@ -360,6 +446,22 @@ export default defineComponent({
       }
       // getCourseSchedule();
       window.addEventListener('message', iframeHandle);
+
+      if (data.disableScreenRecordingFlag === '1') {
+        //禁止录屏 ios
+        listenerMessage('setVideoPlayer', result => {
+          if (result?.content?.status == 'pause') {
+            handleLimitScreenRecord();
+          }
+        });
+        // 安卓
+        postMessage({
+          api: 'limitScreenRecord',
+          content: {
+            type: 1
+          }
+        });
+      }
     });
 
     const playRef = ref();