js调用摄像头拍照,js调用摄像头在线拍照,js调用电脑摄像头拍照
Bash
<!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调用电脑摄像头拍照” 的相关文章
Javascript事件冒泡和捕捉的阻止
<!DOCTYPE html> <html> <head> <title>捕捉和冒泡</title> <meta charset="utf-8"> </head> <bo...
Javascript页面播放语音,Javascript语音读取页面的文字
<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <script type...
Javascript获取Mac地址
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>获取mac地址</title> </head&g...
js构造函数
工厂模式虽然解决了创建多个对象的问题,但是并没有解决识别对象从属的问题.因为都属于object.因此出现了构造函数//构造函数名称首字母大写是规范 function Box(name,age){ this.name=name; this.age=age; this.run=funct...
js对象冒充实现继承
//构造函数 function Box(name,age){ this.name=name; this.age=age; this.run=function(){ return this.name+'--'+this.age; } } var&nbs...
js 点击复制,js实现手机端点击复制,js实现点击复制,js点击复制到剪贴板
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>点击复制</title> </head>...