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 相关文章推荐
jquery 经典动画菜单效果代码
Jan 26 Javascript
JavaScript中this关键词的使用技巧、工作原理以及注意事项
May 20 Javascript
一个判断抢购时间是否到达的简单的js函数
Jun 23 Javascript
JavaScript中消除闭包的一般方法介绍
Mar 16 Javascript
jQuery实现分章节锚点“回到顶部”动画特效代码
Oct 23 Javascript
分享Javascript实用方法二
Dec 13 Javascript
浅析jquery数组删除指定元素的方法:grep()
May 19 Javascript
JavaScript实现九九乘法表的简单实例
Jun 07 Javascript
利用策略模式与装饰模式扩展JavaScript表单验证功能
Feb 14 Javascript
vue-cli webpack 开发环境跨域详解
May 18 Javascript
js实现无限层级树形数据结构(创新算法)
Feb 27 Javascript
Node.js fs模块原理及常见用途
Oct 22 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 只允许指定IP访问(允许*号通配符过滤IP)
2014/07/08 PHP
PHP return语句另类用法不止是在函数中
2014/09/17 PHP
Laravel 队列使用的实现
2019/01/08 PHP
PHP常见过waf webshell以及最简单的检测方法
2019/05/21 PHP
Laravel5.1 框架响应基本用法实例分析
2020/01/04 PHP
php 使用html5 XHR2实现上传文件与进度显示功能示例
2020/03/03 PHP
JavaScript中Array 对象相关的几个方法
2006/12/22 Javascript
javascript json 新手入门文档
2009/12/03 Javascript
javascript cookie操作类的实现代码小结附使用方法
2010/06/02 Javascript
如何在父窗口中得知window.open()出的子窗口关闭事件
2013/10/15 Javascript
js 时间格式与时间戳的相互转换示例代码
2013/12/25 Javascript
JavaScript不刷新实现浏览器的前进后退功能
2014/11/05 Javascript
js分页工具实例
2015/01/28 Javascript
javascript实现捕捉键盘上按下的键
2015/05/05 Javascript
举例讲解JavaScript substring()的使用方法
2015/11/09 Javascript
基于jquery实现图片相关操作(重绘、获取尺寸、调整大小、缩放)
2015/12/25 Javascript
JavaScript中使用数组方法汇总
2016/02/16 Javascript
微信小程序 欢迎界面开发的实例详解
2016/11/30 Javascript
很棒的一组js图片轮播特效
2017/01/12 Javascript
vue子组件使用自定义事件向父组件传递数据
2017/05/27 Javascript
D3.js进阶系列之CSV表格文件的读取详解
2017/06/06 Javascript
Angularjs自定义指令实现分页插件(DEMO)
2017/09/16 Javascript
基于JavaScript canvas绘制贝塞尔曲线
2018/12/25 Javascript
Vue实现日历小插件
2019/06/26 Javascript
vue实现将数据存入vuex中以及从vuex中取出数据
2019/11/08 Javascript
vue项目中使用bpmn-自定义platter的示例代码
2020/05/11 Javascript
Python学习笔记整理3之输入输出、python eval函数
2015/12/14 Python
windows下pycharm安装、创建文件、配置默认模板
2018/07/31 Python
python用opencv批量截取图像指定区域的方法
2019/01/24 Python
Python提取特定时间段内数据的方法实例
2019/04/01 Python
在python中实现调用可执行文件.exe的3种方法
2019/07/07 Python
CSS3教程(5):网页背景图片
2009/04/02 HTML / CSS
css3 仿写阿里云水纹效果的示例代码
2018/02/10 HTML / CSS
经典c++面试题六
2012/01/18 面试题
成都人事代理协议书
2014/10/25 职场文书
公司财务经理岗位职责
2015/04/08 职场文书