[Swift] TwitchClone 🪤삽질1. HLS -> Thumbnail

[Swift] TwitchClone 🪤삽질1. HLS -> Thumbnail

"본 프로젝트는 개인프로젝트이며 본인이 크게 삽질한 부분을 위주로 정리, 기록용으로 작성됩니다."

시청자 화면에서 Live List를 볼 때 시각적인 정보인 썸네일이 필요했음.
일단 떠오르는 방법으론 URL(.m3u8)에서 따오는 방법이 있을 것 같아 여러 시도를 해보았음.

시도 1. AVAssetImageGenerator

Apple 공식문서에서 제공하는 HTTP Live Streaming (HLS) 형식을 cgImage 형식으로 변환하는 방식을 사용.
AVPlayer에서 전체 시간이 뜨는 m3u8 형식의 URL은 잘 작동함.
그런데 내가 원하는 Live 형식은 image를 가져오지 못했음. (내가 못한걸수도)

실패.

시도 2. AVPlayerLayer

각 Cell에 있는 AVPlayerLayer에 URL을 주고 재생 상태를 정지 해놓으면 썸네일 느낌을 낼 수 있었음.
근데 매우 느리거나 각 영상마다 딜레이가 달라 뜰때도 있고 안뜰때도 있었음.
그리고 Cell을 다시 로드할 때 다른 영상의 썸네일이 표시되는 문제점이 있었음.
썸네일을 표시한다는 목적은 달성했지만, 마음에 안들었음.

실패?

시도 3. ACThumbnailGenerator

위 라이브러리는 HLS/.m3u8를 UIImage로 추출하는 라이브러리임.
UIImage로 추출하는 시간이 다소 있기에 Image Cache 처리로 다시 로드할 때 시간을 줄였음.
근데 첫 Image 추출이 약 0.5 ~ 1초 정도 걸리기 때문에 여러 Cell에 있는 Image를 처리하는데에는 부적합하다고 판단. (내가 사용자였음 속터졌을듯)

실패.

시도 4. 성공?

일단 접근방식이 잘못된것 같아 다른 방식으로 접근함.
시청자쪽에서 썸네일을 만드는것은 너무 비효율적이라 판단.
그럼 서버에서 썸네일을 만들어 보내주는 방법, Host쪽에서 썸네일을 제작 2가지 방법이 떠오름.
서버에서 썸네일을 만드는 방법은 RTMP를 받는 Nginx에서 처리해야 하는데 또 엄청난 삽질이 예상될것 같아 앞선 삽질로 몸과 마음지 지처 포기.

Host쪽에서 썸네일을 제작하는 방식은 어느정도 감이 잡혀 진행하기로 함.

먼저 송출 부분은 HaishinKit 라이브러리를 사용함.

class StreamCam: UIViewController {
	
    ...
    
    func startStream() {
        rtmpConnection.connect("rtmp://diddbstjr55.shop/hls") // 송출할 미디어서버 주소
        rtmpStream.publish(userEmailSplit) // Host Key
        rtmpConnection.addEventListener(.rtmpStatus, selector: #selector(rtmpStatusHandler), observer: self) // 송출된 정보를 가져오기 위해 addEventListener
        if rtmpStream.receiveVideo { // 송출된 영상을 가져올 수 있는가?
            var count = 0
            timer = Timer(timeInterval: 1, repeats: true, block: { _ in
                count += 1
                if  count > 4 {
                    self.createThumbnail() // 4초마다 썸네일 생성 시도
                    count = 0
                }
            })
            RunLoop.current.add(timer!, forMode: .common)
        }
    }
    
     func createThumbnail()  {
        let liveResult = LiveResult()
        let url = liveResult.hlsURL(hls: userEmailSplit ) // 이 코드는 앞에서 저장된 유저 Email을 가져오는 단계입니다. 
        generator = ACThumbnailGenerator(streamUrl: url) // 가져온 유저 Email을 고유 Key로 설정해 ACThumbnailGeneratorDelegat에서 생성된 썸네일을 Cache 처리
        generator.delegate = self
        generator.captureImage(at: 30) 
        let cacheKey = NSString(string: url.description)
        if let cacheImage = ImageCachManager.shared.object(forKey: cacheKey) { // Cache Image를 가져올 수 있음 FirebaseStorage에 업로드 하고 타이머 중지
            timer?.invalidate()
            FirebaseStorageManager.uploadImage(image: cacheImage, imageName: userEmailSplit) { URL in
                if let url = URL {
                    self.uploadFirebase(imageURL: url.description)
                }
            }
        }
    }
   }
    ...
    
extension StreamCam: ACThumbnailGeneratorDelegate {
    func generator(_ generator: ACThumbnailGenerator, didCapture image: UIImage, at position: Double) {
        let url = generator.streamUrl
        print("image to",url)
        let cacheKey = NSString(string: url.description)
        ImageCachManager.shared.setObject(image, forKey: cacheKey) // 여기서 Cache 처리한 image는 FirebaseStorage에 올릴 때 사용
    }
}
    

먼저 startStream() 설정된 송출을 시도.
설정된 타이머는 4초마다 createThumbnail() 함수를 호출.

createThumbnail() 함수는 4초마다 송출된 영상을 가져올 수 있으면 타이머를 중지하고 URL에서 이미지를 추출 후 FirebaseStorage에 업로드.

송출(RTMP) -> Nginx -> HLS(.m3u8) -> HLS Thumbmail 추출 -> Firebase에 방송정보( Title, Category, HLS URL...) 업로드 -> 사용자에게 노출

단점은 RTMP의 딜레이가 어느정도 있기에 Host가 방송을 시작하고 약 4~8초 이후 시청자에게 공개된다는 단점이 있다.

내가 경험한 실제 인터넷 방송은 Host가 방송을 시작하고 본 내용으로 들어가기전 약 5~10분 정도의 대기시간을 가지는것으로 목격되었다.

그렇기에 실사용으론 큰 문제가 되지는 않지만 구조적으로는 효율적이지는 않다.

개인적으로는 이 방법이 마음에 들지는 않지만 아직 더 나은 방법을 찾지 못해 사용하고 있다.