javascript实现摄像头拍照预览
使用javascript实现电脑摄像头的打开和截图的功能，供大家参考，具体内容如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>摄像头调用实例</title>
<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
<script type="text/javascript">
var video, mediaStreamTrack, canvas;//声明全局变量
//打开摄像头
function dk() {
video = document.getElementById("v1");
var videoObj = {
"video" : true
};
var errBack = function(error) {
console.log("Video capture error: ", error.code);
};
//根据浏览器的不同选取不同的支持
if (navigator.getUserMedia) { // Standarda
navigator.getUserMedia(videoObj, function(stream) {
mediaStreamTrack = typeof stream.stop === 'function' ? stream
: stream.getTracks()[1];
video.src = stream;//获取摄像头抓取的到字节流
video.play();//实时播放摄像头
}, errBack);
} else if (navigator.webkitGetUserMedia) { // WebKit-prefixed
navigator.webkitGetUserMedia(videoObj, function(stream) {
mediaStreamTrack = typeof stream.stop === 'function' ? stream
: stream.getTracks()[1];
video.src = window.webkitURL.createObjectURL(stream);
video.play();
}, errBack);
} else if (navigator.mozGetUserMedia) { // Firefox-prefixed
navigator.mozGetUserMedia(videoObj, function(stream) {
mediaStreamTrack = typeof stream.stop === 'function' ? stream
: stream.getTracks()[1];
video.src = window.URL.createObjectURL(stream);
video.play();
}, errBack);
}
}
//截图
function jq() {
canvas = document.getElementById("c1");
var context = canvas.getContext("2d");
//将视频当前的页面转换为图片，显示到画板中
context.drawImage(video, 0, 0, 200, 202);
//把canvas图像转为img图片
/* var src = canvas.toDataURL("image/jpeg");
createImg(src); */
}
//关闭摄像头
function gb() {
mediaStreamTrack.stop();
}
//生成图片
/* function createImg(src) {
var dv = document.getElementById("dv1");
var img = document.createElement("img");
img.setAttribute("src", src);
img.setAttribute("width", 205);
img.setAttribute("height", 205);
dv.appendChild(img);
} */
//上传
/* function sc() {
$.post('TestServlet', {
"img" : canvas.toDataURL().substr(22)
}, function(data, status) {
alert(status != "success" ? "图片处理出错！" : data == "yes" ? "图片上传完成！"
: data);
});
} */
</script>
<style type="text/css">
input[type="button"]{
border: 1px solid red;
}
</style>
</head>
<body>
<div>
<input type="button" value="打开" onclick="dk()">
<input type="button" value="截取图像" onclick="jq()">
<input type="button" value="关闭" onclick="gb()">
</div>
<div>
<!--视频 -->
<video width="200px" height="200px" id="v1"></video>
<br />
<!--画板 -->
<canvas id="c1"></canvas>
<br />
</div>
<!--记录每次截图的结果 -->
<!-- <div id="dv1"></div> -->
</body>
</html>
但是谷歌浏览器可以打开摄像头，无法获取实时数据。火狐比较好用。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
上传图片预览JS脚本 Input file图片预览的实现示例
在深圳做项目的时候,需要一个用户上传头像预览的功能!是在网上找了好多,都不太满意.要么是flash的,要么是Ajax上传后返回图片路径的,要么压根就是不能用的.幸运的是在这个项目以前有人写过一个图片预览的功能,还被我给翻了出来,在这里做个记录,方便自己以后用,也方便其他需要的朋友! 代码很简单,如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/
-
js实现图片上传并预览功能
本文为大家分享了js实现图片上传并预览的具体代码,供大家参考,具体内容如下 思路:完成这个功能,首先需要美化上传图片的按钮,然后添加一个<img/>标签,在图片上传之后,用新图片的src替换原来<img/>标签中的src. 如下图所示,是原始的按钮样式: 美化步骤: (1)将上传图片标签采用绝对定位,使之位于一个图片,按钮,div等标签上.或者给图片,按钮或div设置绝对定位,总之,是要让上传文件按钮和用户指定的按钮重合. (2)给上传图片标签设置大大小,使之和与它重叠的图片,按钮
-
JavaScript实现图片上传并预览并提交ajax
本文实例为大家分享了JavaScript实现图片上传并预览并提交ajax的具体代码,供大家参考,具体内容如下 图片上传并预览 HTML <div class="file-box"> <img id="preview" /> <input type="text" id="imgfield" class="txt" placeholder="预览"> &l
-
Vue2.0实现调用摄像头进行拍照功能 exif.js实现图片上传功能
本文实例为大家分享了Vue2.0实现调用摄像头进行拍照功能的具体代码,以及图片上传功能引用exif.js,供大家参考,具体内容如下 可以在github 上下载demo链接 vue组件代码 <template> <div> <div style="padding:20px;"> <div class="show"> <div class="picture" :style="'backg
-
JavaScript实现单图片上传并预览功能
本文实例为大家分享了JavaScript实现单图片上传并预览功能的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>单图片上传并实现预览</title> <style> /*上传图片*/ .addPerson{ line-height: 190px; } .a
-
js实现上传图片预览的方法
本文实例讲述了js实现上传图片预览的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: function PreviewImage(imgFile) { var filextension=imgFile.value.substring(imgFile.value.lastIndexOf("."),imgFile.value.length); filextension=filextension.toLowerCase(); if ((filext
-
JS实现上传图片的三种方法并实现预览图片功能
在常见的用户注册页面,需要用户在本地选择一张图片作为头像,并同时预览. 常见的思路有两种:一是将图片上传至服务器的临时文件夹中,并返回该图片的url,然后渲染在html页面:另一种思路是,直接在本地内存中预览图片,用户确认提交后再上传至服务器保存. 这两种方法各有利弊,方法一很明显,浪费流量和服务器资源:方法二则加重了浏览器的负担,并且对浏览器的兼容性要求更高(在某些低版本中的IE浏览器不支持). 以下是实现上述思路的方法: 1. 模板文件 <!DOCTYPE html> <html l
-
AngularJS中使用HTML5手机摄像头拍照
1. 项目背景 公司开发一个网站,在做用户头像修改的时候领导提到增加一个由摄像头拍照实现修改头像的功能.因为我们网站是基于Html5进行开发,所以就直接采用H5来实现拍照.起初觉得这个功能很简单,但是做的时候才发现并不是那么简单的. 这是在AngularJs中成功实现调用摄像头拍照并截图上传的例图: 2. 如何调用摄像头 $scope.photoErr = false; $scope.photoBtnDiable = true; var mediaStream = null,track = nu
-
JS预览图像将本地图片显示到浏览器上
复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script type="text/javascript"&
-
JS使用H5实现图片预览功能
JS使用H5实现上传图片预览的功能,以下是代码的实现: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>文件上传预览</title> <script type="text/javascript"> //预览图片,参数说明:第一个参数:要预览的file对象,第二个参数:预览的img标签的id名称 function