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应用.而我同事遇到的实际情况是, ...
随机推荐
- java_Set接口
/** * Set接口:extends Collection接口 * 不重复性 * 无序 * * java.util.HashSet: * 实现Set接口,不保证set的迭代顺序,无序集合 * 底层是 ...
- AbstractByteBuf 源码分析
主要成员变量 static final ResourceLeakDetector<ByteBuf> leakDetector = new ResourceLeakDetector<B ...
- 阿里云香港ECS搭建Shadowscoks
注(转https://yijingping.github.io/2016/11/29/fanqiang.html) 1 为什么FQ 作为一个技术人员, 最常用的就是Google.StackOverfl ...
- mysql主从跳过错误
mysql主从复制,经常会遇到错误而导致slave端复制中断,这个时候一般就需要人工干预,跳过错误才能继续 跳过错误有两种方式: 1.跳过指定数量的事务 mysql>stop slave; m ...
- windows安装apache系统中无apache2服务解决方案
一直都是用WIN开发PHP,今天有用户反映SHUGUANG CMS在APACHE+PHP中不能正常运行,只好自己机器配置个环境测试(http://xz.8682222.com)遇到点小问题,搜索相关资 ...
- csp-s模拟测试55 联，赛，题题解
题面:https://www.cnblogs.com/Juve/articles/11610969.html 联: 用线段树维护区间和,要修改成1或0就线段树修改区间和 如果是异或,那么新的区间和就是 ...
- Django之深入了解路由层
目录 ORM表关系建立 一对一 一对多 多对多 Django 请求生命周期 url 路由层 路由匹配 无名分组 有名分组 反向解析 路由匹配条件无分组的情况的反向解析 无名分组情况的反向解析 有名分组 ...
- SG函数博弈——poj2311
关于SG函数的博弈 首先定义必败态 x : SG[x]=0 设任意一个状态y,到所有y能到达的状态连一条边,令这些后继为z y : SG[y]=mex(SG[z]) SG[y]==0 : y就是必败态 ...
- Error：Exception in thread "main" java.lang.NoClassDefFoundError: org/slf4j/LoggerFactory
ylbtech-Error:Exception in thread "main" java.lang.NoClassDefFoundError: org/slf4j/LoggerF ...
- codeforces 1136E-Nastya Hasn't Written a Legend
传送门:QAQQAQ 题意:有一个数组a和一个数组k,数组a一直保持一个性质:a[i + 1] >= a[i] + k[i].有两种操作:1,给某个元素加上x,但是加上之后要保持数组a的性质.比 ...