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 相关文章推荐
Javascript中的Split使用方法与技巧
Mar 09 Javascript
JS写的数字拼图小游戏代码[学习参考]
Oct 29 Javascript
重写javascript中window.confirm的行为
Oct 21 Javascript
JavaScript bold方法入门实例(把指定文字显示为粗体)
Oct 17 Javascript
JavaScript+html5 canvas绘制的圆弧荡秋千效果完整实例
Jan 26 Javascript
深入浅析JSON.parse()、JSON.stringify()和eval()的作用详解
Apr 03 Javascript
canvas压缩图片转换成base64格式输出文件流
Mar 09 Javascript
JS实现的input选择图片本地预览功能示例
Aug 29 Javascript
JS实现可视化文件上传
Sep 08 Javascript
vue + element-ui的分页问题实现
Dec 17 Javascript
每天学点Vue源码之vm.$mount挂载函数
Mar 11 Javascript
vue递归组件实战之简单树形控件实例代码
Aug 27 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 执行系统外部命令 system() exec() passthru()
2009/08/11 PHP
PHP中定义数组常量(array常量)的方法
2014/11/17 PHP
php生出随机字符串
2017/07/06 PHP
实例讲解php实现多线程
2019/01/27 PHP
Js动态创建div
2008/09/25 Javascript
JavaScript时间操作之年月日星期级联操作
2016/01/15 Javascript
HTML5游戏引擎LTweenLite实现的超帅动画效果(附demo源码下载)
2016/01/26 Javascript
JavaScript和JQuery获取DIV值的方法示例
2017/03/07 Javascript
基于jQuery实现瀑布流页面
2017/04/11 jQuery
JS实现给json数组动态赋值的方法示例
2020/03/19 Javascript
jQuery简单实现根据日期计算星期几的方法
2019/01/09 jQuery
对于防止按钮重复点击的尝试详解
2019/04/22 Javascript
ES6 Promise对象的应用实例分析
2019/06/27 Javascript
elementUI 动态生成几行几列的方法示例
2019/07/11 Javascript
vue遍历生成的输入框 绑定及修改值示例
2019/10/30 Javascript
9种方法优化jQuery代码详解
2020/02/04 jQuery
JavaScript实现PC端四格密码输入框功能
2020/02/19 Javascript
在Webpack中用url-loader处理图片和字体的问题
2020/04/28 Javascript
浅谈vue单页面中有多个echarts图表时的公用代码写法
2020/07/19 Javascript
vue实现简易的双向数据绑定
2020/12/29 Vue.js
Python运算符重载用法实例
2015/05/28 Python
Python爬虫获取图片并下载保存至本地的实例
2018/06/01 Python
在win10和linux上分别安装Python虚拟环境的方法步骤
2019/05/09 Python
Python 切分数组实例解析
2019/11/07 Python
Django框架之中间件MiddleWare的实现
2019/12/30 Python
pyftplib中文乱码问题解决方案
2020/01/11 Python
详解python环境安装selenium和手动下载安装selenium的方法
2020/03/17 Python
Python学习笔记之装饰器
2020/08/06 Python
售后服务科岗位职责范文
2013/11/13 职场文书
会计找工作求职信范文
2013/12/09 职场文书
数控技校生自我鉴定
2014/03/02 职场文书
心理咨询承诺书
2014/05/20 职场文书
餐饮服务员岗位职责
2015/02/09 职场文书
地震捐款简报
2015/07/21 职场文书
PHP新手指南
2021/04/01 PHP
为Java项目添加Redis缓存的方法
2021/05/18 Redis