Webrtc, & web socket based streaming live video streaming and chatting platform. Written in Node, Typescript, and Javascript!

Overview

Live Streaming!!

  • Welcome to my implementation of live streaming along with real time chat. I'm going to make a live streaming platform that will supoort streaming from a single user...aka ME, but will let anyone view it, and interact in a chatroom while I stream a video!

Architecture

Video Streaming

  • Built with Peerjs for webrtc and socketio for websocket.
  • Admin publishing client waits for users to join.
  • When users join they emit an event containing their peerjs ID via websocket, which is relayed to Admin publishing client.
  • The admin publishing client upon recieving the viewer's peerjs client initiates a peer to peer connection to the viewer, and begins streaming audio and video data across the network using webrtc.

Live Chat

  • Purely built over websockets. The live chat does not utilize webrtc.
  • Clients emit messages that are then stored for running a backfill when later users join, this backfill is purged ever 10 seconds when thread size exceeds over 400 messages.
  • Server broadcasts messages, which is a monitored event that a client will respond to by altering it's own state.

Capabilities

  • Authenticated route to access to upload permissions
  • Once logged in I can begin streaming
  • A random user can hit a url to view a live stream session.
  • live stream sessions will be visible only when I am streaming.
  • live stream will be presented with a live chat room!

Technologies

  • Node js, Typescript, Javascript, HTML, CSS, EJS, WebRtc (peer), Webscokets (Socket.io)

How to run this?

  • Have npm installed!
  • npm i -g peerjs
  • Create and set your local env variables: JWT_KEY, USERNAME, PASSWORD
  • npm i
  • npm run start.
  • Access localhost:3000/admin/signin to login and stream
  • Access localhost:3000/ to view livestream and chat!
You might also like...

A style export tool that live edits and exports code ready to copy / paste

A style export tool that live edits and exports code ready to copy / paste

Awesome Title Generator A style export tool that live edits and exports code ready to copy / paste. Features Edits text and live previews it CSS and R

Oct 7, 2022

This is the Full Stack Application that we're building as a part of Praveen's Live Stream.

Community Class Room Intro Motivation Tech Stack Used PreRequisites Installation Instructions Features Marketing Public Pages Basic Design from the Th

Apr 24, 2022

Glam It Up website is built with real live data from the Make up API.

Glam It Up website is built with real live data from the Make up API.

Glam It Up website is built with real live data from the Make up API. The application displays a variety of beauty products such as lipsticks, bronzers, foundation among many other products. You can select any product type that is available and check it's description, price and name.

Jun 7, 2022

A simple Web AI model deployment tool using JavaScript based on OpenCV.js and ONNXRuntime

A simple Web AI model deployment tool using JavaScript based on OpenCV.js and ONNXRuntime

WebAI.js 1. 简介 WebAI.js 是一个基于 OpenCV.js 和 ONNXRuntime 开发的一个 Web 前端 AI 模型部署工具 可通过在线体验网站 Hello WebAI.js 进行快速的体验试用 2. 特性 WebAI.js 支持 HTML script 标签引入和 no

Nov 28, 2022

A tiny package for JavaScript Web App's state management based on RxJS & Immer

A tiny package for JavaScript Web App's state management based on RxJS & Immer

Oct 19, 2022

Companion React+TypeScript code for my Intro to TypeScript EmergentWorks workshop, bootstrapped with yarn + create-react-app! ✨

Getting Started with Create React App This project was bootstrapped with Create React App. Companion repository to https://github.com/JoshuaKGoldberg/

Dec 21, 2022

Online ide where one can run code written in the available language

Online ide where one can run code written in the available language, can choose theme out of 10 themes, can change font size as well as can generate url of their code

Dec 25, 2022

Official website for the Open source community of DCRUST written in NextJS.

This is a Next.js project bootstrapped with create-next-app. Getting Started First, run the development server: npm run dev # or yarn dev Open http://

Apr 9, 2022

Notices on a digital platform are quick and easy to access, reduce a lot of paper waste, and one can get notified about the updates and news.

Notices on a digital platform are quick and easy to access, reduce a lot of paper waste, and one can get notified about the updates and news.

DigitalNoticeBoard - Mobile App - (Still In DEV) An Notice Board App for Students To Stay Connected With The College Updates..! Why a college campus n

Nov 24, 2022
Owner
Hamdaan Khalid
"Nothing is worth doing pointlessly", Marcus Aurelius. Software Engineer with a background in mathematics.
Hamdaan Khalid
Monks and Mages is a TCG-game built on React and socket.io

Monks and Mages Monks and Mages is a trading card-style game inspired by Heroes of Might and Magic / Magic the Gathering. The gameplay is similar to M

Jimmy Li 17 Sep 22, 2022
Next-gen, highly customizable content editor for the browser - based on React and Redux and written in TypeScript. WYSIWYG on steroids.

ReactPage ReactPage is a smart, extensible and modern editor ("WYSIWYG") for the web written in React. If you are fed up with the limitations of conte

null 9.1k Jan 6, 2023
NodeRPG - Turn-based RPG written in TypeScript along with Ink and React

NodeRPG Role-Playing Game inside the terminal with Ink and React! Running in your machine Requirements NodeJS TypeScript Yarn* Everything can be done

Felipe Silva 6 Jul 31, 2022
Mobile app development framework and SDK using HTML5 and JavaScript. Create beautiful and performant cross-platform mobile apps. Based on Web Components, and provides bindings for Angular 1, 2, React and Vue.js.

Onsen UI - Cross-Platform Hybrid App and PWA Framework Onsen UI is an open source framework that makes it easy to create native-feeling Progressive We

null 8.7k Jan 8, 2023
shouganaiyo-loader is a cross-platform Frida-based Node.js command-line tool that forces Java processes to load a Java/JVMTI agent regardless of whether or not the JVM has disabled the agent attach API.

shouganaiyo-loader: Forced Entry for Java Agents shouganaiyo-loader is a cross-platform Frida-based Node.js command-line tool that forces Java process

NCC Group Plc 20 Sep 19, 2022
Annotation-Wizard - a web-based image annotation platform that allows authors to create annotation tasks and annotators to take tasks and annotate images.

Annotation Wizard Annotation Wizard is a web-based image annotation platform. Functionalies User login and register create your own image annotation t

null 2 Aug 12, 2022
Space Traveller hub is a web application that works with the real live data from the SpaceX API

Space Traveller hub is a web application that works with the real live data from the SpaceX API. It's a web application for a company that provides commercial and scientific space travel services.

Roland MWEZE 3 Feb 8, 2022
React hook library, ready to use, written in Typescript.

usehooks-ts React hook library, ready to use, written in Typescript. npm i usehooks-ts Created by Julien Caron and maintained with ❤️ by an amazing te

Julien 2.8k Jan 5, 2023
This is not my code, just trained with "From Scratch - Développement Web" youtube video

React-Countries-API DISCLAIMER FR : Ceci n'est pas mon code, je me suis juste entraîné à partir de la vidéo de From Scratch - Développement Web ! EN :

LejusVDP 1 Jan 4, 2022
Add multiplayer presence (live cursors/avatars) to your react application using yjs and hooks

y-presence Easy way to add presence (live cursors/avatars) to any react application using react hooks. Installation yarn add y-presence # or npm i y-p

Nimesh Nayaju 126 Dec 29, 2022