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>

转载于:https://www.cnblogs.com/dongh/p/6612082.html

Web调取摄像头拍照相关推荐

web调用摄像头拍照并上传到服务器
1.注意事项 1.网页对摄像头调用的限制比较高,要求网页必须https协议或者是要本地localhost(127.0.0.1)否则无法调用, 2.当你的网页协议是https请求的时候你向后端服务器发的 ...
浏览器调取摄像头拍照并有遮罩层
近来在写一个公众号的项目,因为开发需求,需要调取手机摄像头拍照.最重要的是要有遮罩层,这就限制了不能调用手机自带的摄像头. 项目框架是vue-cli,中间查了很多资料,有用原生js写的(虽然就是用na ...
react-native-image-picker 运用launchCamera直接调取摄像头的缺陷及修复
在前几天用react-native进行android版本开发当中,用到了"react-native-image-picker"的插件:根据业务的需求:点击按钮-->直接调取摄 ...
IE11怎么调取摄像头并拍照
2021/01/31最近公司需求做一个人脸识别系统,但是前端需要使用IE11浏览器,我们从网上搜集了很多资料证明,IE只能使用flash才行(此时flash已经宣布停止维护,但是它的ActiveX依旧 ...
摄像头网页服务器,js调用本地摄像头拍照并上传到web服务器
[实例简介] js调用本地摄像头拍照并上传到web服务器.后台使用java实现图片的接收和存储,上传的图片默认保存到项目下的images文件夹中. [实例截图] [核心代码] MyCamera └── ...
php调取摄像头实现拍照功能
最近做的商户后台要实现调取摄像头拍摄用户打卡照片的功能,找资料研究了下,终于黄天不负有心人,成功了,下面我分步骤将代码贴出来,希望能有帮助代码有点多,但是每一步都很好理解,首先是HTML代码,写一个 ...
h5调取摄像头实时显示并点击按钮拍照
这是一个简单是实例版本,具体的功能可以根据以下代码进行增加功能,并且下面都有相对应的注释 <!DOCTYPE html> <html lang="en">& ...
php安卓浏览器调用相机拍照,好用的pc端web端手机端浏览器调用摄像头拍照JavaScript...
亲测可用: 摄像头拍照拍照下载拍照图片 //访问用户媒体设备的兼容方法 function getUserMedia(constraints, success, error) { if (navig ...
vue 实现pc端调取本地摄像头拍照生成base64数据 navigator.userAgent 功能
文章目录 1. 写在前面 2. demo摄像头拍照实现效果 3. https 方式实现摄像头拍照生成base64数据的 4. 配置浏览器的目标位置实现摄像头拍照功能 5. pc 端实现调用本地摄像头 ...
用Python控制摄像头拍照并发邮件
1 前言为什么会有写这个程序的想法呢? 最初的想法是写一个可以用电脑前置摄像头拍照的程序,在舍友使用你电脑的时候,不经意间获取到一大堆奇葩舍友的表情包. 然后我又突发奇想,要不搞个开机启动吧,这样我 ...

Web调取摄像头拍照

Web调取摄像头拍照相关推荐

最新文章

热门文章