Top 13 JavaScript Live Projects

• shaka-player

  1 5,934 9.4 JavaScript

  JavaScript player library / DASH & HLS client / MSE-EME player

  

  Project mention: Be aware about Piped, the alternative frontend to YouTube | reddit.com/r/degoogle | 2022-02-03

  It uses a video player that was made by Google. It's shaka player: https://github.com/google/shaka-player. You can see a proof of Piped using this video player here: https://github.com/TeamPiped/Piped/blob/master/package.json#L21

• react-live

  0 3,570 6.3 JavaScript

  A flexible playground for live editing React components

  

• Appwrite

  appwrite.io

  sponsored

  Appwrite - The Open Source Firebase alternative introduces iOS support . Appwrite is an open source backend server that helps you build native iOS applications much faster with realtime APIs for authentication, databases, files storage, cloud functions and much more!

  

• obsninja

  124 1,765 9.0 JavaScript

  VDO.Ninja is a powerful tool that lets you bring remote video feeds into OBS or other studio software via WebRTC.

  Project mention: Help with tournament production featuring other streamers | reddit.com/r/Twitch | 2022-10-03

  I don't know if this will work with a tournament of your size but you might want to check out https://vdo.ninja/ and https://versus.cam/. Both are by the same person just for slightly different applications. Those are designed to take the OBS feed from other people and transmit them to you over the web. I've never used either of them though so I can't vouch for how well they actually work. Here is the useful links page in their documentation that you might find useful: https://docs.vdo.ninja/useful-links.

• hedron

  1 432 0.0 JavaScript

  Perform live shows with your three.js creations (by nudibranchrecords)

  

  Project mention: Video from our '2020 lockdown' Acid-House performance using threejs visuals | reddit.com/r/threejs | 2022-08-15

  Visuals are performed by Alex Kempton using his open-source software Hedron, GitHub build over here if interested in trying it out: https://github.com/nudibranchrecords/hedron

• chartjs-plugin-streaming

  0 393 0.0 JavaScript

  Chart.js plugin for live streaming data

• 100ms-web

  2 92 9.8 JavaScript

  Build powerful live applications in hours

  

  Project mention: A guide to building a Virtual Meet App with 100ms and React | dev.to | 2022-05-26

  100ms is a cloud-based platform that empowers you to build video and audio conferencing into your application by utilizing their powerful Rest APIs and SDKs which enables you to set up fully functional real time communication services within the shortest time possible. This is to say, you don't have to reinvent the wheel by building from the ground up.

• TikTok-Chat-Reader

  1 80 7.5 JavaScript

  Website to display chats and gifts in realtime from your TikTok LIVE stream. Demo project for TikTok-Live-Connector library.

  Project mention: How to connect the comments to the words of the game? | reddit.com/r/Tiktokhelp | 2022-04-12

  ​ ​ !< !< ​ !< Level: 1 Score: 0 Attempts: 0 ​ ​ Submit Reset Chats ​ !< ​ >! !< >!!< ​ ​ script.js const userGuess = document.getElementById("user-guess"); const submitBtn = document.getElementById("submit"); const usersWord = document.getElementById("scrambled-word"); const info = document.getElementById("info"); const levelOutput = document.getElementById("level"); const scoreOutput = document.getElementById("score"); const attemptsOutput = document.getElementById("attempts"); const gameContainer = document.getElementById("game-container"); const guessContainer = document.getElementById("guess-container"); const resetBtn = document.getElementById("reset-btn"); ​ ​ ​ let level = 1; let score = 0; let word; let attempts = 0; let correct = 0; ​ const lvlOneWords = [ >! "test"!< ]; ​ const lvlTwoWords = [ >! "test"!< ]; ​ const lvlThreeWords = [ >! "test"!< ]; ​ const lvlFourWords = [ >! "test"!< ]; ​ const lvlFiveWords = [ >! "test"!< ]; ​ const lvlSixWords = [ >! "test"!< ]; ​ const lvlSevenWords = [ >! "test"!< ]; ​ const lvlEightWords = [ >! "test"!< ]; ​ function reset() { >! level = 1;!< >! score = 0;!< >! correct = 0;!< >! attempts = 0;!< >! word = "";!< >! updateBoard();!< >! info.innerHTML = "";!< >! userGuess.value = "";!< } ​ function randomWord(lvl) { >! word = lvl[Math.floor(Math.random() * lvl.length + 1) - 1];!< >! return word;!< } ​ function scrambleWord(word) { >! let letters = word.split("");!< >! let currentIndex = letters.length,!< temporaryValue, randomIndex; ​ >! // While there remain elements to shuffle...!< >! while (0 !== currentIndex) {!< // Pick a remaining element... randomIndex = Math.floor(Math.random() * currentIndex); currentIndex -= 1; ​ // And swap it with the current element. temporaryValue = letters[currentIndex]; letters[currentIndex] = letters[randomIndex]; letters[randomIndex] = temporaryValue; >! }!< ​ >! return letters.join(" ");!< } function updateBoard() { >! scoreOutput.innerHTML = score;!< >! levelOutput.innerHTML = level;!< >! attemptsOutput.innerHTML = attempts;!< } ​ function checkAnswer(guess) { >! console.log(`Correct: ${correct}`);!< >! if (correct == 3) {!< level += 1; correct = 0; >! }!< ​ >! if (attempts == 3) {!< guessContainer.classList.toggle("hidden"); info.innerHTML = "Sorry. You are out of chances. Retry ";!< reset(); >! }!< ​ >! if (guess === word) {!< info.innerHTML = "aCORRECT";!< score += 1; correct += 1; attempts = 0; setLevel(); >! } else {!< info.innerHTML = "Bzzzt! That's not right!";!< score -= 1; attempts += 1; >! }!< ​ >! updateBoard();!< } ​ function setLevel() { >! if (level == 1) {!< randomWord(lvlOneWords); >! } else if (level == 2) {!< randomWord(lvlTwoWords); >! } else if (level == 3) {!< randomWord(lvlThreeWords); >! } else if (level == 4) {!< randomWord(lvlFourWords); >! } else if (level == 5) {!< randomWord(lvlFiveWords); >! } else if (level == 6) {!< randomWord(lvlSixWords); >! } else if (level == 7) {!< randomWord(lvlSevenWords); >! } else if (level == 8) {!< randomWord(lvlEightWords); >! } else if (level == 9) {!< info.innerHTML = "You Win! Great job! You can reset or keep playing.";!< >! }!< ​ >! console.log(`Word: ${word}`);!< >! usersWord.innerHTML = scrambleWord(word);!< } ​ ​ ​ submitBtn.addEventListener("click", function(e) { >! checkAnswer(userGuess.value.toLowerCase());!< >! userGuess.value = "";!< }); ​ ​ ///////// ​ ///// ​ ​ window.addEventListener( >! "keypress",!< >! function(e) {!< if (e.keyCode == 13) { checkAnswer(userGuess.value.toLowerCase()); userGuess.value = ""; } >! },!< >! false!< ); ​ resetBtn.addEventListener("click", function(e) { >! reset();!< >! setLevel();!< >! guessContainer.classList.remove("hidden");!< >! userGuess.value = "";!< }); ​ setLevel(); ​ style.css /* http://meyerweb.com/eric/tools/css/reset/ >! v2.0 | 20110126!< >! License: none (public domain)!< */ /* line 6, ../sass/partials/_normalize.scss */ html1, body1, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { >! margin: 0;!< >! padding: 0;!< >! border: 0;!< >! font-size: 100%;!< >! font: inherit;!< >! vertical-align: baseline;!< } ​ /* HTML5 display-role reset for older browsers */ /* line 27, ../sass/partials/_normalize.scss */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { >! display: block;!< } ​ /* line 31, ../sass/partials/_normalize.scss */ body { >! line-height: 1;!< } ​ /* line 34, ../sass/partials/_normalize.scss */ ol, ul { >! list-style: none;!< } ​ /* line 37, ../sass/partials/_normalize.scss */ blockquote, q { >! quotes: none;!< } ​ /* line 40, ../sass/partials/_normalize.scss */ blockquote:before, blockquote:after, q:before, q:after { >! content: "";!< >! content: none;!< } ​ /* line 45, ../sass/partials/_normalize.scss */ table { >! border-collapse: collapse;!< >! border-spacing: 0;!< } ​ /* line 5, ../sass/styles.scss */ html, body { >! font-size: 16px;!< >! width: 50%;!< >! font-family: "Quicksand", sans-serif;!< >! overflow-x: hidden;!< >! overflow-y: hidden;!< } ​ /* line 13, ../sass/styles.scss */ nav { >! border-bottom: #e18a07 2px solid;!< >! width: 100%;!< >! padding: 0.625em;!< >! display: block;!< >! height: 2em;!< } ​ /* line 20, ../sass/styles.scss */ h1 { >! font-size: 2em;!< >! display: inline-block;!< >! float: left;!< >! padding-left: 1em;!< } ​ /* line 26, ../sass/styles.scss */ #contact { >! font-size: 2em;!< >! display: inline-block;!< >! float: right;!< >! padding-right: 1em;!< } ​ /* line 32, ../sass/styles.scss */ #contact a { >! color: #000;!< } ​ /* line 35, ../sass/styles.scss */ #contact i:hover { >! color: #e18a07;!< >! cursor: pointer;!< } ​ /* line 40, ../sass/styles.scss */ #rules { >! position: absolute;!< >! z-index: 999;!< >! width: 31.25em;!< >! height: 31.25em;!< >! text-align: center;!< >! left: 50%;!< >! margin-left: -200px;!< >! top: 50%;!< >! margin-top: -200px;!< } ​ /* line 51, ../sass/styles.scss */ #rules p { >! margin-bottom: 1.25em;!< } ​ /* line 55, ../sass/styles.scss */ #game-container { >! text-align: center;!< >! margin: 2em auto;!< >! width: 100vh;!< >! height: 80vh;!< } ​ /* line 62, ../sass/styles.scss */ #game-container p { >! display: inline-block;!< >! margin-right: 1em;!< >! margin-bottom: 3em;!< >! font-weight: 500;!< >! font-size: 1.5em;!< } ​ /* line 69, ../sass/styles.scss */ #game-container p span { >! font-weight: 300;!< } ​ /* line 72, ../sass/styles.scss */ #game-container p#info { >! display: block;!< >! text-align: center;!< >! font-size: 2em !important;!< >! height: 2em;!< >! margin-bottom: 1em;!< } ​ /* line 80, ../sass/styles.scss */ #scrambled-word { >! font-size: 3em !important;!< >! font-family: "Anton", sans-serif;!< >! text-transform: uppercase;!< >! display: block;!< >! margin-left: 48px;!< >! margin-bottom: 1em !important;!< } ​ /* line 89, ../sass/styles.scss */ #scrambled-word p { >! display: block;!< >! width: 100%;!< } ​ /* line 94, ../sass/styles.scss */ #user-guess { >! display: block;!< >! width: 20em;!< >! height: 3em;!< >! padding-left: 1em;!< >! margin: 0 auto 1.25em;!< >! border: 1px solid #000;!< >! outline-color: #e18a07;!< >! font-size: 1.1em;!< } ​ /* line 104, ../sass/styles.scss */ small { >! font-size: 0.8em;!< } ​ /* line 107, ../sass/styles.scss */ .lead { >! font-size: 1.2em;!< >! font-weight: 700;!< } ​ /* line 111, ../sass/styles.scss */ .correct, .incorrect { >! font-size: 1.5em;!< >! font-weight: 700;!< } ​ /* line 116, ../sass/styles.scss */ .correct { >! color: green;!< >! display: block;!< } ​ /* line 121, ../sass/styles.scss */ .incorrect { >! color: red;!< >! display: block;!< } ​ /* line 126, ../sass/styles.scss */ .hidden { >! visibility: hidden;!< } ​ /* line 129, ../sass/styles.scss */ button { >! cursor: pointer;!< >! width: 12em;!< >! height: 3em;!< >! outline: none;!< >! text-transform: uppercase;!< >! font-weight: 400;!< >! font-size: 1.1em;!< } ​ /* line 138, ../sass/styles.scss */ #submit { >! background: #fff;!< >! border: 2px solid #e18a07;!< } ​ /* line 143, ../sass/styles.scss */ #submit:hover { >! background: #e18a07;!< >! color: #fff;!< >! transition: 0.2s background;!< } ​ ​ /* line 138, ../sass/styles.scss */ ​ ​ /* line 150, ../sass/styles.scss */ #reset-btn { >! background: #fff;!< >! border: none;!< >! box-shadow: 1px 1px 1px #999;!< } ​ /* line 155, ../sass/styles.scss */ #reset-btn:hover { >! box-shadow: 1px 1px 1px #000;!< >! transition: 0.2s box-shadow;!< } ​ /* line 161, ../sass/styles.scss */ button:active { >! position: relative;!< >! top: 1px;!< } ​ /* line 166, ../sass/styles.scss */ #copyright { >! text-align: center;!< } ​ https://github.com/zerodytrash/TikTok-Chat-Reader API to retrieve chat comments

• talent.io

  www.talent.io

  sponsored

  Download talent.io’s Tech Salary Report. Median salaries, most in-demand technologies, state of the remote work... all you need to know your worth on the market by tech recruitment platform talent.io

  

• digital-canada-ca

  5 46 7.4 JavaScript

  Website for the Canadian Digital Service / Site Web du Service numérique canadien

  

  Project mention: For a change of pace, which CS/IT staff are happy? | reddit.com/r/CanadaPublicServants | 2022-02-18

• MMM-NFL

  0 22 6.5 JavaScript

  National Football League Module for MagicMirror²

• Foundry-Stream-Module

  0 11 2.5 JavaScript

  Implements two-way communication between Foundry VTT and Twitch, allowing for two-way chat plus adds dice rolling requests, a tabbed chat window, a separate dice engine for just for viewers, event handling and several moderation commands directly into Foundry itself, bringing your streamed game to the next level of interactivity!

• Agora-Many-to-Many-Live-Streaming-SDK-NG

  1 7 0.0 JavaScript

  Many to many, live video streaming using the Agora Web SDK NG.

  Project mention: Request to be Promoted during a Live Video Streaming Using The Agora Web SDK | dev.to | 2021-11-03

  We will build on our existing project: Build Your Own Many To Many, Live Video Streaming Using the Agora Web SDK. You can begin by cloning this project’s GitHub repository. You will now have a project that looks like this:

• TwitchLiveChannels

  1 3 8.9 JavaScript

  Twitch Live Channels helps you keep track of who is LIVE out of the channels you follow on Twitch (https://www.twitch.tv/).

  Project mention: I think this Firefox extension for Twitch livestreams deserves far more recognition | reddit.com/r/firefox | 2022-07-20

• Agora-Translated-Transcription

  1 1 2.8 JavaScript

  Web application to create translated transcribed text to and from any language during video calls.

  Project mention: Build A Live Translated Transcriptions Service Within Your Video Call Web App | dev.to | 2021-10-24

  We have successfully made our very own multilingual transcription service inside a web video call application. In case you weren’t coding along or want to see the finished product all together, I have uploaded all the code to GitHub: https://github.com/akshatvg/Agora-Translated-Transcription

JavaScript Live related posts

• Video from our '2020 lockdown' Acid-House performance using threejs visuals
  1 project | reddit.com/r/threejs | 15 Aug 2022
• A guide to building a Virtual Meet App with 100ms and React
  2 projects | dev.to | 26 May 2022
• For a change of pace, which CS/IT staff are happy?
  1 project | reddit.com/r/CanadaPublicServants | 18 Feb 2022
• What do you do for a living in the PS? how does it provide a purpose in your life?
  1 project | reddit.com/r/CanadaPublicServants | 8 Feb 2022
• What's the difference between IT-05 and EX-01
  1 project | reddit.com/r/CanadaPublicServants | 1 Jan 2022
• UX Design / Research Career Advice?
  2 projects | reddit.com/r/CanadaPublicServants | 16 Oct 2021
• How to operate MMM-NFL
  1 project | reddit.com/r/MagicMirror | 10 Sep 2021
• A note from our sponsor - SonarLint
  www.sonarlint.org | 3 Oct 2022

  Up your coding game and discover issues early. SonarLint is a free plugin that helps you find & fix bugs and security issues from the moment you start writing code. Install from your favorite IDE marketplace today. Learn more →

Index

Sponsored

Clean code begins in your IDE with SonarLint

Up your coding game and discover issues early. SonarLint is a free plugin that helps you find & fix bugs and security issues from the moment you start writing code. Install from your favorite IDE marketplace today.

www.sonarlint.org

Do not miss the trending JavaScript projects with our weekly report!