<!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. 优雅地 `async/await`

    async/await 虽然取代了回调,使用类似同步的代码组织方式让代码更加简洁美观,但错误处理时需要加 try/catch. 比如下面这样,一个简单的 Node.js 中使用 async/await ...

  2. HBase的下载、安装与配置

    声明:作者原创,转载注明出处. 作者:帅气陈吃苹果 (一)安装 下载.解压: wget http://mirror.bit.edu.cn/apache/hbase/1.3.1/hbase-1.3.1- ...

  3. Java进阶篇设计模式之十 ---- 访问者模式和中介者模式

    前言 在上一篇中我们学习了行为型模式的解释器模式(Interpreter Pattern)和迭代器模式(Iterator Pattern).本篇则来学习下行为型模式的两个模式,访问者模式(Visito ...

  4. 轻量级原生 ajax 函数，支持 get/array post/array post/json

    原生js封装 function ajaxRequest(type, url, data, callback, failCallBack, header, dataType) { var url_enc ...

  5. 用wGenerator给编程提速

    1.需求设定 开发语言: java 数据库: mysql 持久化: mybatis 模式: mvc 视图引擎: thymeleaf 前端框架: bootstrap4 用以上的组合来开发一个公告管理的列 ...

  6. 设计模式-发布订阅模式(javaScript)

    1. 前言 2. 什么是发布订阅模式 3. 发布订阅优缺点 4. 举例 4. 总结 1. 前言 发布订阅者模式是为了发布者和订阅者之间避免产生依赖关系,发布订阅者之间的订阅关系由一个中介列表来维护.发 ...

  7. 【转载】C#工具类：实现文件操作File的工具类

    在应用程序的开发中,文件操作的使用基本上是必不可少的,FileStream类.StreamWriter类.Directory类.DirectoryInfo类等都是文件操作中时常涉及到的类,我们可以通过 ...

  8. EF的应用

    EF是 EntityFramework 的简称.在程序和数据库交互的过程中,起到了极大的方便. EF的使用 首先在需要使用EF的项目单击,然后 Ctrl+Shift+a 找到ADO.NET实体数据模型 ...

  9. box-shadow内阴影、外阴影

    外阴影: box-shadow:X轴  Y轴  Rpx  color; 属性说明(顺序依次对应):阴影的X轴(可以使用负值) 阴影的Y轴(可以使用负值) 阴影模糊值(大小) 阴影的颜色 内阴影: bo ...

  10. Win10下搭建Git服务器

    一. 搭建Git服务器环境前的必要准备 1.Windows10 2.Java环境 3.GitBlit服务器 4.Git版本管理工具 二. 开始搭建 第一步.安装JAVA运行环境 https://www ...