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 相关文章推荐
JQuery下关于$.Ready()的分析
Dec 13 Javascript
js限制textarea每行输入字符串长度的代码
Oct 31 Javascript
jQuery实现的超酷苹果风格图标滑出菜单效果代码
Sep 16 Javascript
JQuery实现简单的图片滑动切换特效
Nov 22 Javascript
d3.js实现简单的网络拓扑图实例代码
Nov 06 Javascript
使用bat打开多个cmd窗口执行gulp、node
Feb 17 Javascript
Webpack性能优化 DLL 用法详解
Aug 10 Javascript
详解vue-cli+element-ui树形表格(多级表格折腾小计)
Apr 17 Javascript
在微信小程序中使用vant的方法
Jun 07 Javascript
微信小程序实现电子签名并导出图片
May 27 Javascript
微信小程序用户盒子、宫格列表的实现
Jul 01 Javascript
Vue路由切换页面不更新问题解决方案
Jul 10 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下利用header()函数设置浏览器缓存的代码
2010/09/01 PHP
php中使用Akismet防止垃圾评论的代码
2011/06/10 PHP
PHP static局部静态变量和全局静态变量总结
2014/03/02 PHP
php中动态变量用法实例
2015/06/10 PHP
php计算税后工资的方法
2015/07/28 PHP
win7系统配置php+Apache+mysql环境的方法
2015/08/21 PHP
PHP实现导出excel数据的类库用法示例
2016/10/15 PHP
laravel 解决多库下的DB::transaction()事务失效问题
2019/10/21 PHP
php的lavarel框架中join和orWhere的用法
2020/12/28 PHP
Javascript 中的类和闭包
2010/01/08 Javascript
formStorage 基于jquery的一个插件(存储表单中元素的状态到本地)
2012/01/20 Javascript
JavaScript中的pow()方法使用详解
2015/06/15 Javascript
jquery实现表单验证简单实例演示
2015/11/23 Javascript
深入浅析Vue组件开发
2016/11/25 Javascript
JS库之Highlight.js的用法详解
2017/09/13 Javascript
微信小程序自定义select下拉选项框组件的实现代码
2018/08/28 Javascript
Angular7.2.7路由使用初体验
2019/03/01 Javascript
详解如何在Vue项目中导出Excel
2019/04/19 Javascript
[03:20]2015国际邀请赛全明星表演赛
2015/08/08 DOTA
[03:12]完美世界DOTA2联赛PWL DAY7集锦
2020/11/06 DOTA
python如何读写csv数据
2018/03/21 Python
从django的中间件直接返回请求的方法
2018/05/30 Python
python3安装crypto出错及解决方法
2019/07/30 Python
Python字符串中删除特定字符的方法
2020/01/15 Python
Mysql数据库反向生成Django里面的models指令方式
2020/05/18 Python
为什么说python更适合树莓派编程
2020/07/20 Python
使用CSS3来制作消息提醒框
2015/07/12 HTML / CSS
Html5大文件断点续传实现方法
2015/12/05 HTML / CSS
详解HTML5中CSS外观属性
2020/09/10 HTML / CSS
英国领先的奢侈品零售商之一:CRUISE
2016/12/02 全球购物
会计电算化个人求职信范文
2014/01/24 职场文书
聚会通知怎么写
2015/04/23 职场文书
告知书格式
2015/07/01 职场文书
2019森林防火宣传标语大全!
2019/07/03 职场文书
导游词之秦皇岛燕塞湖
2020/01/03 职场文书
利用Python第三方库实现预测NBA比赛结果
2021/06/21 Python