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. python基础之组合继承多态

    组合 1.什么是组合 组合就是一个类的对象具备一个指向另外一个类的对象的属性 2.为何用组合 组合可以减少代码冗余 3.如何使用 class People: def __init__(self,nam ...

  2. Problem G: 零起点学算法106——首字母变大写

    #include<stdio.h> #include<string.h> int main(void) { ]; int i,k; while(gets(a)!=NULL) { ...

  3. 椭圆曲线加密算法（ECC）原理和C++实现源码（摘录）

    /* 1.用户A选定一条适合加密的椭圆曲线Ep(a,b)(如:y2=x3+ax+b),并取椭圆曲线上一点,作为基点G. 2.用户A选择一个私有密钥k,并生成公开密钥K=kG. 3.用户A将Ep(a,b ...

  4. NHibernate 操作视图 第十三篇

    在NHibernate中,可以把视图当表一样操作,只需要记住一点就是,视图是只读的,因此映射实体的setter应该改为protected. 新建一个视图如下: 持久化类: public class C ...

  5. PostgreSQL配置文件--其他

    9 CLIENT CONNECTION DEFAULTS 9.1 Statement Behavior 9.1.1 search_path 字符型 默认:search_path = '"$u ...

  6. exVim安装

    安装 安装必备 Vim 7.3 or higher. Vundle or Pathogen 下载/更新exVim 注意事项 安装exVim将不会覆盖你已经存在的Vim环境,这个仓库所包含的文件,变化, ...

  7. Dr.memory

    Run Dr.memory on visual c++ 2013 Title: Dr. Memory Command: C:\Program Files (x86)\Dr. Memory\bin\dr ...

  8. Spark Streaming源码解读之流数据不断接收和全生命周期彻底研究和思考

    本节的主要内容: 一.数据接受架构和设计模式 二.接受数据的源码解读 Spark Streaming不断持续的接收数据,具有Receiver的Spark 应用程序的考虑. Receiver和Drive ...

  9. Sqlite-Sqlite3中的数据类型

    大多数的数据库引擎(到现在据我们所知的除了sqlite的每个sql数据库引擎)都使用静态的.刚性的类型,使用静态类型,数据的类型就由它的容器决定,这个容器是这个指被存放的特定列. Sqlite使用一个 ...

  10. C基础测试

    一.用指针的方法,把输入的一个字符串按逆序重新排序其字符,并输出. #include <stdio.h> #include <string.h> void main( ) {  ...