js调用摄像头拍照,js调用摄像头在线拍照,js调用电脑摄像头拍照

<!DOCTYPE html>
<html>

//001.开启摄像头
$('#rec').click(function() {
//视频获取
var Devicestate = navigator.mediaDevices.getUserMedia({
video: true
})

Devicestate.then(function(mediaStream) {

video.src = window.URL.createObjectURL(mediaStream);
console.log(mediaStream)
video.onloadedmetadata = function(e) {
video.play();
};

});

//用户拒绝使用,或者没有摄像头
Devicestate.catch(function(err) {
console.log(err.name);
});

});

//002.点击拍照按钮
$('#camera').click(function() {
//视频转换到canvs
var outrec = document.getElementById("outrec");
var outreccon = outrec.getContext("2d");
outreccon.drawImage(video, 0, 0, 640, 480);

var img = outrec.toDataURL("image/jpeg", 0.5)

$('#imgvideo').attr('src', img);

// 调用方式
// 参数一：选择器，代表canvas
// 参数二：图片名称，可选
downloadCanvasIamge('#outrec', 'imgvideo');
//关闭摄像窗口页面
setTimeout(function(){
custom_close();
},1100);

});
// 下载Canvas元素的图片
function downloadCanvasIamge(selector, name) {
// 通过选择器获取canvas元素
var canvas = document.querySelector(selector)
// 使用toDataURL方法将图像转换被base64编码的URL字符串
var url = canvas.toDataURL('image/jpeg')
// 生成一个a元素
var a = document.createElement('a')
// 创建一个单击事件
var event = new MouseEvent('click')

// 将a的download属性设置为我们想要下载的图片名称，若name不存在则使用‘下载图片名称’作为默认名称
a.download = name || '下载图片名称'
// 将生成的URL设置为a.href属性
a.href = url

// 触发a的单击事件
a.dispatchEvent(event)
}
//关闭摄像窗口页面
function custom_close(){
if(confirm("摄像拍照成功，确认是否关闭本窗口")){
//delete_file();
window.opener=null;
window.open('','_self');
window.close();
}else{

}
}
//关闭窗口之后删除下载的图片文件，ActiveXObject对象只能在IE浏览器创建
/*function delete_file(){
alert("删除文件");
var fso = new ActiveXObject("Scripting.FileSystemObject");
var imgHandle = fso.GetFile("C:\\Users\\yuzhangwei\\Downloads\\imgvideo.jpg");
imgHandle.Delete();
}*/

</script>
</body>

</html>

js调用摄像头拍照,js调用摄像头在线拍照,js调用电脑摄像头拍照相关推荐

HTML5调用手机前置摄像头或后置摄像头拍照，canvas显示,经过Android测试
为什么80%的码农都做不了架构师?>>> 但是navigator.getUserMediau已经从 Web 标准中删除,虽然部分浏览器可以使用,生产环境中还是要做好兼容.新的A ...
摄像头自建html直播,H5代码实现调用本地摄像头实现实时视频以及拍照功能
效果这是柚子皮- getUserMedia API HTML 5 的getUserMedia API提供了访问媒体的能力, 基于该特性, 开发者可以不依赖任何浏览器插件下去访问视频和音频等设备. 旧 ...
Android Camera相机开发示例、Android 开发板 USB摄像头采集、定期拍照、定时拍照，安卓调用摄像头拍照、Android摄像头预览、监控，USB摄像头开发、摄像头监控代码
我们有个需求,在机器上加个摄像头,定时拍照: 我到网上搜索,发现没有快速上手和简单使用的: 个人感觉,大部分博客写得很乱,或者长篇大论: 而我只想简单实现功能,并不打算学习多少理论: 下面代码是我写来 ...
html5 android6.0摄像头,HTML5调用手机前置摄像头或后置摄像头拍照，canvas显示,经过Android测试...
但是navigator.getUserMediau已经从 Web 标准中删除,虽然部分浏览器可以使用,生产环境中还是要做好兼容.新的API更替为MediaDevices.getUserMedia.Me ...
python+opencv用电脑调用手机摄像头或其他网路摄像头
python+opencv用电脑调用手机摄像头或其他网路摄像头文章目录: 1 获取手机摄像头或网络摄像头的ip 1.1 获取手机摄像头的ip 1.2 获取网络摄像头的IP 1.3 关于RTSP协议 ...
React Native之js调用Android原生使用Callback传递结果给js
如果不清楚js如何调用Android原生,可以先参考我的这篇博客React Native实现js调用安卓原生代码 1 问题上面的文章只是调用安卓原生显示Toast,但是我们一般会需要调用安卓的代码然 ...
[js] axios为什么可以使用对象和函数两种方式调用？是如何实现的？
[js] axios为什么可以使用对象和函数两种方式调用?是如何实现的? axios 源码初始化看源码第一步,先看package.json.一般都会申明 main 主入口文件. // packag ...
wordpress 调用css,WordPress折腾记-精简CSS及JS在插件中的调用
GD Star Rating loading... 爱折腾WP是我的一个习惯,不折腾就会手痒,哈哈~~此文仅作为一个精简CSS及JS在插件中调用的范例,其他插件的精简可以按照此文的方法来做. 众所周知 ...
C#学习之调用 AForge.NET Framework 启动摄像头
今天开始捣鼓C#启动摄像头,之前做过用 C++调用OPENCV库启动摄像头,C#理论上也可以. 但是看了这篇博文笔记, 顿时脑洞大开,原来可以和摄像头打交道的库有这么多啊.之前,我就直到OPE ...
html+js+css 调用jquery 工人信息管理功能（增删改查）前端实现，以及调用实现鼠标拖尾粒子效果的js库
html + js + css 调用jquery以及underscore.min.js(配合代码实现鼠标粒子效果)实现全前端信息管理基本功能(增删改查) 先附上我运行的一段视频,手机打开清晰一点或者直 ...

js调用摄像头拍照,js调用摄像头在线拍照,js调用电脑摄像头拍照

js调用摄像头拍照,js调用摄像头在线拍照,js调用电脑摄像头拍照相关推荐

最新文章

热门文章