脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js调用设备摄像头

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协议下才能生效，建议使用火狐查看。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • JavaScript调用模式与this关键字绑定的关系

    JavaScript调用模式与this关键字绑定的关系

    这篇文章主要介绍了JavaScript调用模式与this关键字绑定的关系 的相关资料,需要的朋友可以参考下
    2018-04-04
  • TypeScript接口使用介绍

    TypeScript接口使用介绍

    接口是一系列抽象方法的声明，是一些方法特征的集合，这些方法都应该是抽象的，需要由具体的类去实现，然后第三方就可以通过这组抽象方法调用，让具体的类执行具体的方法
    2022-10-10
  • JS实现放大镜效果

    JS实现放大镜效果

    这篇文章主要为大家详细介绍了JS实现放大镜效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-09-09
  • webpack独立打包和缓存处理详解

    webpack独立打包和缓存处理详解

    这篇文章主要介绍了webpack独立打包和缓存处理的相关资料，文中介绍的非常详细，对大家学习webpack具有一定的参考价值，需要的朋友们下面来一起看看吧。
    2017-04-04
  • 微信小程序如何实现在线客服功能

    微信小程序如何实现在线客服功能

    这篇文章主要介绍了微信小程序如何实现在线客服功能,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-10-10
  • 详解Webpack多环境代码打包的方法

    详解Webpack多环境代码打包的方法

    这篇文章主要介绍了详解Webpack多环境代码打包的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-08-08
  • TypeScript 引用资源文件后提示找不到的异常处理技巧

    TypeScript 引用资源文件后提示找不到的异常处理技巧

    这篇文章主要介绍了TypeScript 引用资源文件后提示找不到的异常处理,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2020-07-07
  • TypeScript中的类型断言[as语法|＜＞语法]的使用

    TypeScript中的类型断言[as语法|＜＞语法]的使用

    本文主要介绍了TypeScript中的类型断言[as语法|＜＞语法]的使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2022-06-06
  • JavaScript语句错误throw、try及catch实例解析

    JavaScript语句错误throw、try及catch实例解析

    这篇文章主要介绍了JavaScript语句错误throw、try及catch实例解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-08-08
  • JS手机端touch事件计算滑动距离的方法示例

    JS手机端touch事件计算滑动距离的方法示例

    这篇文章主要介绍了JS手机端touch事件计算滑动距离的方法,结合实例形式分析了javascript响应手机端屏幕上touch事件计算滑动距离的相关操作技巧,需要的朋友可以参考下
    2017-10-10

最新评论