<!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. ajax异步请求302分析

    1.前言 遇到这样一种情况,打开网页两个窗口a,b(都是已经登录授权的),在a页面中退出登录,然后在b页面执行增删改查,这个时候因为授权原因,b页面后端的请求肯定出现异常(对这个异常的处理,进行内部跳 ...

  2. 『发呆』.Net 2.0 ~ .Net 4.0 所实现了那些底层

    随着时间的推移,程序越写越大,代码越写越少. 今天突然发呆,就想比较全面的汇总一下 .Net 2.0 和 .Net 4.0 都实现的功能. .Net 2.0 的大部分常见程序集 (已经过滤掉了一部分和 ...

  3. Vscode新建html文件

    在Vscode新建html文件 1.点击Open Folder: 2.选择目标文件夹,新建一个拓展名为html的文件: 3.在第1行输入!(英文状态下),按tab键,新建成功.界面如下图所示:

  4. apktool 简单使用记录

    修改APP:车来了 修改内容:首次启动引导页,中间的点素材修改.样式修改 修改前:未选中为白色,选中为蓝色,间距为5dip 修改后:未选中为红色,选中为黑色,间距为0 前后截图如下:   修改过程: ...

  5. Adreno OpenCL坑——bool转int

    在项目代码中为了避免条件分支,需要把bool变成int的形式,然后通过向量运算的形式和单个单个的形式,其结果却是不同,向量的方式为(-1, 0),而单个的转换则为(1, 0) 有如下kernel代码: ...

  6. java.lang.UnsatisfiedLinkError:dlopen failed: “**/*/arm/*.so” has unexpected e_machine: 3

    转载请标明出处,维权必究:https://www.cnblogs.com/tangZH/p/10458448.html 今天在做APP的时候使用so库,可结果一加载so库的时候便发生了这个莫名其妙的错 ...

  7. this指针的初运用

    this一般运用场景: 1.位于函数中,谁调用指向谁 var make = "Mclaren"; var model = "720s" function ful ...

  8. H5直播避坑指南

    本文来自"小时光茶社(Tech Teahouse)"公众号 作者简介: 文赫,2015年加入腾讯,作为前端开发工程师参与过手Q游戏公会,游戏中心,企鹅电竞等项目,具有丰富的移动端开 ...

  9. Java核心技术第五章——2.Object类

    Object类:所有类的超类 Object类是Java中所有类的始祖,在Java中每个类都是由它扩展而来的.但是并不需要这样写: public class Emloyee extends Object ...

  10. webpack学习笔记一：安装webpack、webpack-dev-server、内存加载js和html文件、loader处理非js文件

    一 .webpack学习环境准备: 1:window系统 2:安装node.js  官方网址 下载好后下一步下一步安装即可 安装步骤略过....... 3:nrm的安装 打开cmd命令控制台 输入:n ...