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. excel表 更改后缀名 xlsx转成csv csv转换xlsx

    excel 转成CSV 步骤: 1.打开你需要转换的Excel表格.这里特别介绍一下多个数字的现象,我们知道,像身份证这些多位数字,在正常表格里都是会加上一个'来使其显示的,或者换成"文本& ...

  2. java实现第四届蓝桥杯阶乘位数

    阶乘位数 题目描述 如图p1.jpg所示,3 x 3 的格子中填写了一些整数. 我们沿着图中的红色线剪开,得到两个部分,每个部分的数字和都是60. 本题的要求就是请你编程判定:对给定的m x n 的格 ...

  3. .gitignore文件详细说明

    简介 有些时候,你必须把某些文件放到 Git 工作目录中,但又不能提交它们,比如保存了数据库密码的配置文件.Java编译生成的.class文件.处理这个需求很简单,从不git add它们就可以.但这样 ...

  4. Node.js躬行记（3）——命令行工具

    一.自定义 创建一个空目录,然后通过npm init命令初始化package.json文件,并按提示输入相关信息或直接回车使用默认信息,生成的内容如下所示. { "name": & ...

  5. pytorch入门2.0构建回归模型初体验（数据生成）

    pytorch入门2.x构建回归模型系列: pytorch入门2.0构建回归模型初体验(数据生成) pytorch入门2.1构建回归模型初体验(模型构建) pytorch入门2.2构建回归模型初体验( ...

  6. 【华为云技术分享】数据库开发：MySQL Seconds_Behind_Master简要分析

    [摘要]对于mysql主备实例,seconds_behind_master是衡量master与slave之间延时的一个重要参数.通过在slave上执行"show slave status;& ...

  7. Excel经典教程之一

    照片名称:未命名 照片名称:自动筛选 照片名称:在Excel中字符替换 照片名称:在Excel中直接编辑“宏” 照片名称:在Excel中为导入外部数据 照片名称:在Excel中行列快速转换 照片名称: ...

  8. CentOS Linux release 7.7.1908 (Core)--rabbitmq用户创建以及相关防火墙端口开启问题

    增加访问用户,默认用户guest只能本地访问. #添加用户 rabbitmqctl add_user 账号 密码 rabbitmqctl add_user admin admin #分配用户标签(ad ...

  9. 技术周刊 · Lighthouse 测试报告生成

    登高远眺 天高地迥,觉宇宙之无穷 基础技术 Lighthouse 测试内幕 文章分享了网易云音乐前端性能监控平台使用 Lighthouse 的实践经验,介绍了 Lighthouse 的测试流程.内部模 ...

  10. PN532模块连接-读卡失败原因

    第一步:点击发现NFC设备 第二步:点击读整卡:读取卡片内容. 若不成功,把UID卡移开,再放一次.再点第一步,显示发现NFC,再点第二步.反复操作,直到读取到为止.2-3次一般都会成功 . 相关软件 ...