Spring boot video streaming example-HTML5

Hello everyone, Today we will learn how to stream MP4 video using Spring Boot and Spring Web Flux. The Source code download link is provided at the end of this post.

New,

• Quarkus Practice

User Interface 

Project Structure:

Gradle(build.gradle)

plugins {
   id 'org.springframework.boot' version '2.5.4'
   id 'io.spring.dependency-management' version '1.0.11.RELEASE'
   id 'java'
}

group = 'com.knf.demo'
version = '0.0.1-SNAPSHOT'
sourceCompatibility = '11'

repositories {
   mavenCentral()
}

dependencies {
   implementation 'org.springframework.boot:spring-boot-starter-webflux'
   testImplementation 'org.springframework.boot:spring-boot-starter-test'
   testImplementation 'io.projectreactor:reactor-test'
}

test {
   useJUnitPlatform()
}

Service (VideoStreamingService.java)

package com.knf.demo.service;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.core.io.Resource;
import org.springframework.core.io.ResourceLoader;
import org.springframework.stereotype.Service;
import reactor.core.publisher.Mono;

@Service
public class VideoStreamingService {

    private static final String FORMAT = "classpath:mp4/%s.mp4";

    @Autowired
    private ResourceLoader resourceLoader;

    public Mono<Resource> getVideo(String title) {
        return Mono.fromSupplier(() -> this.resourceLoader.
                                   getResource( String.format(FORMAT, title)));
    }
}

Rest Controller

We indite a controller class to handle requests emanating from the client. 

package com.knf.demo.controller;
import com.knf.demo.service.VideoStreamingService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.core.io.Resource;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestHeader;
import org.springframework.web.bind.annotation.RestController;
import reactor.core.publisher.Mono;

@RestController
public class VideoStreamingController {

    @Autowired
    private VideoStreamingService service;

    @GetMapping(value = "video/{name}", produces = "video/mp4")
    public Mono<Resource> getVideo(@PathVariable String title, 
                              @RequestHeader("Range") String range) {
          return service.getVideo(title);
    }
}

Configuration (EndPointConfig.java)

package com.knf.demo.config;
import com.knf.demo.service.VideoStreamingService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.core.io.Resource;
import org.springframework.http.MediaType;
import org.springframework.web.reactive.function.server.RouterFunction;
import org.springframework.web.reactive.function.server.RouterFunctions;
import org.springframework.web.reactive.function.server.ServerRequest;
import org.springframework.web.reactive.function.server.ServerResponse;
import reactor.core.publisher.Mono;

@Configuration
public class EndPointConfig {
    @Autowired
    private VideoStreamingService service;

    @Bean
    public RouterFunction<ServerResponse> router(){
        return RouterFunctions.route()
                .GET("video/{name}", this::videoHandler)
                .build();
    }

    private Mono<ServerResponse> videoHandler(ServerRequest serverRequest){
        String title = serverRequest.pathVariable("name");
        return ServerResponse.ok()
                .contentType(MediaType.valueOf("video/mp4"))
                .body(this.service.getVideo(title), Resource.class);
    }
}

Main Class

package com.knf.demo;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class SpringWebfluxVideoStreamingExampleApplication {

   public static void main(String[] args) {
      SpringApplication.
                run(SpringWebfluxVideoStreamingExampleApplication.class, args);
   }
}

index.html

<!doctype html>

<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/

                                                   dist/css/bootstrap.min.css">

    <title>Spring WebFlux Video Streaming</title>
</head>
<body>

<div class="container">
    <h2>Spring WebFlux Video Streaming Example</h2>
    <video src="video/sample_960x540" width="750px" 

                                  height="500px" controls preload="none">

    </video>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/

                                                  3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/

                                            js/bootstrap.bundle.min.js" ></script>

</body>
</html>

Run

$ mvn spring-boot:run

Access the URL in  the browser: http://localhost:8080/

Download the source code

$ git clone:

 https://github.com/knowledgefactory4u/KnowledgeFactory.git 

More related topics,

• Building Reactive Rest APIs using Spring Boot, WebFlux, and Reactive MongoDB

• Building Reactive CRUD APIs Using Spring WebFlux & R2DBC

• Spring Boot - WebFlux - Video Streaming example

• Spring Webflux File Upload (Single/Multiple)- REST API Example

• Spring Webflux File Download - REST API Example

• Kotlin + Spring Webflux File Upload (Single/Multiple)- REST API Example

• Kotlin + Spring Webflux File Download - REST API Example

• Kotlin - Spring Boot - WebFlux - Video Streaming example

• Spring + Groovy Templates CRUD Example

• Spring Boot + FreeMarker + JPA - CRUD example

• Spring Boot + Mustache + JPA - CRUD example