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 相关文章推荐
Javascript自定义函数判断网站访问类型是PC还是移动终端
Jan 10 Javascript
jQuery实现自定义下拉列表
Jan 05 Javascript
javascript结合canvas实现图片旋转效果
May 03 Javascript
js去除浏览器默认底图的方法
Jun 08 Javascript
javascript实现跨域的方法汇总
Jun 25 Javascript
Js 获取、判断浏览器版本信息的简单方法
Aug 08 Javascript
利用Javascript获取选择文本所在的句子详解
Dec 03 Javascript
一些你可能不熟悉的JS知识点总结
Mar 15 Javascript
少女风vue组件库的制作全过程
May 15 Javascript
Vue开发环境中修改端口号的实现方法
Aug 15 Javascript
jQuery实现日历效果
Sep 11 jQuery
解决vue-router 嵌套路由没反应的问题
Sep 22 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
php file_get_contents抓取Gzip网页乱码的三种解决方法
2013/11/12 PHP
PHP严重致命错误处理:php Fatal error: Cannot redeclare class or function
2017/02/05 PHP
php解析mht文件转换成html的实例
2017/03/13 PHP
javawscript 三级菜单的实现原理
2009/07/01 Javascript
js中的window.open返回object的错误的解决方法
2009/08/15 Javascript
S2SH整合JQuery+Ajax实现登录验证功能实现代码
2013/01/30 Javascript
jQuery简单实现图片预加载
2015/04/20 Javascript
javascript实现动态标签云
2015/10/16 Javascript
关于JS中的apply,call,bind的深入解析
2016/04/05 Javascript
微信小程序 form组件详解
2016/10/25 Javascript
node.js调用Chrome浏览器打开链接地址的方法
2017/05/17 Javascript
详解angular 中的自定义指令之详解API
2017/06/20 Javascript
利用10行js代码实现上下滚动公告效果
2017/12/08 Javascript
解决angularjs中同步执行http请求的方法
2018/08/13 Javascript
vue实现输入框自动跳转功能
2020/05/20 Javascript
[55:35]DOTA2-DPC中国联赛 正赛 CDEC vs Dragon BO3 第二场 1月22日
2021/03/11 DOTA
Python Web开发模板引擎优缺点总结
2014/05/06 Python
Django RBAC权限管理设计过程详解
2019/08/06 Python
Pandas聚合运算和分组运算的实现示例
2019/10/17 Python
Python一行代码解决矩阵旋转的问题
2019/11/30 Python
Jupyter notebook快速入门教程(推荐)
2020/05/18 Python
详解python中的闭包
2020/09/07 Python
美国克罗格超市在线购物:Kroger
2019/06/21 全球购物
通信工程毕业生求职信
2013/11/16 职场文书
在校硕士自我鉴定
2014/01/23 职场文书
广告设计应届生求职信
2014/03/01 职场文书
房产转让协议书
2014/04/11 职场文书
软件售后服务方案
2014/05/29 职场文书
2014优秀党员事迹材料
2014/08/14 职场文书
关于诚信的活动方案
2014/08/18 职场文书
法学专业大学生实习自我鉴定
2014/10/05 职场文书
导游词之张家界
2019/10/31 职场文书
基于CSS3画一个iPhone
2021/04/21 HTML / CSS
MySQL中varchar和char类型的区别
2021/11/17 MySQL
MySQ InnoDB和MyISAM存储引擎介绍
2022/04/26 MySQL
Hive导入csv文件示例
2022/06/25 数据库