<!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. NIO(生活篇)

    今晚是个下雨天,写完今天最后一行代码,小鲁班起身合上电脑,用滚烫的开水为自己泡制了一桶老坛酸菜牛肉面.这大概是苦逼程序猿给接下来继续奋战的自己最好的馈赠.年轻的程序猿更偏爱坐在窗前,在夜晚中静静的享受 ...

  2. spring JdbcTemplate 在itest 开源测试管理项目中的浅层（5个使用场景）封装

    导读: 主要从4个方面来阐述,1:背景:2:思路:3:代码实现:4:使用 一:封装背景, 在做项目的时候,用的JPA ,有些复杂查询,比如报表用原生的JdbcTemplate ,很不方便;传参也不方便 ...

  3. C# -Asp.Net.SignalR.Core之Hub

    前言 程序员的进步是需要环境的,良好的团队环境,良好的开发环境,会让人进步的更加快速. 所以,我认为,如果一个程序员,在2019年还在用Visual Studio 2005开发,那么,他,大概率,不会 ...

  4. 5.1基于JWT的认证和授权「深入浅出ASP.NET Core系列」

    希望给你3-5分钟的碎片化学习,可能是坐地铁.等公交,积少成多,水滴石穿,码字辛苦,如果你吃了蛋觉得味道不错,希望点个赞,谢谢关注. Cookie-Based认证 认证流程 我们先看下传统Web端的认 ...

  5. docker（4）docker的网络，自定义网桥

    Docker 的网络 运行 ifconfig 找到 docker0 : 虚拟网卡默认网卡名称为docker0 查看docker 的网桥: 我这里默认们没有进行安装 网桥管理设备:进行安装一下: yum ...

  6. Cookie、LocalStorage 与 SessionStorage的区别在哪里？

    基本概念 Cookie Cookie 是小甜饼的意思.顾名思义,cookie 确实非常小,它的大小限制为4KB左右.它的主要用途有保存登录信息,比如你登录某个网站市场可以看到“记住密码”,这通常就是通 ...

  7. HTML 练习滑动

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. JAVA的特性

    JAVA有三大特性:封装,继承和多态 一. 封装 封装就是将类的信息隐藏在类内部,不允许外部程序直接访问,而是通过该类的方法实现对隐藏信息的操作和访问. 封装的实现 a. 需要修改属性的访问控制符(修 ...

  9. odoo：免费开源ERP入门与实践

    Odoo下载安装 Odoo社区版下载链接:http://nightly.odoo.com/ ,下载11.0社区版Windows安装包:http://nightly.odoo.com/11.0/nigh ...

  10. 阿里云ECS云服务器的简单使用

    随着云服务的推广与普及,越来越多的人开始接触到云服务器.然而有些人购买后却不知从何下手,今天就来看下阿里云服务器的使用吧! 一.购买完阿里云服务器后进入阿里云官网首页点击控制台 找到所购买的云产品项点 ...