JavaScript Live

Open-source JavaScript projects categorized as Live Edit details

Top 13 JavaScript Live Projects

  • shaka-player

    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

    A flexible playground for live editing React components

  • Appwrite

    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

    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

    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

    Chart.js plugin for live streaming data

  • 100ms-web

    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

    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

    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

    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

    National Football League Module for MagicMirror²

  • Foundry-Stream-Module

    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

    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

    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

    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

NOTE: The open source projects on this list are ordered by number of github stars. The number of mentions indicates repo mentiontions in the last 12 Months or since we started tracking (Dec 2020). The latest post mention was on 2022-10-03.

JavaScript Live related posts

Index

What are some of the best open-source Live projects in JavaScript? This list will help you:

Project Stars
1 shaka-player 5,934
2 react-live 3,570
3 obsninja 1,765
4 hedron 432
5 chartjs-plugin-streaming 393
6 100ms-web 92
7 TikTok-Chat-Reader 80
8 digital-canada-ca 46
9 MMM-NFL 22
10 Foundry-Stream-Module 11
11 Agora-Many-to-Many-Live-Streaming-SDK-NG 7
12 TwitchLiveChannels 3
13 Agora-Translated-Transcription 1
Find remote jobs at our new job board 99remotejobs.com. There are 8 new remote jobs listed recently.
Are you hiring? Post a new remote job listing for free.
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