1.在PC端打开摄像头的方法：（移动端不能使用）

能够实现打开摄像头并截图

<!doctype html>

<html lang="en">

    <head>

        <title>GET VIDEO</title>

        <meta charset="utf-8">

    </head>

    <body>

    <input type="button" title="开启摄像头" value="开启摄像头" onclick="getMedia()" />

    <video id="video" width="500px" height="500px" autoplay="autoplay"></video>

    <canvas id="canvas" width="500px" height="500px"></canvas>

    <button id="snap" onclick="takePhoto()">拍照</button>

    <script>

        function getMedia() {

            let constraints = {

                video: {width: 500, height: 500},

                audio: true

            };

            //获得video摄像头区域

            let video = document.getElementById("video");

            //这里介绍新的方法，返回一个 Promise对象

            // 这个Promise对象返回成功后的回调函数带一个 MediaStream 对象作为其参数

            // then()是Promise对象里的方法

            // then()方法是异步执行，当then()前的方法执行完后再执行then()内部的程序

            // 避免数据没有获取到

            let promise = navigator.mediaDevices.getUserMedia(constraints);

            promise.then(function (MediaStream) {

                video.srcObject = MediaStream;

                video.play();

            });

        }

      function takePhoto() {

      //获得Canvas对象

      let video = document.getElementById("video");

      let canvas = document.getElementById("canvas");

      let ctx = canvas.getContext('2d');

      ctx.drawImage(video, 0, 0, 500, 500);

      }

</script>

</body>

</html>

2.在移动端打开摄像头的方法：(在PC端不能使用)

     <input type=file id=browsefile accept="image/*" capture="camera" style="visibility:hidden" onchange=filepath.value=this.value>

     <input type=textfield id=filepath>

     <input type=button id=filebutton value="拍照" onclick="browsefile.click()">

使用input：file标签, 去调用系统默认相机，摄像，录音功能，其实是有个capture属性，直接说明需要调用什么功能

<input type="file" accept="image/*" capture="camera">

<input type="file" accept="video/*" capture="camcorder">

<input type="file" accept="audio/*" capture="microphone">

capture表示，可以捕获到系统默认的设备，比如：camera--照相机；camcorder--摄像机；microphone--录音。

accept表示，直接打开系统文件目录。

html调用摄像头的方法汇总的更多相关文章

  1. unity调用摄像头的方法

    http://blog.csdn.net/cocoa_china/article/details/10527995 using UnityEngine; using System.Collection ...

  2. 【C#】#100 调用摄像头

    需求:由于项目需要获得用户的头像,所以需要用C#调用摄像头获取头像. 下面写一个调用摄像头的方法 案例:调用摄像头的一个DEMO[效果图] 使用的类库:AForge.dll   [Demo下载,Dem ...

  3. 【Java】调用摄像头进行拍照并保存【详细】以及处理no jniopencv_core in java.library.path的一种方法

    [之前困扰笔者的问题描述]   date:2019.12.18 网上教程很多,但是没有看见完整的,所以写一个出来. 调用摄像头需要javaCV的jar包和openCV的jar包,现在已经不需要安装包了 ...

  4. 鲜为人知帝国CMS内容页调用上一篇和下一篇的精华方法汇总

    <span style="float:left">上一篇:[!--info.pre--]</span><span style="float: ...

  5. 树莓派小用手册（安装系统，配置图形界面，连接WiFi，调用摄像头，安装ffmpeg）

    安装树莓派系统(重装) 准备工作: 安装需要干净的TF卡(最好 8G 以上),如果是重装的话,需要先将其清理后再使用.清理步骤下面会给出,清理需要工具 DiskGenius,下载链接:http://w ...

  6. Java实现时间动态显示方法汇总

    这篇文章主要介绍了Java实现时间动态显示方法汇总,很实用的功能,需要的朋友可以参考下 本文所述实例可以实现Java在界面上动态的显示时间.具体实现方法汇总如下: 1.方法一 用TimerTask: ...

  7. Android入门(十六)调用摄像头相册

    原文链接:http://www.orlion.ga/665/ 一.调用摄像头 创建一个项目ChoosePicDemo,修改activity_main.xml: <LinearLayout xml ...

  8. UITextView实现placeHolder方法汇总

    UITextField中有一个placeholder属性,可以设置UITextField的占位文字,起到提示用户的作用.可是UITextView就没那么幸运了,apple没有给UITextView提供 ...

  9. 将编码从GB2312转成UTF-8的方法汇总(从前台、程序、数据库)

    这篇文章主要介绍了将编码从GB2312转成UTF-8的方法汇总(从前台.程序.数据库),需要的朋友可以参考下 一个网站如果需要国际化,就需要将编码从GB2312转成UTF-8,其中有很多的问题需要注意 ...

随机推荐

  1. [HNOI/AHOI2017]影魔

    [HNOI/AHOI2017]影魔 题目大意: 有一排\(n(n\le2\times10^5)\)个数\(k_{1\sim n}\).对于点对\((i,j)\),若不存在\(k_s(i<s< ...

  2. #Java Web累积#JS动态加载所有同name的select的option

      项目需求: 某一页面,页面使用多列table,每个table中有同相同的<select>,select的option不确定,根据Server端的配置来,所以option需要动态加载: ...

  3. Pointers and Strings

    The special relationship between arrays and pointers extends to C-style strings.Consider the followi ...

  4. 谈谈 CSS 关键字 initial、inherit 和 unset

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

  5. Mac DBeaver Client home is not specified for connection解决办法

    问题: 一般出现这个问题是由于DBeaver 程序无法自动找到数据库的安装目录,在进行数据的导入导出时无法执行,这是因为执行指令需要数据库相关命令的支持. 解决办法: 我用的是mysql,这里拿mys ...

  6. nmap原理及使用方法

    NMap,也就是Network Mapper,是Linux下的网络扫描和嗅探工具包. 1简介 nmap是一个网络连接端扫描软件,用来扫描网上电脑开放的网络连接端.确定哪些服务运行在哪些连接端,并且推断 ...

  7. 理解Vue的状态管理模式Vuex

    Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化. 状态管理模式.集中式存储管理,一听就很高大 ...

  8. mavn项目(springMVC) 引入静态资源(js、css)等

    在web.xml中配置 <servlet-mapping> <servlet-name>default</servlet-name> <url-pattern ...

  9. Java线程详细监控和其dump的分析使用—-分析Java性能瓶颈

    转载:https://www.cnblogs.com/firstdream/p/8109352.html 这里对linux下.sun(oracle) JDK的线程资源占用问题的查找步骤做一个小结: l ...

  10. JAVA简单选择排序算法原理及实现

    简单选择排序:(选出最小值,放在第一位,然后第一位向后推移,如此循环)第一位与后面每一个逐个比较,每次都使最小的置顶,第一位向后推进(即刚选定的第一位是最小值,不再参与比较,比较次数减1) 复杂度: ...