因为原生，选择一家公司（前端如何防笔试作弊）

也是前几天的笔试题，让我了解和巩固了一些原生js的api。感谢贵公司收留我，自己也会努力提升自己的技术。

如何通过浏览器api调用摄像头，录音设备？

navigator可以获取当前浏览器的信息。

navigator.mediaDevices 该对象可提供对相机和麦克风等媒体输入设备的连接访问，也包括屏幕共享。

navigator.mediaDevices.getUserMedia 会提示用户给予使用媒体输入的许可。可以传入参数指定了请求的媒体类型和相对应的参数。 他会返回一个Promise对象，成功的回调会返回一个流媒体对象mediaStream。

在低版本浏览器中，我们可以使用URL.createObjectURL(mediaStream)来进行视频预览。但是在高版本浏览器中这种方式被禁止了，我们需要使用vedioDom.srcObject = mediaStream进行预览。

js 复制代码

// 想要获取一个最接近 400x400 的相机分辨率
    const constraints = { audio: true, video: { width: 400, height: 400 } };

    navigator.mediaDevices
      .getUserMedia(constraints)
      .then(function (mediaStream) {
        console.log("me", mediaStream)
        var video = document.querySelector("video");
        console.log("%O", video)

        // 旧的浏览器可能没有 srcObject
        if ("srcObject" in video) {
          video.srcObject = mediaStream;
        } else {
          // 防止在新的浏览器里使用它，应为它已经不再支持了 这种写法在新浏览器中不支持了。
          video.src = window.URL.createObjectURL(mediaStream);
        }
        video.onloadedmetadata = function (e) {
          video.play();
        };
      })
      .catch(function (err) {
        console.log(err.name + ": " + err.message);
      }); // 总是在最后检查错误

监听用户切换页面

beforeunload事件只有在用户有了交互行为后，例如填写表单，然后刷新页面，他才会弹出会话框提示用户。

js 复制代码

window.addEventListener('beforeunload', function (event) {
  event.preventDefault()
  // 添加一些确认用户是否离开的逻辑
  const confirmationMessage = '您有未保存的内容，确定离开吗？';
  event.returnValue = confirmationMessage; // 兼容旧版本浏览器
});

当浏览器窗口关闭或者刷新时，会触发 beforeunload 事件。当前页面不会直接关闭，可以点击确定按钮关闭或刷新，也可以取消关闭或刷新。

visibilitychange当其选项卡的内容变得可见或被隐藏时，会在 document 上触发 visibilitychange 事件。但是经过测试发现，只要当前页面可见就表示document.visibilityState不为hidden，而不是失去焦点的时候就会判为hidden例如打开微信层叠在浏览器上方就不会被认为是hidden。

js 复制代码

// 阻止当前用户离开该页面
let count = 5
document.addEventListener('visibilitychange', function () {
  // 用户离开了当前页面
  if (document.visibilityState === 'hidden') {
    count--
    document.title = '页面不可见';
    alert(`请勿离开此页面，${count}次后判为作弊！`)
  }

  // 用户打开或回到页面
  if (document.visibilityState === 'visible') {
    document.title = '页面可见';
  }
});

如何监听用户将焦点聚焦到其他app上时，触发提醒，还请各位大佬指点。

想到了一种间接方式，就是在答题时默认让其全屏，只要退出全屏就算一次失去焦点。 requestFullscreen 用于发出异步请求使元素进入全屏模式。

document.fullscreenEnabled是否可以开启全屏。
fullscreenchange,当元素全屏状态变化时触发。可以通过document.fullscreenElement属性去判断是否处于全屏状态，为非空（null），即处于全屏模式中。此事件不能被取消。

js 复制代码

 // 只有用户触发事件时，才可以使用全屏api
    const fullscreenButton = document.getElementById("fullscreenButton")
    function activeFullScreen() {
      const  element = document.documentElement; // 获取整个页面元素
      if (element.requestFullscreen) {
        element.requestFullscreen().catch(err => {
          console.log("err", err)
        });
      } else if (element.mozRequestFullScreen) { /* Firefox */
        element.mozRequestFullScreen();
      } else if (element.webkitRequestFullscreen) { /* Chrome, Safari and Opera */
        element.webkitRequestFullscreen();
      } else if (element.msRequestFullscreen) { /* IE/Edge */
        element.msRequestFullscreen();
      }
    }
    fullscreenButton.addEventListener('click', function() {
      if (document.fullscreenEnabled) {
        if (document.fullscreenElement === null) {
          // 如果当前没有全屏元素，进入全屏
          activeFullScreen()
        } 
        
        // else {
        //   // 如果当前已经全屏，退出全屏
        //   if (document.exitFullscreen) {
        //     document.exitFullscreen();
        //   } else if (document.mozCancelFullScreen) { /* Firefox */
        //     document.mozCancelFullScreen();
        //   } else if (document.webkitExitFullscreen) { /* Chrome, Safari and Opera */
        //     document.webkitExitFullscreen();
        //   } else if (document.msExitFullscreen) { /* IE/Edge */
        //     document.msExitFullscreen();
        //   }
        // }
      } else {
        alert('浏览器不支持全屏API');
      }
    });

阻止文本复制

全局阻止文本复制的方式有两种

在html中添加user-select: none;css属性。
全局监听selectstart事件，并阻止其默认行为。

js 复制代码

  // 开启禁用复制
  /**
   * 1. 全局监听selectstart事件，并阻止默认行为
   * 2. 在html标签中加上 user-select: none; css属性。
   * */
  window.addEventListener("selectstart", (e) => {
    e.preventDefault()
  })
  
  <html lang="en" style="user-select: none;">

禁用右键审查元素

我们可以通过contextmenu事件去监听用户打开上下文菜单，即鼠标右键。以前写过一篇文章介绍过如何自定义上下文菜单，请看这里。

js 复制代码

// 禁用鼠标右键
window.addEventListener('contextmenu', (e) => {
    e.preventDefault()
})

往期文章

专栏文章

最近也在学习nestjs，有一起小伙伴的@我哦。

一个星期找到工作，感谢贵公司收留我。😁

本人在上海，有"陪玩"的@我。