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 相关文章推荐
彪哥1.1(智能表格)提供下载
Sep 07 Javascript
JS 图片缩放效果代码
Jun 09 Javascript
JavaScript 变量作用域分析
Jul 04 Javascript
js的匿名函数使用介绍
Dec 11 Javascript
举例讲解JavaScript中关于对象操作的相关知识
Nov 16 Javascript
Ubuntu系统下Angularjs开发环境安装
Sep 01 Javascript
在vue中利用全局路由钩子给url统一添加公共参数的例子
Nov 01 Javascript
微信JSSDK实现打开摄像头拍照再将相片保存到服务器
Nov 15 Javascript
vue-router的hooks用法详解
Jun 08 Javascript
Javascript实现鼠标移入方向感知
Jun 24 Javascript
Vue使用Proxy代理后仍无法生效的解决
Nov 13 Javascript
基于Vue+Webpack拆分路由文件实现管理
Nov 16 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
索尼SONY ICF-7600A(W)电路分析
2021/03/01 无线电
php getimagesize 上传图片的长度和宽度检测代码
2010/05/15 PHP
利用php+mysql来做一个功能强大的在线计算器
2010/10/12 PHP
php异常:Parse error: syntax error, unexpected T_ENCAPSED_AND_WHITESPACE  eval()'d code error
2011/05/19 PHP
ThinkPHP 模板substr的截取字符串函数详解
2017/01/09 PHP
IIS 7.5 asp Session超时时间设置方法
2017/04/17 PHP
javascript一些不错的函数脚本代码
2008/09/10 Javascript
JS 获取span标签中的值的代码 支持ie与firefox
2009/08/24 Javascript
javascript encodeURI和encodeURIComponent的比较
2010/04/03 Javascript
DOM_window对象属性之--clipboardData对象操作代码
2011/02/03 Javascript
seajs1.3.0源码解析之module依赖有序加载
2012/11/07 Javascript
jQuery中insertAfter()方法用法实例
2015/01/08 Javascript
TypeScript 中接口详解
2015/06/19 Javascript
javascript文本模板用法实例
2015/07/31 Javascript
微信小程序-消息提示框实例
2016/11/24 Javascript
Express系列之multer上传的使用
2017/10/27 Javascript
js实现盒子拖拽动画效果
2020/08/09 Javascript
[06:43]DAC2018 4.5 SOLO赛 Maybe vs Paparazi
2018/04/06 DOTA
python实现识别相似图片小结
2016/02/22 Python
python编程羊车门问题代码示例
2017/10/25 Python
Python3处理HTTP请求的实例
2018/05/10 Python
Python3自动签到 定时任务 判断节假日的实例
2018/11/13 Python
Python实现插入排序和选择排序的方法
2019/05/12 Python
Python如何爬取微信公众号文章和评论(基于 Fiddler 抓包分析)
2019/06/28 Python
解决django model修改添加字段报错的问题
2019/11/18 Python
Django实现内容缓存实例方法
2020/06/30 Python
详解如何用canvas画一个微笑的表情
2019/03/14 HTML / CSS
浅谈利用缓存来优化HTML5 Canvas程序的性能
2015/05/12 HTML / CSS
如何使用amaze ui的分页样式封装一个通用的JS分页控件
2020/08/21 HTML / CSS
贝玲妃英国官网:Benefit英国
2018/02/03 全球购物
西班牙自行车和跑步商店:Alltricks
2018/07/07 全球购物
应聘美工求职信
2013/11/07 职场文书
学习全国两会精神心得体会范文
2014/03/17 职场文书
优秀党员事迹材料
2014/12/18 职场文书
2015年社区矫正工作总结
2015/04/21 职场文书
导游词之河北野三坡
2019/12/11 职场文书