html轻松实现录音、摄像、拍照

一、前言

上篇文章我们讲到了如何用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流媒体处理框架，由于这个框架简单好用，因此使用它就对了。

图片

图片

图片

录音.rar: https://url18.ctfile.com/f/7715018-962697735-878a82?p=6511 (访问密码: 6511)

可以看到，此时就实现了录音功能，并且还可以下载

三、摄像

摄像和录音都是使用的navigator.mediaDevices.getUserMedia这个函数，并返回一个promise进行处理，效果如图：

图片

图片

摄像.rar: https://url18.ctfile.com/f/7715018-962697756-77f038?p=6511 (访问密码: 6511)

可以看到，虽然小编热爱技术，但是锻炼这一块，小编也丝毫没有懈怠哈，大家闲暇之余不仅可以和小编讨论技术，还可以谈论健身。

四、拍照

这里我们是通过将摄像镜头中的画面截取来实现拍照功能的，我们来看下效果图：

图片

拍照.rar: https://url18.ctfile.com/f/7715018-962697750-c73015?p=6511 (访问密码: 6511)

只要点击拍摄照片，就可以实时捕获你的照片了。

五、结语

所有代码均在笔记本电脑上测试通过，如果你的是台式机，那可能抱歉，捕获不到画面，因为这个代码是需要调用摄像头的。并且还要求你可以录入声音，如果没有外接设备的话，录音也是录不到声音的。更多精彩好文敬请关注公众号“”简易编程网“”，提前查看更多好文。