VideoStreamingApp-SpringWebFlux

VideoStreamingApp-SpringWebFlux

Description

The goal of this project is to build a high intensive data streaming application using reactive web programming in Spring WebFlux. A good use case for an intensive data stream is video streaming. One client can send a stream of live video data and other clients (subscribers) can receive the stream. In this application, a user can create a channel to record live video on web browser and other users can stream the live video on web browser. This was achieved with less than a second of latency on the local machine. However, it is not the purpose of this project to discuss video encoding or video quality. The project mainly focuses on the architecture of streaming data from one client to multiple subscribers.

Technologies used

Core/Backend

  Spring WebFlux (Java)
      • Reactive Rest API
      • Reactive WebSockets
      • Security with Json Web Token (JWT)

Database

  MongoDB.

Front-End

  ReactJs, Bulma CSS Framework, and Media Source Extensions for displaying video stream.

Testing

  JUnit5, Mockito, WebTestClient

Running the project

Backend

Import the videostreamingbackend in your favourite IDE. Have Java 1.8 or higher installed. Install MongoDB on your computer. Run main class VideoStreamingApplication as Java application. Server will start at localhost:8080.

Frontend

Open terminal and move into videostreamingreact folder. Do npm install. This will install all dependancies of the application. Then run the following command: npm start. This will start the frontend at localhost:3000/. Go to your browser and enter localhost:3000/. You will land on the following page:

To test 1. Create an account. 2. Create a channel. Allow webcam. 3. Open other tabs. On the home page you will see the created channel. Subscribe to the stream by clicking the channel. 4. On the tab you created the channel start streaming. You will see the video being shown on other tabs

Bugs

There is an error when a new subscriber connects after the streaming has already started. The video cannot be display. This will be fixed in future improvements. Or you can fix it if interested :D.