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 相关文章推荐
js确认删除对话框效果的示例代码
Feb 20 Javascript
jQuery实现单击和鼠标感应事件
Feb 01 Javascript
AngularJS实现分页显示数据库信息
Jul 01 Javascript
AngularJS 在同一个界面启动多个ng-app应用模块详解
Dec 20 Javascript
d3.js入门教程之数据绑定详解
Apr 28 Javascript
angularjs定时任务的设置与清除示例
Jun 02 Javascript
jQuery代码优化方法总结
Jan 29 jQuery
Element-ui table中过滤条件变更表格内容的方法
Mar 02 Javascript
JavaScript创建对象方式总结【工厂模式、构造函数模式、原型模式等】
Dec 19 Javascript
jQuery动态生成的元素绑定事件操作实例分析
May 04 jQuery
layui点击左侧导航栏,实现不刷新整个页面,只刷新局部的方法
Sep 25 Javascript
JS猜数字游戏实例讲解
Jun 30 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
Thinkphp批量更新数据的方法汇总
2016/06/29 PHP
php is_writable判断文件是否可写实例代码
2016/10/13 PHP
Avengerls vs Newbee BO3 第二场2.18
2021/03/10 DOTA
jQuery 处理网页内容的实现代码
2010/02/15 Javascript
jquery.artwl.thickbox.js  一个非常简单好用的jQuery弹出层插件
2012/03/01 Javascript
利用JQuery和JS实现奇偶行背景颜色自定义效果
2012/11/19 Javascript
Javascript 按位与赋值运算符 (&amp;=)使用介绍
2014/02/04 Javascript
jquery中获取元素里某一特定子元素的代码
2014/12/02 Javascript
JS实现仿中关村论坛评分后弹出提示效果的方法
2015/02/23 Javascript
jQuery on()方法使用技巧详解
2015/04/16 Javascript
手机软键盘弹出时影响布局的解决方法
2016/12/15 Javascript
js获取ip和地区
2017/03/10 Javascript
nodejs 终端打印进度条实例代码
2017/04/22 NodeJs
AngularJS基于MVC的复杂操作实例讲解
2017/12/31 Javascript
vue实现在一个方法执行完后执行另一个方法的示例
2018/08/25 Javascript
axios携带cookie配置详解(axios+koa)
2018/12/28 Javascript
关于微信小程序获取小程序码并接受buffer流保存为图片的方法
2019/06/07 Javascript
[02:25]DOTA2英雄基础教程 虚空假面
2014/01/02 DOTA
[46:53]Secret vs Liquid 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
Python 字典dict使用介绍
2014/11/30 Python
python实现微信发送邮件关闭电脑功能
2018/02/22 Python
可能是最全面的 Python 字符串拼接总结【收藏】
2018/07/09 Python
python使用Turtle库绘制动态钟表
2018/11/19 Python
Python Tkinter 简单登录界面的实现
2019/06/14 Python
Python 爬取必应壁纸的实例讲解
2020/02/24 Python
Python使用urlretrieve实现直接远程下载图片的示例代码
2020/08/17 Python
MCM英国官网:奢侈皮具制品
2017/04/18 全球购物
草莓网化妆品日本站:Strawberrynet日本
2017/10/20 全球购物
美国玩具公司:U.S.Toy
2018/05/19 全球购物
西班牙品牌鞋子、服装和配饰在线商店:Esdemarca
2021/02/17 全球购物
遵纪守法演讲稿
2014/05/23 职场文书
行政处罚事先告知书
2015/07/01 职场文书
幼儿园元旦主持词
2015/07/06 职场文书
学生会部长竞选稿
2015/11/19 职场文书
员工升职自我评价
2019/03/26 职场文书
一看就懂的MySQL的聚簇索引及聚簇索引是如何长高的
2021/05/25 MySQL