js调用摄像头拍照,js调用摄像头在线拍照,js调用电脑摄像头拍照
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>录制</title>
<script src="js/jquery.min.js"></script>
</head>
<body>
<video src="" id="video"></video>
<button id="rec">开始录制</button>
<button id="camera">拍照</button>
<!--canvs绘制-->
<canvas width="640" height="480" id="outrec"></canvas>
<!--base64绘制-->
<img id="imgvideo" width="640" height="480" src="" />
<script type="text/javascript">
var video = document.getElementById("video"); //视频dom元素
//001.开启摄像头
$('#rec').click(function() {
//视频获取
var Devicestate = navigator.mediaDevices.getUserMedia({
audio: true,
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);
});
</script>
</body>
</html>需要注意参考w3c查看兼容性,另外谷歌浏览器只允许https网页调用
“js调用摄像头拍照,js调用摄像头在线拍照,js调用电脑摄像头拍照” 的相关文章
tmodjs模板语法
TmodJS是一套完整的前端模块框架。 虽然我们PHP框架自带各种模板引擎，但是始终是后端模板引擎。例如我们在使用ThinkPHP3.2.3中如果是Ajax异步加载页面，拼接HTML真的是很头疼的一件事情。...
websql的使用方法
<!-- 三个核心方法 openDatabase:这个方法使用现有数据库或创建...
js获取当前位置信息, js获取当前位置经纬度
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body>...
js cookie操作,js获取cookie值的方法,js 设置cookie
维护老项目中客户提到一个页面中有6个表单以上，导致每次保存一个其他的数据全部丢失，自己比较懒没有全部更换为ajax.用户每次输入完成或者选择完成记录cookie,每次提交后加载页面完成初始化cookie即可。以下代码取自w3school比较完善，之前在其他博客使用的经常出现bug，这个比较推荐使用：...
js 工厂模式示例,js工厂模式原理
查看文章前你需要了解以下2点://1.this指向的是windows对象,通过console.log(this)可以查看到对象包含所有的方法和属性//2.全局变量属于this对象的属性通过console.log(this)可以查看到对象包含我们设置的全局变量我们经常在创建相同结构的Js对象会重复的设...
javascript原型基础知识
//我们创建每个函数默认都有一个prototype(原型)属性,这个属性是一个对象 //1.我是普通的构造方法,我的属性叫实例属性,我的方法叫实例方法 /* function Box(name,age){ this.name=name; this.age=age; this.run...