[feat] 썸네일 만들기 (#149)

* fix: nickname 리턴

* fix: platform=linux/amd64 추가

* feat: thumbnail 생성

* feat: ThumbNail.jpg S3 업로드

* feat: thumbnail encoding server에서 만드는 거로 수정

* feat: thumbnail return API 생성

* feat: thumbnail api 연결

* feat: thumbnail info streams API 에서 가져오기

* fix : 리뷰반영

* fix : 리뷰반영

* fix : .DS_Store 삭제

* fix: camelCase로 변경

* fix: 리뷰반영

.gitignore

@@ -3,3 +3,4 @@ node_modules
 /.idea
 server/.DS_Store
 *.pem
+.DS_Store

docker-compose.yml

@@ -2,6 +2,7 @@ version: '3'
 
 services:
   db:
+    platform: linux/amd64
     image: mysql
     env_file: .env
     networks:
@@ -14,6 +15,7 @@ services:
       - ./server/api-server/sql:/docker-entrypoint-initdb.d
 
   redis:
+    platform: linux/amd64
     image: redis
     env_file: .env
     networks:
@@ -22,6 +24,7 @@ services:
       - 6379:6379
 
   api-server:
+    platform: linux/amd64
     depends_on:
       - db
       - redis
@@ -50,6 +53,7 @@ services:
 
   rtmp-server:
     build: ./server/rtmp-server
+    platform: linux/amd64
     networks:
       - custom_network
     ports:
@@ -59,7 +63,8 @@ services:
       STREAM_KEY_CHECK_URL: http://host.docker.internal:3000/stream-keys
 
   encoding-server:
-    image: efriandika/streaming-server
+    image: jmhee3410/gbs:2.0
+    platform: linux/amd64
     privileged: true
     env_file: .env
     networks:
@@ -76,6 +81,7 @@ services:
       AWS_S3_URL: ${AWS_S3_URL}
 
   front:
+    platform: linux/amd64
     build: ./client
     networks:
       - custom_network

server/api-server/package.json

@@ -34,6 +34,7 @@
     "@nestjs/typeorm": "^10.0.1",
     "@nestjs/websockets": "^10.2.10",
     "@socket.io/redis-adapter": "^8.2.1",
+    "@types/aws-sdk": "^2.7.0",
     "axios": "^1.6.2",
     "bcrypt": "^5.1.1",
     "connect-redis": "^7.1.0",

server/api-server/src/app.module.ts

@@ -8,6 +8,7 @@ import { ConfigModule } from '@nestjs/config';
 import { AuthModule } from './auth/auth.module';
 import { ChatModule } from './chat/chat.module';
 import { LoggerMiddleware } from './common/middleware/logger.middleware';
+import { ThumbnailsModule } from './thumbnails/thumbnails.module';
 
 @Module({
   imports: [
@@ -24,6 +25,7 @@ import { LoggerMiddleware } from './common/middleware/logger.middleware';
       autoLoadEntities: true,
       synchronize: true,
     }),
+    ThumbnailsModule,
     UsersModule,
     StreamsModule,
     AuthModule,

server/api-server/src/streams/dto/read-stream-detail.dto.ts

@@ -4,7 +4,7 @@ export class ReadStreamDetailDto {
   readonly title: string;
   readonly category: string;
   readonly viewer: number;
-  readonly thumbnail: string;
+  readonly thumbnail: { ContentLength: number; thumbnailUrl: string };
 
   readonly startedAt: string;
   readonly resolution: string;

server/api-server/src/streams/dto/read-stream.dto.ts

@@ -1,7 +1,8 @@
 export class ReadStreamDto {
   readonly userId: string;
+  readonly nickname: string;
   readonly title: string;
   readonly category: string;
   readonly viewer: number;
-  readonly thumbnail: string;
+  readonly thumbnail: { ContentLength: number; thumbnailUrl: string };
 }

server/api-server/src/streams/provider/video-info.provider.ts

@@ -12,11 +12,8 @@ export class VideoInfoProvider {
         'http-flv'
       ].servers[0].applications[0].live.streams.map((video) => {
         const meta = video.meta.video;
-
         return {
           streamKey: video.name,
-          viewer: 0, // TODO: 시청자 수
-          thumbnail: '', // TODO: 썸네일 URL
           startedAt: new Date(Date.now() - video.clients[0].time).toISOString(),
           resolution: meta.width + 'x' + meta.height,
           frameRate: meta.frame_rate,

server/api-server/src/streams/streams.module.ts

@@ -7,6 +7,7 @@ import { UsersModule } from 'src/users/users.module';
 import { VideoInfoProvider } from './provider/video-info.provider';
 import { ChatModule } from 'src/chat/chat.module';
 import { StreamKeysController } from './stream-keys.controller';
+import { ThumbnailsService } from 'src/thumbnails/thumbnails.service';
 
 @Module({
   imports: [
@@ -15,7 +16,7 @@ import { StreamKeysController } from './stream-keys.controller';
     ChatModule,
   ],
   controllers: [StreamsController, StreamKeysController],
-  providers: [StreamsService, VideoInfoProvider],
+  providers: [StreamsService, VideoInfoProvider, ThumbnailsService],
   exports: [StreamsService, TypeOrmModule],
 })
 export class StreamsModule {}

server/api-server/src/streams/streams.service.ts

@@ -9,6 +9,7 @@ import { ReadStreamDetailDto } from './dto/read-stream-detail.dto';
 import { ReadStreamDto } from './dto/read-stream.dto';
 import { PageDto } from 'src/common/dto/page.dto';
 import { ChatGateway } from 'src/chat/chat.gateway';
+import { ThumbnailsService } from 'src/thumbnails/thumbnails.service';
 
 @Injectable()
 export class StreamsService {
@@ -19,6 +20,7 @@ export class StreamsService {
     private readonly userRepo: Repository<User>,
     private readonly videoInfoProvider: VideoInfoProvider,
     private readonly chatGateway: ChatGateway,
+    private readonly thumbnailService: ThumbnailsService,
   ) {}
 
   async findAll(page: number, size: number): Promise<PageDto<ReadStreamDto>> {
@@ -32,21 +34,23 @@ export class StreamsService {
       relations: ['stream'],
     });
 
+    const dataProms = users.map(async (user) => {
+      const { streamKey, ...videoInfo } = videoInfos.find(
+        (info) => info.streamKey === user.stream.streamKey,
+      );
+      return {
+        userId: user.userId,
+        nickname: user.nickname,
+        title: user.stream.title,
+        category: user.stream.category,
+        ...videoInfo,
+        viewer: this.chatGateway.getViewers(user.userId),
+        thumbnail: await this.thumbnailService.getThumbnailUrl(user.userId),
+      };
+    });
+
     return {
-      data: users.map((user) => {
-        const { streamKey, ...videoInfo } = videoInfos.find(
-          (info) => info.streamKey === user.stream.streamKey,
-        );
-
-        return {
-          userId: user.userId,
-          nickname: user.nickname,
-          title: user.stream.title,
-          category: user.stream.category,
-          ...videoInfo,
-          viewer: this.chatGateway.getViewers(user.userId),
-        };
-      }),
+      data: await Promise.all(dataProms),
       pageInfo: {
         page,
         size,
@@ -78,6 +82,7 @@ export class StreamsService {
       desc: user.stream.desc,
       ...videoInfo,
       viewer: this.chatGateway.getViewers(userId),
+      thumbnail: await this.thumbnailService.getThumbnailUrl(user.userId),
     };
   }
 

server/api-server/src/thumbnails/thumbnails.controller.ts

@@ -0,0 +1,12 @@
+import { Controller, Get, Param } from '@nestjs/common';
+import { ThumbnailsService } from './thumbnails.service';
+
+@Controller('thumbnails')
+export class ThumbnailsController {
+  constructor(private readonly thumbnailsService: ThumbnailsService) {}
+
+  @Get(':userId')
+  async getThumbnailUrl(@Param('userId') userId: string) {
+    return await this.thumbnailsService.getThumbnailUrl(userId);
+  }
+}

server/api-server/src/thumbnails/thumbnails.module.ts

@@ -0,0 +1,10 @@
+import { Module } from '@nestjs/common';
+import { ThumbnailsController } from './thumbnails.controller';
+import { ThumbnailsService } from './thumbnails.service';
+
+@Module({
+  controllers: [ThumbnailsController],
+  providers: [ThumbnailsService],
+  exports: [ThumbnailsService],
+})
+export class ThumbnailsModule {}

server/api-server/src/thumbnails/thumbnails.service.ts

@@ -0,0 +1,33 @@
+import { Injectable } from '@nestjs/common';
+import AWS = require('aws-sdk');
+
+@Injectable()
+export class ThumbnailsService {
+  async getThumbnailUrl(userId: string) {
+    const objectName = `thumb/${userId}_240p264kbs.png`;
+    const endpoint = new AWS.Endpoint(process.env.AWS_S3_URL);
+    const region = process.env.AWS_S3_REGION;
+    const accessKey = process.env.AWS_ACCESS_KEY_ID;
+    const secretKey = process.env.AWS_SECRET_ACCESS_KEY;
+    const S3 = new AWS.S3({
+      endpoint: endpoint,
+      region: region,
+      credentials: {
+        accessKeyId: accessKey,
+        secretAccessKey: secretKey,
+      },
+    });
+
+    const params = {
+      Bucket: process.env.AWS_S3_BUCKET_NAME,
+      Key: objectName,
+    };
+
+    const objectInfo = await S3.getObject(params).promise();
+
+    return {
+      ContentLength: objectInfo.ContentLength,
+      thumbnailUrl: objectName,
+    };
+  }
+}