摄像头调用代码 笔记本的话，本身有一个摄像头，由于用的usb摄像头，需要把笔记本的摄像头禁用后，再使用

<!DOCTYPE html>

<html lang="en">

<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>摄像头拍照</title>

  <style>

      #video {

          transition: rotate(90deg);;

      }

  </style>

</head>

<body>

  <video id="video" width="" height="">

  </video>

  <div>

    <button id="capture">拍照</button>

  </div>

  <canvas id="canvas" width="" height=""></canvas>

  <script>

    //访问用户媒体设备的兼容方法

    function getUserMedia(constraints, success, error) {

      if (navigator.mediaDevices.getUserMedia) {

        //最新的标准API

        navigator.mediaDevices.getUserMedia(constraints).then(success).catch(error);

      } else if (navigator.webkitGetUserMedia) {

        //webkit核心浏览器

        navigator.webkitGetUserMedia(constraints,success, error)

      } else if (navigator.mozGetUserMedia) {

        //firfox浏览器

        navigator.mozGetUserMedia(constraints, success, error);

      } else if (navigator.getUserMedia) {

        //旧版API

        navigator.getUserMedia(constraints, success, error);

      }

    }

    let video = document.getElementById('video');

    let canvas = document.getElementById('canvas');

    let context = canvas.getContext('2d');

    function success(stream) {

      //兼容webkit核心浏览器

      let CompatibleURL = window.URL || window.webkitURL;

      //将视频流设置为video元素的源

      console.log(stream);

      //video.src = CompatibleURL.createObjectURL(stream);

      video.srcObject = stream;

      video.play();

    }

    function error(error) {

      console.log(`访问用户媒体设备失败${error.name}, ${error.message}`);

    }

    if (navigator.mediaDevices.getUserMedia || navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia) {

      //调用用户媒体设备, 访问摄像头

      getUserMedia({video : {width: , height: }}, success, error);

    } else {

      alert('不支持访问用户媒体');

    }

    document.getElementById('capture').addEventListener('click', function () {

      context.drawImage(video, , , , );

    })

  </script>

</body>

</html>

摄像头调用代码 笔记本的话，本身有一个摄像头，由于用的usb摄像头，需要把笔记本的摄像头禁用后，再使用的更多相关文章

  1. WCF入门教程（四）通过Host代码方式来承载服务 一个WCF使用TCP协议进行通协的例子 jquery ajax调用WCF，采用System.ServiceModel.WebHttpBinding System.ServiceModel.WSHttpBinding协议 学习WCF笔记之二 无废话WCF入门教程一[什么是WCF]

    WCF入门教程(四)通过Host代码方式来承载服务 Posted on 2014-05-15 13:03 停留的风 阅读(7681) 评论(0) 编辑 收藏 WCF入门教程(四)通过Host代码方式来 ...

  2. 基于opencv和mfc的摄像头采集代码(GOMFCTemplate2)

            编写带界面的图像处理程序,选择opencv+mfc是一种很好的选择:在读取摄像头数据方面,网上的方法很多,其中shiqiyu的camerads的方法是较好的.       基于现有资料 ...

  3. 基于opencv和mfc的摄像头采集代码(GOMFCTemplate2)持续更新

            编写带界面的图像处理程序,选择opencv+mfc是一种很好的选择:在读取摄像头数据方面,网上的方法很多,其中shiqiyu的camerads的方法是较好的.       基于现有资料 ...

  4. Winform开发框架之通用Windows摄像头调用拍照--SNF快速开发平台3.3-Spring.Net.Framework

    今天做了一个windows系统下调用摄像头.进行开启.关闭.拍照.设置等等功能演示. 进行源码贡献,欢迎大家下载使用 一.DEMO效果如下: 二.DEMO演示代码如下: using SNF.Utili ...

  5. directshow 虚拟摄像头 实例 代码解读

    directshow 虚拟摄像头 实例 代码解读 本文只介绍这个源码的大致构成以及怎么修改,因为其他的我也不会啊哈哈哈,我就是用QQ调用虚拟摄像头读取我自己的视频或者图片播放给别人让别人以为这就是实时 ...

  6. 关于wp8.1 runtime模式下面的摄像头调用拍照问题和应用生命周期问题

    现在的msdn文档,还找不到详细的wp8.1的摄像头拍照文档,只有一个序列拍照,类似九连拍的文档,而且这文档感觉就是windows8.1搬过来应付的,wp8.1模式,只要有一个地方处理不好,手机就会死 ...

  7. 「新手必看」Python+Opencv实现摄像头调用RGB图像并转换成HSV模型

    在ROS机器人的应用开发中,调用摄像头进行机器视觉处理是比较常见的方法,现在把利用opencv和python语言实现摄像头调用并转换成HSV模型的方法分享出来,希望能对学习ROS机器人的新手们一点帮助 ...

  8. 使用rabbit mq.模拟dubbo,使MQ异步调用代码写起来像是同步方法.

    最近在改造老系统,遇到了需要使用rabbitMq的场景.在以前使用的过程中需要在发送端和消费端各种配置,感觉比较麻烦,然后突然想到了dubbo中@Reference注解的形式,可不可以做一个类似的架子 ...

  9. phpcms v9最常用的22个调用代码

    新源网络工作室友情总结phpcms v9最常用的22个调用代码: 调用最新文章,带所在版块{pc:get sql="SELECT a.title, a.catid, b.catid, b.c ...

随机推荐

  1. django上课笔记3-ORM补充-CSRF (跨站请求伪造)

    一.ORM补充 ORM操作三大难点: 正向操作反向操作连表 其它基本操作(包含F Q extra) 性能相关的操作 class UserInfo(models.Model): uid = models ...

  2. 005--linux基础一作业

    1.最小化安装centos7操作系统 2.新增硬盘分两个分区,两个分区的文件系统依次为ext4和xfs 3.将两个文件系统分别挂在到/mnt和/opt目录 4.新增普通用户egon并采用无需重复确认的 ...

  3. ASP.NET Core MVC 2.x 全面教程_ASP.NET Core MVC 20. Model Binding

    模型绑定 这是个最简单的绑定 先从表单找.再从路由的值上找,最后去QueryString上找 通过反射获取这个类型的属性进行填充.反射完有几个属性,就开始去找着几个属性并绑定值 复杂类型 最后又加了一 ...

  4. maven在window下的环境变量配置

    配置maven环境变量cmd控制台提示:mvn不是内部或外部命令,也不是可运行的程序或批处理文件 首先maven环境变量: 变量名:MAVEN_HOME 变量值:E:\apache-maven-3.2 ...

  5. （一）搭建自己的SpringBoot后台框架整合MyBatis

    一:通过idea工具构建基础框架 1.  打开idea,左上角File→New→Project, 2.  点击Next 3.  点击Next,配置如下图,这里我们选择数据库MySQL和持久层框架MyB ...

  6. 在MacOs上安装sqlsrv Mojave - 找不到'php.h'文件

    Mojave没有安装标头. 要安装标头: open /Library/Developer/CommandLineTools/Packages/macOS_SDK_headers_for_macOS_1 ...

  7. 轻松搞定JSONP跨域请求【转】，文章非常好!

    http://blog.csdn.net/u014607184/article/details/52027879

  8. UVa第十章数学概念与方法

    Bryce1010模板 10.1数论初步 1.欧几里得算法和唯一分解定理 2.Eratosthenes筛法 补充素数筛选 const int MAXN=1e6+10; ll prime[MAXN]; ...

  9. 18.3.2从Class上获取信息(方法)

    package d18_3_1; import java.lang.reflect.Method; import java.util.Arrays; /** * 获取Class对应类所包含的方法的四个 ...

  10. 堆参数-XMS 与-XMX的说明

    XMS : JVM初始分配的堆内存 XMX : JVM最大允许分配的堆内存,按需分配 堆内存分配: JVM初始分配的堆内存由-Xms指定,默认是物理内存的1/64: JVM最大分配的堆内存由-Xmx指 ...