摄像头调用代码 笔记本的话，本身有一个摄像头，由于用的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. MongoDB复制集安全认证

    之前我有一篇博客写的是“node.js通过权限验证连接MongoDB”,这篇博客上提到如何在启动文件中通过配置auth参数来开启权限认证,但这种认证方式只适合单机节点,当我们使用复制集时应该怎么开启权 ...

  2. rsync(一)：基本命令和用法

    以下是rsync系列篇: 1.1 说在前面的话 rsync官方网站: https://www.samba.org/ftp/rsync/rsync.html rsync是可以实现增量备份的工具.配合任务 ...

  3. Android Studio 1.5.1

    Android Studio 1.5.1 December 3rd, 2015: For information on what's new in 1.5.1, see the release ann ...

  4. 移动端网页巧用 margin和padding 的百分比实现自适应

    一个基础却又容易混淆的css知识点 本文依赖于一个基础却又容易混淆的css知识点:当margin/padding取形式为百分比的值时,无论是left/right,还是top/bottom,都是以父元素 ...

  5. iOS多线程GCD的简单使用

    在iOS开发中,苹果提供了三种多线程技术,分别是: (1)NSThread (2)NSOperation (3)GCD 简单介绍一下GCD的使用. GCD全称 Grand Central Dispat ...

  6. 模板 - 字符串 - Manacher

    求最长回文子串. #include<bits/stdc++.h> using namespace std; #define ll long long ; ]; ]; int Manache ...

  7. Mac下的常用终端命令与vim常用命令

    因为很少用命令行,老被鄙视,所以今天记录一下常用的命令行: cd 切换工作目录 . 表示当前目录 .. 表示当前目录的上一级目录 / 根目录/目录分隔符 ./ 当前目录 ../ 回到上一级目录 ls ...

  8. hdoj4027【线段树】

    题意: 给你一个序列,然后给出m个命令, 每个命令有两种:①:在区间内实现开方:②:求一个区间和: 思路: 一开始没思路啊,这个开方又不像加加减减一起来就好了,开方只能自己玩啊,但是仔细一想一个数也才 ...

  9. python __builtins__ slice类 （62）

    62.'slice', 对序列化类型数据切片,返回一个新的对象. class slice(object) | slice(stop) | slice(start, stop[, step]) | | ...

  10. vlc media player

    还是很好用的目前来看 倍速播放: [      减速播放 ]      加速播放 =     恢复原速度