00:00 / 06:05
连播
清屏
智能
倍速
点赞397
前端开发如何连接摄像头? 分享一个案例,浏览器连接摄像头,进行拍照并保存照片。 项目的应用场景就是:仓库人员拍照验货的一个功能。 1. 首先看一下如何启动摄像头? 第一步: 请求摄像头权限,获取媒体流 关键技术就是:navigator.mediaDevices.getUserMedia() navigator.mediaDevices 是现代浏览器提供的 JavaScript API,允许 Web 应用安全访问用户的媒体设备(摄像头、麦克风、屏幕等) 注意生产环境下必须用https协议才能生效 getUserMedia()方法,会提示用户是否允许使用媒体输入, 它返回一个解析为MediaStream对象的Promise,如果用户拒绝授权则无法打开摄像头,并返回错误信息。 所以我们用await进行同步处理,并且,如果拒绝访问的话需要try catch处理。 第二步:将媒体流"挂载"到 video 元素上 注意srcObject是视频元素video的"源对象"属性。 video标签设置autoPlay自动播放。 需要存储这个mediaStream流,关闭摄像头的时候会用到。 这样就实现了开启摄像头。 启动摄像头之后, - 摄像头被占用,指示灯亮起并分配硬件资源 2. 那么如何关闭摄像头? 遍历所有轨道,执行.stop()方法 停止并彻底释放硬件资源 stream.getTracks().forEach(track => track.stop()) 此时: - ✅ 摄像头指示灯熄灭 - ✅ 硬件资源被释放 - ✅ 其他应用可以使用摄像头 - ✅ 内存被清理 然后将stream设置为null,关闭摄像头 3. 如何拍照 其实这里有一个不显示出来的canvas元素, 然后绘制视频帧到这个canvas中, 再canvas.toDataURL()导出图片,就得到了base64的jpeg格式的图片 就是这么简单,你学费了吗? #软件开发 #验货拍照 #前端开发 #程序员 #连接摄像头
00:00 / 02:41
连播
清屏
智能
倍速
点赞10
00:00 / 03:18
连播
清屏
智能
倍速
点赞29
00:00 / 00:40
连播
清屏
智能
倍速
点赞2
00:00 / 02:33
连播
清屏
智能
倍速
点赞0
00:00 / 01:10
连播
清屏
智能
倍速
点赞197