StreamOn

A Project Report

Submitted by:

Asmit Tyagi (2025666)

Pranav Sharma (2025691)
Kartik Goyal (2025681)
Dilpreet Sandhu (2025672)
in partial fulfilment for the award of the degree
of

BACHELOR OF TECHONOLOGY
IN

COMPUTER SCIENCE AND ENGINEERING

at

I.K. GUJRAL PUNJAB TECHNICAL UNIVERSITY

MOHALI CAMPUS-1
Aug-Nov 2023
 CERTIFICATE

This is to certify that the project titled “StreamOn” is the bonafide work carried under my
supervision, by Asmit Tyagi, Kartik Goyal, Pranav Sharma and Dilpreet Singh, a student
of BTech (CSE) of I.K. GUJRAL PUNJAB TECHNICAL UNIVERSITY, MOHALI
CAMPUS-1, Punjab (India) during the academic year 2023-24, in partial fulfilment of the
requirements for the award of the degree of Bachelor of Technology (Computer Science and
Engineering).

Signature

Guide Name
Dr Neeraj Mohan
Place: I.K Punjab Technical University, Mohali Campus-1
Date:
 Acknowledgement

We would like to thank our teacher Sir Neeraj Mohan who kept backing us up in all the times.
We would also like to thank for his guidance and encouraging us to work hard and smart.
Special Mention - Akshay Kumar: A special mention goes to Akshay Kumar, whose
unwavering support and assistance were invaluable whenever our team encountered
challenges. His guidance and aid significantly contributed to overcoming obstacles, and we
deeply appreciate his help throughout the project. I deeply appreciate the collective support
and efforts of everyone mentioned above. Their contributions were instrumental in making
this project a reality. We grateful to the God Almighty who provides all the resources of every
kind to us, so that we make their proper use for the benefit of mankind. May He keep
providing us with all the resources, and the guidance to keep helping the humanity.
 Table of Contents

Chapter 1 Project Profile

1.1 Project Introduction
1.2 Scope and objectives

Chapter 2 System Study and Problem formulation

2.1 Data Analysis
2.2 Proposed System
2.3 Advantages of proposed System-
2.4 Feasibility study- 2.4.1 Technical 2.4.2 Operational, 2.4.3 Economic
2.5 System requirements
Chapter 3 Project Plan
3.1 Team Structure
3.2 Programming languages and development tools
3.3 Object oriented design \
Chapter 4 structured analysis and structured design
4.1 Data Flow Diagram
Chapter 5 Detailed Design
5.1 Design Strategy
5.2 Module Design
5.3 Interface Design
Chapter 6 Testing and Implementation
6.1 System Testing
Chapter 7 Project legacy
7.1 Current status of project
7.2 Remaining areas of concern
7.3 Technical and managerial lessons learnt.
7.4 Future recommendations
 CHAPTER -1

1.INTRODUCTION

In today's digital age, the way we consume entertainment and information has undergone a
significant transformation. Video streaming platforms have become the go-to destination for
millions of viewers worldwide, offering a diverse array of content at their fingertips. Our
synopsis delves into the fascinating world of video streaming, exploring the evolution,
impact, and future possibilities of this dynamic industry.

The Project entitled “STREAM ON ” is an application that allows the users to add videos.
The users those who wish to add videos, can register for the website and get the UserID and
password. Video Streaming is a web-based application allow the users to browse the videos at
same time. It provides the user up to date information at any appropriate location.

1.1 Stream On primarily target :

⚫ Content Creators: Individuals and teams who produce a wide range of content, including
films, TV shows, documentaries, vlogs, educational videos, and more.
⚫ Viewers and Subscribers: People looking for a diverse array of entertainment and
information content, including movies, series, live events, tutorials, and niche interests.
⚫ Advertisers and Marketers: Brands and marketing professionals seeking to promote
products and services to a large and engaged online audience.
⚫ Entrepreneurs and Startups: Business-minded individuals interested in launching their own
streaming platforms, content production companies, or tech solutions for the video streaming
industry.

The target audience for a video streaming platform is diverse and spans a wide range of
interests, industries, and roles. Tailoring the platform to meet the needs and expectations of
these various user groups is essential for success in this highly competitive industry.
1.2 OBJECTIVE & SCOPE

Stream On Objectives are :

The primary objectives of developing "StreamOn" are as follows:

1. Create an Innovative Video Streaming Platform: Develop a user-friendly and dynamic video
streaming platform that provides an engaging and seamless experience for users to access a wide array
of video content.

2. Offer Diverse Content Selection: Curate and organize videos from various sources, including
APIs and YouTube, into categorized sections (e.g., recent uploads, genres like romance, crime, drama,
comedy) to cater to diverse user preferences.

3. Enhance User Experience and Accessibility: Implement an intuitive user interface and responsive
design to ensure the platform is accessible across multiple devices, providing an immersive viewing
experience for users.

4. Integrate Secure User Authentication: Implement a robust login and signup system to secure user
accounts and enable personalized features, ensuring user data privacy and confidentiality.

5. Utilize Cutting-Edge Technologies: Employ modern web development technologies such as

React, Redux, and Axios to efficiently manage data, state, and API interactions, ensuring a scalable
and high-performance platform.

6. Lay the Foundation for Future Expansion: Develop a solid foundation that allows for scalability,
potential feature enhancements (e.g., search functionality, user profiles, comments, ratings), and
seamless integration of new content sources or partnerships.

Overall, the objective of "StreamOn" is to create a comprehensive video streaming platform that
prioritizes user experience, content diversity, security, and adaptability to cater to the evolving needs
of video enthusiasts.
Stream On Scope:

The scope of the " StreamOn " project encompasses several key aspects:

1. Technological Scope:

Frontend Technologies: Utilization of HTML, CSS, JavaScript, React, JSX to create a dynamic user
interface and enable user interactions.

State Management: Implementation of Redux for efficient management of application state.

Data Handling: Usage of Axios for making HTTP requests and managing data retrieval from
external sources.

2. Data Sources:

APIs: Inclusion of specific APIs to fetch video-related data and content.

YouTube Integration: Incorporation of content sourced from YouTube to expand the available video
library.

3. User Base:

Target Audience: Consideration of a diverse user base with varying preferences in video content
consumption.

Limitations:

Time Constraints: Adherence to specific project timelines impacted the depth and breadth of feature
implementation.

Technological Constraints: Adaptation to certain limitations in utilizing specific technologies or

tools.

Scope Constraints: Deliberate exclusion of certain functionalities due to project constraints and
priorities.
 CHAPTER -2

2.1 Data Analysis

1. Data Sources Analysis:

The data sources for "StreamOn" encompass a variety of sources, including multiple APIs and
integration with YouTube. APIs contribute a diverse range of data, such as video metadata,
categories, and user-related information. The integration with YouTube significantly expands the
platform's video library, enriching the available content across genres and categories.

2. Current System Assessment (if applicable):

As this project constitutes a new development, there is no existing system to assess. "StreamOn" is
designed as a ground-up development initiative aimed at delivering a comprehensive video
streaming platform.

3. Proposed System Enhancements:

The proposed enhancements for "StreamOn" are centered around improving user experience,
scalability, security, and technological robustness. These enhancements include refining the user
interface for intuitive navigation, incorporating personalized recommendations, ensuring seamless
video playback, and implementing stringent security measures to protect user data. Additionally,
strategies for scalability have been integrated to accommodate future content expansion and user
base growth.

4. Rationale for Technological Choices:

The selection of technologies for "StreamOn" was driven by their capacity to fulfill project
objectives effectively. React was chosen for its component-based architecture, facilitating
dynamic UI elements and ensuring a responsive interface. Redux was implemented for state
management, enabling efficient data handling and seamless updates across the platform. Axios
was preferred for its versatility in making HTTP requests, integrating various data sources, and
managing API interactions.

5. Summary of Proposed System:

In summary, the proposed system enhancements for "StreamOn" aim to significantly elevate user
experience, bolster security measures, ensure scalability for future expansion, and leverage
modern technologies to optimize performance. These enhancements collectively contribute to the
overarching goal of creating a robust and user-centric video streaming platform.
2.2 PROPOSED SYSTEM

Video Streaming Platform with

o User-friendly interface
o On-demand video streaming platform
o Registration
o Watchlist Feature and Extra Feature

2.2.1 Advantages of proposed System:

o Global Reach: Content can be accessed by a worldwide audience, providing
exposure to a broader demographic.

o Diverse Monetization Options: Creators can generate revenue through subscription

models, advertising, pay-per-view, and merchandise sales.

o Analytics and Insights: Platforms offer detailed analytics to understand audience

behavior and preferences, aiding in content optimization.

o Flexibility: Creators have control over their content, release schedules, and branding,
fostering creativity and independence.

o Audience Interaction: Direct communication with viewers through comments, live

chats, and social media interactions

.2.3 Feasibility Study:

Our Basically Target Audience

 The target audience for this Platform is primarily:

o Tech specialist.: Tech specialist.requiring specific technology and features.

o Professionals: Professionals who are targeting doctors, lawyers, or other

professionals to create specific video content for niche audiences.

o Content preferences: Focusing on binge-worthy series, niche content, or live events

caters to viewers with those specific preferences.

o Global audiences: Platforms with multilingual content or global expansion strategies

target international viewers.
2.4 Team

The team for this website will be composed of skilled individuals who are experts in the creative
field. The team will have a variety of skills, including:

• Design
• Developer
• Content Manager

Time Commitment
The team will commit 10 hours per week to the development and maintenance of the website.

Focus
• The main focus of the Video Streaming will be on the Platform which provide users with
resources to help them to view,content,upload their own video. The video will also provide
users with a platform to Showcase their business ideas,creativity, Find creators who can help
them to achieve their goals.

2.5 FACILITIES REQUIRED FOR PROPOSED WORK

2.5.1 Hardware Requirements:

• Processor: Minimum 2 GHz; Recommended 2.4GHz or more.

• Ethernet connection (LAN) OR a wireless adapter (Wi-Fi).

• Hard Drive: Minimum 32 GB; Recommended 64 GB or more.

• Memory (RAM): Minimum 4 GB; Recommended 8 GB or above.

2.5.2 Software Requirements:

• Windows OS

• VS Code

• GitHub

• MongoDB Compass

• Jupyter notebook
 CHAPTER -3

3.1 Team Structure

Team structure of our Project:

Front end:
 Pranav Sharma
 Kartik Goyal
 Asmit Tyagi

API Work:
 Pranav Sharma
 Kartik goyal

Back End :
 Asmit Tyagi
 Dilpreet Singh

The Content Writer is responsible for writing the website's content. They are
responsible for researching topics, writing articles, and editing content.

The Web Developer is responsible for developing the website's code. They are
responsible for writing HTML, CSS, and JavaScript code.

A front-end developer is a software developer who develops the user interface (UI) of a
website or web application. They use HTML, CSS, and JavaScript to create the look and
feel of a website, as well as its interactive elements.

A back-end developer is a software developer who builds the server-side of a web

application. They are responsible for developing the code that runs on the server, which is
responsible for processing data, storing information, and generating the responses that users
see on the front-end. Back-end developers typically use programming languages such as
Java, Python, or Ruby, and they must have a strong understanding of database systems and
web application architecture.
3.2 Programming languages and development tools
Here are the programming languages and development tools that we use:

 Programming languages:
o HTML
o CSS
o JavaScript
o MongoDB
 Development tools:
o Visual Studio Code
o Github

These tools are essential for our development process. They allow us to write code, debug
code, test code, and deploy code. They also make it easy to collaborate with other
developers.

We use HTML to create the structure of our websites. We use CSS to style the appearance
of our websites. We use JavaScript to add interactivity to our websites. We use MongoDB
as a database for our websites.

We use Visual Studio Code as our IDE. We use Git for version control. We use GitHub
for hosting our code. We use Docker for containerization.

These tools help us to create high-quality websites that are both user-friendly and efficient.
 . CHAPTER-4

4.1 Data flow diagram

A data flow diagram (DFD) is a graphical representation of the flow of data through a process or system.
It's a visual tool used to analyze, design, and document systems, making complex processes easier to
understand.
Here are the key components of a DFD:
 Entities: These are external sources and destinations of data, like users, databases, or external
systems.
 Processes: These are the steps or transformations that data undergoes within the system.
 Data flows: These are the arrows that show the direction and movement of data between entities
and processes.
 Stores: These are the places where data is stored within the system, like databases or files.

4.2 Data flow diagram (DFD)

 4.3 Uml Diagrams

UML stands for Unified Modeling Language. UML is a language for specifying, visualizing and
documenting the system. This is the step while developing any product after analysis. The goal
from this is to produce a model of the entities involved in the project which later need to be built.
The representation of the entities that are to be used in the product being developed need to be
design.

4.4 Use case Diagrams:

Use case diagrams model behavior within a system and helps the developers understand of what
the user required. The stick man represents what’s called an actor.
An actor represents an outside entity- either human or technological. In this example its human
(Stick man). Notice the curved rectangle on the diagram this represents the system boundary
everything inside that is part of that system, and everything outside are actors (basically not part
of system).
4.5 Sequence Diagram:

The purpose is to show the of functioning through a use case. In other Words, we call it mapping
processes in terms of data transfers from the actor through corresponding objects.

Figure 4. Sequence Diagram for admin

Figure 5. Sequence diagram for user

 To represent the logical flow of data with respect to a process.

 It must be remembered that the sequence diagram display Objects and not the classes.
Above are the sequence diagrams of the user and admin as shown in figure 4 and figure 5.
 CHAPTER-5

Design Strategies:

1. User-Centric Design Approach:

Our design strategies for "StreamOn" were rooted in extensive user research methodologies,
including surveys and user interviews. This allowed us to develop detailed user personas
representing diverse user demographics, guiding our design decisions to ensure a platform that
meets various user needs effectively.

2. Responsive and Intuitive Interface:

The platform's design prioritizes responsiveness, ensuring seamless user experiences across
devices. Our intuitive navigation design facilitates easy exploration and content discovery,
enhancing user engagement and satisfaction.

3. Content Organization and Categorization:

A hierarchical structure was implemented to organize content systematically, allowing users to
browse videos based on categories, genres, or preferences. Additionally, the integration of robust
search functionality enables efficient content discovery.

4. Visual Design Elements:

Careful consideration was given to UI elements, leveraging suitable colors, typography, and icons
to establish a consistent visual identity and user-friendly interface. Visual hierarchy was
meticulously crafted to guide users' attention to essential elements and functionalities.

5. Accessibility and Inclusivity:

Our design adheres to accessibility standards (WCAG guidelines) to ensure inclusivity, making
the platform accessible to users with diverse abilities. Moreover, inclusivity considerations were
embedded in design decisions to cater to various user demographics and preferences.

6. Testing and Iterative Design:

Usability testing was conducted rigorously, allowing us to gather valuable user feedback and
iterate upon design elements. The iterative design process enabled continuous improvements
based on user insights and testing results.

7. Technology-Driven Design Choices:

The utilization of modern technologies such as React, Redux, and Axios significantly influenced
our design choices. These technologies facilitated a more efficient and interactive user experience,
while design strategies were implemented to ensure scalability for future expansions and
integrations.
Design Strategies for Modules:

1. Home Module:

- Personalized Recommendations: Implement a section showcasing personalized video

recommendations based on user history or preferences.
- Featured Content: Highlight featured or trending videos to capture user attention and
encourage exploration.
-Clear Navigation: Ensure easy access to other modules (Movies, Videos) with clear and
prominent links or buttons.

2. Movies Module:

- Category Thumbnails: Utilize visually appealing thumbnails for each movie category
(romance, crime, drama, comedy) to entice user engagement.
- Detailed Movie Information: Display comprehensive details for each movie, including
synopsis, ratings, duration, and genre tags for easy decision-making.
-Sorting and Filtering: Implement sorting and filtering options to allow users to refine movie
searches based on various criteria like release date or popularity.

3. Video Page:

- Player Interface: Design an intuitive video player interface with standard playback controls
for smooth user interaction.
- Related Videos: Include a section showcasing related videos to encourage continued viewing
and engagement.
- Comments and Ratings: Implement sections for user comments and ratings, fostering user
interaction and feedback.

4. Authentication Module:

- Simplified Sign-up/Login: Design a straightforward and intuitive sign-up/login interface with

minimal user input for a seamless experience.
- Error Handling: Provide clear and concise error messages for incorrect login attempts or
registration errors to guide users effectively.
- Password Recovery: Include a password recovery mechanism to assist users in regaining
access to their accounts easily.
 CHAPTER 6.

Interface Design: -

Home

Login/Sign-Up
Content

Video Player
Download & Share

LogOut

CHA
PTER -
7
3.1 Current status of project:
Seventy percent of the work has been completed, marking a significant milestone in our project. This
achievement underscores the dedication and effort put forth by our team. As we approach this
substantial completion point, we are not only nearing the finish line but also gaining valuable insights
and experience. The progress so far reflects our commitment to delivering a high-quality result.
However, it's important to acknowledge that the remaining thirty percent is equally crucial, often
involving final refinements, testing, and verification. With this accomplishment as motivation, we are
well-positioned to successfully navigate the remaining stages and achieve our project's objectives with
confidence and determination.

3.2 Remaining areas of concern:

Here are the remaining are of our website are as follows:
Data Fetch From API
• Obtain API Access.

UI Design
 Homepage and Navigation:
 Content Thumbnails:

Extra Features
User Recommendation

3.3 Technical and managerial lessons learnt:

During the Project we have learnt various lesion like:

• How a real world project are build.
• How to handle complexities.
• How to make collaboration in team members.
• How to make Video Streaming Platform.

3.4 Future recommendations:

• Improvement according to the dynamic world.
• New Features as possible.
 .BIBLIOGRAPHY

Bibliography for the Video Streaming

Books
 Le, Hung T., Hai N. Nguyen, Nam Pham Ngoc, Anh T. Pham, and Truong Cong Thang. "A Novel
Adaptation Method for HTTP Streaming of VBR Videos over Mobile Networks." Mobile
Information Systems
 Exarchakos, George, Luca Druda, Vlado Menkovski, and Antonio Liotta. "Network analysis on
Skype end-to-end video quality
Wahl, Mary. "Full Stream Ahead: Designing a Collection Development Workflow for Streaming Video
Content.

Articles
o The Future of Video Development by Alessandro Biesuz (2022)
o Building a Cross-Platform by Google (2023)
o Designing a User-Friendly Mobile App by Nielsen Norman Group (2023)
o Security Best Practices for Platform by OWASP (2023)
o Efficient Video Development Practices by (2023)
9