最新文章
- Vue学习笔记（10） ——Vue组件中的data和methods
- Vue学习笔记（9） ——Vue组件创建的几种方式
- Vue学习笔记（8） ——Vue实例的生命周期
- Vue学习笔记（7） —— 过滤器 filter的基本使用
- Vue学习笔记（6） ——v-if指令和v-show指令
- Vue学习笔记（5） —— v-for指令和key属性
- Vue学习笔记（5） —— Vue中样式-class样式和style样式
- Vue学习笔记（4） —— v-model指令，双向数据绑定
- Vue学习笔记（3） —— Vue事件修饰符
- Vue学习笔记（2） —— v-cloak、v-text、v-html、插值表达式{{}}、v-bind、v-on的学习
关注我
在线咨询
x
有什么可以帮到你
点击咨询
js调用摄像头拍照,js调用摄像头在线拍照,js调用电脑摄像头拍照,js调用笔记本电脑摄像头拍照
- 分类：WEB前端
- 时间：2018-03-18
- 共984人围观
简介在一些我们常用的浏览器里已经可以使用web api调用电脑的摄像头功能了。基于此可以经行拍照摄像功能，实现了奇妙的摄像和拍照功能
一、代码如下
<!DOCTYPE html>
<html lang="ZH-CN">
<head>
<meta charset="utf-8">
<title>js调用摄像头拍照,js调用摄像头在线拍照,js调用电脑摄像头拍照,js调用笔记本电脑摄像头拍照</title>
<style>
.booth {
width:400px;
background:#ccc;
border: 10px solid #ddd;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="booth">
<video id="video" width="400" height="300"></video>
<button id='tack'>拍照</button>
<canvas id='canvas' width='400' height='300'></canvas>
<img id='img' src=''>
</div>
<script>
var video = document.getElementById('video'),
canvas = document.getElementById('canvas'),
snap = document.getElementById('tack'),
img = document.getElementById('img'),
vendorUrl = window.URL || window.webkitURL;
//媒体对象
navigator.getMedia = navigator.getUserMedia ||
navagator.webkitGetUserMedia ||
navigator.mozGetUserMedia ||
navigator.msGetUserMedia;
navigator.getMedia({
video: true, //使用摄像头对象
audio: false //不适用音频
}, function(strem){
console.log(strem);
video.src = vendorUrl.createObjectURL(strem);
video.play();
}, function(error) {
//error.code
console.log(error);
});
snap.addEventListener('click', function(){
//绘制canvas图形
canvas.getContext('2d').drawImage(video, 0, 0, 400, 300);
//把canvas图像转为img图片
img.src = canvas.toDataURL("image/png");
})
</script>
</body>
</html>
二、注意点
1、有些浏览器可能不支持此功能
2、必须通过服务器打开页面，通过files://打开无效
3、如果通过远程服务器打开则必须是https协议， http协议也无法使用