【js调用摄像头拍照】navigator.mediaDevices.getUserMedia、canvas

已于 2022-02-14 10:58:52 修改
阅读量1.1k 收藏
点赞数
分类专栏： 工作总结 文章标签： javascript 前端 html5
于 2022-02-07 17:07:40 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_45382009/article/details/122811477
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
   
            width: 400px;
            background: #ccc;
            border: 10px solid #ddd;
            margin: 0 auto;
        }
最低0.47元/天 解锁文章
不能懒鸭
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Js调用电脑摄像头
first_shun的博客
08-24 3583
js调用笔记本摄像头，需要用到navigator对象中的MediaDevices.getUserMedia()方法，MediaDevices.getUserMedia()会弹出提示用户给予使用媒体输入权限的许可。 返回的是一个promise对象，成功返回的是一个MediaStream媒体流对象。 var promise = navigator.mediaDevices.getUserMed...
MediaDevices.getUserMedia（）的运用
SuXiaoBai_的博客
05-04 3724
JS开启外部设备函数（转载于MDN）
web js 调用 navigator.mediaDevices.getUserMedia
weixin_40029679的博客
07-13 2007
navigator.mediaDevices.getUserMedia 目前支持的url： localhost、file和https http的url下navigator.mediaDevices.getUserMedia 为undefined 其中 navigator的应该用是关于系统的一些信息采取 如获取 当前浏览器类型 function getBrowserId () { var aKeys = ["MSIE", "Firefox", "Safari", "Chrome", "Opera
【踩坑记录】—— navigator.mediaDevices，开发环境无法调试
最新发布
伊宸轩的博客
05-30 287
navigator.mediaDevices，开发环境无法调试问题
H5 页面通过navigator.mediaDevices.getUserMedia调用手机摄像头拍照上传
weixin_46600931的博客
11-09 5808
注：使用navigator.mediaDevices.getUserMedia 需要使用https请求协议否者视为不安全，无法访问，开发阶段需要将启动改为https 在package.json中。注意切换摄像头时要注意，一定要像关闭摄像头不然会有问题在部分手机上。需求： 某知名化妆品牌，要做个在线问卷调查。授权，默认前置，切换后置。
【浏览器硬件交互篇】浏览器js调用摄像头拍照
狼丶宇先森的网络科技空间
05-07 4509
如何使用浏览器来调用相机进行拍照
js navigator.mediaDevices.getUserMedia 录制视频及拍照
Granters的博客
12-20 2571
navigator.mediaDevices.getUserMedia 录制视频及拍照
webPageScan:前端页面调取摄像头将视频流推入video并用canvas截取画面
04-30
1.使用navigator.mediaDevices.getUserMedia调用摄像头,将视频流推到页面上的video标签 2.使用canvas截取video的视频帧 3.navigator.mediaDevices.getUserMedia方法中可以控制调用的是前置摄像头还是后置摄像头 4....
getusermedia调用摄像头拍照与生成canvas
08-11
本项目“vue-camera”是基于Vue.js框架开发的一个插件，专注于利用getUserMedia API来调用用户设备的摄像头功能，实现拍照并将其转换为canvas元素，从而进行图片的处理和展示。 首先，`getUserMedia`是WebRTC（Web ...
H5调用摄像头拍照.rar
10-18
navigator.mediaDevices.getUserMedia(constraints) .then(function(stream) { // 成功获取到媒体流后，可以将其绑定到video元素进行预览 var video = document.querySelector('video'); video.srcObject = ...
H5调用摄像头扫码.zip
03-12
1. **初始化摄像头**：使用HTML5的`<video>`标签和`navigator.mediaDevices.getUserMedia()` API请求访问用户的摄像头。 2. **显示摄像头画面**：将摄像头的实时视频流绑定到`<video>`元素上，用户可以看到摄像头...
React 中的Tensorflow.js网络摄像头对象检测.zip
07-14
2. **获取网络摄像头流**: 使用HTML5的`navigator.mediaDevices.getUserMedia` API获取用户摄像头的视频流。这通常在React的`componentDidMount`生命周期方法中完成，确保在组件渲染后获取流。 3. **设置视频元素**...
【js】navigator.mediaDevices.getDisplayMedia实现屏幕共享：
SunPeng的博客
09-22 1834
【js】navigator.mediaDevices.getDisplayMedia实现屏幕共享：
Vue 使用 navigator.mediaDevices.getUserMedia 调用本地摄像头实现录像以及拍照功能
热门推荐
XH_jing的博客
05-31 2万+
目录前言API`MediaDevices.getUserMedia()`拍照功能实例完整代码实现效果录像功能实例完整代码实现效果总结 前言 最近在做开源实例： Vue.js 实战系列之实现视频类WebApp的项目（仿抖音App）【感兴趣的小伙伴可以看一下】，其中就有一个功能是视频的拍摄发布(摄像头调用，视频录制等功能)，所以特意整理一个Vue如何使用该API调用本地摄像头实现录像拍照功能。 本文主要包括前端调用本地摄像头实现拍照、录像的使用实例、应用技巧、基本知识点总结和一些需要注意的事项，在项目开发中具有
js获取媒体设备
学吧
07-20 916
获取所有媒体设备 navigator.mediaDevices.enumerateDevices().then(devices => console.log(devices)) 数据格式 // 0: InputDeviceInfo // deviceId: “default” // groupId: “442cf7db8781dbca8c853971405d76e05b4cc0c2cb6ec26bbba1b0e202f8cf5c” // kind: “audioinput” // la
H5通过navigator.mediaDevices.getUserMedia调用手机摄像头
行知
04-26 1万+
navigator.mediaDevices.getUserMedia 应项目要求，需要实现移动端app嵌入H5页面完成实人认证的功能。打开getUserMedia文档，链接如下： https://developer.mozilla.org/zh-CN/docs/Web/API/MediaDevices/getUserMedia 看上去很简单，最终却写的怀疑人生。 API环境 问题一：（为什么不管...
html5+JS调用摄像头示例
cnds123的专栏
01-15 5401
本文主要介绍了：一、html5+JS使用navigator.MediaDevices调用摄像头截图； 二、HTML5+JS使用MediaRecorder录制视频
在前端页面中调用本机的摄像头
qq_36727889的博客
06-11 9307
如何在页面中调用本机的摄像头 前段时间，机缘巧合，了解了一手如何在前端页面中调用本机摄像头的方法。 使用了navigator.mediaDevices.getUserMedia()的方法，具体可以参考MDN 首先要准备一个video标签，用来存放摄像头捕捉到的画面 还要准备一个canvas，用来存放拍下的照片 function getUserMedia(constraints,success,...
用navigator.mediadevices.getusermedia函数在vue上实现拍照功能
03-31
首先，在Vue组件中，需要引入`navigator`和`window.URL.createObjectURL`： ```javascript mounted() { navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia; }, methods: { takePhoto() { let video = this.$refs.video; let canvas = this.$refs.canvas; let context = canvas.getContext('2d'); let width = video.videoWidth; let height = video.videoHeight; canvas.width = width; canvas.height = height; context.drawImage(video, 0, 0, width, height); let imgData = canvas.toDataURL('image/png'); this.imageData = imgData; this.showPreview = true; video.pause(); } } ``` 在组件的`mounted`生命周期中，我们先判断当前浏览器是否支持`getUserMedia`，然后在`takePhoto`方法中，先获取`<video>`元素和`<canvas>`元素，设置`canvas`的宽高为`video`的宽高，然后将`video`中的内容绘制到`canvas`上。最后将`canvas`中的内容转为Base64格式的图片，保存到`imageData`中，显示预览图，并暂停`video`的播放。 在模板中，我们需要声明`<video>`和`<canvas>`元素，并为`<video>`元素绑定`getUserMedia`： ```html <template> <div> <video ref="video" autoplay></video> <canvas ref="canvas"></canvas> <button @click="takePhoto">Take photo</button> <div v-if="showPreview"> <img :src="imageData" alt="preview"> </div> </div> </template> ``` 这里我们在`<video>`元素中添加了`autoplay`属性，以便在页面加载时自动播放视频。如果要支持移动端，还需要添加`playsinline`和`muted`属性。 最后，在组件的`created`生命周期中，我们调用`navigator.getUserMedia`： ```javascript created() { navigator.getUserMedia({video: true}, stream => { let video = this.$refs.video; video.srcObject = stream; video.play(); }, error => { console.log('getUserMedia error:', error); }); } ``` 这里我们调用`navigator.getUserMedia`获取摄像头的视频流，将其赋值给`<video>`元素的`srcObject`属性，然后播放视频。如果获取失败，我们就在控制台输出错误信息。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值