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分页插件AmSetPager(自写)
Apr 15 Javascript
js模拟hashtable的简单实例
Mar 06 Javascript
Node.js(安装,启动,测试)
Jun 09 Javascript
谈谈jQuery Ajax用法详解
Nov 27 Javascript
javascript对象的相关操作小结
May 16 Javascript
AngularJS 获取ng-repeat动态生成的ng-model值实例详解
Nov 29 Javascript
webpack学习--webpack经典7分钟入门教程
Jun 28 Javascript
vue移动端裁剪图片结合插件Cropper的使用实例代码
Jul 10 Javascript
jQuery UI 实例讲解 - 日期选择器(Datepicker)
Sep 18 jQuery
es6在react中的应用代码解析
Nov 08 Javascript
详解Vue中的基本语法和常用指令
Jul 23 Javascript
vue获取form表单的值示例
Oct 29 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 session的应用详细介绍
2017/03/22 PHP
在Laravel中使用DataTables插件的方法
2018/05/29 PHP
js判断选择的时间是否大于今天的代码
2013/08/20 Javascript
七个很有意思的PHP函数
2014/05/12 Javascript
jquery实现在页面加载完毕后获取图片高度或宽度
2014/06/16 Javascript
jQuery+json实现的简易Ajax调用实例
2015/12/14 Javascript
javascript实现可键盘控制的抽奖系统
2016/03/10 Javascript
浅谈bootstrap源码分析之scrollspy(滚动侦听)
2016/06/06 Javascript
基于node.js依赖express解析post请求四种数据格式
2017/02/13 Javascript
angular $watch 一个变量的变化(实例讲解)
2017/08/02 Javascript
jQuery选取所有复选框被选中的值并用Ajax异步提交数据的实例
2017/08/04 jQuery
bootstrap treeview 扩展addNode方法动态添加子节点的方法
2017/11/21 Javascript
如何通过vscode运行调试javascript代码
2020/07/24 Javascript
JS实现放大镜效果
2020/09/21 Javascript
详解vue-router的导航钩子(导航守卫)
2020/11/02 Javascript
vue实现登录、注册、退出、跳转等功能
2020/12/23 Vue.js
[02:42]决战东方!DOTA2亚洲邀请赛重启荣耀之争
2017/03/17 DOTA
树莓派中python获取GY-85九轴模块信息示例
2013/12/05 Python
Python使用CMD模块更优雅的运行脚本
2015/05/11 Python
菜鸟使用python实现正则检测密码合法性
2016/01/05 Python
Python中super函数的用法
2017/11/17 Python
Python3中条件控制、循环与函数的简易教程
2017/11/21 Python
解决Django生产环境无法加载静态文件问题的解决
2019/04/23 Python
python 通过可变参数计算n个数的乘积方法
2019/06/13 Python
Python创建一个元素都为0的列表实例
2019/11/28 Python
Python如何定义接口和抽象类
2020/07/28 Python
教师个人自我鉴定
2014/02/08 职场文书
2014年小学元旦活动方案
2014/02/12 职场文书
2014年团委工作总结
2014/11/13 职场文书
班主任工作实习计划
2015/01/16 职场文书
党建工作目标管理责任书
2015/01/29 职场文书
四风之害观后感
2015/06/09 职场文书
Jupyter Notebook 如何修改字体和大小以及更改字体样式
2021/06/03 Python
SpringBoot2 参数管理实践之入参出参与校验的方式
2021/06/16 Java/Android
sql字段解析器的实现示例
2021/06/23 SQL Server
Python 处理表格进行成绩排序的操作代码
2021/07/26 Python