一、前言
上篇文章我们讲到了如何用html制作一个屏幕录制功能的网页，今天我们再来讲讲录音和录像，它可以记录一个人在电脑前的动作和声音，因此我们需要用到录像和录音技术，好了，下面让我们开始吧，想要源代码的还是在对应图片的下面下载使用。文中有彩蛋，请大家仔细阅读。
二、录音
要想实现html中的录音功能，一般使用navigator.mediaDevices.getUserMedia这个函数，它会返回一个promise，另外还有一个旧的函数navigator.getUserMedia，因此我们可以写一个兼容性的函数，如下：
// 老的浏览器可能根本没有实现 mediaDevices，所以我们可以先设置一个空的对象
if (navigator.mediaDevices === undefined) {
navigator.mediaDevices = {};
}
// 一些浏览器部分支持 mediaDevices。我们不能直接给对象设置 getUserMedia
// 因为这样可能会覆盖已有的属性。这里我们只会在没有getUserMedia属性的时候添加它。
if (navigator.mediaDevices.getUserMedia === undefined) {
let getUserMedia =
navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ||
navigator.msGetUserMedia;
navigator.mediaDevices.getUserMedia = function(constraints) {
// 首先，如果有getUserMedia的话，就获得它
// 一些浏览器根本没实现它 - 那么就返回一个error到promise的reject来保持一个统一的接口
if (!getUserMedia) {
return Promise.reject(new Error('getUserMedia is not implemented in this browser'));
}
// 否则，为老的navigator.getUserMedia方法包裹一个Promise
return new Promise(function(resolve, reject) {
getUserMedia.call(navigator, constraints, resolve, reject);
});
};（摘自脚本之家）
不过这里为了操作方便，我们还是打算使用HZRecorder这个封装好的js流媒体处理框架，由于这个框架简单好用，因此使用它就对了。
[图片上传失败...(image-3ea33d-1697990491579)]
[图片上传失败...(image-9cb602-1697990491579)]
[图片上传失败...(image-23f4ad-1697990491579)]
录音.rar: https://url18.ctfile.com/f/7715018-962697735-878a82?p=6511 (访问密码: 6511)
可以看到，此时就实现了录音功能，并且还可以下载
三、摄像
摄像和录音都是使用的navigator.mediaDevices.getUserMedia这个函数，并返回一个promise进行处理，效果如图：
[图片上传失败...(image-bc4828-1697990491579)]
[图片上传失败...(image-76f4b1-1697990491579)]
摄像.rar: https://url18.ctfile.com/f/7715018-962697756-77f038?p=6511 (访问密码: 6511)
可以看到，虽然小编热爱技术，但是锻炼这一块，小编也丝毫没有懈怠哈，大家闲暇之余不仅可以和小编讨论技术，还可以谈论健身。
四、拍照
这里我们是通过将摄像镜头中的画面截取来实现拍照功能的，我们来看下效果图：
[图片上传失败...(image-dbf80a-1697990491579)]
拍照.rar: https://url18.ctfile.com/f/7715018-962697750-c73015?p=6511 (访问密码: 6511)
只要点击拍摄照片，就可以实时捕获你的照片了。
五、结语
所有代码均在笔记本电脑上测试通过，如果你的是台式机，那可能抱歉，捕获不到画面，因为这个代码是需要调用摄像头的。并且还要求你可以录入声音，如果没有外接设备的话，录音也是录不到声音的。
