cordova - Cordova视频录制 - cordova教程 , 学习cordova , cordova android , cordova ios



  • 这个插件用于访问设备捕获选项。
Wikitechy cordova tutorial tags - apache cordova , cordova教程 , 学习cordova , cordova android , cordova ios , cordova plugin add , cordova android studio , phonegap android , phonegap ios , cordova下载 , apache cordova是什么 , cordova plugin开发 , apache cordova教程 , cordova 教程 , cordova插件开发 , cordova菜鸟教程 , 菲律宾cordova岛 , cordova 持续定位

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

  • 要安装这个插件,我们将打开命令提示符,然后运行下面的代码 −
cordova教程 - cordova - 学习cordova - cordovaplugin - apache cordova媒体 - Cordova plugin 生成 - apache cordova代码- apache cordova的例子

cordova教程 - cordova - 学习cordova - cordova plugin - apache cordova媒体 - apache cordova网址访问 - Cordova plugin 生成 - apache cordova代码 - apache cordova的例子

C:\Users\username\Desktop\CordovaProject>cordova plugin add cordova-plugin-media-capture
Clicking "Copy Code" button will copy the code into the clipboard - memory. Please paste(Ctrl+V) it in your destination. The code will get pasted. Happy coding from Wikitechy cordova tutorial team

第2步 - 添加按钮

  • 我们来学习如何捕获音频,图像和视频,我们将在 index.html 文件中创建三个按钮。
<button id = "audioCapture">AUDIO</button>
<button id = "imageCapture">IMAGE</button>
<button id = "videoCapture">VIDEO</button>
Clicking "Copy Code" button will copy the code into the clipboard - memory. Please paste(Ctrl+V) it in your destination. The code will get pasted. Happy coding from Wikitechy cordova tutorial team

cordova教程 - cordova - 学习cordova - cordova plugin - apache cordova音乐播放器 - Cordova plugin 生成 - apache cordova代码 - apache cordova的例子

cordova教程 - cordova - 学习cordova - cordova plugin - apache cordova音乐播放器 - apache cordova网址访问 - Cordova plugin 生成 - apache cordova代码- apache cordova的例子

第3步 - 添加事件监听器

  • 下一步骤是在index.js内的 onDeviceReady 函数中添加事件侦听器。
document.getElementById("audioCapture").addEventListener("click", audioCapture);
document.getElementById("imageCapture").addEventListener("click", imageCapture);
document.getElementById("videoCapture").addEventListener("click", videoCapture);
Clicking "Copy Code" button will copy the code into the clipboard - memory. Please paste(Ctrl+V) it in your destination. The code will get pasted. Happy coding from Wikitechy cordova tutorial team

步骤4A - 捕获音频功能

  • 在 index.js 的第一个回调函数是 audioCapture. 要启动我们将使用 captureAudio 方法录音。 我们使用两个选项 − limit 使记录每一个捕获操作只有一个音频剪辑并持续时间的声音片段的秒数
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');
   }
	
}
Clicking "Copy Code" button will copy the code into the clipboard - memory. Please paste(Ctrl+V) it in your destination. The code will get pasted. Happy coding from Wikitechy cordova tutorial team
  • 当我们按下AUDIO按钮,录音机将打开。
 record image

学习cordova - cordova教程 - 记录图像 - cordova示例 - cordova程序

Wikitechy cordova tutorial tags - apache cordova , cordova教程 , 学习cordova , cordova android , cordova ios , cordova plugin add , cordova android studio , phonegap android , phonegap ios , cordova下载 , apache cordova是什么 , cordova plugin开发 , apache cordova教程 , cordova 教程 , cordova插件开发 , cordova菜鸟教程 , 菲律宾cordova岛 , cordova 持续定位

步骤4B - 捕获图像函数功能

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');
   }
	
}
Clicking "Copy Code" button will copy the code into the clipboard - memory. Please paste(Ctrl+V) it in your destination. The code will get pasted. Happy coding from Wikitechy cordova tutorial team
  • 现在,我们可以点击 IMAGE 按钮来启动相机。
 image 1

学习cordova - cordova教程 - image 1 - cordova的例子 - cordova程序

Wikitechy cordova tutorial tags - apache cordova , cordova教程 , 学习cordova , cordova android , cordova ios , cordova plugin add , cordova android studio , phonegap android , phonegap ios , cordova下载 , apache cordova是什么 , cordova plugin开发 , apache cordova教程 , cordova 教程 , cordova插件开发 , cordova菜鸟教程 , 菲律宾cordova岛 , cordova 持续定位

步骤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');
   }
	
}
Clicking "Copy Code" button will copy the code into the clipboard - memory. Please paste(Ctrl+V) it in your destination. The code will get pasted. Happy coding from Wikitechy cordova tutorial team
  • 如果按下 VIDEO 键,相机就会打开,现在可以录制视频了。
 vedio image

学习cordova - cordova教程 - vedio图像 - cordova例子 - cordova程序


wikitechy provides you the following points such as cordova , cordova教程 , 学习cordova , cordova android , cordova ios , cordova plugin add , cordova android studio , phonegap android , phonegap ios , cordova api , cordova-android , phonegap cordova , cordova plugin , cordova下载 , apache cordova是什么 , cordova cli , cordova plugin开发 , apache cordova教程 , cordova 教程 , vue cordova , ngcordova , ionic cordova , cordova plugin file , cordova 安装 , ionic 会取代cordova么 , cordova怎么样 , cordova插件开发 ,cordova菜鸟教程 , cordova react , cordova ionic vuejs , 菲律宾cordova岛 , cordova 持续定位 , phonegap , cordoba , cordova plugins , cardova , apache cordova , cordova phonegap , ionic cordova phonegap , apache cordova alternatives , cordova for visual studio , best ide for cordova development , create cordova plugin android , cordova ios 4 , apache cordova download , cordova build command , cordova web support , cordova webview android , how to install cordova , phonegap developer , apache cordova ionic , cordova command

Related Searches to Cordova视频录制