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

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.   <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.   <title>摄像头拍照</title>
  8.   <style>
  9.       #video {
  10.           transition: rotate(90deg);;
  11.       }
  12.   </style>
  13. </head>
  14. <body>
  15.   <video id="video" width="" height="">
  16.   </video>
  17.   <div>
  18.     <button id="capture">拍照</button>
  19.   </div>
  20.   <canvas id="canvas" width="" height=""></canvas>
  21.   <script>
  22.     //访问用户媒体设备的兼容方法
  23.     function getUserMedia(constraints, success, error) {
  24.       if (navigator.mediaDevices.getUserMedia) {
  25.         //最新的标准API
  26.         navigator.mediaDevices.getUserMedia(constraints).then(success).catch(error);
  27.       } else if (navigator.webkitGetUserMedia) {
  28.         //webkit核心浏览器
  29.         navigator.webkitGetUserMedia(constraints,success, error)
  30.       } else if (navigator.mozGetUserMedia) {
  31.         //firfox浏览器
  32.         navigator.mozGetUserMedia(constraints, success, error);
  33.       } else if (navigator.getUserMedia) {
  34.         //旧版API
  35.         navigator.getUserMedia(constraints, success, error);
  36.       }
  37.     }
  38.  
  39.     let video = document.getElementById('video');
  40.     let canvas = document.getElementById('canvas');
  41.     let context = canvas.getContext('2d');
  42.  
  43.     function success(stream) {
  44.       //兼容webkit核心浏览器
  45.       let CompatibleURL = window.URL || window.webkitURL;
  46.       //将视频流设置为video元素的源
  47.       console.log(stream);
  48.  
  49.       //video.src = CompatibleURL.createObjectURL(stream);
  50.       video.srcObject = stream;
  51.       video.play();
  52.     }
  53.  
  54.     function error(error) {
  55.       console.log(`访问用户媒体设备失败${error.name}, ${error.message}`);
  56.     }
  57.  
  58.     if (navigator.mediaDevices.getUserMedia || navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia) {
  59.       //调用用户媒体设备, 访问摄像头
  60.       getUserMedia({video : {width: , height: }}, success, error);
  61.     } else {
  62.       alert('不支持访问用户媒体');
  63.     }
  64.  
  65.     document.getElementById('capture').addEventListener('click', function () {
  66.       context.drawImage(video, , , , );
  67.     })
  68.   </script>
  69. </body>
  70. </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. angularJS 的双向数据绑定

    input 里面的vale="变量名";加上ng-model="变量名";控制器的变量名会根据视图层的数据改变而改变,而渲染内容也会根据控制器里面的变量改变而改 ...

  2. 【旧文章搬运】遍历EPROCESS中的ActiveProcessLinks枚举进程

    原文发表于百度空间,2008-7-25========================================================================== 前面对PEB ...

  3. ASP.NET Core MVC 2.x 全面教程_ASP.NET Core MVC 13. 安装前端库

    前端库使用npm进行安装,需要先建立webpack.json文件 因为我们没有使用npm安装任何库,所以npm的文件夹是空的 这里是用于开发时构建时引用的库写在这里 这里用到bootStrap 开发时 ...

  4. poj3069【贪心，水】

    妈蛋,题意看错-看了挑战时被标记的点还是给出的点,瞎搞了半个多小时... = =都想气的扔进水题系列了 #include <iostream> #include <cstdio> ...

  5. 3dmax学习资料记录

    max2015 官方文档 http://help.autodesk.com/view/3DSMAX/2015/CHS/?guid=GUID-D015E335-EFB3-43BF-AB27-C3CB09 ...

  6. 7天学完Java基础之3/7

    API概述 什么叫做API? API(Application Programming lnterface),应用程序编程接口. 所谓API就是值好多的类,好多的方法,JDK给我们提供了很多现成的类,我 ...

  7. AtCoder Beginner Contest 058 ABCD题

    A - ι⊥l Time limit : 2sec / Memory limit : 256MB Score : 100 points Problem Statement Three poles st ...

  8. synchronized(6)修饰语方法之：static方法

    当一个synchronized关键字修饰的方法同时又被static修饰,之前说过,非静态的同步方法会将对象上锁,但是静态方法不属于对象,而是属于类,它会将这个方法所在的类的Class对象上锁. 一个类 ...

  9. h5-16-SVG 与 HTML5 的 canvas 各自特点

    1. Canvas是使用JavaScript程序绘图(动态生成),SVG是使用XML文档描述来绘图.2.SVG更适合用来做动态交互,而且SVG绘图很容易编辑,只需要增加或移除相应的元素就可以了.同时S ...

  10. 504 Base 7 七进制数

    给定一个整数,将其转化为7进制,并以字符串形式输出.示例 1:输入: 100输出: "202" 示例 2:输入: -7输出: "-10"注意: 输入范围是 [- ...