An Interest In:
Web News this Week
- April 20, 2024
- April 19, 2024
- April 18, 2024
- April 17, 2024
- April 16, 2024
- April 15, 2024
- April 14, 2024
Save your web camera recording locally in your browser
This post is the sequel of How to record your web camera only with JavaScript.
Today we will store the video after recording into browser's indexedDB.
So lets start with the already existing code of web camera recording Source code. We will make a new branch for this project:
I know I know I am good at naming!
Next let's create a new file named idb-file-storage.js. This is a wrapper of indexedDB API
Now lets create a new file named indexedDB.js:
In this file we define three functions:
saveRecordedVideoInDB(recordedpieces, stored_name, blob_name)
function that saves the array of recorded piecesretreiveVideoFromDB(stored_name)
returns an array of stored videos in indexedDBremoveStoredVideo(bloburl, videoname, stored_name)
removes a specific video from indexedDB
Now add a script tag with indexedDB script at index.html:
<script type="module" src="js/indexedDB.js"></script>
And finally edit the index.js. Call saveRecordedVideoInDB function when the recording stops.
mediarecorder.onstop = ()=>{ window.saveRecordedVideoInDB([recordedChunks],"storedvideos", "videoname" + datetime).then(() => { download(); }) }
The final index.html and index.js:
index.html:
index.js
If you press f12 and you navigate to Application > Storage > IndexedDb in console panel you will see that a new entry added.
If you want to retrieve it or delete it from html, simply call the retreiveVideoFromDB and removeStoredVideo.
Source code provided below:
Thanks for your time.
Leave a question or comment below.
Original Link: https://dev.to/eneaslari/save-your-web-camera-recording-locally-in-your-browser-10kj
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To