Code Monkey home page Code Monkey logo

browse-together's Introduction

Browse Together

Browse the web together with your friends on Discord powered by the Embedded App SDK.

Example Image

Progress

  • Shared browser instances
  • Stream browser with static frame rate
  • Support for mouse and keyboard
  • URL navigation
  • Adaptive frame rate based on content
  • Stop browser from randomly crashing

Local Installation

Run Server

export DISCORD_CLIENT_ID=<your_client_id>
export DISCORD_CLIENT_SECRET=<your_client_secret>

cd server
yarn
npx @puppeteer/browsers install chrome@stable
yarn dev

Run Client

export VITE_DISCORD_CLIENT_ID=<your_client_id>
export VITE_WS_URL=wss://<your_client_id>.discordsays.com/ws

cd client
yarn
yarn dev

Expose to the internet

Discord must be able to connect to our server and client over HTTPS. For this we expose both services using the Cloudflare Tunnel Client. You don't need a Cloudflare account for this.

Cloudflare will give you a random unique URL for each service.

# For the client
cloudflared tunnel --url http://localhost:3000

# For the server
cloudflared tunnel --url http://localhost:8080

Configure Discord App

Go to the Discord Developer Portal and select your app. Go to "Activities", enable it, and then go to "URL Mappings".

Here enter the URL Cloudflare has given you for the client as the "Root Mapping" and the URL Cloudflare has given you for the server with the prefix "/ws".

browse-together's People

Contributors

merlinfuchs avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.