javascript实现摄像头拍照预览
更新时间：2019年09月30日 15:46:19 作者：feri
这篇文章主要为大家详细介绍了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>
但是谷歌浏览器可以打开摄像头，无法获取实时数据。火狐比较好用。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章
placeholder属性是HTML5 中为input添加的。在input上提供一个占位符，文字形式展示输入字段预期值的提示信息（hint），该字段会在输入为空时显示2016-01-01
这篇文章主要介绍了JS实现指定区域的全屏显示功能,涉及javascript事件响应及页面元素属性动态操作相关实现技巧,需要的朋友可以参考下2019-04-04
这篇文章主要为大家详细介绍了如何基于Echarts实现绘制立体柱状图的功能，文中的示例代码讲解详细，具有一定的借鉴价值，需要的可以参考一下2023-02-02
Bootstrap 过渡效果Transition 模态框（Modal）
这篇文章主要介绍了Bootstrap 过渡效果Transition 模态框（Modal）,非常不错，具有参考借鉴价值，需要的朋友可以参考下2017-03-03
这篇文章主要介绍了关于微信上网页图片点击全屏放大效果的相关资料,需要的朋友可以参考下2016-12-12
这篇文章主要介绍了了不起的11个JavaScript代码重构最佳实践小结，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-01-01
这篇文章主要介绍了小程序开发基础之view视图容器，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-08-08
本文主要介绍了Typescript实现栈的方法示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2024-08-08
在 TypeScript 中，映射类型可以帮助我们避免编写重复的代码，它可以根据现有类型和定义的一些规则来创建新类型。本文我们就来看一下什么是映射类型以及如何构建自己的映射类型2022-08-08
这篇文章主要介绍了JavaScript中ES6字符串扩展方法的相关资料,非常不错，具有参考借鉴价值，感兴趣的朋友一起学习吧2016-08-08
最新评论