Video Streaming with Spring Boot Webflux

3 min readAug 29, 2021

Video Streaming คืออะไร ?

Streaming is the continuous transmission of audio or video files from a server to a client. In simpler terms, streaming is what happens when consumers watch TV or listen to podcasts on Internet-connected devices. With streaming, the media file being played on the client device is stored remotely, and is transmitted a few seconds at a time over the Internet.

ที่มา https://www.cloudflare.com/learning/video/what-is-streaming/

เรามาสร้าง project ด้วย Maven + Spring Boot กันนะครับ

pom ไฟล์จะประมาณนี้

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
   xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
   <modelVersion>4.0.0</modelVersion>
   <parent>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-starter-parent</artifactId>
      <version>2.5.4</version>
      <relativePath/> <!-- lookup parent from repository -->
   </parent>
   <groupId>com.zengcode</groupId>
   <artifactId>spring-webflux-video-streaming</artifactId>
   <version>0.0.1-SNAPSHOT</version>
   <name>spring-webflux-video-streaming</name>
   <description>Demo project for Spring Boot</description>
   <properties>
      <java.version>1.8</java.version>
   </properties>
   <dependencies>
      <dependency>
         <groupId>org.springframework.boot</groupId>
         <artifactId>spring-boot-starter-webflux</artifactId>
      </dependency>

      <dependency>
         <groupId>org.springframework.boot</groupId>
         <artifactId>spring-boot-starter-test</artifactId>
         <scope>test</scope>
      </dependency>
      <dependency>
         <groupId>io.projectreactor</groupId>
         <artifactId>reactor-test</artifactId>
         <scope>test</scope>
      </dependency>
   </dependencies>

   <build>
      <plugins>
         <plugin>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-maven-plugin</artifactId>
         </plugin>
      </plugins>
   </build>

</project>

เอา ไฟล์ video mp4 ไว้ใน resource/videos ของผมจะชื่อ red-line-train.mp4

สร้าง VideoStreamingService

package springwebfluxvideostreaming.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 {

    @Autowired
    private ResourceLoader resourceLoader;

    public Mono<Resource> getVideoStreaming(String titleName) {
        return Mono.fromSupplier(() -> resourceLoader.getResource("classpath:videos/" + titleName + ".mp4"));
    }
}

สร้าง VideoController

package springwebfluxvideostreaming.controller;

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.RestController;
import reactor.core.publisher.Mono;
import springwebfluxvideostreaming.service.VideoStreamingService;

@RestController
public class VideoController {

    @Autowired
    VideoStreamingService videoStreamingService;

    @GetMapping(value = "/video/{titleName}" , produces = "video/mp4")
    public Mono<Resource> getVideo(@PathVariable String titleName) {
        return videoStreamingService.getVideoStreaming(titleName);
    }

}

ต่อไปเรามาสร้างหน้า web เพื่อเรียกดู Video ของเราแบบ streaming กันครับ

สร้าง index.html กันแบบง่ายๆ ใน resources/static กันครับ

<html>
<title>Spring Boot Webflux : Video Streaming Example</title>
<body>
<h2>Red Line Train by Zengcode</h2>
<video src="video/red-line-train" width="720px" height="480px" controls preload="auto" />
</body>
</html>

run application ของเรา

ลองเรียกดู Video ของเราครับ http://localhost:8080/video/red-line-train

ว้าว video ของเราก็จะโหลดมาแบบ Streaming แล้ว ว้าวสำเร็จ ง่ายไหมหล่ะ โอ๊ยยยย ใครจะไม่หลงรัก Spring Boot เอาไปทดลองใช้กันนะครับ

Video Streaming with Spring Boot Webflux

Written by Chiwa Kantawong (Pea)