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. 【树形dp】VK Cup 2012 Round 1 D. Distance in Tree

    统计树中长度为K的路径条数. 用f[u][k]表示从u结点的子树中出发,终止于u结点的长度为k的路径条数. 边dp边统计答案.为了防止重复统计,在枚举子节点的时候,先将该子节点和当前u结点(和前面已经 ...

  2. Java高级架构师（一）第39节：Nginx的Rewrite模块

  3. 16.同步类容器Collections.synchronized

    voctor动态数组.同步类容器,底层实现基于:Collections.synchronized package demo5; import java.util.ArrayList; import j ...

  4. 十.spring-boot添加jsp支持

    1.创建maven web project: 2.在添加web依赖 3.配置application.properties支持jsp 4.添加一个controller类 5.加入jsp页面 6.启动类 ...

  5. iOS: 复选框使用---第三方框架SSCheckBoxView-master

    在iOS开发中对应用程序进行设置时一般都用UISwitch,偶尔显得单调,这时候你可以选择使用第三方开源类库SSCheckBoxView . SSCheckBoxView是一个可用在iOS上一个复选框 ...

  6. shell学习:几道常见shell习题

    1. 编写shell脚本,计算1-100的和: #! /bin/bash sum=0 for i in `seq 1 100`; do sum=$[$i+$sum] done echo $sum 计算 ...

  7. 线程局部存储（TLS）

    线程局部存储(TLS) 2011-10-11 09:59:28|  分类: Win32---API |  标签:tls   |举报 |字号 订阅   什么是线程局部存储 众所周知,线程是执行的单元,同 ...

  8. [python爬虫] Selenium常见元素定位方法和操作的学习介绍(转载)

    转载地址:[python爬虫] Selenium常见元素定位方法和操作的学习介绍 一. 定位元素方法 官网地址:http://selenium-python.readthedocs.org/locat ...

  9. scala 2.11报错error: not found: type Application

    FROM: http://j-q-j.org/scala/scala-2-11-application-error.html 这两天学习scala,官网下载的最新版本2.11,书用的是<Prog ...

  10. MR 文件合并

    package com.euphe.filter; import com.euphe.util.HUtils; import com.euphe.util.Utils; import org.apac ...