Scribd
Upload
31 views14 pages

Camera Gallery Project Overview

The document outlines a project involving a camera gallery that utilizes various web APIs, including the Media Stream API for video streaming and the Canvas API for image capturing and filtering. It discusses the use of the IndexDB API for client-side storage and the creation of a database for storing media files. Additionally, it covers technical aspects such as handling asynchronous events, managing database versions, and implementing user interface elements like z-index for layering.

Uploaded by

mritunjayp8140
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
31 views14 pages

Camera Gallery Project Overview

The document outlines a project involving a camera gallery that utilizes various web APIs, including the Media Stream API for video streaming and the Canvas API for image capturing and filtering. It discusses the use of the IndexDB API for client-side storage and the creation of a database for storing media files. Additionally, it covers technical aspects such as handling asynchronous events, managing database versions, and implementing user interface elements like z-index for layering.

Uploaded by

mritunjayp8140
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd

CAMERA GALLERY PROJECT

Video element - autoplay, control ->attribute


./[Link]
Read about ./ in above line

Navigator is a global object that contains information about


browser
medDevices is a browser api to connect to camera , microphone
etc
navigator will return a promise (then is used for that , learn
about promise )
This is for video streaming

In streams data comes in chunk

List of topics learnt in part 1 media stream api


1. Navigator
2. Media recorder
3. We receive data in forms of chunk
4. I learn conversion of data chunk to video
5. Event name for chunks available is “dataavailable”
6. Set timer functionality of browser
PART2 – CANVAS API (HERE I WILL IMPLEMENT IMAGE
CAPTURING AND FILTERING + DOWNLOADING)

video in
collection of frames and in this video I will learn to access those
frames

Canvas api is for drawing / graphics


I will make image from video through canvas api

Image from video


1. First of all we will have canvas element and set its width
and height
2. Getcontext tool to draw image from video
3. Then create link of that image and download it

Z index is used for layers

to add
filter use fillstyle

INDEX
DB API
 Index db is a client side storage api


 Index db api is event driven, it is manged via events
 It is asynchronous, i.e it does not effect norml flow of
code(no effect on ui) thus known as non blocking
 What is blob


 In data base object store is a data type where videos,
audios and images are stored
Steps to create database
1. Create [Link] and import it in [Link]

Here object store is 0 and version is 1


Here we can pass version as parameter too

Note: once if you have given a version say 2 and you cant
update it with lower version i.e 1

When I run it for first time upgraded then db success is printed


Even it is first time upgraded is printed because initially it has
no version
After first time it matches the version:
If version is same = only success is printed
If current version is higher = upgrade -> success
If current version passed is lower = no change in database

Id is for unique identification of object store in db


Transaction must be all success or all fail

To generate unique id
Learn about keypath and version

Google material icons


Google material icon cdn

What is cdn ?

Due to z index of gallery icon is lower, though it is visible


but it is below filter thus on clicking it galley page does not
open

I have fixed it

Javascript to go back to another page

On success and get all


videoResult is taking sometime to load in console so I
applied settimeout to load it immediately

remove the selected


As it will be added dynamically

You might also like