H5使用input标签调用系统默许相机，摄像，录音功能。使用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--录音。如果需要设备的面向用户的摄像头拍摄可以使用capture="user"

51220网站目录 https://www.51220.cn

input:file标签还支持一个multiple属性，表示可以支持多选，如：

<input type="file" accept="image/*" multiple>

加上这个multiple后，capture就没啥用了，因为multiple是专门用来支持多选的。

例子:

<!DOCTYPE HTML>

<html>

<head>

<meta charset="utf-8">

<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

<meta name="HandheldFriendly" content="true" />

<meta name="MobileOptimized" content="320" />

<meta name="apple-mobile-web-app-capable" content="yes">

<meta name="apple-mobile-web-app-status-bar-style" content="black">

<title>input视频测试</title>

</head>

<body>

<!--拍照 <input id="myfile" type="file" name="file" accept="image/*" capture="camera"> -->

//拍视频

<input type="file" name="video" id="video-input" accept="video/*" capture="user"  onchange="videoChange()" />

<span id='info'></span>

</p>

<video id="video" width='300' height="300" controls autoplay></video>

<script type="text/javascript">

function videoChange() {

var file = document.getElementById('video-input').files[0];

var fileSize = (Math.round(file.size / 1024)).toFixed();

document.getElementById('info').innerHTML += "所录视频大小约为：" + (fileSize / 1024).toFixed(2) + "Mb";

var url = URL.createObjectURL(file);

console.log(url);

document.getElementById("video").src = url;

}

</script>

</body>

</html>

H5调用手机的相机/摄像/录音等功能 _input:file的capture属性说明的更多相关文章

  1. 在webapp上使用input:file, 指定capture属性调用默许相机，摄像，录音功能

    ## 在webapp上使用input:file, 指定capture属性调用默认相机,摄像,录音功能 在iOS6下开发webapp,使用inputz之file,很有用 <input type=& ...

  2. H5 调用 手机设备的功能

    1.调用 邮件 : 参考 https://blog.csdn.net/github_38516987/article/details/77637546 (亲测有效) <a href=" ...

  3. h5调用手机相册摄像头以及文件夹

    在之前一家公司的时候要做一个app里面有上传头像的功能,当时研究了好久,找到了一篇文章关于h5摄像头以及相册的调用的,所以就解决了这个问题了!!我这里记录一下以便后面有人需要,可以参考一下!!!! 下 ...

  4. h5调用手机照相机

    camera.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> & ...

  5. H5 调用手机摄像机、相册功能

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

  6. Android初级教程调用手机拍照与摄像功能

    这个小案例建议在手机上运行. package com.example.camera; import java.io.File; import android.net.Uri; import andro ...

  7. H5调用手机拍照并展示在前端页面

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. ## 在webapp上使用input:file, 指定capture属性调用默认相机，摄像，录音功能

    在iOS6下开发webapp,使用inputz之file,很有用 <input type="file" accept="image/*" capture= ...

  9. h5调用手机摄像头/相册

    <!DOCTYPE HTML><html><head> <title>上传图片</title> <meta charset=" ...

随机推荐

  1. JVM 由哪些部分组成？

    JVM 由哪些部分组成? 解析:这是对 JVM 体系结构的考察 答:JVM 的结构基本上由 4 部分组成: 类加载器,在 JVM 启动时或者类运行时将需要的 class 加载到 JVM 中 执行引擎, ...

  2. Java实现One-way traffic（单向交通）

    One-way traffic In a certain town there are n intersections connected by two- and one-way streets. T ...

  3. java实现第四届蓝桥杯组素数

    组素数 题目描述 素数就是不能再进行等分的数.比如:2 3 5 7 11 等. 9 = 3 * 3 说明它可以3等分,因而不是素数. 我们国家在1949年建国.如果只给你 1 9 4 9 这4个数字卡 ...

  4. Redis集群方式

    Redis有三种集群方式:主从复制,哨兵模式和集群. 1.主从复制 主从复制原理: 从服务器连接主服务器,发送SYNC命令: 主服务器接收到SYNC命名后,开始执行BGSAVE命令生成RDB文件并使用 ...

  5. Hbase的基本架构以及对应的读写流程

    一.HBase简介 1,定义: HBase 是一种分布式.可扩展.支持海量数据存储的 NoSQL 数据库. 2,HBase的架构图: 架构角色: 1)Master Master是所有Region Se ...

  6. Qt自动生成.rc文件并配置对应属性 程序图标 版本 描述等

    Qt项目配置文件pro里需要如下配置,进行qmake,build后会自动生成.rc文件,并将对应的信息写入文件中 VERSION = 1.0.0.1 RC_ICONS = "http.ico ...

  7. 「JOISC 2020 Day4」首都城市

    题目   点这里看题目. 分析   做法比较容易看出来.我们对于每个城市,找出那些 " 如果这个城市在首都内,则必须在首都内的其它城市 " ,也就是为了让这个城市的小镇连通而必须选 ...

  8. VS Code项目中通过npm包的方式共享代码片段的方案实现

    VS Code项目中通过npm包的方式共享代码片段的方案实现 上周在 "VS Code项目中共享自定义的代码片段方案" 的文章中提到过一个共享代码片段的方案,上周经过调研后并没有发 ...

  9. Hadoop + Hive + HBase + Kylin伪分布式安装

    问题导读 1. Centos7如何安装配置? 2. linux网络配置如何进行? 3. linux环境下java 如何安装? 4. linux环境下SSH免密码登录如何配置? 5. linux环境下H ...

  10. 从新冠疫情出发，漫谈 Gossip 协议

    众所周知周知,疫情仍然在全球各地肆虐.据最新数据统计,截至北京时间 2020-05-28,全球累计确诊 5698703 例,累计死亡 352282 例,累计治愈 2415237 例. 从上面的统计数据 ...