Cordova Implement video format conversion plugin (turn into MP4 format, iOS version)

This article demonstrates how to develop a custom plug-in to implement a video format conversion. Since the IPhone video is in MOV format, we implement a custom plug-in that converts video to MP4 format in order for the video to play smoothly on multiple platforms.

1, the principle of realization

(1) Through avassetexportsession we can realize the conversion of video format, in addition to converting to MP4 encoding format, there are many other formats to choose from.
(2) In addition to the encoding format, avassetexportsession can also set a variety of compression quality. (This sample uses high quality, that is, does not compress it.) If you want to make the generated video smaller and easier to transmit, you can use a lower quality level.

2, customizing the creation of Plug-ins

We create a random local folder (such as Hanggemp4covertplugin), in which to place plug-ins related functions to implement code and configuration files. The directory structure is as follows:

the contents and functions of each file are described below:

(1) Hanggemp4covertplugin.swift

Import Foundation
Import Corelocation
Import Mobilecoreservices
Import Assetslibrary
Import Avfoundation

@objc (Hwphanggemp4covertplugin) class Hanggemp4covertplugin:cdvplugin {

Video Conversion
Func Covertvideo (Command:cdvinvokedurlcommand)
{
return results
var pluginresult:cdvpluginresult?
Get parameters
Let Videopath = Command.arguments[0] as! String

Get Original video Resources
Let Videourl = Nsurl (Fileurlwithpath:videopath)
Let Avasset = Avurlasset (Url:videourl, Options:nil)

Get current time
Let-now = NSDate ()
Let Dformatter = NSDateFormatter ()
Dformatter.dateformat = "Yyyymmddhhmmss"
Let FileName = "[Dformatter.stringfromdate (now)] \ (Arc4random ()%100)"
Video save path after transcoding (under TMP directory)
Let DestinationPath = nstemporarydirectory () + "\ (fileName). mp4"
Let Newvideopath:nsurl = Nsurl (Fileurlwithpath:destinationpath as String)

Start transcoding
Let exporter = avassetexportsession (Asset:avasset,
presetname:avassetexportpresethighestquality)!
Exporter.outputurl = Newvideopath
Exporter.outputfiletype = AVFileTypeMPEG4
Exporter.shouldoptimizefornetworkuse = True
Exporter.exportasynchronouslywithcompletionhandler ({
Print ("Conversion succeeded!") ")
Print ("New video address: \ (newvideopath.relativepath)")
Pluginresult = Cdvpluginresult (STATUS:CDVCOMMANDSTATUS_OK,
MessageAsString:newVideoPath.relativePath)
Send results
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 with 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, Custom plug-in installation

(1) As the plugin is written in swift language, first enter the project folder in the terminal and run the following command to add the Swift support plugin:

Cordova Plugin Add Cordova-plugin-add-swift-support

(2) Suppose we do a custom plug-in is in the user "documents" directory, run the following command to add this plugin to the project:

Cordova Plugin Add ~/documents/hanggemp4covertplugin

(3) If you want to remove this custom plug-in later, run the following command:

Cordova Plugin RM Hangge-mp4-covert-plugin

4, custom plug-in usage examples

Modify the homepage index.html for the following content. Click the button, the first call to the Mediacapture plug-in to capture the recording implementation, after recording. Will invoke our custom transcoding plug-in to convert the video you just recorded to the MP4 format and save it to the TMP directory. Finally, the address of this video is displayed on the page.

<! DOCTYPE html>
<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 () {
Start video (Maximum recording time: 15 seconds)
Navigator.device.capture.captureVideo (onsuccess, OnError, {duration:15});

Recording successful
function onsuccess (mediafiles) {
var i, path, Len;
Traversal gets the recorded file (iOS only supports recording one video or audio at a time)
for (i = 0, len = mediafiles.length i < len; i = 1) {
Console.log (Mediafiles);
Path = Mediafiles[i].fullpath;
Console.log (the recording was successful!) \ n '
+ "FileName:" + mediafiles[i].name + "\ n"
+ "Size:" + mediafiles[i].size + "\ n"
+ "Localurl Address:" + mediafiles[i].localurl + "\ n"
+ "FullPath Address:" + path);

Turn a recorded video into MP4 format
COVERTVIDEOTOMP4 (path);
}
}

Recording failed
function OnError (Error) {
Alert (' Recording failed! Error code: ' + Error.code ';
}
}

Turn a recorded video into MP4 format
function CovertVideoToMp4 (Videopath) {
Hanggemp4covertplugin.covertvideo (Videopath,
function (NewPath) {
Alert ("Transcoding succeeded!") Address: "+ NewPath";
},
function (errormessage) {
Alert ("Video transcoding fails:" +errormessage);
});
}
</script>
<body style= "padding-top:50px" >
<button style= "font-size:23px" onclick= "videocapture ();" > Video and generate MP4 videos </button>
</body>