js调用设备摄像头的方法


Posted in Javascript onJuly 19, 2018

本文实例为大家分享了js调用设备摄像头的具体代码,供大家参考,具体内容如下

使用getUserMedia这个API来获取摄像头的权限
兼容chrome和火狐,IOS不兼容

下面是源码:

<!DOCTYPE html>
<html lang="zh">
 <head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>Document</title>
 </head>
 <body>
  <video src=""></video>
  <script type="text/javascript">
   var opt = {
    audio: true,
    video: {
     width: 375,
     height: 603
    }
   };
   navigator.mediaDevices.getUserMedia(opt)
    .then(function(mediaStream) {
     var video = document.querySelector('video');
     video.srcObject = mediaStream;
     video.onloadedmetadata = function(e) {
      video.play();
     };
    })
    .catch(function(err) {
     console.log(err.name + ": " + err.message);
    }); // always check for errors at the end.
  </script>
 </body>
</html>

注意,如果使用chrome查看代码需要在https协议下才能生效,建议使用火狐查看。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js 数组克隆方法 小结
Mar 20 Javascript
菜鸟学习JavaScript小实验之函数引用
Nov 17 Javascript
jQuery-onload让第一次页面加载时图片是淡入方式显示
May 23 Javascript
javascript获取下拉列表框当中的文本值示例代码
Jul 31 Javascript
js特殊字符过滤的示例代码
Mar 05 Javascript
Jquery操作js数组及对象示例代码
May 11 Javascript
基于BootStrap Metronic开发框架经验小结【三】下拉列表Select2插件的使用
May 12 Javascript
JavaScript的Vue.js库入门学习教程
May 23 Javascript
jQuery简单注册和禁用全局事件的方法
Jul 25 Javascript
Jquery uploadify 多余的Get请求(404错误)的解决方法
Jan 26 Javascript
详解使用jQuery.i18n.properties实现js国际化
May 04 jQuery
Vue自动构建发布脚本的方法示例
Jul 24 Javascript
微信小程序定位当前城市的方法
Jul 19 #Javascript
微信小程序表单验证form提交错误提示效果
Jun 19 #Javascript
js中split()方法得到的数组长度问题
Jul 19 #Javascript
vue+express 构建后台管理系统的示例代码
Jul 19 #Javascript
微信小程序表单弹窗实例
Jul 19 #Javascript
vue用递归组件写树形控件的实例代码
Jul 19 #Javascript
如何理解Vue的v-model指令的使用方法
Jul 19 #Javascript
You might like
mysq GBKl乱码
2006/11/28 PHP
php面向对象全攻略 (十二) 抽象方法和抽象类
2009/09/30 PHP
PHP企业级应用之常见缓存技术篇
2011/01/27 PHP
PHP中foreach()用法汇总
2015/07/02 PHP
php+ajax实现无刷新的新闻留言系统
2020/12/21 PHP
关于php微信订阅号开发之token验证后自动发送消息给订阅号但是没有消息返回的问题
2015/12/21 PHP
php使用str_shuffle()函数生成随机字符串的方法分析
2017/02/17 PHP
PHP实现二叉树深度优先遍历(前序、中序、后序)和广度优先遍历(层次)实例详解
2018/04/20 PHP
javascript 页面只自动刷新一次
2009/07/10 Javascript
浅析JavaScript中的隐式类型转换
2013/12/05 Javascript
jquery 显示*天*时*分*秒实现时间计时器
2014/05/07 Javascript
原生javascript实现图片按钮切换
2015/01/12 Javascript
javascript实现数组去重的多种方法
2016/03/14 Javascript
必备的JS调试技巧汇总
2016/07/20 Javascript
JavaScript中this的四个绑定规则总结
2016/09/26 Javascript
用Angular实时获取本地Localstorage数据,实现一个模拟后台数据登入的效果
2016/11/09 Javascript
jQuery动态生成不规则表格(前后端)
2017/02/21 Javascript
深入浅析angular和vue还有jquery的区别
2018/08/13 jQuery
详解React 的几种条件渲染以及选择
2018/10/23 Javascript
JS块级作用域和私有变量实例分析
2019/05/11 Javascript
在Vue mounted方法中使用data变量详解
2019/11/05 Javascript
vue路由传参的基本实现方式小结【三种方式】
2020/02/05 Javascript
[02:57]DOTA2亚洲邀请赛小组赛第四日 赛事回顾
2015/02/02 DOTA
python处理json数据中的中文
2014/03/06 Python
python 删除字符串中连续多个空格并保留一个的方法
2018/12/22 Python
python SQLAlchemy 中的Engine详解
2019/07/04 Python
用Python画小女孩放风筝的示例
2019/11/23 Python
用CSS3绘制三角形的简单方法
2015/07/17 HTML / CSS
Crocs美国官方网站:卡骆驰洞洞鞋
2017/08/04 全球购物
迪卡侬荷兰官网:Decathlon荷兰
2017/10/29 全球购物
Pure Collection美国官网:来自英国羊绒专家的奢华羊绒
2017/11/19 全球购物
struct和class的区别
2015/11/20 面试题
员工安全承诺书
2014/05/22 职场文书
教育实习指导教师评语
2014/12/31 职场文书
2015年共青团工作总结
2015/05/15 职场文书
素质教育培训心得体会
2016/01/19 职场文书