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. MYSQL复习笔记3-用户和安全

    Date: 20140115Auth: Jin参考:http://dev.mysql.com/doc/refman/5.1/en/security.html 一.权限系统实现方式相关权限信息存储在几个 ...

  2. Mock -- 数据模拟

    作者:张云龙链接:https://www.zhihu.com/question/35436669/answer/62753889来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明 ...

  3. Cisco路由技术基础知识详解

    第一部分 请写出568A的线序(接触网络第一天就应该会的,只要你掐过,想都能想出来) .网卡MAC地址长度是(  )个二进制位(16进制与2进制的换算关系,只是换种方式问,不用你拿笔去算) A.12  ...

  4. [java] 模拟QPS

    在WEB服务器端,每日的访问量巨大.在非生产环境需要对服务器进行压力测试,一般使用后台线程和Sleep方式来模拟线上的压力.这里使用ScheduledExecutorService实现一种简单的QPS ...

  5. 剖析ASP.NET Core（Part 4）- 调用MVC中间件（译）

    原文:https://www.stevejgordon.co.uk/invoking-mvc-middleware-asp-net-core-anatomy-part-4 发布于:2017年5月环境: ...

  6. [转]黄聪：如何使用CodeSmith批量生成代码

    本文转自:http://www.cnblogs.com/huangcong/archive/2010/06/14/1758201.html 在上一篇我们已经用PowerDesigner创建好了需要的测 ...

  7. linux下C++修改文件内容

    C fwrite在任意位置写入文件,并可修改文件内容 想实现类似迅雷那样下载时可以从文件半中间写入的功能 #include<stdio.h> int main() { FILE *fp; ...

  8. 关于Web界面查看日志的权限问题

    关于Web界面查看日志的权限问题 @(Hadoop) 访问集群的8088端口,通过web ui查看作业日志时,发现没有权限查看,8088主界面右上角显示Logged in as : dr.who,即匿 ...

  9. Microsoft.VisualStudio.DebuggerVisualizers.dll 文件位置 for VisualStudio 2015

    可视化调试工具(Microsoft.VisualStudio.DebuggerVisualizers) "C:\Program Files (x86)\Microsoft Visual St ...

  10. 一般源码安装添加的GD库 是不支持 jpeg 格式的图片的

    一般源码安装添加的GD库 是不支持 jpeg 格式的图片的,只支持如下格式 GD Support enabled GD Version bundled (2.0.34 compatible) GIF ...