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. 第八届蓝桥杯JavaC组省赛真题

    解题代码部分来自网友,如果有不对的地方,欢迎各位大佬评论 题目1.外星日历 题目描述 某星系深处发现了文明遗迹. 他们的计数也是用十进制. 他们的文明也有日历.日历只有天数,没有年.月的概念. 有趣的 ...

  2. java实现第六届蓝桥杯打印大X

    打印大X 打印大X 小明希望用星号拼凑,打印出一个大X,他要求能够控制笔画的宽度和整个字的高度. 为了便于比对空格,所有的空白位置都以句点符来代替. 要求输入两个整数m n,表示笔的宽度,X的高度.用 ...

  3. PAT A除以B

    本题要求计算A/B,其中A 是不超过 1000 位的正整数,B 是 1 位正整数.你需要输出商数Q 和余数R,使得 A=B*Q+R 成立. 输入格式: 输入在一行中依次给出A 和B,中间以 1 空格分 ...

  4. opencl(7) 内核执行命令入队]工作组、工作项

    1:将内核执行命令入队(该命令可被多个工作项执行) cl_int clEnqueueNDRangeKernel( cl_command_queue command_queue, cl_kernel k ...

  5. 7.keras-模型保存和载入

    keras-模型保存和载入 1.数据的载入与预处理 import numpy as np from keras.datasets import mnist from keras.utils impor ...

  6. ubuntu安装ssh服务器

    1.安装 sudo apt-get install openssh-server 2.配置文件路径 / etc/ssh/sshd_config 3.操作 sudo /etc/init.d/ssh st ...

  7. mysql8.0 Mac下的安装

    一.下载及安装 首先去官网下载mac对应版本的Mysql,尾缀为.dmg的程序包 下载地址:https://dev.mysql.com/downloads/mysql/ 二.启动 在 Setting ...

  8. css如何实现水平垂直居中

    方法 居中元素定宽高固定 PC兼容性 移动端兼容性 absolute + 负margin 是 ie6+, chrome4+, firefox2+ 安卓2.3+, iOS6+ absolute + ma ...

  9. [noi.ac省选模拟赛]第10场题解集合

    题目 比赛界面. T1 不难想到,对于一个与\(k\)根棍子连接的轨道,我们可以将它拆分成\(k+1\)个点,表示这条轨道不同的\(k+1\)段. 那么,棍子就成为了点与点之间的边.可以发现,按照棍子 ...

  10. CentOS7.5搭建ES6.2.4集群与简单测试

    一 简介 Elasticsearch是一个高度可扩展的开源全文搜索和分析引擎.它允许您快速,近实时地存储,搜索和分析大量数据.它通常用作支持具有复杂搜索功能和需求的应用程序的底层引擎/技术. 下载地址 ...