Thread by @Mullr33

A thread on how I managed to encrypt and store a video using #Flutter

Scroll for links, code snippets, and my general thought process...

Recording and saving videos locally isn't too difficult.

Dependencies:
- camera
- path_provider

#flutter #android #s21 #video #coding

Below is the code for getting a file reference:

Created with @carbon_app

Encryption on the other hand is a foreign language to me. From my research, I learned that each user needs an #AsymmetricKeyPair that can be used to #encrypt and #decrypt data.

To generate these, I used the rsa_encrypt package.

pub.dev/packages/rsa_e…

I used the encrypt🔒 package to create an #Encrypter for each user and then the flutter_secure_storage package to save user's keys locally.

I added the Encrypter to a SecurityService so I could access it anywhere.

#security #flutterdev #CyberSecurity #software #privacy

With the encrypter set, I could start taking videos with the camera. When you call stopVideoRecording on your CameraController, you get an XFile (or 'CrossFile', as it says in the docs).

#cyber #crossplatform #angular #dart

pub.dev/documentation/…

Since the video file will probably be huge, we can't encrypt it directly.

Instead, we'll have to parse the video into chunks and encrypt those separately.

#software #SoftwareEngineering #infosec

The openRead() method of the XFile object containing our video returns a Uint8List stream.

Thanks to this article by @Suragch1 I now know that a Uint8List is simply a list of #bytes representing values between 0 and 255.

medium.com/flutter-commun…

In fact, I learned that the typed_data library in dart has types for all sorts of data:

Uint8List = 8-bit chunks
Uint16List = 16-bit chunks
Uint32List = 32-bit chunks
Uint64List = 64-bit chunks
Int8List - 8-bit chunks [-127 and 127]
Int16List - 16-bit chunks [-127 - 127]

#woah

I also learned that you can restructure bit lists using the ByteBuffer intermediary.

Some of the details of the article above were very low level but this tidbit seems useful everywhere.

#flutter #machinelanguage #endianness

Back to the problem at hand, I needed to encrypt my video in chunks. But how big could those chunks be?

The PKCS1 cipher I'm using can handle a maximum of 256 bytes.

#tech #cipher #cyber #security #mobileapps

github.com/leocavalcante/…

Unfortunately, my 1 second test video had ~9000 bytes of data.

I did some more reading to see if encrypting full videos was the norm and I'm pretty sure the answer is yes. #encryption #webdev #readwrite #databases

@RWW

readwrite.com/2020/01/21/how…

Now the question: is PKCS1 the right choice? This time the answer is NO. PKCS1 = Public Key Cryptography Standards and it's used to secure public keys.

What we need is the Advanced Encryption Standard (AES).

@DocuServe #cybersecurity #tech

docuserve.com/blog-post/vide…

In addition to RSA algorithms, the #flutter encrypt package also supports AES encryption. So, we can create an aesEncrypter for each user like this:

The aesEncrypter can then be used to encrypt larger video chunks. Below, I created a StreamTransformer to process the output of the Uint8List stream we get when we open our video file.

Thanks to @gzoechi for the SO answer!

#encryption #flutter #develop

And here's how to send the file stream to StreamTransormer.

Note that this code only works for short videos (~2 seconds) because each input into the stream is 65552 bytes.

#videos #data #streaming

To append the new data to the existing file, you can add the parameter mode: FileMode.append to the writeAsBytes() method.

#mobileapps #softwaredevelopment #code #100DaysOfCode

You'll also need to set the padding value on the AES encrypter to null so that when the encrypted pieces are joined together there's no issues.

#troubleshooting #dev

github.com/leocavalcante/…

To view the video, we have to do the reverse - decrypt the file stream.

#almostthere #leggo

In the end, all videos are stored completely in encrypted form. To finish this off, you would prompt the user for a password (and create the AES encrypter) and use that to reveal the video.

#bam

gfycat.com/memorablepolis…