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插入动态样式实现代码
Feb 22 Javascript
jquery绑定事件不生效的解决方法
Feb 11 Javascript
JS在可编辑的div中的光标位置插入内容的方法
Nov 20 Javascript
javascript将异步校验表单改写为同步表单
Jan 27 Javascript
JavaScript中获取Radio被选中的值
Nov 11 Javascript
JS去掉字符串中所有的逗号
Oct 18 Javascript
基于webpack4搭建的react项目框架的方法
Jun 30 Javascript
js 实现在2d平面上画8的方法
Oct 10 Javascript
vue移动端屏幕适配详解
Apr 30 Javascript
vue项目前端知识点整理【收藏】
May 13 Javascript
如何从头实现一个node.js的koa框架
Jun 17 Javascript
Vue+ElementUI项目使用webpack输出MPA的方法
Aug 27 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开启openssl的方法
2014/05/15 PHP
php 无限级分类,超级简单的无限级分类,支持输出树状图
2014/06/29 PHP
PHP simplexml_load_file()函数讲解
2019/02/03 PHP
一个可以随意添加多个序列的tag函数
2009/07/21 Javascript
javascript 在firebug调试时用console.log的方法
2012/05/10 Javascript
JS 两个字符串时间的天数差计算
2013/08/25 Javascript
node.js中使用socket.io的方法
2014/12/15 Javascript
jQuery实现可高亮显示的二级CSS菜单效果
2015/09/01 Javascript
JS原型对象的创建方法详解
2016/06/16 Javascript
jQuery简单设置文本框回车事件的方法
2016/08/01 Javascript
JS键盘版计算器的制作方法
2016/12/03 Javascript
VueJs与ReactJS和AngularJS的异同点
2016/12/12 Javascript
JavaScript+CSS相册特效实例代码
2017/09/07 Javascript
Angular4绑定html内容出现警告的处理方法
2017/11/03 Javascript
jquery实现楼层滚动效果
2018/01/01 jQuery
vue2.x集成百度UEditor富文本编辑器的方法
2018/09/21 Javascript
js页面加载后执行的几种方式小结
2020/01/30 Javascript
微信小程序自定义yPicker组件实现省市区三级联动功能
2020/10/29 Javascript
Python实现设置windows桌面壁纸代码分享
2015/03/28 Python
python实现备份目录的方法
2015/08/03 Python
Python3中关于cookie的创建与保存
2018/10/21 Python
解决Python 命令行执行脚本时,提示导入的包找不到的问题
2019/01/19 Python
Python3和pyqt5实现控件数据动态显示方式
2019/12/13 Python
通过实例解析python创建进程常用方法
2020/06/19 Python
python 使用OpenCV进行简单的人像分割与合成
2021/02/02 Python
HTML5的结构和语义(1):前言
2008/10/17 HTML / CSS
丝绸和人造花卉、植物和树木:Nearly Natural
2018/11/28 全球购物
二手书店创业计划书
2014/01/16 职场文书
培训自我鉴定
2014/01/31 职场文书
经济贸易系求职信
2014/08/04 职场文书
领导班子整改方案
2014/10/25 职场文书
2014年学习部工作总结
2014/11/12 职场文书
2014幼儿教师个人工作总结
2014/12/03 职场文书
2015小学五年级班主任工作总结
2015/05/21 职场文书
php中pcntl_fork详解
2021/04/01 PHP
Python的property属性详细讲解
2022/04/11 Python