javascript 手机移动端 微信 拍照 录音 录视频并阿里oss上传

本文涉及的产品
对象存储 OSS,20GB 3个月
对象存储 OSS,内容安全 1000次 1年
对象存储 OSS,恶意文件检测 1000次 1年
简介: 调用照相机,拍照 1调用摄像机,视频 1调用录音机,录音 1第一种方法: var showimg = document.

调用照相机,拍照 

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

调用摄像机,视频 

<input type="file" accept="video/*" capture="camcorder">
  • 1

调用录音机,录音 

<input type="file" accept="audio/*" capture="microphone">
  • 1

第一种方法:

<body>
<input type="file" id="file_input" name="img" />
<img id="showimg">

<script type="text/javascript">
        var showimg = document.getElementById("showimg");
        var imginput = document.getElementById("file_input");
        imginput.onchange = function () {
            var files = this.files;
            var url = URL.createObjectURL(files[0]);
            showimg.src=url;
        }

</script>
</body>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15

第二种方法:

<body>
<input type="file" id="file_input" name="img" />
<div id="showimg"></div>

<script type="text/javascript">
    ! function(a, b) {
        var showimg = document.getElementById("showimg");
        var imginput = document.getElementById("file_input");
        if (typeof FileReader === 'undefined') {
            showimg.innerHTML = "抱歉,你的浏览器不支持 FileReader";
            imginput.setAttribute('disabled', 'disabled');
        } else {
            imginput.addEventListener('change', function() {
                var file = this.files[0];
                if (!/image\/\w+/.test(file.type)) {
                    alert("请确保文件为图像类型");
                    return false;
                }
                var reader = new FileReader();
                reader.readAsDataURL(file);
                reader.onload = function(e) {
                    showimg.innerHTML = '<img src="' + this.result + '" alt=""/>'
                }
            }, false);
        }
    }(window);
</script>
</body>

vue.js里面的话,使用方法
<input type="file" name="file" accept="image/*" capture="camera"  @change="onFileChange($event)"/>

var files = e.target.files;
var file = files[0];


阿里oss上传文档https://help.aliyun.com/document_detail/64041.html?spm=a2c4g.11186623.6.763.t7DwNz

exports.initOss = function(access) {
 
   // ossClient = new OSS({//公司没开跨域暂时行不通
   // region: 'oss-cn-shanghai',
   // //云账号AccessKey有所有API访问权限,建议遵循阿里云安全最佳实践,部署在服务端使用RAM子账号或STS,部署在客户端使用STS。
   // accessKeyId: access.AccessKeyId,
   // accessKeySecret: access.AccessKeySecret,
   // bucket:'AAAAA'
   //})
}


  1. var result =yield client.multipartUpload('object-key','local-file',{
  2. }


把上面获取的 var file 传入local-file就可以了, object-key是图片在阿里的路径,自己配置(string)



 
  
相关实践学习
借助OSS搭建在线教育视频课程分享网站
本教程介绍如何基于云服务器ECS和对象存储OSS,搭建一个在线教育视频课程分享网站。
目录
相关文章
|
2月前
|
弹性计算 数据管理 应用服务中间件
活动实践 | 借助OSS搭建在线教育视频课程分享网站
本教程指导用户在阿里云ECS实例上搭建在线教育网站,包括重置ECS密码、配置安全组、安装Nginx、创建网站页面、上传数据至OSS、开通OSS传输加速、配置生命周期策略及清理资源等步骤,实现高效、低成本的数据管理和网站运营。
活动实践 | 借助OSS搭建在线教育视频课程分享网站
|
1月前
|
存储 对象存储 索引
对象存储OSS-m3u8视频私有权限
当上传至私有存储桶的M3U8视频缺少签名信息时,会导致播放失败(403错误)。解决方案是使用OSS的动态签名机制,在首次访问M3U8文件时,通过在URL中添加`x-oss-process=hls/sign`参数,OSS将自动对所有TS切片地址进行签名,确保视频正常播放。
90 2
|
3月前
|
Web App开发 移动开发 前端开发
H5微信外支付(移动端浏览器)
H5微信外支付(移动端浏览器)
76 1
 H5微信外支付(移动端浏览器)
|
3月前
|
机器学习/深度学习 vr&ar 光互联
ACM TOG:仅通过手机拍照就可以对透明物体进行三维重建
【10月更文挑战第20天】近期发表在ACM TOG上的论文《NU-NeRF: Neural Reconstruction of Nested Transparent Objects with Uncontrolled Capture Environment》提出了一种名为NU-NeRF的神经重建方法,能够在无需特殊设备的情况下,对嵌套的复杂透明物体进行高质量的三维重建。该方法通过分离反射和折射部分,结合神经符号距离场和神经渲染技术,实现了高保真的外表面几何形状和内部表面重建。实验结果表明,NU-NeRF在合成和真实场景中均表现出色,具有广泛的应用前景。
88 3
|
7月前
|
存储 小程序 前端开发
【微信小程序 - 工作实战分享】1.微信小程序发送手机短信验证码(阿里云)
【微信小程序 - 工作实战分享】1.微信小程序发送手机短信验证码(阿里云)
602 0
|
3月前
|
小程序 JavaScript API
微信小程序开发之:保存图片到手机,使用uni-app 开发小程序;还有微信原生保存图片到手机
这篇文章介绍了如何在uni-app和微信小程序中实现将图片保存到用户手机相册的功能。
1610 0
微信小程序开发之:保存图片到手机,使用uni-app 开发小程序;还有微信原生保存图片到手机
|
4月前
|
vr&ar 图形学 UED
电子沙盘VR模型大屏平板手机微信使用方案
数字孪生电子沙盘和VR模型被广泛应用在房地产等行业,为不同设备定制不同版本的模型是常见做法。然而,通过实时云渲染技术,可以将PC端的VR模型转化为网页版,使用户能够在平板或手机上流畅浏览详细信息,无需开发多个版本。这不仅提升了用户体验,还简化了模型提供商的工作流程,降低了成本。尤其在新楼盘发布时,可通过公众号或广告链接快速吸引潜在客户。成本主要取决于并发用户数及显卡性能要求,但该技术显著提高了跨设备访问的便利性。
69 1
|
5月前
|
小程序 安全 Java
|
5月前
|
存储 前端开发 算法
|
5月前
|
存储 小程序 JavaScript

热门文章

最新文章