<!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. tday02 上节课复习

    什么是编程语言 人与计算机交流的介质 编程是什么东西 写出一个一个文件,然后一个文件的集合就是一个程序 为什么要编程 在计算机上写一个程序实现某种功能,取代劳动力 计算机的五大组成 我们人类最重要的组 ...

  2. netcore服务程序暴力退出导致的业务数据不一致的一种解决方案（优雅退出）

    一: 问题提出 现如今大家写的netcore程序大多部署在linux平台上,而且服务程序里面可能会做各种复杂的操作,涉及到多数据源(mysql,redis,kafka).成功部署成后台 进程之后,你以 ...

  3. java监听器简述

    监听器的概念 所谓监听器就是对内置对象的状态或者属性变化进行监听并且做出反应的特殊servlet,并且也需要在web.xml文件中进行相关配置. 内置对象的状态变化:初始化和销毁,也就是说当内置对象初 ...

  4. 开发时候常用的js方法封装

    1.判断是否是一个数组 function isArray(arr){ return Object.prototype.toString.call(arr) ==='[object Array]'; } ...

  5. Genymotion Android模拟器Genymotion的安装和使用

    Android模拟器Genymotion的安装和使用 by:授客 QQ:1033553122 环境: Win7 Genymotion 2.12.0 下载地址:http://download.canad ...

  6. Java实现文本编辑时基于拼音输入的补全原型

    续前文Java实现"命令式"简易文本编辑器原型. 效果如下: 所在源码库同上文, 尚未和上文的编辑器右侧的命令区集成. 代码由How to show autocomplete as ...

  7. Windows下安装lxml库方法

    如果直接用pip install lxml安装成功,那么恭喜!!! 一般在windows安装都十分蛋疼,pip无法直接安装(提示错误一大片,此处省略……) 因此选择wheel安装方式,步骤如下: 1. ...

  8. The Network Adapter could not establish the connection

    启动即可

  9. Java基础重要知识点-反射

    反射,如何把.java文件转化为.class文件 JAVA反射机制是在运行状态中,对于任意一个类,都能够知道这个类的所有属性和方法:对于任意一个对象,都能够调用它的任意一个方法和属性:这种动态获取的信 ...

  10. 使用 .NET Core 开发 BT Tracker 服务器

    一.什么是 BT Tracker ? 在 BT 下载过程当中,我们如果拿到一个种子文件,在其内部会包含一组 BT Tracker 服务器信息.在开始进行下载的时候,BT 下载工具会根据种子内的唯一 H ...