How to create your video editor App in MATLAB using App Designer?

This video shows the steps to create your Own video Editor App. In this video it create a MATLAB GUI using App designer. It uses UIAxes to display or show the video.

Some of the basic functionality of video editor like Trimming the video, concatenating 2 videos, etc are shown here.

In the steps discussed here, computer vision toolbox is not required to do the basic processing on the video.
Two Sample videos of dimensions: 1920 x 1080 (width x height) is used in this video.

We will be glad to hear from you regarding any query, suggestions or appreciations at: programmerworld1990@gmail.com

Video files shown in this video are attached below:

Source code:

classdef MyVideoEditor < matlab.apps.AppBase

% Properties that correspond to app components
properties (Access = public)
UIFigure matlab.ui.Figure
UIAxes matlab.ui.control.UIAxes
PlayButton matlab.ui.control.Button
FileNameEditFieldLabel matlab.ui.control.Label
FileNameEditField matlab.ui.control.EditField
Slider matlab.ui.control.Slider
TrimButton matlab.ui.control.Button
StartTimeEditFieldLabel matlab.ui.control.Label
StartTimeEditField matlab.ui.control.NumericEditField
EndTimeEditFieldLabel matlab.ui.control.Label
EndTimeEditField matlab.ui.control.NumericEditField
AddButton matlab.ui.control.Button
File1EditFieldLabel matlab.ui.control.Label
File1EditField matlab.ui.control.EditField
File2EditFieldLabel matlab.ui.control.Label
File2EditField matlab.ui.control.EditField
end
properties (Access = private)
FileName % Description
TempFile = ‘TempFile.avi’; % Description
end

methods (Access = private)

function Play(app)

v = VideoReader(app.FileName);

app.Slider.Limits = [0, v.Duration];
app.Slider.MajorTickLabels = {num2str(0), num2str(v.Duration/2), num2str(v.Duration)};
app.Slider.MajorTicks = [0, v.Duration/2, v.Duration];

while hasFrame(v)
Frame = readFrame(v);
imshow(Frame, ‘Parent’, app.UIAxes);
if(v.CurrentTime < v.Duration)
app.Slider.Value = v.CurrentTime;
end

end

end
end

% Callbacks that handle component events
methods (Access = private)

% Button pushed function: PlayButton
function PlayButtonPushed(app, event)
app.FileName = app.FileNameEditField.Value;
Play(app);
end

% Button pushed function: TrimButton
function TrimButtonPushed(app, event)
v = VideoReader(app.FileNameEditField.Value);
w = VideoWriter(app.TempFile);
open(w);

while hasFrame(v)
Frame = readFrame(v);

if(v.CurrentTime < app.StartTimeEditField.Value || …
v.CurrentTime > app.EndTimeEditField.Value)
writeVideo(w,Frame);
end

end

close(w);
app.FileName = app.TempFile;
Play(app);
end

% Button pushed function: AddButton
function AddButtonPushed(app, event)
v1 = app.File1EditField.Value;
v2 = app.File2EditField.Value;

if ~(isfile(v1) && isfile(v2))
msgbox(‘File 1 and File 2 must be defined’, “Error”);
return;
end

v1_VR = VideoReader(v1);
v2_VR = VideoReader(v2);

w = VideoWriter(app.TempFile);
open(w)

while hasFrame(v1_VR)
Frame = readFrame(v1_VR);
writeVideo(w, Frame);
end

while hasFrame(v2_VR)
Frame = readFrame(v2_VR);
writeVideo(w, Frame);
end

close(w);
app.FileName = app.TempFile;
Play(app);
end

% Value changed function: FileNameEditField
function FileNameEditFieldValueChanged(app, event)
value = app.FileNameEditField.Value;

v = VideoReader(value);

app.Slider.Limits = [0, v.Duration];
app.Slider.MajorTickLabels = {num2str(0), num2str(v.Duration/2), num2str(v.Duration)};
app.Slider.MajorTicks = [0, v.Duration/2, v.Duration];
end
end

% Component initialization
methods (Access = private)

% Create UIFigure and components
function createComponents(app)

% Create UIFigure and hide until all components are created
app.UIFigure = uifigure(‘Visible’, ‘off’);
app.UIFigure.Position = [100 100 640 480];
app.UIFigure.Name = ‘UI Figure’;

% Create UIAxes
app.UIAxes = uiaxes(app.UIFigure);
title(app.UIAxes, ”)
xlabel(app.UIAxes, ”)
ylabel(app.UIAxes, ”)
app.UIAxes.Box = ‘on’;
app.UIAxes.XTick = [];
app.UIAxes.XTickLabel = ”;
app.UIAxes.YTick = [];
app.UIAxes.YTickLabel = ”;
app.UIAxes.Position = [67 186 494 287];

% Create PlayButton
app.PlayButton = uibutton(app.UIFigure, ‘push’);
app.PlayButton.ButtonPushedFcn = createCallbackFcn(app, @PlayButtonPushed, true);
app.PlayButton.Position = [459 119 100 22];
app.PlayButton.Text = ‘Play’;

% Create FileNameEditFieldLabel
app.FileNameEditFieldLabel = uilabel(app.UIFigure);
app.FileNameEditFieldLabel.HorizontalAlignment = ‘right’;
app.FileNameEditFieldLabel.Position = [126 119 60 22];
app.FileNameEditFieldLabel.Text = ‘File Name’;

% Create FileNameEditField
app.FileNameEditField = uieditfield(app.UIFigure, ‘text’);
app.FileNameEditField.ValueChangedFcn = createCallbackFcn(app, @FileNameEditFieldValueChanged, true);
app.FileNameEditField.Position = [201 119 208 22];

% Create Slider
app.Slider = uislider(app.UIFigure);
app.Slider.Limits = [0 1];
app.Slider.MajorTicks = [0 0.5 1];
app.Slider.MinorTicks = [];
app.Slider.Position = [85 191 474 3];

% Create TrimButton
app.TrimButton = uibutton(app.UIFigure, ‘push’);
app.TrimButton.ButtonPushedFcn = createCallbackFcn(app, @TrimButtonPushed, true);
app.TrimButton.Position = [461 76 100 22];
app.TrimButton.Text = ‘Trim’;

% Create StartTimeEditFieldLabel
app.StartTimeEditFieldLabel = uilabel(app.UIFigure);
app.StartTimeEditFieldLabel.HorizontalAlignment = ‘right’;
app.StartTimeEditFieldLabel.Position = [67 76 60 22];
app.StartTimeEditFieldLabel.Text = ‘Start Time’;

% Create StartTimeEditField
app.StartTimeEditField = uieditfield(app.UIFigure, ‘numeric’);
app.StartTimeEditField.Position = [142 76 100 22];

% Create EndTimeEditFieldLabel
app.EndTimeEditFieldLabel = uilabel(app.UIFigure);
app.EndTimeEditFieldLabel.HorizontalAlignment = ‘right’;
app.EndTimeEditFieldLabel.Position = [259 76 56 22];
app.EndTimeEditFieldLabel.Text = ‘End Time’;

% Create EndTimeEditField
app.EndTimeEditField = uieditfield(app.UIFigure, ‘numeric’);
app.EndTimeEditField.Position = [330 76 100 22];

% Create AddButton
app.AddButton = uibutton(app.UIFigure, ‘push’);
app.AddButton.ButtonPushedFcn = createCallbackFcn(app, @AddButtonPushed, true);
app.AddButton.Position = [459 19 100 22];
app.AddButton.Text = ‘Add’;

% Create File1EditFieldLabel
app.File1EditFieldLabel = uilabel(app.UIFigure);
app.File1EditFieldLabel.HorizontalAlignment = ‘right’;
app.File1EditFieldLabel.Position = [96 19 31 22];
app.File1EditFieldLabel.Text = ‘File1’;

% Create File1EditField
app.File1EditField = uieditfield(app.UIFigure, ‘text’);
app.File1EditField.Position = [142 19 100 22];

% Create File2EditFieldLabel
app.File2EditFieldLabel = uilabel(app.UIFigure);
app.File2EditFieldLabel.HorizontalAlignment = ‘right’;
app.File2EditFieldLabel.Position = [284 19 31 22];
app.File2EditFieldLabel.Text = ‘File2’;

% Create File2EditField
app.File2EditField = uieditfield(app.UIFigure, ‘text’);
app.File2EditField.Position = [330 19 100 22];

% Show the figure after all components are created
app.UIFigure.Visible = ‘on’;
end
end

% App creation and deletion
methods (Access = public)

% Construct app
function app = MyVideoEditor

% Create UIFigure and components
createComponents(app)

% Register the app with App Designer
registerApp(app, app.UIFigure)

if nargout == 0
clear app
end
end

% Code that executes before app deletion
function delete(app)

% Delete UIFigure when app is deleted
delete(app.UIFigure)
end
end
end

Leave a Reply

%d bloggers like this: