DEV Community

Cover image for Solid-Meet an open source video calling web-app powered by SolidJS
Harsh Mangalam
Harsh Mangalam

Posted on

Solid-Meet an open source video calling web-app powered by SolidJS

Hi, Developers I have created an open source video calling web app using fine grained reactive Javascript framework SolidJS.

I have used native webrtc for peer-to-peer communication and socketio for signalling remote peer.

Working

An initiator can generate meet code and send to person who want to connect.
On the other side person can join the room using the meet code.

Features

  • Toggle your Camera
  • Toggle your Microphone
  • Display connected persons in room
  • Mobile responsive

Technology and Framework

  • SolidJS
  • solid-app-router
  • solid-icons
  • Tailwindcss
  • Webrtc
  • Socketio

SolidJS

I have used many features provided by solidjs to create this web-app. Some of the features are:-

Store

Store provide nested reactivity in solidjs. Store use proxy to track nested reactive data and handles update independently.
I have created Store and added all of the properties inside them which will update independently.

const [store, setStore] = createStore({
    error: null,
    socket: null,
    peer: null,
    currentStream: null,
    currentUser: null,

    remoteStream: null,
    remoteUser: null,
    remoteMuted: false,
    remoteWebCam: true,

    incommingCall: false,
    incommingPayload: null,

    muted: false,
    webCam: true,
  });
Enter fullscreen mode Exit fullscreen mode

Hooks API

In solidjs you can use hook any where in component no restriction like ReactJs.
I have created useMeet hook and added all of the store and action there.
useMeet handle functionality from userMedia to call end like:-

  • Store creation
  • Socket connection
  • userMedia access request
  • call user
  • answer call
  • handle microphone
  • handle camera
  • handle call end
  • handle user connect and disconnect in realtime using socketio

Directives

directive is a syntactic suger over ref. I have created two directive one for video src object handling and another for click outside to close popup and modal.

My video src object handling directive:-

export function getVideoSrc(el, accessor) {
  const mediaStream = accessor();
  if ("srcObject" in el) {
    el.srcObject = mediaStream;
  } else {
    el.src = URL.createObjectURL(mediaStream);
  }
}


Enter fullscreen mode Exit fullscreen mode

el contrains dom element and accessor is a function which will return data whatever i have sent from directive in component

In componnet i have used video directive like this:-

 <video
        autoPlay
        controls={false}
        playsInline
        use:getVideoSrc={stream}
      ></video>

Enter fullscreen mode Exit fullscreen mode

after use: getVideoSrc is a function which provide two argument element and accessor. stream i have sent inside directive is accessible by calling accessor function.

onMount

I have create socket connection and handle userMedia access permission inside onMount. This will run after component render.An in solid js component render only once.

onCleanup

I have disconnect socket inside onCleanup. This run when our component unmount.

Incomming features

  • multiple person
  • screen sharing
  • switch between multiple camera and microphone
  • etc...

Screenshots

Desktop Home
Mobile Home
Desktop meeting screen
Mobile meeting screen
Join meet
Desktop meeting
Mobile meeting

You can explore complete source code inside github repo.

Frontend Solidjs

GitHub logo harshmangalam / solid-meet

An Open source video meeting powered by Solidjs

Usage

Those templates dependencies are maintained via pnpm via pnpm up -Lri.

This is the reason you see a pnpm-lock.yaml. That being said, any package manager will work. This file can be safely be removed once you clone a template.

$ npm install # or pnpm install or yarn install
Enter fullscreen mode Exit fullscreen mode

Learn more on the Solid Website and come chat with us on our Discord

Available Scripts

In the project directory, you can run:

npm dev or npm start

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.

npm run build

Builds the app for production to the dist folder.
It correctly bundles Solid in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!

Deployment

You can…

Backend Nodejs

GitHub logo harshmangalam / nodejs-meet-server

Meeting api server powered by nodejs and socket.io

Top comments (1)

Collapse
 
aquaductape profile image
Caleb Taylor • Edited

That's so cool!! You should create an online demo, that way we can try out it easily x)