js调用设备摄像头的方法

 更新时间:2018年07月19日 11:35:34   作者:东都花神   我要评论
这篇文章主要为大家详细介绍了js调用设备摄像头的方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了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协议下才能生效,建议使用火狐查看。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持澳门金沙网上娱乐。

相关文章

  • window.open不被拦截的简单实现代码(推荐)

    window.open不被拦截的简单实现代码(推荐)

    下面小编就为大家带来一篇window.open不被拦截的简单实现代码(推荐) 。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-08-08
  • BootStrap中Datepicker控件带中文的js文件

    BootStrap中Datepicker控件带中文的js文件

    bootstrap-datepicker 是一个非常优秀的时间选择插件。这篇文章主要介绍了bootstrap-datepicker带中文的js文件的相关资料,需要的朋友可以参考下
    2016-08-08
  • 深入浅出webpack之externals的使用

    深入浅出webpack之externals的使用

    这篇文章主要介绍了深入浅出webpack之externals的使用,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-12-12
  • layer实现弹出层自动调节位置

    layer实现弹出层自动调节位置

    今天小编就为大家分享一篇layer实现弹出层自动调节位置,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • 微信小程序实现点击图片旋转180度并且弹出下拉列表

    微信小程序实现点击图片旋转180度并且弹出下拉列表

    这篇文章主要为大家详细介绍了微信小程序实现点击图片旋转180度并且弹出下拉列表,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-11-11
  • JSON字符串和对象相互转换实例分析

    JSON字符串和对象相互转换实例分析

    这篇文章主要介绍了JSON字符串和对象相互转换的方法,结合实例形式分析了json格式数据的转换方法,涉及javascript正则与字符串操作的相关技巧,需要的朋友可以参考下
    2016-06-06
  • js/jquery获取文本框输入焦点的方法

    js/jquery获取文本框输入焦点的方法

    本篇文章主要是对js/jquery获取文本框输入焦点的方法进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2014-03-03
  • JavaScript 五大常见函数

    JavaScript 五大常见函数

    在javascript前端开发中js函数问题经常会被讨论,这个问题仁者见仁智者见智,下面通过示例代码给大家介绍js五大常见函数,感兴趣的朋友一起看看吧
    2018-03-03
  • 10道典型的JavaScript面试题

    10道典型的JavaScript面试题

    本文主要介绍了10道典型的JavaScript面试题。具有很好的参考价值。下面跟着小编一起来看下吧
    2017-03-03
  • JS中怎样判断undefined(比较不错的方法)

    JS中怎样判断undefined(比较不错的方法)

    用servlet赋值给html页面文本框值后,用alert来弹出这个值.结果显示"undefined".下面为大家介绍下具体的判断方法,大家可以参考下
    2014-03-03

最新评论