JS实现调用本地摄像头功能示例


Posted in Javascript onMay 18, 2018

本文实例讲述了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 相关文章推荐
List the Stored Procedures in a SQL Server database
Jun 20 Javascript
JS 退出系统并跳转到登录界面的实现代码
Jun 29 Javascript
jQuery实现DIV层收缩展开的方法
Feb 27 Javascript
jquery正则表达式验证(手机号、身份证号、中文名称)
Dec 31 Javascript
js console.log打印对像与数组用法详解
Jan 21 Javascript
jQuery实现可拖动进度条实例代码
Jun 21 jQuery
微信小程序之数据缓存的实例详解
Sep 29 Javascript
Vue.js2.0中的变化小结
Oct 24 Javascript
vue 自定义组件 v-model双向绑定、 父子组件同步通信的多种写法
Nov 27 Javascript
详解使用vue-cli脚手架初始化Vue项目下的项目结构
Mar 08 Javascript
微信小程序保存多张图片的实现方法
Mar 05 Javascript
JS绘图Flot如何实现动态可刷新曲线图
Oct 16 Javascript
React全家桶环境搭建过程详解
May 18 #Javascript
vue单页开发父子组件传值思路详解
May 18 #Javascript
Node.js Buffer用法解读
May 18 #Javascript
从零开始搭建webpack+react开发环境的详细步骤
May 18 #Javascript
Bootstrap table中toolbar新增条件查询及refresh参数使用方法
May 18 #Javascript
webpack4 css打包压缩问题的解决
May 18 #Javascript
微信小程序实现长按删除图片的示例
May 18 #Javascript
You might like
解析PHP处理换行符的问题 \r\n
2013/06/13 PHP
PHP序列化/对象注入漏洞分析
2016/04/18 PHP
Ubuntu VPS中wordpress网站打开时提示”建立数据库连接错误”的解决办法
2016/11/03 PHP
php版阿里云OSS图片上传类详解
2016/12/01 PHP
从ThinkPHP3.2.3过渡到ThinkPHP5.0学习笔记图文详解
2019/04/03 PHP
Nodejs学习笔记之Stream模块
2015/01/13 NodeJs
node.js实现端口转发
2016/04/14 Javascript
AngularJS基础 ng-if 指令用法
2016/08/01 Javascript
js实现加载更多功能实例
2016/10/27 Javascript
jQuery实现最简单实用的分秒倒计时
2017/02/05 Javascript
Node.js读取文件内容示例
2017/03/07 Javascript
jQuery插件之validation插件
2017/03/29 jQuery
webstorm和.vue中es6语法报错的解决方法
2018/05/08 Javascript
小程序实现图片移动缩放效果
2020/05/26 Javascript
小程序自定义圆形进度条
2020/11/17 Javascript
[48:41]VP vs VG Supermajor小组赛 B组胜者组决赛 BO3 第二场 6.2
2018/06/03 DOTA
详解Django中的权限和组以及消息
2015/07/23 Python
深入解析Python中的urllib2模块
2015/11/13 Python
在cmd命令行里进入和退出Python程序的方法
2018/05/12 Python
Python Opencv实现图像轮廓识别功能
2020/03/23 Python
python实现程序重启和系统重启方式
2020/04/16 Python
keras 自定义loss损失函数,sample在loss上的加权和metric详解
2020/05/23 Python
皇马官方商城:Real Madrid Store
2016/09/02 全球购物
波兰香水和化妆品购物网站:Notino.pl
2017/11/07 全球购物
优秀社区干部事迹材料
2014/02/03 职场文书
读书活动实施方案
2014/03/10 职场文书
委托书样本
2014/04/02 职场文书
高一学生期末评语
2014/04/25 职场文书
科长个人四风问题整改措施思想汇报
2014/10/13 职场文书
优秀班集体申报材料
2014/12/25 职场文书
技术支持岗位职责
2015/02/13 职场文书
大班上学期个人总结
2015/02/13 职场文书
2015夏季作息时间调整通知
2015/04/24 职场文书
Pandas加速代码之避免使用for循环
2021/05/30 Python
Java数据结构之链表相关知识总结
2021/06/18 Java/Android
人工智能深度学习OpenAI baselines的使用方法
2022/05/20 Python