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. Java初学者作业——定义管理员类（Admin），管理员类中的属性包括：姓名、账号、密码、电话；方法包括：登录、显示自己的信息。

    返回本章节 返回作业目录 需求说明: 定义管理员类(Admin),管理员类中的属性包括:姓名.账号.密码.电话:方法包括:登录.显示自己的信息. 实现思路: 分析类的属性及其变量类型. 分析类的方法及 ...

  2. 编写Java程序，创建Dota游戏中的防御塔类，通过两个坐属性显示防御塔所在的位置

    返回本章节 返回作业目录 需求说明: 创建Dota游戏中的防御塔类 通过两个坐属性显示防御塔所在的位置 实现思路: 创建防御塔(TowerDefense)类 在该类中定义了两个属性,分别是int类型横 ...

  3. .net Core WebApi使用AutoFac

    1.在要添加的项目中选中 依赖项->右键->管理NuGet程序包(N) 2.在NuGet包管理器中输入Autofac,安装选中文件 3.在项目中找到Program.cs文件,添加如下代码 ...

  4. Windows Server 2016 服务器安装IIS

    1. 打开服务器管理器,点击[添加角色和功能选项]  2.进入[添加角色和功能向导]页面,点击"下一步"  3.安装类型选择[基于角色或基于功能的安装],点击"下一步&q ...

  5. MongoDB_安装、配置、连接（五）

    MongoDB 是跨平台的,既可以在 Linux系统下安装,也可以在Windows 系统.MacOS系统下安装,本节主要介绍如何在 Linux 系统下安装 MongoDB. windows安装:htt ...

  6. oracle 之 for循环表

    代码 create table tm_lzh as SELECT 'a1' c1,'b1' c2 FROM dual union all SELECT 'a2' c1,'b2' c2 FROM dua ...

  7. Go语言系列之RabbitMQ消息队列

    1. RabbitMQ是什么?   MQ 是什么?队列是什么,MQ 我们可以理解为消息队列,队列我们可以理解为管道.以管道的方式做消息传递. 生活场景: 1.其实我们在双11的时候,当我们凌晨大量的秒 ...

  8. Python爬取中国知网文献、参考文献、引证文献

    前两天老师派了个活,让下载知网上根据高级搜索得到的来源文献的参考文献及引证文献数据,网上找了一些相关博客,感觉都不太合适,因此特此记录,希望对需要的人有帮助. 切入正题,先说这次需求,高级搜索,根据中 ...

  9. 【Python自动化Excel】pandas处理Excel数据的基本流程

    这里所说的pandas并不是大熊猫,而是Python的第三方库.这个库能干嘛呢?它在Python数据分析领域可是无人不知.无人不晓的.可以说是Python世界中的Excel. pandas库处理数据相 ...

  10. SpringBoot2.4.2下配置Lettuce使用Redis

    1. Springboot2.4.2下对Redis的基础集成 1.1 maven添加依赖 <dependency> <groupId>org.springframework.b ...