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 相关文章推荐
ext读取两种结构的xml的代码
Nov 05 Javascript
javascript 正则替换 replace(regExp, function)用法
May 22 Javascript
js 自定义个性下拉选择框示例
Aug 20 Javascript
javascript实现在指定元素中垂直水平居中
Sep 13 Javascript
有关jQuery中parent()和siblings()的小问题
Jun 01 Javascript
JS新包管理工具yarn和npm的对比与使用入门
Dec 09 Javascript
js使用Replace结合正则替换重复出现的字符串功能示例
Dec 27 Javascript
Vue.js学习示例分享
Feb 05 Javascript
浅谈Koa服务限流方法实践
Oct 23 Javascript
JS声明对象时属性名加引号与不加引号的问题及解决方法
Feb 16 Javascript
Vue2.0子同级组件之间数据交互方法
Feb 28 Javascript
JavaScript实现模态对话框实例
Jan 13 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
对javascript和select部件的结合运用
2006/10/09 PHP
用php+mysql一个名片库程序
2006/10/09 PHP
PHP 编程请选择正确的文本编辑软件
2006/12/21 PHP
php 调试利器debug_print_backtrace()
2012/07/23 PHP
PHP实现合并discuz用户
2015/08/05 PHP
CodeIgniter针对数据库的连接、配置及使用方法
2016/03/03 PHP
分享5个非常有用的Laravel Blade指令
2018/05/30 PHP
JQuery AJAX实现目录浏览与编辑的代码
2008/10/21 Javascript
js 自定义的联动下拉框
2010/02/07 Javascript
如何用ajax来创建一个XMLHttpRequest对象
2012/12/10 Javascript
Extjs4 Treegrid 使用心得分享(经验篇)
2013/07/01 Javascript
JavaScript中的console.time()函数详细介绍
2014/12/29 Javascript
原生js结合html5制作小飞龙的简易跳球
2015/03/30 Javascript
javascript下使用Promise封装FileReader
2016/02/19 Javascript
js基本算法:冒泡排序,二分查找的简单实例
2016/10/08 Javascript
bootstrap实现图片自动轮播
2016/12/21 Javascript
js实现简单的计算器功能
2017/01/16 Javascript
require.js中的define函数详解
2017/07/10 Javascript
详解VUE中v-bind的基本用法
2017/07/13 Javascript
jQuery基于闭包实现的显示与隐藏div功能示例
2018/06/09 jQuery
jQuery使用动画队列自定义动画操作示例
2018/06/16 jQuery
解决Vue.js由于延时显示了{{message}}引用界面的问题
2018/08/25 Javascript
使用Angular自定义字段校验指令的方法示例
2019/02/01 Javascript
通过图带你深入了解vue的响应式原理
2019/06/21 Javascript
Vue.js暴露方法给WebView的使用操作
2020/09/07 Javascript
Python制作exe文件简单流程
2019/01/24 Python
python logging模块书写日志以及日志分割详解
2019/07/22 Python
Python获取时间范围内日期列表和周列表的函数
2019/08/05 Python
Python 线程池用法简单示例
2019/10/02 Python
总结Pyinstaller的坑及终极解决方法(小结)
2020/09/21 Python
pycharm激活码免费分享适用最新pycharm2020.2.3永久激活
2020/11/25 Python
销售总监工作职责
2013/11/21 职场文书
2014年安全保卫工作总结
2014/11/13 职场文书
安全教育主题班会教案
2015/08/12 职场文书
《分数乘法》教学反思
2016/02/24 职场文书
vue项目两种方式实现竖向表格的思路分析
2021/04/28 Vue.js