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. codevs 1349 板猪的火车票

    1349 板猪的火车票  时间限制: 1 s  空间限制: 128000 KB  题目等级 : 黄金 Gold 题目描述 Description 奸商zn(请勿对号入座)开办了一家火车公司,弱弱的板猪 ...

  2. [转]spring4.x注解概述

    1. 背景 注解可以减少代码的开发量,spring提供了丰富的注解功能,因项目中用到不少注解,因此下定决心,经spring4.x中涉及到的注解罗列出来,供查询使用. 2. spring注解图     ...

  3. NFS迁移

    Auth: Jin Date: 20140317 需求将NFS共享IP切换为192.168.201.221,通过192.168.201.0网段提供共享(10.0.0.0和192.168.201.0都能 ...

  4. 在MEF中实现延迟加载部件

    在MEF的宿主中,当我们通过Import声明导入的对象时,组装(Compose)的时候会创建该对象.例如: interface ILogger    {        void Log(string ...

  5. vscode快捷键－for mac

    默认显示当前所有页面: command p ?: 显示可操作方法 >: 打开命令面板, 同comand shift p : : 跳转到对应行数 @: 搜索并跳转到应变量或函数 @: : 同上,分 ...

  6. Scut快速开发

    1     开发环境 Scut Lib版本:5.2.3.2 需要安装的软件 a)        IIS和消息队列(MSMQ) b)        数据库,Sql2005以上版本 c)        V ...

  7. Android内存优化4 了解java GC 垃圾回收机制2 GC执行finalize的过程

    1. finalize的作用 finalize()是Object的protected方法,子类可以覆盖该方法以实现资源清理工作,GC在回收对象之前调用该方法. finalize()与C++中的析构函数 ...

  8. sql 改动表以及表字段

    用SQL语句加入删除改动字段 1.添加字段      alter table docdsp    add dspcode char(200)      alter table tbl add meet ...

  9. SQL盲注攻击的简单介绍

    1 简介     1.1 普通SQL注入技术概述     目前没有对SQL注入技术的标准定义,微软中国技术中心从2个方面进行了描述[1]:     (1) 脚本注入式的攻击     (2) 恶意用户输 ...

  10. python 文件和路径操作函数小结

    1: os.listdir(path) //path为目录 功能相当于在path目录下执行dir命令,返回为list类型 print os.listdir('..') 2: os.path.walk( ...