Web调取摄像头拍照
调取摄像头、拍照
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<video width="640" height="480" id="myVideo"></video>
<canvas width="640" height="480" id="myCanvas"></canvas>
<button id="myButton">拍摄</button>
<button id="myButton2">预览</button>
<button id="myButton3">
<a download="video.png">另存为</a>
</button>
</body>
</html>
js 调用
<script>
window.addEventListener('DOMContentLoaded',function(){
var cobj=document.getElementById('myCanvas').getContext('2d');
var vobj=document.getElementById('myVideo');
getUserMedia({video:true},function(stream){
vobj.src=stream;
vobj.play();
},function(){});
document.getElementById('myButton').addEventListener('click',function(){
cobj.drawImage(vobj,0,0,640,480);
document.getElementById('myButton3').children[0].href=cobj.canvas.toDataURL("image/png");
},false);
document.getElementById('myButton2').addEventListener('click',function(){
window.open(cobj.canvas.toDataURL("image/png"),'_blank');
},false);
},false);
function getUserMedia(obj,success,error){
if(navigator.getUserMedia){
getUserMedia=function(obj,success,error){
navigator.getUserMedia(obj,function(stream){
success(stream);
},error);
}
}else if(navigator.webkitGetUserMedia){
getUserMedia=function(obj,success,error){
navigator.webkitGetUserMedia(obj,function(stream){
var _URL=window.URL || window.webkitURL;
success(_URL.createObjectURL(stream));
},error);
}
}else if(navigator.mozGetUserMedia){
getUserMedia=function(obj,success,error){
navigator.mozGetUserMedia(obj,function(stream){
success(window.URL.createObjectURL(stream));
},error);
}
}else{
return false;
}
return getUserMedia(obj,success,error);
}
</script>
Web调取摄像头拍照的更多相关文章
- C# 调取摄像头 +拍照
1.添加引用 using System.Windows.Media.Imaging; using AForge; using AForge.Controls; using AForge.Video; ...
- HTML5 + JS 调取摄像头拍照下载
<video id="video" width="640" height="480" autoplay></video&g ...
- react-native-image-picker 运用launchCamera直接调取摄像头的缺陷及修复
在前几天用react-native进行android版本开发当中,用到了"react-native-image-picker"的插件:根据业务的需求:点击按钮-->直接调取摄 ...
- 摄像头拍照，PHP输入流php://input的使用分析
在做一个摄像头拍照然后上传的功能,php中使用php://input来获取内容.于是就了解了下php://input. 从官网信息来看,php://input是一个只读信息流,当请求方式是post的, ...
- React Native学习－调取摄像头第三方组件：react-native-image-picker
近期做的软件中图片处理是重点,那么自然也就用到了相机照相或者相册选取照片的功能. react-native中有image-picker这个第三方组件,但是0.18.10这个版本还不是太支持iPad. ...
- 怎样让HTML5调用手机摄像头拍照——实践就是一切
原文:怎样让HTML5调用手机摄像头拍照--实践就是一切 NanShan 小编将思路提供给了大家.学编程最重要的是实践,我这尽管有完好的代码,可是希望大家都能够自己写出属于自己的代码 HTML5 Th ...
- VS2010开发MFC ActiveX,摄像头拍照上传Webservice(1)
最近工作项目,BS中需要用到摄像头拍照,需要存储本地,同时上传到服务器,尝试使用vc++做ActiveX来实现. 完全没有使用过vc,上网搜索各种知识,初步完成.在这里记录下有帮助的资料. 第一步:编 ...
- 用Python控制摄像头拍照并发邮件
概述前言 工具 思路 安装及导入包 设置参数 实现拍照 构造邮件内容 发送邮件 判断网络连接 开机自启 后记 o1 前言为什么会有写这个程序的想法呢? 最初的想法是写一个可以用电脑前置摄像头拍照的程序 ...
- 如何在SAP UI5应用里添加使用摄像头拍照的功能
昨天Jerry的文章 纯JavaScript实现的调用设备摄像头并拍照的功能 介绍了纯JavaScript借助WebRTC API来开发支持调用设备的摄像头拍照的web应用.而我同事遇到的实际情况是, ...
随机推荐
- spring boot过滤器FilterRegistrationBean
有2种方式可以实现过滤器 1:通过FilterRegistrationBean实例注册 2:通过@WebFilter注解生效 这里选择第一种,因为第二种不能设置过滤器之间的优先级 为了演示优先级,这里 ...
- while语句结构（for循环）
while语句结构(for循环) python for 循环可以遍历任何序列的项目,如一个列表或一个字符串 for循环的一般形式 for 条件判断 in 一个序列: 执行语句 else: 执行语句 可 ...
- iOS开发系列-Block本质篇
概述 在iOS开发中Block使用比较广泛,对于使用以及一些常规的技术点这里不再赘述,主要利用C++角度分析Block内部数据底层实现,解开开发中为什么这样编写代码解决问题. Block底层结构窥探 ...
- 《Practices of an Agile Developer:Woring in the Real World》读书笔记 PB16110698（~3.22）第三周
<Practices of an Agile Developer:Woring in the Real World>读书笔记 本周我阅读了<高效程序员的45个习惯:敏捷开发修炼之道 ...
- SpringCloud学习笔记《---03 Ribbon Rule---》核心篇
- Dubbo Ecosystem - 从微服务框架到微服务生态
从微服务框架到微服务生态,这是微服务发展的必然趋势,也是Dubbo社区满足开发者更高效的构建微服务体系期望的使命和担当. 近期,Apache Dubbo PPMC 望陶(社区昵称:ralf0131)做 ...
- Java笔记 - 输入输出流
java.io包中定义了各式各样的"流(stream)" 类型(类或抽象类),通过标准的方法实现对于数据的输入/输出操作. 一.流类型分类 以从不同的角度对其进行分类:按数据流的方 ...
- python 虚拟环境virtualenv搭建
一.安装虚拟环境 pip install virtualenv -i https://pypi.douban.com/simple 用国内镜像,速度更快 二.创建虚拟目录 在需要存放软件工程的 ...
- Luogu P4782 【模板】2-SAT 问题(2-SAT)
P4782 [模板]2-SAT 问题 题意 题目背景 \(2-SAT\)问题模板 题目描述 有\(n\)个布尔变量\(x_1\sim x_n\),另有\(m\)个需要满足的条件,每个条件的形式都是&q ...
- Leetcode319. Bulb Switcher灯泡开关
初始时有 n 个灯泡关闭. 第 1 轮,你打开所有的灯泡. 第 2 轮,每两个灯泡你关闭一次. 第 3 轮,每三个灯泡切换一次开关(如果关闭则开启,如果开启则关闭).第 i 轮,每 i 个灯泡切换一次 ...