Multi-tab detection to achieve anti-cheating video training

Foreword

As an Internet company based on the enterprise-level education and training industry (especially the epidemic in the past 3 years), the proportion of online training compared to offline training has increased significantly, so it is necessary to consider how to prevent cheating in the definition of training business such as training while brushing drama.
Only to achieve the program to do ideas, the content of the article based on the actual individual project environment, for reference only, learn from each other

Project Environment

React 17.x + xgplayer

How do students cheat?

Leave the page in the video, open another monitor (open the new label card), and deactivate the page for a long time.

First of all, let’s take a look at the ‘document.visibilityState’ attribute. The return value is a string, which is respectively ‘hidden’, ‘visible’, ‘prerednder’

All three of the above cheating methods will cause the ‘document.visibilityState’ property to become ‘hidden’.

When the value of the ‘document.visibilityState’ property changes, the ‘visibilitychange’ event must be triggered.

What’s next?

In the project, the. jsx component is pageVideo based on the xgplayer package. In addition to the normal playback logic in the component, a listening event is added for the video after initialization.

  // pageVideo.jsx
  useEffect(() => {
    document.addEventListener('visibilitychange', handleVisibilitychange);
    return {
      document.removeEventListener('visibilitychange', handleVisibilitychange);
    }
  })

After the ‘visiblitychange’ event is detected and triggered, it is processed in the callback ‘handleVisiblitychange’. If the cheating criteria are met, the video is paused.

  // handleVisiblitychange
  const videoDom = document.getElementsByTagName('video')[0];
  if (document.hidden) {
    videoDom && videoDom.pause();
  }

In fact, the use of’ visiblitychange’ event to detect multi-label scenes has been completed. After reading the corresponding content documents, it is not difficult to understand its principle. Next, in order to meet the actual business needs, some optimization

How to achieve better interaction design?

Several factors need to be considered: -Prompt the course the learner is learning -Pause video playback -Give options to close the video or continue playing the video

To achieve the above points, it is necessary to cache the name of the playing video screen, cache the course logo being played, check whether the logo is consistent, and then customize the renderDom to display the pop-up window.

export const createTagCheckDom = (continuePlayCallback) => {
  if (document.getElementById('tagCheck')) return;
  const modalBoxDom = document.createElement('div');
  modalBoxDom.setAttribute('id', 'tagCheck');
  modalBoxDom.className = `${style.modalBoxSmall}`;
  const courseName = getStorage('CUR_COURSE_NAME');
  modalBoxDom.innerHTML =
    `<div class=${style.checkTagTip}>
      <div style="color: #fff">您正在学习另一个课程【${courseName}】，请将另一个课程【${courseName}】学习页关闭后再学习。</div>
      <div class=${style.interventionsBtnBox} style="margin-top: 10px">
        <div id="close" class=${style.interventionsBtn} style='padding: 6px 10px'>
          关闭此课程
        </div>
        <div id="continueStudy" class=${style.interventionsBtn} style='padding: 6px 10px'>
          继续学习
        </div>
      </div>
    </div>`;

document.getElementById('xg-player-video').appendChild(modalBoxDom);

const closeBtnDom = document.getElementById('close');
const continueBtnDom = document.getElementById('continueStudy');

closeBtnDom.addEventListener('click', () => {
  if (navigator.userAgent.includes('Firefox') || navigator.userAgent.includes('Chrome')) {
    window.location.href = 'about:blank';
    window.close();
  } else {
    window.opener = null;
    window.open('', '_self');
    window.close();
  }
    modalBoxDom.remove();
  });

continueBtnDom.addEventListener('click', () => {
  continuePlayCallback();
  modalBoxDom.remove();
  });
};

In addition, the course name is cached when the playback page initializes.

useEffect(() => {
  if (playerState.title) addCacheTag(playerState.title);
}, [playerState.title]);

useEffect(() => {
  window.onbeforeunload = removeCacheTage;
})

References

-Determine whether the user switches browser tab or task Page Visibility -MDN-visibilitychange -Watermelon Player API Documentation