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. [apue] epoll 的一些不为人所注意的特性

    之前曾经使用 epoll 构建过一个轻量级的 tcp 服务框架: 一个工业级.跨平台.轻量级的 tcp 网络服务框架:gevent 在调试的过程中,发现一些 epoll 之前没怎么注意到的特性. a) ...

  2. CUDA优化

    cuda程序优化 一:程序优化概述 1:精度 在关键步骤使用双精度,其他步骤使用单精度,以获得指令吞吐量和精度的平衡. 2:延迟 先缓冲一定量数据,在交给GPU计算.可以获得较高的数据吞吐量. 3:计 ...

  3. k8s学习-Ingress

    4.5.Ingress Ingress-Nginx github 地址:https://github.com/kubernetes/ingress-nginxIngress-Nginx 官方网站:ht ...

  4. SpringCloud之Security

    Spring Security是Spring提供的一个安全框架,提供认证和授权功能,最主要的是它提供了简单的使用方式,同时又有很高的灵活性,简单,灵活,强大. 我个人博客系统采用的权限框架就是Spri ...

  5. Docker——基于Docker安装Drupal博客系统

    Docker--基于Docker安装Drupal博客系统 向脚本文件追加内容 cat << EOF > build.sh #设置主机名 hostnamectl set-hostnam ...

  6. [noi.ac省选模拟赛20200606]赌怪

    题目   点这里看题目. 分析   先特判掉\(K=2\)的情况.   首先可以考虑到一个简单 DP :   \(f(i)\):前\(i\)张牌的最大贡献.   转移可以\(O(n^2)\)地枚举区间 ...

  7. node-sass问题

    cnpm install node-sass@latest 或者 所以用npm install -g cnpm --registry=https://registry.npm.taobao.org , ...

  8. loads和dumps的用法

    import json s='{"name":"wuxie","sex":"m","data":nu ...

  9. SpringBoot 构建 Docker 镜像的 3 种方式

    本文将介绍3种技术,通过 Maven 把 SpringBoot 应用构建成 Docker 镜像. (1)使用 spring-boot-maven-plugin 内置的 build-image. (2) ...

  10. 布局之: flex（CSS3新增）

    flex 基本概念 flex布局(flex是flexible box的缩写), 也称为弹性盒模型 .将属性和属性值(display:flex; )写在哪个标签样式中,谁就是 容器:它的所有子元素自动成 ...