javascript------H5调用手机相机录像拍照并回显(input操作)

下面代码直接复制，去本地操作看结果！！！

文件下载链接：https://download.csdn.net/download/COCOLI_BK/81145436

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=`, initial-scale=1.0"><title>Document</title>
</head><body><input type="file" accept="image/*" capture="camera"> 相机<input type="file" accept="video/*" capture="camcorder"> 录像<input type="file" accept="audio/*" capture="microphone"> 系统相册<input type="file" accept="image/*" multiple> 多选<p><video width="200" height="100" controls><< /video>/p><script>document.getElementsByTagName("input")[0].onchange = function (value) {console.log("相机", value);}document.getElementsByTagName("input")[1].onchange = function (value) {console.log("录像", value, value.target.files, document.getElementsByTagName("input")[1].value);}document.getElementsByTagName("input")[2].onchange = function (value) {console.log("系统相册", value);}document.getElementsByTagName("input")[3].onchange = function (value) {console.log("多选", value);}document.getElementsByTagName("input")[1].addEventListener('change', function (e) {for (let i = 0; i < this.files.length; i++) {let file = this.files[i];var fileReader = new FileReader();fileReader.readAsDataURL(file);fileReader.onload = function () {// 获取得到的结果console.log(this.result);var data = this.result;console.log(document.querySelector("video"));document.querySelector("video").setAttribute("src", data)}}}, false)</script>
</body></html>

javascript------H5调用手机相机录像拍照并回显(input操作)相关推荐

H5调用手机摄像头拍照，如何压缩后上传
H5调用手机摄像头拍照后,怎样压缩再上传? 实际的压缩功能,就是利用canvas画布功能,将图片进行裁剪后保存图片的base64数据流,然后上传. 案例全部代码,示下: <!DOCTYPE ht ...
FileReader()读取文件，h5调用原生相机拍照，FormData()上传服务器
公司最近在做一个h5嵌入原生的项目,其中有一个需求是在没有和原生交互的前提下,调用调用手机相机进行拍照,然后将照片上传后端. 之前没接触过类似的需求,然后就感觉要调用移动端的硬件设备很是高大上:现在项 ...
区分H5调用手机相机与相册
项目场景: 安卓加载H5页面调用手机相机与手机相册问题描述 H5单独调用手机相机与相册这个问题还是比较好解决,现在的问题是在同一页面同时存在调用手机相机与相册两个选项,因为有人脸识别功能只限定直接调 ...
前端笔记-thymeleaf获取及回显input标签type=radio
如下演示: 回显: 前端代码如下: <div class="form-group"><label>性别</label><br/>&l ...
前端笔记-thymeleaf获取及回显input标签type=date
这是前端回显的数据: 修改界面: 前端相关代码: <div class="form-group"><label>出生时间</label>< ...
深坑之Webview,解决H5调用android相机拍照和录像
最近在开发过程中遇到一个问题,主要是调用第三方的实名认证,需要拍照和录像; 办过支付宝大宝卡和腾讯的大王卡的都知道这玩意,办卡的时候就需要进行实名认证,人脸识别; 本来第三方平台(xxx流量公司)说的 ...
h5+ 调用本地摄像头拍照
<html> <div id="form"><div class="name-box"><span>姓名< ...
uniapp如何调用手机相机进行拍照
uniapp调用手机拍照的方法,我所用到的两种方法列举在下方方法一:使用uni.chooseImage uni.chooseImage({count: 6, //默认9sizeType: ['ori ...
JavaScript实现调用摄像头完成拍照取图重命名并下载或上传
环境条件具有内置摄像头或外设摄像头 Vue + Element + axios(环境不同可自行修改,本文主要为逻辑,除展示的上传控件其他与js基本无异) 全文 <template>& ...

javascript------H5调用手机相机录像拍照并回显(input操作)

下面代码直接复制，去本地操作看结果！！！

javascript------H5调用手机相机录像拍照并回显(input操作)相关推荐

最新文章

热门文章