WebApp mui&H5+ 视频处理之拍摄

9 篇文章 0 订阅
5 篇文章 0 订阅
本篇文章介绍WebAPP里如何利用H5+进行拍摄视频。代码加注释
                var cmr = plus.camera.getCamera();
                //获取相机
                cmr.startVideoCapture(function(p) {
                //录像
                plus.io.resolveLocalFileSystemURL(p, function(entry) {
                //通过URL参数获取目录对象或文件对象 就是获取到录像文件位置    
                        console.log(p);//打印文件位置,可以直接用作上传路径
                    }, function(e) {
                        console.log("读取录像文件错误:" + e.message);
                    });

                }, function(e) {
                    console.log("失败");
                    plus.nativeUI.toast("录像失败!",{duration:"long"});
                }, {
                    filename: "_doc/camera/",//文件保存目录
                    index: 2
                });
  • 2
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
WebApp mui&H5+ 可以结合使用 Native.js for Android 完成视频录制和处理。以下是大致的实现步骤: 1. 引入 Native.js for Android 插件,该插件可以在 H5+ 中使用 Native 方法。 2. 使用 H5+ API 调用 Android 摄像头,获取视频流,并且使用 Native 方法将视频流传递给 Android Native 代码。 3. 在 Android Native 代码中,使用 Camera2 API 获得视频流,并且使用 MediaRecorder API 将视频流录制为 MP4 格式的视频。 4. 将录制好的视频文件保存到指定的路径,并且使用 Native 方法将视频文件路径传递给 H5+ 代码。 5. 在 H5+ 代码中,使用 HTML5 Video 标签来播放录制好的视频。 示例代码如下: H5+ 代码: ``` // 引入 Native.js for Android 插件 document.addEventListener('plusready', function() { var nativeApi = plus.android.importClass('io.dcloud.NativeApi'); var nativeObj = new nativeApi(); // 使用 H5+ API 调用 Android 摄像头 var cmr = plus.camera.getCamera(); cmr.startVideoCapture(function(path) { // 使用 Native 方法将视频流传递给 Android Native 代码 nativeObj.exec('com.example.camera', 'startRecording', [path], function(result) { console.log(result); // 使用 Native 方法将视频文件路径传递给 H5+ 代码 nativeObj.exec('com.example.camera', 'getVideoPath', [], function(path) { console.log(path); var video = document.getElementById('video'); video.src = path; video.play(); }, function(e) { console.log(e); }); }, function(e) { console.log(e); }); }, function(e) { console.log(e); }, {filename:'_doc/video/', index:1}); }); ``` Android Native 代码: ``` public class CameraPlugin extends CordovaPlugin { private CameraDevice cameraDevice; private MediaRecorder mediaRecorder; private String videoFilePath; @Override public boolean execute(String action, JSONArray args, CallbackContext callbackContext) throws JSONException { if ("startRecording".equals(action)) { startRecording(args.getString(0), callbackContext); return true; } else if ("getVideoPath".equals(action)) { getVideoPath(callbackContext); return true; } return false; } private void startRecording(String path, CallbackContext callbackContext) { try { mediaRecorder = new MediaRecorder(); mediaRecorder.setVideoSource(MediaRecorder.VideoSource.SURFACE); mediaRecorder.setOutputFormat(MediaRecorder.OutputFormat.MPEG_4); mediaRecorder.setOutputFile(path); mediaRecorder.setVideoEncodingBitRate(10000000); mediaRecorder.setVideoFrameRate(30); mediaRecorder.setVideoSize(1280, 720); mediaRecorder.setVideoEncoder(MediaRecorder.VideoEncoder.H264); mediaRecorder.prepare(); mediaRecorder.start(); videoFilePath = path; callbackContext.success(); } catch (Exception e) { callbackContext.error(e.getMessage()); } } private void getVideoPath(CallbackContext callbackContext) { callbackContext.success(videoFilePath); } // ... } ``` 需要注意的是,在 Android 6.0 及以上版本的系统中,需要动态请求摄像头和存储权限。同时,在录制视频时,需要使用新版的 Camera2 API 替换旧版的 Camera API。
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值