返回 导航

Cordova

hangge.com

Cordova - 做一个视频格式转换插件（转成mp4格式，iOS版）

作者：hangge | 2016-06-02 09:17
本文演示如何开发一个自定义插件，来实现视频格式的转换。由于使用 iPhone 拍摄的视频是 mov 格式的，为了让视频能够在多平台下都能顺利播放，我们实现一个将视频转换为 mp4 格式的自定义插件。

1，实现原理
（1）通过 AVAssetExportSession 我们可以实现视频格式的转换，除了转成mp4编码格式，还有很多其它格式可供选择。
（2）除了编码格式外，AVAssetExportSession 还可以设置各种压缩质量。（本样例使用高质量，即不对其压缩。如果想要让生成的视频体积小点便于传输，可以使用低一些质量级别）

2，自定义插件的创建 
 我们随便在本地建立一个文件夹（比如叫 HanggeMp4CovertPlugin），在里面放置插件的相关功能实现代码和配置文件。目录结构如下：
下面分别介绍各个文件的内容和功能：
（1）HanggeMp4CovertPlugin.swift 
import Foundation
import CoreLocation
import MobileCoreServices
import AssetsLibrary
import AVFoundation

@objc(HWPHanggeMp4CovertPlugin) class HanggeMp4CovertPlugin : CDVPlugin {
    
    //视频转换
    func covertVideo(command:CDVInvokedUrlCommand)
    {
        //返回结果
        var pluginResult:CDVPluginResult?
        //获取参数
        let videoPath = command.arguments[0] as! String
        
        //获取原视频资源
        let videoURL = NSURL(fileURLWithPath: videoPath)
        let avAsset = AVURLAsset(URL: videoURL, options: nil)
        
        //获取当前时间
        let now = NSDate()
        let dformatter = NSDateFormatter()
        dformatter.dateFormat = "yyyyMMddHHmmss"
        let fileName = "\(dformatter.stringFromDate(now))\(arc4random()%100)"
        //转码后的视频保存路径（tmp目录下）
        let destinationPath = NSTemporaryDirectory() + "\(fileName).mp4"
        let newVideoPath: NSURL = NSURL(fileURLWithPath: destinationPath as String)
        
        //开始转码
        let exporter = AVAssetExportSession(asset: avAsset,
                                            presetName:AVAssetExportPresetHighestQuality)!
        exporter.outputURL = newVideoPath
        exporter.outputFileType = AVFileTypeMPEG4
        exporter.shouldOptimizeForNetworkUse = true
        exporter.exportAsynchronouslyWithCompletionHandler({
            print("转换成功！")
            print("新视频地址：\(newVideoPath.relativePath)")
            pluginResult = CDVPluginResult(status:CDVCommandStatus_OK,
                messageAsString: newVideoPath.relativePath)
            //发送结果
            self.commandDelegate.sendPluginResult(pluginResult, callbackId: command.callbackId)
        })
    }
}

（2）hangge-mp4-covert-plugin.js 
'use strict';

var exec = require('cordova/exec');

var HanggeMp4CovertPlugin = {

  covertVideo: function(videoPath, onSuccess, onFail) {
    return exec(onSuccess, onFail, 'HanggeMp4CovertPlugin', 'covertVideo', [videoPath]);
  }

};

module.exports = HanggeMp4CovertPlugin;

（3）plugin.xml 
<?xml version="1.0" encoding="UTF-8"?>
<plugin xmlns="http://apache.org/cordova/ns/plugins/1.0"
    id="hangge-mp4-covert-plugin"
    version="0.1">

    <name>HanggeMp4CovertPlugin</name>
    <description>This plugin use to covert video to mp4</description>

    <js-module src="hangge-mp4-covert-plugin.js">
        <clobbers target="window.HanggeMp4CovertPlugin" />
    </js-module>

    <!-- iOS -->
    <platform name="ios">
        <config-file target="config.xml" parent="/*">
            <feature name="HanggeMp4CovertPlugin">
                <param name="ios-package" value="HWPHanggeMp4CovertPlugin" />
            </feature>
        </config-file>
        <source-file src="src/ios/HanggeMp4CovertPlugin.swift" />
    </platform>
</plugin>

3，自定义插件的安装
（1）由于插件是使用Swift语言写的，首先在“终端”中进入到项目文件夹，并运行如下命令添加 Swift 支持插件： 
cordova plugin add cordova-plugin-add-swift-support
（2）假设我们做的自定义插件是在用户“文稿”目录下，运行如下命令把这个插件添加到工程中来： 
cordova plugin add ~/Documents/HanggeMp4CovertPlugin
（3）以后如果想移除这个自定义插件，运行如下命令即可： 
cordova plugin rm hangge-mp4-covert-plugin

4，自定义插件的使用样例
修改首页 index.html 为如下内容。点击按钮后，首先会调用 MediaCapture 插件来拍摄录制实现，录制完毕后。会调用我们的自定义转码插件，将刚才录制好的视频转换为 mp4 格式并保存到 tmp 目录下。最后在页面上显示这个视频的地址。
           
<!DOCTYPE html>
<html>
    <head>
        <title>Capture Video</title>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8">
        <script type="text/javascript" charset="utf-8" src="cordova.js"></script>
        <script type="text/javascript" charset="utf-8">

            function videoCapture() {
               //开始录像（最长录制时间：15秒）
               navigator.device.capture.captureVideo(onSuccess, onError, {duration: 15});

               //录制成功
               function onSuccess(mediaFiles) {
                  var i, path, len;
                  //遍历获取录制的文件（iOS只支持一次录制一个视频或音频）
                  for (i = 0, len = mediaFiles.length; i < len; i += 1) {
                    console.log(mediaFiles);
                     path = mediaFiles[i].fullPath;
                     console.log("录制成功！\n\n"
                          + "文件名：" + mediaFiles[i].name + "\n"
                          + "大小：" + mediaFiles[i].size + "\n\n"
                          + "localURL地址：" + mediaFiles[i].localURL + "\n\n"
                          + "fullPath地址：" + path);

                      //将录制好的视频转成mp4格式
                      covertVideoToMp4(path);
                  }
               }

               //录制失败
               function onError(error) {
                  alert('录制失败！错误码：' + error.code);
               }
          }

          //将录制好的视频转成mp4格式
          function covertVideoToMp4(videoPath) {
              HanggeMp4CovertPlugin.covertVideo(videoPath,
                  function(newPath) {
                      alert("转码成功！地址：" + newPath);
                  },
                  function(errorMessage){
                      alert("视频转码失败："+errorMessage);
                  });
          }
        </script>
    </head>
    <body style="padding-top:50px">
        <button style="font-size:23px;" onclick="videoCapture();">录像并生成mp4视频</button>
    </body>
</html>
源码下载：HanggeMp4CovertPlugin.zip
评论

全部评论（0）

回到顶部