• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

Cordova 媒体捕获

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

此插件用于访问设备的捕获选项。

步骤1 - 安装媒体捕获插件

要安装此插件,我们将打开命令提示符并运行以下代码 -

C:\Users\username\Desktop\CordovaProject>cordova plugin add cordova-plugin-media-capture

步骤2 - 添加按钮

由于我们希望向您展示如何捕获音频,图片和视频,因此我们将在 index.html 中创建三个按钮。

<button id = "audioCapture">AUDIO</button>
<button id = "imageCapture">IMAGE</button>
<button id = "videoCapture">VIDEO</button>

步骤3 - 添加事件监听器

下一步是在 index.js 中的 onDeviceReady 内添加事件监听器。

document.getElementById("audioCapture").addEventListener("click", audioCapture);
document.getElementById("imageCapture").addEventListener("click", imageCapture);
document.getElementById("videoCapture").addEventListener("click", videoCapture);

步骤4A - 捕获音频功能

index.js 中的第一个回调函数是 audioCapture 要启动录音机,我们将使用 captureAudio 方法。 我们使用两个选项 - limit 将允许每次捕获操作只记录一个音频剪辑, duration 是声音片段的秒数。

function audioCapture() {

   var options = {
      limit: 1,
      duration: 10
   };

   navigator.device.capture.captureAudio(onSuccess, onError, options);

   function onSuccess(mediaFiles) {
      var i, path, len;
		
      for (i = 0, len = mediaFiles.length; i < len; i += 1) {
         path = mediaFiles[i].fullPath;
         console.log(mediaFiles);
      }
   }

   function onError(error) {
      navigator.notification.alert('Error code: ' + error.code, null, 'Capture Error');
   }
	
}

当按下 AUDIO 按钮时,录音机将打开。

控制台将显示用户捕获的对象的返回数组。

步骤4B - 捕获图像功能

捕获图像的功能将与最后一个相同。 唯一的区别是我们这次使用 captureImage 方法。

function imageCapture() {

   var options = {
      limit: 1
   };

   navigator.device.capture.captureImage(onSuccess, onError, options);

   function onSuccess(mediaFiles) {
      var i, path, len;
		
      for (i = 0, len = mediaFiles.length; i < len; i += 1) {
         path = mediaFiles[i].fullPath;
         console.log(mediaFiles);
      }
   }

   function onError(error) {
      navigator.notification.alert('Error code: ' + error.code, null, 'Capture Error');
   }
	
}

现在我们可以点击 IMAGE 按钮启动相机。

当我们拍照时,控制台将使用image对象记录数组。

步骤4C - 捕获视频功能

让我们重复相同的概念来捕获视频。我们将使用 videoCapture 方法。

function videoCapture() {

   var options = {
      limit: 1,
      duration: 10
   };

   navigator.device.capture.captureVideo(onSuccess, onError, options);

   function onSuccess(mediaFiles) {
      var i, path, len;
		
      for (i = 0, len = mediaFiles.length; i < len; i += 1) {
         path = mediaFiles[i].fullPath;
         console.log(mediaFiles);
      }
   }

   function onError(error) {
      navigator.notification.alert('Error code: ' + error.code, null, 'Capture Error');
   }
	
}

如果按 VIDEO 按钮,相机将打开,我们可以录制视频。

保存视频后,控制台将再次返回数组。这个时候跟视频对象里面。


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
Cordova 网络信息发布时间:2022-02-02
下一篇:
Cordova 媒体发布时间:2022-02-02
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap