因为原生，选择一家公司（前端如何防笔试作弊）
也是前几天的笔试题，让我了解和巩固了一些原生js的api。感谢贵公司收留我，自己也会努力提升自己的技术。
如何通过浏览器api调用摄像头，录音设备？
navigator可以获取当前浏览器的信息。
navigator.mediaDevices 该对象可提供对相机和麦克风等媒体输入设备的连接访问，也包括屏幕共享。
navigator.mediaDevices.getUserMedia 会提示用户给予使用媒体输入的许可。可以传入参数指定了请求的媒体类型和相对应的参数。 他会返回一个Promise对象，成功的回调会返回一个流媒体对象mediaStream。
在低版本浏览器中，我们可以使用URL.createObjectURL(mediaStream)来进行视频预览。但是在高版本浏览器中这种方式被禁止了，我们需要使用vedioDom.srcObject = mediaStream进行预览。
// 想要获取一个最接近 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事件只有在用户有了交互行为后，例如填写表单，然后刷新页面，他才会弹出会话框提示用户。
window.addEventListener('beforeunload', function (event) {
event.preventDefault()
// 添加一些确认用户是否离开的逻辑
const confirmationMessage = '您有未保存的内容，确定离开吗？';
event.returnValue = confirmationMessage; // 兼容旧版本浏览器
});
当浏览器窗口关闭或者刷新时，会触发 beforeunload 事件。当前页面不会直接关闭，可以点击确定按钮关闭或刷新，也可以取消关闭或刷新。
visibilitychange当其选项卡的内容变得可见或被隐藏时，会在 document 上触发 visibilitychange 事件。但是经过测试发现，只要当前页面可见就表示document.visibilityState不为hidden，而不是失去焦点的时候就会判为hidden例如打开微信层叠在浏览器上方就不会被认为是hidden。
// 阻止当前用户离开该页面
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），即处于全屏模式中。此事件不能被取消。
// 只有用户触发事件时，才可以使用全屏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事件，并阻止其默认行为。
// 开启禁用复制
/**
* 1. 全局监听selectstart事件，并阻止默认行为
* 2. 在html标签中加上 user-select: none; css属性。
* */
window.addEventListener("selectstart", (e) => {
e.preventDefault()
})
<html lang="en" style="user-select: none;">
禁用右键审查元素
// 禁用鼠标右键
window.addEventListener('contextmenu', (e) => {
e.preventDefault()
})
往期文章
专栏文章
最近也在学习nestjs，有一起小伙伴的@我哦。
一个星期找到工作，感谢贵公司收留我。😁
本人在上海，有“陪玩”的@我。