前端调取摄像头并实现拍照功能

最新推荐文章于 2024-05-31 10:04:55 发布

程序员周星星

最新推荐文章于 2024-05-31 10:04:55 发布

阅读量388

点赞数 8

文章标签：前端

本文链接：https://blog.csdn.net/zhouxingqi_123/article/details/134835495

版权

作者：韩振方

https://juejin.cn/post/7289662055183597603

前言

最近接到的一个需求十分有意思，设计整体实现了前端仿微信扫一扫的功能。整理了一下思路，做一个分享。

tips: 如果想要实现完整扫一扫的功能，你需要掌握一些前置知识，这次我们先讲如何实现拍照并且保存的功能。

一. window.navigator

你想调取手机的摄像头，首先你得先检验当前设备是否有摄像设备，window 身上自带了一个 navigator 属性，这个对象有一个叫做 mediaDevices 的属性是我们即将用到的。
于是我们就可以先设计一个叫做 checkCamera 的函数，用来在页面刚开始加载的时候执行。。
我们先看一下这个对象有哪些方法，你也许会看到下面的场景，会发现这个属性身上只有一个值为 null 的 ondevicechange 属性，不要怕，真正要用的方法其实在它的原型身上。
让我们点开它的原型属性，注意下面这两个方法，这是我们本章节的主角。
我们到这一步只是需要判断当前设备是否有摄像头，我们先调取 enumerateDevices 函数来查看当前媒体设备是否存在。它的返回值是一个 promise 类型，我们直接用 async 和 await 来简化一下代码。

从上图可以看出，我的电脑有两个音频设备和一个视频设备，那么我们就可以放下进行下一步了。

接下来就需要用到上面提到的第二个函数，navigator.getUserMedia。这个函数接收一个对象作为参数，这个对象可以预设一些值，来作为我们请求摄像头的一些参数。
这里我们的重点是 facingMode 这个属性，因为我们扫一扫一般都是后置摄像头

关注