I modified my midterm project so that it can record videos instead of taking photos. I used the mediaRecorder API to accomplish this. So now when you take a short video, it’ll return with a video clip randomly selected the database of video clips collected from people using the site. The API is only supported by Firefox and Chrome right now, so unfortunately this doesn’t work on Safari or mobile.
Saving the videos
Now when the user clicks on the capture button, an event listener runs a function I wrote called “getVideoClip”. In the function, I am getting pieces of the video stream when it becomes available (which is when the user clicks the capture button and the ‘dataavailable’ event gets triggered) and pushing into an array called chunks. I’ve set the ‘stop’ function to run after four sections. Then in the stop function, I create a blob that contains the video data. Finally, I send the blob to the server where it stores the video file. The way the server handles the videos is the same as how my midterm project handled images.
All of the Code
Thanks for reading! All the code is available here.