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 相关文章推荐
一个多次搜索+多次传值的解决方案
Jan 20 Javascript
jquery blockUI 遮罩不能消失与不能提交的解决方法
Sep 17 Javascript
浅析JavaScript 调试方法和技巧
Oct 22 Javascript
基于jquery实现左右按钮点击的图片切换效果
Jan 27 Javascript
javascript图片预加载完整实例
Dec 10 Javascript
快速掌握Node.js环境的安装与运行方法
Feb 16 Javascript
js中scrollTop()方法和scroll()方法用法示例
Oct 03 Javascript
关于微信公众号开发无法支付的问题解决
Dec 28 Javascript
layui 图片上传+表单提交+ Spring MVC的实例
Sep 21 Javascript
使用typescript改造koa开发框架的实现
Feb 04 Javascript
Node.js API详解之 module模块用法实例分析
May 13 Javascript
用vite搭建vue3应用的实现方法
Feb 22 Vue.js
微信小程序定位当前城市的方法
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实现mysql数据库分表分段备份
2015/06/18 PHP
php中删除、清空session的方式总结
2015/10/09 PHP
限制文本字节数js代码
2007/03/06 Javascript
翻译整理的jQuery使用查询手册
2007/03/07 Javascript
javascript flash下fromCharCode和charCodeAt方法使用说明
2008/01/12 Javascript
Javascript 判断Flash是否加载完成的代码
2010/04/12 Javascript
JS生成不重复随机数组的函数代码
2014/06/10 Javascript
JavaScript 学习笔记之操作符
2015/01/14 Javascript
javascript正则表达式之search()用法实例
2015/01/19 Javascript
JavaScript常用的弹出广告及背投广告实现方法
2015/02/06 Javascript
Angular 输入框实现自定义验证功能
2017/02/19 Javascript
jQuery+CSS3实现点赞功能
2017/03/13 Javascript
详解vue中computed 和 watch的异同
2017/06/30 Javascript
详解vue表单——小白速看
2018/04/08 Javascript
通过webpack引入第三方库的方法
2018/07/20 Javascript
JavaScript中.min.js和.js文件的区别讲解
2019/02/13 Javascript
基于vue实现滚动条滚动到指定位置对应位置数字进行tween特效
2019/04/18 Javascript
Vue+Node服务器查询Mongo数据库及页面数据传递操作实例分析
2019/12/20 Javascript
解决ant design vue中树形控件defaultExpandAll设置无效的问题
2020/10/26 Javascript
基于Python实现的ID3决策树功能示例
2018/01/02 Python
Python cookbook(数据结构与算法)在字典中将键映射到多个值上的方法
2018/02/18 Python
windows下python安装小白入门教程
2018/09/18 Python
Python类和对象的定义与实际应用案例分析
2018/12/27 Python
Python2和Python3之间的str处理方式导致乱码的讲解
2019/01/03 Python
python读取目录下所有的jpg文件,并显示第一张图片的示例
2019/06/13 Python
Python面向对象中类(class)的简单理解与用法分析
2020/02/21 Python
Python 去除字符串中指定字符串
2020/03/05 Python
python实现飞机大战项目
2020/03/11 Python
python实现将字符串中的数字提取出来然后求和
2020/04/02 Python
Python3以GitHub为例来实现模拟登录和爬取的实例讲解
2020/07/30 Python
三星美国官网:Samsung美国
2017/02/06 全球购物
Haglöfs瑞典官方网站:haglofs火柴棍,欧洲顶级户外品牌
2018/10/18 全球购物
绝对经典成功的大学生推荐信
2013/11/08 职场文书
关于工作时间玩手机的检讨书
2014/09/18 职场文书
在职证明范本
2015/06/15 职场文书
《活见鬼》教学反思
2016/02/24 职场文书