h5调用摄像头（允许自定义界面）【MediaDevices.getUserMedia()】

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Document</title>

  <style>

      .video-wrapper{

        position: relative;

      }

      .mask{

        position: absolute;

        top: 0;

        bottom: 0;

        left: 0;

        right: 0;

        background-color: rgba(0, 0, 0, .6);

      }

      .content{

        position: absolute;

        top: 30px;

        bottom: 30px;

        left: 30px;

        right: 30px;

        z-index: 9;

      }

  </style>

</head>

<body>

  <div class="video-wrapper">

    <div class="mask"></div>

    <div class="content">

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

      </video>

    </div>

  </div>

  <div>

    <button id="capture">拍照</button>

  </div>

  <canvas id="canvas" width="480" height="320"></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: 480, height: 320}}, success, error);

    } else {

      alert('不支持访问用户媒体');

    }

    document.getElementById('capture').addEventListener('click', function () {

      context.drawImage(video, 0, 0, 480, 320);

    })

  </script>

</body>

</html>

　　

 

JavaScripts调用摄像头【MediaDevices.getUserMedia()】的更多相关文章

  1. 谷歌使用navigator.mediaDevices.getUserMedia 调用摄像头拍照功能，不兼容IE

    <template>     <div>       <!--canvas截取流-->       <canvas ref="canvas" ...

  2. getUserMedia API及HTML5 调用摄像头和麦克风

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

  3. js调用摄像头

    详情源码请参见下方的 GitHub  !!! <div> <b>调用移动端摄像头</b><br> <label>照相机: <input ...

  4. [转]html5调用摄像头实例

    原文:https://blog.csdn.net/binquan_liang/article/details/79489989 最近在学习在做HTML5的项目,看了博客上html5调用摄像头拍照的文章 ...

  5. html调用摄像头的方法汇总

    1.在PC端打开摄像头的方法:(移动端不能使用) 能够实现打开摄像头并截图 <!doctype html> <html lang="en"> <hea ...

  6. 摄像头调用,h5调用摄像头进行扫一扫插件备份

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  7. javascript使用H5新版媒体接口navigator.mediaDevices.getUserMedia，做扫描二维码，并识别内容

    本文代码测试要求,最新的chrome浏览器(手机APP),并且要允许chrome拍照录像权限,必须要HTTPS协议,http不支持. 原理:调用摄像头,将摄像头返回的媒体流渲染到视频标签中,再通过ca ...

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

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

  9. html5调用摄像头截图

    关于html5调用音视频等多媒体硬件的API已经很成熟,不过一直找不到机会把这些硬件转化为实际的应用场景,不过近年来随着iot和AI的浪潮,我觉得软硬结合的时机已经成熟.那我们就提前熟悉下怎么操作这些 ...

随机推荐

  1. 【LeetCode】137. Single Number II 解题报告（Python）

    [LeetCode]137. Single Number II 解题报告(Python) 标签: LeetCode 题目地址:https://leetcode.com/problems/single- ...

  2. Another kind of Fibonacci(hdu3306)

    Another kind of Fibonacci Time Limit: 3000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Jav ...

  3. 【LeetCode】811. Subdomain Visit Count 解题报告（Python）

    作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 字典统计次数 日期 题目地址:https://lee ...

  4. Mac下搭建基于PlatformIO的嵌入式开发环境（STM32开发）

    PlatformIO简介 PlatformIO是开源的物联网开发生态系统.提供跨平台的代码构建器.集成开发环境(IDE),兼容 Arduino,ESP8266和mbed等 支持在Windows.Lin ...

  5. NFS 部署

    目录 NFS 部署 NFS简介 NFS应用 NFS工作流程图 NFS部署 服务端 客户端 测试NFS文件同步功能 NFS配置详解 NFS部分参数案例 统一用户 搭建考试系统 搭建步骤 配合NFS实现文 ...

  6. PostgreSQL相关知识概念

    本文主要介绍PostgreSQL数据库的一些重要知识点, 包括数据库.模式.表空间.用户/角色等概念和关系, 帮助用户理解PostgreSQL数据库的重要概念, 从而能够更好的使用PostgreSQL ...

  7. linux 之 nginx安装步骤

    配置规划 用户 lzh 用户目录  /lzh 下载 进入官网下载nginx http://nginx.org/download/ 安装 解压 cd /lzh/app tar -zxvf nginx-1 ...

  8. 【PowerShell】格式化输出字符串

    1 '{0:d4}' -f 10 2 '数字的补零';{} 3 '{0:f4}' -f 10 4 '保留小数位数';{} 5 '{0:p2}' -f 0.4567 6 '转换为百分比';{} 7 '{ ...

  9. ssh到localhost或127.0.0.1拒绝连接

    通过ssh连接到本机报错 ssh: connect to host localhost port 22: Connection refused, 你能用ssh登录其它主机并不代表着本地有ssh服务,要 ...

  10. javascript中new url()属性，轻松解析url地址

    1.首先写一个假的地址(q=URLUtils.searchParams&topic=api)相当于当前的window.location.href const urlParams = new U ...