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 iframe编程相关代码
Dec 28 Javascript
js三种排序算法分享
Aug 16 Javascript
js 字符串转换成数字的三种方法
Mar 23 Javascript
js判断两个日期是否相等的方法
Sep 10 Javascript
原始的js代码和jquery对比体会
Sep 10 Javascript
使用focus方法让光标默认停留在INPUT框
Jul 29 Javascript
JavaScript中的标签语句用法分析
Feb 10 Javascript
javascript+html5实现仿flash滚动播放图片的方法
Apr 27 Javascript
详解在Vue中如何使用axios跨域访问数据
Jul 07 Javascript
vue.js中父组件调用子组件的内部方法示例
Oct 22 Javascript
解决vue-router进行build无法正常显示路由页面的问题
Mar 06 Javascript
layui的layedit富文本赋值方法
Sep 18 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 中文处理函数集合
2008/08/27 PHP
PHP微信PC二维码登陆的实现思路
2017/07/13 PHP
[原创]PHP实现生成vcf vcard文件功能类定义与使用方法详解【附demo源码下载】
2017/09/02 PHP
农历与西历对照
2006/09/06 Javascript
jQuery 方法大全方便学习参考
2010/02/25 Javascript
Jquery知识点一 Jquery的ready和Dom的onload的区别
2011/01/15 Javascript
jquery(hide方法)隐藏指定元素实例
2013/11/11 Javascript
$.each与$().each的区别示例介绍
2014/03/20 Javascript
jQuery防止click双击多次提交及传递动态函数或多参数
2014/04/02 Javascript
浏览器窗口大小变化时使用resize事件对框架不起作用的解决方法
2014/05/11 Javascript
Angular和百度地图的结合实例代码
2016/10/19 Javascript
微信小程序之数据双向绑定与数据操作
2017/05/12 Javascript
微信小程序使用picker实现时间和日期选择框功能【附源码下载】
2017/12/11 Javascript
Node.js设置定时任务之node-schedule模块的使用详解
2020/04/28 Javascript
vue基于Echarts的拖拽数据可视化功能实现
2020/12/04 Vue.js
手写Vue源码之数据劫持示例详解
2021/01/04 Vue.js
[03:01]DOTA2英雄基础教程 露娜
2014/01/07 DOTA
[10:28]2018DOTA2国际邀请赛寻真——VGJ.S寻梦之路
2018/08/15 DOTA
初步解析Python下的多进程编程
2015/04/28 Python
Python selenium 三种等待方式解读
2016/09/15 Python
python 排序算法总结及实例详解
2016/09/28 Python
python机器学习之贝叶斯分类
2018/03/26 Python
Python面向对象类继承和组合实例分析
2018/05/28 Python
Python使用progressbar模块实现的显示进度条功能
2018/05/31 Python
Python并发请求下限制QPS(每秒查询率)的实现代码
2020/06/05 Python
Python建造者模式案例运行原理解析
2020/06/29 Python
canvas烟花特效锦集
2018/01/17 HTML / CSS
手机配件第一品牌:ZAGG
2017/05/28 全球购物
汇智创新科技发展有限公司
2015/12/06 面试题
经典的班主任推荐信
2013/10/28 职场文书
机械电子工程专业自荐书
2014/06/10 职场文书
班主任培训研修日志
2015/11/13 职场文书
2016教师年度考核评语大全
2015/12/01 职场文书
关于办理居住证的介绍信模板
2019/11/27 职场文书
Redis可视化客户端小结
2021/06/10 Redis
python多线程方法详解
2022/01/18 Python