调用摄像头并获取图像_获得对摄像头的访问权
现代浏览器可直接访问摄像头,Warning: 直接访问摄像头是一项强大功能,需要征得用户的同意,并且网站需要托管在安全来源 (HTTPS) 上。
获得对摄像头的访问权
我们可以利用 WebRTC 规范中名为 getUserMedia()
的 API 直接访问摄像头。此时系统将提示用户授予麦克风和摄像头的访问权。
如果授权成功,该 API 将返回一个 MediaStream
,其中包含来自摄像头的数据,然后我们可以将数据附加到一个 元素、播放它以显示实时预览或将其附加到一个 以获取快照。
要从摄像头获取数据,我们只需在传递给 getUserMedia()
API 的约束对象中设置 video: true
。
<video id="player" controls autoplay>video><script> var player = document.getElementById('player'); var handleSuccess = function(stream) { player.srcObject = stream; }; navigator.mediaDevices.getUserMedia({video: true}) .then(handleSuccess);script>
这段代码本身的用处并不大。我们所能做的就是获取视频数据并进行播放。
从摄像头获取快照
要从摄像头获取原始数据,我们需要获取 getUserMedia()
创建的照片信息流,然后处理数据。不同于 Web Audio
,并没有专用的照片信息流处理 API 可用来处理网络视频,因此我们需要稍微用点歪招才能从用户的摄像头采集快照。
操作流程如下:
1、创建一个 canvas 对象,用来绘制来自摄像头的图帧
2、获得对摄像头照片信息流的访问权
3、将其附加到一个 video 元素
4、如果想精确地采集某一帧,可以利用 drawImage()
将 video 元素中的数据添加到 canvas 对象。
<video id="player" controls autoplay>video><button id="capture">Capturebutton><canvas id="snapshot" width=320 height=240>canvas><script> var player = document.getElementById('player'); var snapshotCanvas = document.getElementById('snapshot'); var captureButton = document.getElementById('capture'); var handleSuccess = function(stream) { // Attach the video stream to the video element and autoplay. player.srcObject = stream; }; captureButton.addEventListener('click', function() { var context = snapshot.getContext('2d'); // Draw the video frame to the canvas. context.drawImage(player, 0, 0, snapshotCanvas.width, snapshotCanvas.height); }); navigator.mediaDevices.getUserMedia({video: true}) .then(handleSuccess);script>
将来自摄像头的数据存储在 canvas 对象中后,就可以对其进行多种处理。您可以:
1、将其直接上传至服务器
2、将其存储在本地
3、对图像应用好玩的特效
不需要时停止从摄像头流式传输视频
最好在不再需要时停止使用摄像头。这样做不仅可以节约电池电量和处理能力,还能增加用户对应用的体验。
要停止访问摄像头,只需在 getUserMedia()
返回的照片信息流的每个视频磁轨上调用 stop()
<video id="player" controls autoplay>video><button id="capture">Capturebutton><canvas id="snapshot" width=320 height=240>canvas><script> var player = document.getElementById('player'); var snapshotCanvas = document.getElementById('snapshot'); var captureButton = document.getElementById('capture'); var videoTracks; var handleSuccess = function(stream) { // Attach the video stream to the video element and autoplay. player.srcObject = stream; videoTracks = stream.getVideoTracks(); }; captureButton.addEventListener('click', function() { var context = snapshot.getContext('2d'); context.drawImage(player, 0, 0, snapshotCanvas.width, snapshotCanvas.height); // Stop all video streams. videoTracks.forEach(function(track) {track.stop()}); }); navigator.mediaDevices.getUserMedia({video: true}) .then(handleSuccess);script>
如果用户之前未授予网站对摄像头的访问权,则调用 getUserMedia 时浏览器会立即提示用户授予网站对摄像头的访问权。
用户讨厌在其机器上收到索要功能强大设备访问权的提示,他们常常会屏蔽权限请求。最好的做法是在首次需要权限时只请求访问摄像头。一旦用户授予了访问权,就不会再次收到提示。但如果用户拒绝授权,您就无法再次获得访问权,除非他们手动更改摄像头权限设置。
调用摄像头并获取图像_获得对摄像头的访问权相关推荐
- qtcreator摄像头显示时间_屏下摄像头手机量产了,然后呢?
作者丨建国 邮箱丨tangjianbo@pingwest.com 来源丨人民数字与品玩联合出品 全球第一台量产屏下摄像头手机,被中兴抢先了. 中兴 AXON 20 正面屏幕没有任何挖孔,表面看起来完美 ...
- 两个摄像头合成一路_两个摄像头怎样用一个显示屏
下载驱动精灵进行设置即可. 检查线路连接正常后,我们进入我的电脑设备管理器中查看电脑是否检测到USB视频设备.以下是摄像头已经被电脑识别在设备管理器中显示的截图: 设备管理中有USB摄像头设备 以上是 ...
- ROS中usb摄像头的使用_(usb_cam)
http://xiaoyatec.com/2015/10/10/ros%E4%B8%ADusb%E6%91%84%E5%83%8F%E5%A4%B4%E7%9A%84%E4%BD%BF%E7%94%A ...
- 几种常见的网络摄像头_DVR方案_整理
几种常见的网络摄像头_DVR方案_整理 http://blog.csdn.net/ex_net/article/details/7833334 作者:张建波 邮箱: 281451020@qq.com ...
- php调用linux摄像头,Linux_Linux中开发USB摄像头驱动详解,USB摄像头以其良好的性能和低 - phpStudy...
Linux中开发USB摄像头驱动详解 USB摄像头以其良好的性能和低廉的价格得到广泛应用.同时因其灵活.方便的特性,易于集成到嵌入式系统中.但是如果使用现有的符合Video for Linux标准的驱 ...
- 摄像头/视频读取_写入
摄像头/视频读取_写入 ➢VideoCapture类: 使用 OpenCV 播放视频,几乎与使用它来显示图像一样容易.播放视频时只需要处理的新问题就是如何循环地顺序读取视频中的每一顿,以及如何从枯燥的 ...
- 两个rtsp同时抓流_海康摄像头同时添加到两台海康硬盘录像机上
相信大家都有这种经历,我我为啥要多买两个摄像头呀,我直接一个摄像头添加到两台硬盘录像机上不香吗? 海康摄像头一般不建议同时添加到超过三台录像机,由于取流限制~ 那么如何同时添加到两台海康录像机上呢? ...
- 隐藏水滴屏的软件_屏下摄像头,实现这一全面屏终极方案有多难?
为了实现真正全面屏,手机厂商们到底能有多拼? 在奔向全面屏的征途里,导航键.听筒.传感器.指纹识别模组等都被成功解决,隐藏在边框或屏幕底.唯独前置摄像头,成为全面屏征途的最后一块终极障碍. 这场由iP ...
- 摄像头分辨率怎么调整_手机摄像头测试:细数手机摄像头由单摄到多摄有哪些变化...
手机摄像头分为前置和后置,随着手机屏幕占比越来越大,留给前置摄像头的空间也越来越小,同时后置多摄像头技术正占据潮流,这就对手机摄像头模组的外形尺寸和功能有了更高的要求.在手机摄像头的测试中,应用弹片微 ...
最新文章
- ubuntu中启用ssh服务
- scrapy 6023 telnet查看爬虫引擎相关状态
- springboot定时任务
- 算法练习题---回文数
- Docker Win 10 安装
- 访问iis元数据库失败怎么解决?
- jackson改变json值_使用jackson处理json数据
- 汪学明导师—商业模式创新与转型专家
- 蒙特卡洛模拟分析市场风险
- 从零开发HarmonyOS(鸿蒙)运动手表小游戏——数字华容道
- IPSAN 配置过程
- PS如何做文字扫描效果
- PowerBI-逻辑函数-SWITCH
- CSS实现3D正方体动态旋转效果【源码+GIF图】
- java swing 简单计算器_java用swing写了一个简单的计算器
- 启明星辰隔离网闸添加客户端服务器资源
- Proteus8.12的卸载
- 想练习黑客技术的,这16个网站也许可以帮到你
- 华为笔记本电脑锐龙版和LINUX版的区别,华为 MateBook 13 锐龙版笔记本电脑新鲜评测...
- ADI Blackfin DSP处理器-BF533的开发详解16:KEY按键的实现(含源代码)