Hidden Video Player Application with Electron (Part 1)
Repository
Electron GitHub Address
https://github.com/electron/electron
My GitHub Address
This Project GitHub Address
https://github.com/pckurdu/hidden-video-player-application-with-electron-part-1
What Will I Learn?
- You will learn to create an electron project
- You will learn how to lock and unlock files
- You will learn the child_process module and the exec namespace
- You will learn command line operations in electron
- You will learn how to write and process .bat files.
Requirements
Difficulty
- Intermediate
Tutorial Contents
We will make a video player with the electron to increase your electron knowledge in this tutorials.
This application will also hide the videos you upload to this application at the same time in your computer.
The application will be logged in with a username and password so that no one else can watch your videos.
We will store the videos in the file we hide, and we will only have access to the hidden file in the application so that it will not be able to find the file on the computer.
- I will use
Bootstrap
for the application screen. - I will use
Angularjs
andAngular-ui-router
for video upload and video playback. - I will use
Jquery
for login operations.
You should have information about these before you start building the application.
Here's what I will tell you on this article.
- Electron application from scratch will be created.
- Installation and inclusion of auxiliary elements required for application.
- Writing folder hiding code as
.bat
file. - Running the
.bat
file with the electron application.
Let's start building our application.
Electron Application Creation
In order to create an electron application, electron must be installed in our computer.
It is quite simple to install electrons, but Node Packaged Modules (npm)
must be installed. To install npm, please click here to install nodejs
.
After installing npm, it is enough to write the following code to the command line to set up the electron globally.
npm install -g electron
The next step will be to create the package.json
file by going into the file where you will place your application.
We can use the npm init
command to create a package.json file.
After this code a number of questions will be asked at the command line. When you answer the question and write yes, a package.json file is created.
Where the main.js
file is written in front of the main property. this file is the file where we write our electron codes.
With the atom editor open the package.json file and create main.js file.
I need to load the app
and BrowserWindow
modules.
The app module represents the application, while the BrowserWindow module represents the window to be opened.
const {app,BrowserWindow}=require('electron')
Create a new window in a function and add the screen file to this window.
const path=require('path')
const url=require('url')
let win
function createWindow() {
win =new BrowserWindow({width:1000,height:800})
win.loadURL(url.format({
pathname:path.join(__dirname,'index.html'),
protocol:'file',
slashes:true
}))
win.openDevTools();// Developer Tool
}
I added the index.html
page to the window created with win
so that the index.html page was our view page.
I also set up the developer tool so that I can easily see when I make any mistakes.
Let's run the application with the app module.
app.on('ready',createWindow)
Create an index.html page and place the following code in it.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Hidden Video Player</title>
<script>
</script>
</head>
<body>
<h1>Hidden Video Player</h1>
</body>
</html>
To run the application, it is enough to run the following code where the package.json file is located.
electron .
Upload and Include Bootstrap,Angularjs and Jquery Files
I will include the angularjs, angular-ui-router and bootstrap cdn in the project in this section and will download the jquery project files using npm.
Let's start by downloading jquery first. at the command line we can download the following code where the application files are located.
npm i jquery
So the nodu_modules folder is created and jquery is downloaded into it so we can use jquery now.
The new version of index.html is as follows.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.2/angular-ui-router.min.js"></script>
<title>Hidden Video Player</title>
</head>
<body>
<h1>Hidden Video Player</h1>
</body>
</html>
Writing Folder Hiding Code as .bat File.
Let's open a text file and code it, we will convert this text file to a .bat file when the encoding is finished.
We need to open it with a password when opening it on the command line because we do not want to access this file from the outside.
We need to capture the value in the command line in the text file.
We will create a file called ElectronFiles
in this .bat file to move our files in the field that the file is in.
When the ElectronFiles file is locked it will be invisible and will be visible when the lock is opened.
We will run it with a password to run this .bat file and run it with a command to shut it off.
When the .bat file is run, the status of the ElectronFiles folder is checked.
Code:
cls
@ECHO OFF
set arg1=%1
title Folder ElectronFiles
if EXIST "Control Panel.{21EC2020-3AEA-1069-A2DD-08002B30309D}" goto UNLOCK
if NOT EXIST ElectronFiles goto MDLocked
The command to lock the ElectronFiles file is below.
:LOCK
ren ElectronFiles "Control Panel.{21EC2020-3AEA-1069-A2DD-08002B30309D}"
attrib +h +s "Control Panel.{21EC2020-3AEA-1069-A2DD-08002B30309D}"
echo Folder locked
goto End
The command is down when the lock is unlocked.
:UNLOCK
if NOT %arg1%==123456 goto FAIL
attrib -h -s "Control Panel.{21EC2020-3AEA-1069-A2DD-08002B30309D}"
ren "Control Panel.{21EC2020-3AEA-1069-A2DD-08002B30309D}" ElectronFiles
echo Folder Unlocked successaaaay
goto End
The setting to turn off or turn off is below.
:CONFIRM
if %arg1%==e goto LOCK
if %arg1%==E goto LOCK
if %arg1%==h goto END
if %arg1%==H goto END
echo Invalid choice.
goto CONFIRM
The following command works when there is an error.
:FAIL
echo Invalid password
goto end
The following command will run when there is no error.
:MDLocked
md ElectronFiles
echo Locker created successaaaay
goto End
:End
Save as electron.bat and unlock and unlock
So we opened the lock and now shut it back.
Running .bat File with Electron
To run the .bat file with electron, we need to load the exec namespaces in the child_process module so we can run the .bat files we know instead with the command.
For this application we have to run the electron.bat password
command when the application is opened so the hidden ElectronFiles
file will be open.
We also need to run electron.bat e
when the application is closed.
I need to install the module to use the exec()
function.
const exec=require('child_process').exec
In the createWindow()
function, we will run the exec()
function to make the files visible.
const bat=exec('cmd /c electron.bat 123456',{cwd:"D:\\electron\\hiddenVideoPlayer-part1\\bats"},function(){
});
The first parameter of the exec () function is used to enter the command to be executed.
The second parameter is the path to the .bat file.
We must run the exec () function before the application is closed so that the ElectronFiles file is hidden.
app.on('before-quit', () => {
const bat=exec('cmd /c electron.bat e',{cwd:"D:\\electron\\hiddenVideoPlayer-part1\\bats"},function(){
});
app.quit()
})
app.on('closed', () => {
const bat=exec('cmd /c electron.bat e',{cwd:"D:\\electron\\hiddenVideoPlayer-part1\\bats"},function(){
});
app.quit()
})
The file will now be visible and accessible when we run our application.
The file is hidden when the application is closed and disappears completely when the refresh is made.
Proof of Work Done
https://github.com/pckurdu/hidden-video-player-application-with-electron-part-1
Thank you for your contribution
Your contribution has been evaluated according to Utopian policies and guidelines, as well as a predefined set of questions pertaining to the category.
To view those questions and the relevant answers related to your post, click here.
Need help? Write a ticket on https://support.utopian.io/.
Chat with us on Discord.
[utopian-moderator]
Hey @pckurdu
Thanks for contributing on Utopian.
We’re already looking forward to your next contribution!
Want to chat? Join us on Discord https://discord.gg/h52nFrV.
Vote for Utopian Witness!