vue调用手机摄像头添加取景框_html5 调用手机摄像头以及录音

最新推荐文章于 2024-08-29 15:43:23 发布

weixin_39645308

最新推荐文章于 2024-08-29 15:43:23 发布

阅读量2.6k

点赞数 1

文章标签： vue调用手机摄像头添加取景框

本文链接：https://blog.csdn.net/weixin_39645308/article/details/113323738

版权

本文介绍了如何使用HTML5在Vue应用中调用手机摄像头进行拍照和录像，以及如何进行录音操作。通过`<input>`标签的type、accept和capture属性来实现功能，提供代码示例。

摘要由CSDN通过智能技术生成

前两天发布了一篇关于利用html5在手机端进行拨号和发送短信的教程，今天再说一下利用html5在手机端调用摄像头以及录音的教程

HTML5 调用手机摄像头

在html5中可以利用type类型为file的input的标签调起手机的摄像头

例：html5调用手机摄像头进行拍照

例：html5调用手机摄像头进行录像

input 标签，不仅仅可以调用起手机的摄像头，还可以录音呢

例：

input accept 属性

accept属性可以限制可用文件的类型，当 input 标签的 type 属性为 file 时，可以规定服务器所接受的文件类型

例如：

accept="audio/*" 表示所有音频文件accept="video/*" 表示视频文件accept="image/"* 表示图片文件

当然你也可以使用文件后缀名的形式

例：

accept="image/png* 表示只接收后缀名为 png 的图片accept="image/jpg* 表示只接收后缀名为 jpg 的图片accept=".png, .jpg, .jpeg" 表示可以同时接收 png jpg jpeg 后缀的文件

input capture 属性

capture：可以指定调用手机的拍照，摄像以及录音等功能capture="camera" 手机相机capture="camcorder" 手机摄像机capture="microphone" 手机录音

关注