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官方 jQuery1.1.3发布,速度提升800%,体积保持20K
Aug 19 Javascript
谷歌showModalDialog()方法不兼容出现对话窗口的解决办法
Feb 15 Javascript
jQuery获取元素父节点的方法
Jun 21 Javascript
JS正则表达式修饰符中multiline(/m)用法分析
Dec 27 Javascript
js 原型对象和原型链理解
Feb 09 Javascript
vue 之 .sync 修饰符示例详解
Apr 21 Javascript
在vue中使用SockJS实现webSocket通信的过程
Aug 29 Javascript
Angular父子组件通过服务传参的示例方法
Oct 31 Javascript
浅析Vue中拆分视图层代码的5点建议
Aug 15 Javascript
利用JS响应式修改vue实现页面的input值
Sep 02 Javascript
解决vue项目中某一页面不想引用公共组件app.vue的问题
Aug 14 Javascript
Angular进行简单单元测试的实现方法实例
Aug 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中文本数据翻页(留言本翻页)
2006/10/09 PHP
不支持fsockopen但支持culr环境下下ucenter与modoer通讯问题
2011/08/12 PHP
PHP语法自动检查的Vim插件
2014/08/11 PHP
简单实用的PHP防注入类实例
2014/12/05 PHP
Yii2简单实现给表单添加验证码的方法
2016/07/18 PHP
使用一个for循环将N*N的二维数组的所有值置1实现方法
2017/05/29 PHP
js计算页面刷新的次数
2009/07/20 Javascript
JavaScript 滚轮事件使用说明
2010/03/07 Javascript
node.js中的fs.fstatSync方法使用说明
2014/12/15 Javascript
jQuery结合HTML5制作的爱心树表白动画
2015/02/01 Javascript
jQuery AjaxUpload 上传图片代码
2016/02/02 Javascript
浅谈Vue.js
2017/03/02 Javascript
nodejs制作爬虫实现批量下载图片
2017/05/19 NodeJs
JS处理数据四舍五入(tofixed与round的区别详解)
2017/10/26 Javascript
JavaScript冒泡算法原理与实现方法深入理解
2020/06/04 Javascript
python 测试实现方法
2008/12/24 Python
Python continue继续循环用法总结
2018/06/10 Python
python3.6利用pyinstall打包py为exe的操作实例
2018/10/31 Python
python重试装饰器的简单实现方法
2019/01/31 Python
Python装饰器限制函数运行时间超时则退出执行
2019/04/09 Python
Pytorch 多维数组运算过程的索引处理方式
2019/12/27 Python
使用TFRecord存取多个数据案例
2020/02/17 Python
Python Selenium截图功能实现代码
2020/04/26 Python
Python本地及虚拟解释器配置过程解析
2020/10/13 Python
python 实现学生信息管理系统的示例
2020/11/28 Python
荷兰浴室和卫浴网上商店:Badkamerxxl.nl
2020/10/06 全球购物
高三自我鉴定
2013/10/23 职场文书
影视艺术学院毕业生自荐信
2013/11/13 职场文书
医学专业本科毕业生自我鉴定
2013/12/28 职场文书
党员批评与自我批评范文
2014/09/23 职场文书
2014年文艺部工作总结
2014/11/17 职场文书
发票退票证明
2015/06/24 职场文书
小组口号霸气押韵
2015/12/24 职场文书
2016年教师学习教师法心得体会
2016/01/20 职场文书
php 解析非标准json、非规范json
2021/04/01 PHP
JS开发前端团队展示控制器来为成员引流
2022/08/14 Javascript