<!DOCTYPE html>

 <html lang="en">

 <head>

   <style>

     * {

       margin: ;

       padding: ;

     }

   </style>

   <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>

 </head>

 <body>

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

   </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>

打开浏览器，点击允许就可以使用摄像头啦！！

-----觉得有用来个关注呗  比心心♥♥♥♥♥♥♥♥♥♥♥♥-----

js实现浏览器调用电脑的摄像头拍照的更多相关文章

  1. js如何调用电脑的摄像头

    闲来无事,用js写了一个调用摄像头的demo,并用canvas显示保存.这个功能很实用,比如上传用户的头像,即时拍照及时上传. Html: <video width="200px&qu ...

  2. 如何在SAP UI5应用里添加使用摄像头拍照的功能

    昨天Jerry的文章 纯JavaScript实现的调用设备摄像头并拍照的功能 介绍了纯JavaScript借助WebRTC API来开发支持调用设备的摄像头拍照的web应用.而我同事遇到的实际情况是, ...

  3. 用Python控制摄像头拍照并发邮件

    概述前言 工具 思路 安装及导入包 设置参数 实现拍照 构造邮件内容 发送邮件 判断网络连接 开机自启 后记 o1 前言为什么会有写这个程序的想法呢? 最初的想法是写一个可以用电脑前置摄像头拍照的程序 ...

  4. 调用本地摄像头拍照（H5和画布）

    关于H5 和 画布 调用本地摄像头拍照功能的实现 1.代码的实现(html部分) <input type="button" title="开启摄像头" v ...

  5. 利用html5调用本地摄像头拍照上传图片[转]

    利用html5调用本地摄像头拍照上传图片   html5概念啥的就不废话了,不知道的 百度, 谷歌一堆..今天学了学html5中的Canvas结合新增的<video>标签来获取本地摄像头, ...

  6. Cordova - 使用Cordova开发iOS应用实战4（调用摄像头拍照，并编辑）

    使用Cordova可以很方便的通过js代码来使用设备摄像头拍照,只需把camera插件添加进来即可. 一,添加camera插件 首先我们要在“终端”中进入工程所在的目录,然后运行如下命令: 1 cor ...

  7. 怎样让HTML5调用手机摄像头拍照——实践就是一切

    原文:怎样让HTML5调用手机摄像头拍照--实践就是一切 NanShan 小编将思路提供给了大家.学编程最重要的是实践,我这尽管有完好的代码,可是希望大家都能够自己写出属于自己的代码 HTML5 Th ...

  8. vue实现PC端调用摄像头拍照人脸录入、移动端调用手机前置摄像头人脸录入、及图片旋转矫正、压缩上传base64格式/文件格式

    进入正题 1. PC端调用摄像头拍照上传base64格式到后台,这个没什么花里胡哨的骚操作,直接看代码 (canvas + video) <template> <div> &l ...

  9. getUserMedia API及HTML5 调用手机摄像头拍照

    getUserMedia API简介 HTML5的getUserMedia API为用户提供访问硬件设备媒体(摄像头.视频.音频.地理位置等)的接口,基于该接口,开发者可以在不依赖任何浏览器插件的条件 ...

随机推荐

  1. asp.net core系列 59 Ocelot 构建基础项目示例

    一.入门概述 从这篇开始探讨Ocelot,Ocelot是一个.NET API网关,仅适用于.NET Core,用于.NET面向微服务/服务的架构中.当客户端(web站点.ios. app 等)访问we ...

  2. Redux的中间件原理分析

    redux的中间件对于使用过redux的各位都不会感到陌生,通过应用上我们需要的所有要应用在redux流程上的中间件,我们可以加强dispatch的功能.最近也有一些初学者同时和实习生在询问中间件有关 ...

  3. netcore程序部署到docker

    1.基础准备 1. ubuntu 18.04 2. docker version 18.09 3. netcore 2.1 2.简介 自从netcore支持跨平台之后,以及现在很多公司都是采用容器化部 ...

  4. 如何通过get，set方法访问到父类的私有属性

    刚学习继承的时候,总是会有这样的疑问. 子类继承父类时,会继承所有的非私有的属性和方法.那么在用set方法修改父类的私有属性时,怎么没有报空指针异常呢? 后来仔细想过这个问题,既然没有报空指针,那么在 ...

  5. Fundebug支付宝小程序BUG监控插件更新至0.2.0，新增test()方法，报错增加Page数据

    摘要: 0.2.0新增fundebug.test()方法,同时报错增加了Page数据. Fundebug提供专业支付宝小程序BUG监控服务,可以第一时间为您捕获生存环境中小程序的异常.错误或者BUG, ...

  6. ArcGIS JS API多线程克里金插值

        最近做关于雨量插值的项目,本来使用后台的GP工具做的,但是处理时间比较长需要十几秒钟左右,所以研究怎么通过前台来计算.     参考下克里金例子,思路是生成要计算区域的100乘以100网格,然 ...

  7. 【error】Gradle sync failed: Unable to start the daemon process.【已解决】

    ---恢复内容开始--- 在克隆GIT项目后,Android Studio 报错: Gradle sync failed: Unable to start the daemon process. Th ...

  8. C 实现自己构建的数组

    #include<stdio.h>#include<malloc.h>#include<stdlib.h>#include<stdbool.h>stru ...

  9. 使用 connect http proxy 绕过 ssh 防火墙限制

    1.安装 connect brew install connect 2.配置 ~/.ssh/config Host * ProxyCommand connect -H your.proxy.serve ...

  10. 解决Ajax请求时无法重定向的问题

    今天发现,当使用Ajax请求时,如果后台进行重定向到其他页面时是无法成功的,只能在浏览器地址栏输入才能够实现重定向. Ajax默认就是不支持重定向的,它是局部刷新,不重新加载页面. 需要实现的功能是, ...