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数据表格插件
Jul 17 Javascript
jquery中this的使用说明
Sep 06 Javascript
jQuery 菜单随滚条改为以定位方式(固定要浏览器顶部)
May 24 Javascript
window resize和scroll事件的基本优化思路
Apr 29 Javascript
javascript删除数组重复元素的方法汇总
Jun 24 Javascript
Javascript 实现全屏滚动实例代码
Dec 31 Javascript
微信小程序 按钮滑动的实现方法
Sep 27 Javascript
React Native 截屏组件的示例代码
Dec 06 Javascript
p5.js实现斐波那契螺旋的示例代码
Mar 22 Javascript
微信小程序实现弹出菜单动画
Jun 21 Javascript
小程序识别身份证,银行卡,营业执照,驾照的实现
Nov 05 Javascript
vue实现数据控制视图的原理解析
Jan 07 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
fleaphp crud操作之findByField函数的使用方法
2011/04/23 PHP
深入PHP数据加密详解
2013/06/18 PHP
向fckeditor编辑器插入指定代码的方法
2007/05/25 Javascript
网站页面自动跳转实现方法PHP、JSP(下)
2010/08/01 Javascript
用jquery模仿的a的title属性的例子
2014/10/22 Javascript
JavaScript 封装一个tab效果源码分享
2015/09/15 Javascript
理解javascript定时器中的setTimeout与setInterval
2016/02/23 Javascript
Javascript的表单验证长度
2016/03/16 Javascript
Javascript小技能总结(推荐)
2016/06/02 Javascript
基于WebUploader的文件上传js插件
2016/08/19 Javascript
旺旺在线客服代码 旺旺客服代码生成器
2018/01/09 Javascript
vue 自定义 select内置组件
2018/04/10 Javascript
JavaScript设计模式之构造函数模式实例教程
2018/07/02 Javascript
react项目实践之webpack-dev-serve
2018/09/14 Javascript
nodejs使用async模块同步执行的方法
2019/03/02 NodeJs
nest.js 使用express需要提供多个静态目录的操作方法
2019/10/24 Javascript
微信小程序实现时间戳格式转换
2020/07/20 Javascript
如何在vue中使用百度地图添加自定义覆盖物(水波纹)
2020/11/03 Javascript
如何在vue中使用video.js播放m3u8格式的视频
2021/02/01 Vue.js
[31:47]夜魇凡尔赛茶话会 第三期01:选手知多少
2021/03/11 DOTA
python发送邮件接收邮件示例分享
2014/01/21 Python
PyQt5每天必学之布局管理
2018/04/19 Python
pytorch 共享参数的示例
2019/08/17 Python
python查看数据类型的方法
2019/10/12 Python
python3实现elasticsearch批量更新数据
2019/12/03 Python
Tensorflow进行多维矩阵的拆分与拼接实例
2020/02/07 Python
python实现自动打卡的示例代码
2020/10/10 Python
Python用Jira库来操作Jira
2020/12/28 Python
CSS3 渐变(Gradients)之CSS3 线性渐变
2016/07/08 HTML / CSS
澳大利亚百货公司:David Jones
2018/02/08 全球购物
欧洲有机婴儿食品最大的市场:Organic Baby Food(供美国和加拿大)
2018/03/28 全球购物
体育专业个人求职信范文
2013/12/27 职场文书
干部现实表现材料
2014/02/13 职场文书
绿色环保标语
2014/06/12 职场文书
2014教师“四风问题”对照检查材料思想汇报
2014/09/16 职场文书
关于运动会的广播稿
2015/08/19 职场文书