I am currently in the homestretch here at Telegraph Academy and time has flown during the senior portion of the cohort. I attribute it mostly to working on projects opposed to just sprints and lectures, which is great as I am able to create while applying the vast amount of knowledge I’ve learned. Over the past week and a half we have been working on our pièce de résistance a group project that allows free reign to work with the taught frameworks and technologies or jump into unexplored territory…naturally my group and I agreed to delve into the latter.
My thesis project is a web application that relies heavily on video integration and streaming, which up to this point no student had explored in TGA history. We knew that it wouldn’t be easy but remained confident that it could be tackled and implemented within the amount of time we were allotted. We made it happen and this is how…
Video implementation in our web application touches every element of the our stack which is the NERN (Node.js, Express.js, React.js, and Neo4j) stack. I must note that if you were to try and implement what I have here for you own app don’t be thrown off if you’re not using the exact same stack, this post is about the concept in addition to showing how we did it.
First thing we did is find somewhere to store our video since storing the whole of the video into the database was not an option it was necessary to do some exploring. After much research we decided that Amazon Web Services (AWS) Simple Storage Services (S3) would be best for what we needed to accomplish.
I created a bucket and made a new user with AWS Identity and Access Management (IAM). This is important because once a user is created IAM supplies you with an access key ID and a secret access key that is need to access your bucket. It is not necessary to create an IAM user but it is STRONGLY recommended for security reasons. If you do go the route of making an IAM user then you must give that user access to your bucket. You do this by going to “Permissions” and clicking on “Create User Policy”.
then enter the following:
My suggestion for this part of the process is to test your bucket manually uploading a file (image/video) to see if it makes it into the bucket, make sure the file you uploaded is set to public by clicking the “Set Details” button then clicking “Set Permissions”, checking “Make Everything Public” then clicking “Start Upload”:
if your file is uploaded successfully a http link will be generated. You can access this link simply clicking on the file then clicking the “Properties” tab, you should see the following:
In your html make a simple html5 <video> or <img> with that link as the source.
Below is what renders on the page.
Now that testing is done it is time to get into the nitty gritty. For our app it is essential to post our file into our S3 bucket utilizing our code instead of doing so manually. We used Node.js and Express.js in our backend with addition of S3FS and connect-multiparty (middleware) to do this. Below is how I implemented the back ends connection to my S3 bucket.
*It is assumed you have a working knowledge of how to set up a server using node/express*
upon completion of the back-end it is beneficial to make a post request using Postman as a means of testing.
If everything was implemented correctly you should see the file in your bucket.
Time to tackle the client side of the application. Initially for testing purposes we used a vanilla XMLHTTPrequest to post to the server but because we are using React we did it using an Axios post request.
Below is the XMLHTTPrequest:
Below is the Axios version:
At this point the front end and back-end should be connected. Posting a video from your browser will now land in your S3 bucket for you to do with it what you will. We are currently still working on our project but I look forward to posting it on my main page once it’s finished!
If you have any questions or comments please leave a comment below. I know this is a pretty arduous process for someone who has never delved into this territory so feel free to reach out!