[iOS] iOS 앱에 유튜브 영상을 넣어보자

안녕하세요. 회사 들어오니 블로그 더 자주 쓰는 매들린입니다. 허허

오늘은 뷰에 유튜브 영상을 떡하니 넣어야 해요.

뭐 딱히 회사 앱은 아니지만 나름 가려봤는데, 이런식으로 뷰에 유튜브 영상을 넣어봅시다.

영상도 사실 저 영상은 아니지만, 제가 요즘 데이식스에 빠졌어요.
성진 팬됐습니다.🥰

아무튼
사실 방법은 엄청 간단해요.
WebKit을 이용해서 WebView로 영상을 띄우면 됩니다.

1. WebKit

해당 뷰에 WKNavigationDelegate를 채택하고,

webView = WKWebView()
webView.navigationDelegate = self

DispatchQueue.main.async {
	let embedURLString = "https://www.youtube.com/embed/유튜브id"
	let embedHTML = "<iframe width=\"100%\" height=\"100%\" src=\(embedURLString) frameborder=0 allowfullscreen></iframe>"
	self.webView.loadHTMLString(embedHTML, baseURL: nil)
        }

이런식으로 화면 비율까지 조정해서 넣으면 됩니다.

근데 왜 글을 쓰냐,
영상 로딩이 좀 오래 걸립니다.

뭔가 앱이 멈춘듯할때 xcode 로그창에 빨간 로그가 뜨는데요,

WebContent process 어쩌고 took 1.411242 seconds to launch.

1.4초가 걸렸대요.
뭐 그정도면 빠르네 할 수 있겠지만, 앱이 잠깐 멈춘 것 같아서 마음이 상당히 불편합니다.
그래서 좀 더 빠르게 할 수 있는 방법을 고민해봤어요

영상이 뜨는게 오래걸린다 -> 에는 여러가지 원인이 있을 수 있는데,

영상이 커서 그런가? -> 아님! ❌ 영상 길이와는 전혀 무관

네트워크 속도, 서버 부하 -> ❌ 내가 컨트롤 못함

디바이스 성능 -> 아냐 ❌ 내 폰 성능 좋음

영상 해상도, 품질 -> 고해상도, 고품질은 로딩 시간이 더 듦. 근데 ❌, 내가 컨트롤 못해

일단 전지전능 챗선생한테 물어보니깐, youtube api라는게 있대요. 이걸 쓰면 빠를지도 모른다는 답변을 받아서, 한번 시도해봤습니다.

2. youtube API + URLSession

youtube data api 3 머시기를 검색해서 Google Cloud 개발자 콘솔에서 이것저것 해서 API Key를 발급 받아봅니다.
혹시모르니까 또 git ignore처리해서, APIKey를 따로 저장해줬어요.

enum APIKey {
    static let baseUrl: String = "https://youtube.googleapis.com/youtube/v3/"
    static let youtubeKey = "비밀-"
}

func loadVideo(videoId: String) {
        let urlString = "\(APIKey.baseUrl)videos?id=\(videoId)&key=\(APIKey.youtubeKey)&part=player"
        guard let url = URL(string: urlString) else { return }
        
        URLSession.shared.dataTask(with: url) { data, response, error in
            guard let data = data, error == nil else { return }
            
            do {
                if let json = try JSONSerialization.jsonObject(with: data, options: []) as? [String: Any],
                   let items = json["items"] as? [[String: Any]],
                   let player = items.first?["player"] as? [String: Any],
                   let embedHtml = player["embedHtml"] as? String {
어쩌고 저쩌고

WebContent process (어쩌고) took 2.127600 seconds to launch

2초?
흐으음 더 걸려요.

3. YouTube-Player-iOS-Helper 라이브러리

써드파티 라이브러리를 써봅니다.

https://github.com/youtube/youtube-ios-player-helper

패키지 설치를 하구요, YouTubeiOSPlayerHelper를 import하고,
YTPlayerViewDelegate를 채택해줍니다.

playerView = YTPlayerView()
playerView.delegate = self
playerView.load(withVideoId: "OvIk6BDkVE4")

역시 라이브러리를 쓰면 코드가 간단해져요.
이렇게 해보면 영상도 잘뜨고,
1.1~1.3초 정도로 시간이 slightly 줄었어요.

일단 가장 빨랐던 YouTubeiOSPlayerHelper 라이브러리를 선택해서 두고,
더 좋은 방법이 있다면 업데이트 하겠습니다..
혹시 시도해볼 만한 방법이 있다면 알려주세요 제발