H5app 调用手机摄像头拍照、录制视频并上传demo

最新推荐文章于 2025-06-28 11:30:38 发布

原创

最新推荐文章于 2025-06-28 11:30:38 发布 · 1.5w 阅读

21 ·

CC 4.0 BY-SA版权

文章标签：

#H5 #拍照、视频

本文介绍了如何使用H5技术在打包的APP中调用手机摄像头进行拍照和录制视频，并详细说明了上传流程。借助Hbuilder工具，开发者可以方便地实现这些功能。完整代码和详细API接口信息可参考H5api接口官网。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

功能：H5打包的app调用手机摄像头进行拍照、录制视频并上传
打包工具：Hbuilder(不得不说这个工具挺方便的，就是没有linux环境下的安装包，本人用的是深度系统

本篇没有html代码，主要是使用方法的一个汇总，如果要更详细的介绍用力戳
H5api接口官网

上代码(js)：

var cmr = null   // 初始化变量

// 创建plus环境
if (window.plus) {
    plusReady();
} else {
    document.addEventListener('plusready', plusReady, false);
}

function plusReady() {
    cmr = plus.camera.getCamera(); // 初始化摄像头
}

/ 摄像
function videoCapture() {
    
        var res = cmr.supportedVideoResolutions[0];  // 获取手机支持的视频分辨率，默认获取第一个(这样写的情况下)
        var fmt = cmr.supportedVideoFormats[0];  // 获取手机支持的视频格式，默认获取第一个(这样写的情况下)
        console.log("Resolution: " + res + ", Format: " + fmt);
        $('#xx').append("Resolution: " + cmr.supportedVideoResolutions + ", Format: " + fmt);
        cmr.startVideoCapture(function (path) {
        		// 拍摄视频成功
				//	alert( "Capture video success: " + path );
				//