DEV Community

loading...
Cover image for BookMyGIG - live gigs for live audiences

BookMyGIG - live gigs for live audiences

manojnaidu619 profile image Manoj Naidu ・4 min read

As the pandemic broke out, Shows/events were called off across the globe. This has impacted the creators severely and made them sit idle at home. This is when I thought of building something which helps creators make some penny online from their fresh content.

BookMyGIG is a platform where creators/artists perform live online shows(could be related to Dance, Fitness, Comedy, Plays, Wokshops, Concerts and the list goes on...) for live audiences. There is also a chat section, where the users who are part of the same show can chat in realtime while they are watching it.

Submission Category:

Exciting Experiments

Demo

  • Hompage with monetization support

Hompage with monetization support

  • Creator gig registration

Creator gig registration

  • Streaming credentials

Streaming credentials

  • Streaming page with no monetization

Streaming page with no monetization

  • Streaming page with monetization

Streaming page with monetization

  • Stream session

Stream session

  • Realtime chat demo

Realtime chat demo

How it Works in a nutshell

  • Creator's perspective

    • Registers for a new show/event by filling out gig registration form, where finally needs to provide wallet pointer to accept the micro-payments.
    • After successful registration, OBS credentials are provided to start the live stream.
  • User's perspective

    • Goes through the list of registered shows/events on homepage.
    • Gets tickets/access to gigs by making successful online payment.
    • Sits back and enjoys the live show 🍿πŸ₯€.
    • Not just that, users who are part of the same show can chat with each other in realtime with the help of realtime chatbox.
  • But, how's monetization working under the hood?

    • When the user is in streaming page (creator's live stream section), the micro-payments are sent to creator's wallet πŸ’°.
    • When the user is anywhere in the site other than creator's streaming page, BookMyGIG is making money πŸ’΅.

index.html looks like...

  <!DOCTYPE html>
  <html>
   <head>
     .....
     <meta name="monetization" content="$BOOKMYGIG_WALLET_POINTER">
     .....
   </head>
   <body>
     .....
   </body>
  </html>

and the JS code looks something like this...

window.addEventListener('load', () => {
  const inStreamPage = window.location.pathname.startsWith('/gig/')
  if(inStreamPage){
    const metaTag = document.querySelector('meta[name="monetization"]')
    metaTag.setAttribute("content", '$CREATOR_WALLET_POINTER')
  }
})

How I built it

Framework/Technologies used :

4 Pillars of the application :

  • REDIS is used to store data, as it is an in-memory database which makes our app incredibly fast and the process of exchanging data back and forth is seamless. Our application uses different blend of built-in data structures to store and retreive data in an efficient manner.

  • RTMP provides a bidirectional message multiplex service over a reliable stream transport, such as TCP, intended to carry parallel streams of video, audio, and data messages, with associated timing information, between a pair of communicating peers. More about RTMP could be learned here.

    • When a creator lists a gig, he/she is given a unique streaming ID which is used to identify the creator on the backend and allocate a separate channel, where creator could live stream and also the audiences of that particular show are isolated from the rest of the channels/shows.
    • As soon as the creator hits start stream button, the video data is transported to media server, where it is encoded to different formats. In our case we use flv, which is a file format used by Adobe Flash Player to store and deliver synchronized audio and video streams over the Internet.
    • Later, on the client side we use a flvjs plugin to render the video in realtime.
  • REALTIME CHAT is accomplished using socket.io, which is a library to abstract the WebSocket connections. It enables realtime, bi-directional communication between web clients and servers.

    • When a client types the message and clicks send, it is sent to server and is then broadcasted to all the connected clients in the same room.
    • The messages that gets exchanged within a room is isolated from the outside world.

Also, we are using Redis pubsub indirectly as socket.io internally relies on it to achieve the realtime two-way communication.

  • Web-Monetization gives a special flavour to our product. Apparently, this is one of the best ways to monetize the content by not annoying the users with those flashy banner ads. Let us see how it is being used?
    • Creator makes money when...
      • User buys the access to the show.
      • User Streams the show(through micro-payments).
    • BookMyGIG makes money when...
      • User is anywhere in the site(Other than the show streaming page).

Challenges I ran into

  • Handling creator data in the backend and storing it efficiently using built-in Redis data structures.

  • Fetching all the shows asynchronously(using promises), and resolving them was tricky.

  • Figuring out a way to load & play the live stream on the browser without clashing between other sessions was really challenging.

Accomplishments that I'm proud of

I could successfully able to hook-up all the different parts of the application together and come up with the working end product.

What I learned

This was the first time having my hands-on experience with Redis, Socket.io, RTMP, Web-Monetization...It was a lot of fun 😁

Link to Code

GitHub logo manojnaidu619 / bookmygig-frontend

ReactJS frontend of bookmygig

BOOKMYGIG

BookMyGig Logo

This is the frontend part, checkout the backend here

πŸ“Œ Click on DEV logo below to view detailed post

Manoj Naidu's DEV Profile

Inspiration

As the pandemic broke out, Shows/events were called off across the globe. This has impacted the creators severely and made them sit idle at home. This is when I thought of building something which helps creators make some penny online from their fresh content.

BookMyGIG is a platform where creators/artists perform live online shows(could be related to Dance, Fitness, Comedy, Plays, Wokshops, Concerts and the list goes on...) for live audiences. There is also a chat section, where the users who are part of the same show can chat in realtime while they are watching it.

How it Works in a nutshell

  • Creator's perspective

    • Registers a new show/event by filling out gig registration form, where finally needs to provide wallet pointer to accept the micro-payments.
    • After successful registration, OBS…

Additional Resources/Info

Discussion

pic
Editor guide