<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input type="button" value="视频" onclick="getMedia()"/> <video src="" id="video" width="500px" height="500px"></video> <canvas id="canvas" width="500px" height="500px"></canvas> <button onclick="takPhone()" id="but">拍照</button> <script> function getMedia() { var constrints={ video:{width:500,height:500}, audio:true }; //获取摄像头区域 var video=document.getElementById('video'); /* * 该方法返回Promise对象 * 这个Promise对象返回成功后会调函数带一个MediaStream对象作为其参数 * then()时Promise的方法 * then()方法是异步执行,当then()前的所有的方法执行完后再执行then()内部的程序 * 避免数据没有获取到 * */ var promise=navigator.mediaDevices.getUserMedia(constrints); promise.then(function(MediaStream){ video.srcObject=MediaStream; video.play(); }); } function takPhone() { var video=document.getElementById("video"); var canvas=document.getElementById("canvas"); var ctx=canvas.getContext('2d'); ctx.drawImage(video,0,0,500,500); } </script> </body> </html>
调用摄像头---图片抓拍和视频录像
2023-01-10
128
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《
阿里云开发者社区用户服务协议》和
《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写
侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：
代码如下
目录
相关文章
|
1月前
|
算法
计算机视觉
基于RT-Thread摄像头车牌图像采集系统
【10月更文挑战第9天】使用基于RT-thread操作系统的AB32VG1开发板作为主控，对ov7670摄像头进行图像采集，并使用串口发送图片RGB565格式到PC供opencv进行图像识别。
31
1
1
|
2月前
|
编解码
前端开发
JavaScript
|
6月前
|
6月前
|
6月前
|
机器学习/深度学习
API
Android开发
视觉智能平台常见问题之判断摄像头抓拍到包含人脸的照片如何解决
视觉智能平台是利用机器学习和图像处理技术，提供图像识别、视频分析等智能视觉服务的平台；本合集针对该平台在使用中遇到的常见问题进行了收集和解答，以帮助开发者和企业用户在整合和部署视觉智能解决方案时，能够更快地定位问题并找到有效的解决策略。
71
0
0
|
计算机视觉
Python
|
Ubuntu
Linux
人机交互
|
移动开发
JavaScript
|
移动开发
JavaScript
h5 实现调用系统拍照或者选择照片并预览
调用手机相机拍照或者是调用手机相册选择照片，这个功能在 手机端页面 或者 webApp 应该是常用到的，就拿个人或会员资料录入那块来说就已经是经常会碰到的，
每当看到这块功能的时候，前端的小伙伴就得去找各种各样的插件。
2997
0
0
|
编解码
算法
计算机视觉
案例分享：Qt内窥镜相机录像程序(打开摄像头、支持多种摄像头、分辨率调整、翻转、旋转、亮度调整、拍照、录像、回放图片、回放录像)
案例分享：Qt内窥镜相机录像程序(打开摄像头、支持多种摄像头、分辨率调整、翻转、旋转、亮度调整、拍照、录像、回放图片、回放录像)
580
0
0
