JS实现调用本地摄像头功能示例
更新时间：2018年05月18日 11:32:48 作者：细水长流-
这篇文章主要介绍了JS实现调用本地摄像头功能,结合实例形式分析了Javascript基于浏览器对本地硬件操作简单实现技巧,需要的朋友可以参考下
本文实例讲述了JS实现调用本地摄像头功能。分享给大家供大家参考，具体如下：
今天学习了一下js调用本地摄像头，其实是实现不是很麻烦，下面是代码部分，连接上Tomcat服务器，然后再到网页上打开即可以看到效果了。。快来玩一下吧！
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
<style>
video {
border: 1px solid #ccc;
display: block;
margin: 0 0 20px 0;
float:left;
}
canvas {
margin-top: 20px;
border: 1px solid #ccc;
display: block;
}
</style>
</head>
<body>
<video width="640" height="480" id="myVideo"></video>
<canvas width="640" height="480" id="myCanvas"></canvas>
<button id="myButton">截图</button>
<button id="myButton2">预览</button>
<button id="myButton3">
<a download="video.png">另存为</a>
</button>
</body>
<script>
window.addEventListener('DOMContentLoaded',function(){
var cobj=document.getElementById('myCanvas').getContext('2d');
var vobj=document.getElementById('myVideo');
getUserMedia({video:true},function(stream){
vobj.src=stream;
vobj.play();
},function(){});
document.getElementById('myButton').addEventListener('click',function(){
cobj.drawImage(vobj,0,0,640,480);
document.getElementById('myButton3').children[0].href=cobj.canvas.toDataURL("image/png");
},false);
document.getElementById('myButton2').addEventListener('click',function(){
window.open(cobj.canvas.toDataURL("image/png"),'_blank');
},false);
},false);
function getUserMedia(obj,success,error){
if(navigator.getUserMedia){
getUserMedia=function(obj,success,error){
navigator.getUserMedia(obj,function(stream){
success(stream);
},error);
}
}else if(navigator.webkitGetUserMedia){
getUserMedia=function(obj,success,error){
navigator.webkitGetUserMedia(obj,function(stream){
var _URL=window.URL || window.webkitURL;
success(_URL.createObjectURL(stream));
},error);
}
}else if(navigator.mozGetUserMedia){
getUserMedia=function(obj,success,error){
navigator.mozGetUserMedia(obj,function(stream){
success(window.URL.createObjectURL(stream));
},error);
}
}else{
return false;
}
return getUserMedia(obj,success,error);
}
</script>
</html>
更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript+HTML5特效与技巧汇总》、《JavaScript图片操作技巧大全》、《JavaScript图形绘制技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。
相关文章
本篇文章主要是对js输出阴历、阳历、年份、月份、周示例代码进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助2014-01-01
懒加载是一种优化技术,它可以延迟加载某些资源,直到它们真正需要被使用的时候才进行加载,实现懒加载的方法一般分为两种：基于 Intersection Observer API 的懒加载和基于滚动事件的懒加载,本文给大家介绍JavaScript的懒加载处理方式,感兴趣的朋友一起看看吧2023-10-10
我们测试了谷歌爬虫是如何抓取 JavaScript，下面就是我们从中学习到的知识,需要的朋友可以参考下2017-04-04
在IE浏览器中添加或删除事件用attachEvent、detachEvent，下面的对事件的添加和删除做了封装，感兴趣的朋友可以参考下2014-07-07
这篇文章主要为大家详细介绍了js实现网页五子棋进阶版，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-05-05
js预载入和JavaScript Image()对象使用介绍
为了解决在canvas使用drawImage()时,遇到img对象来不及加载的问题; 我最终在html文档加载中,使用了下面"数组加载图像的办法”解决,如果有其他方法,请给予指点!2011-08-08
这篇文章主要为大家详细介绍了js实现双人五子棋小游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-05-05
html2canvas+jspdf实现下载pdf文件并添加水印
这篇文章主要为大家详细介绍了如何使用html2canvas + jspdf进行下载pdf文件添加水印,以及echarts图片防止截断处理,有需要的小伙伴可以了解下2024-10-10
JavaScript使用Blob文件流下载txt、pdf、图片等文件，自定义下载文件名
JavaScript使用Blob文件流下载txt、pdf、图片等格式文件,同时自定义下载文件名,2023-08-08
这篇文章主要介绍了JavaScript常用语句主要包括对循环,判断,字符串换数字相关资料的介绍，具有一定的参考价值，需要的小伙伴可以参考一下具体内容2021-12-12
最新评论