[미니 프로젝트]유튜브 미니플레이어 + C# 웹브라우저

유튜브를 C# 미니플레이어에서 실행하고 C# 폼 안에서 유튜브 + 웹브라우저를 실행해보자 충북대학교 공동훈련센터 IoT기반 스마트솔루션 개발자 양성과정 중 C# 강의에서 개인 미니 프로젝트로 만들고 싶은 프로그램을 만들어보기로 했다 이런거엔 기술도 중요하지만 아이디어도 크게 중요하다는걸 알아서 아이디어 구상에 시간을 좀 들였다 나에게 주어진 시간은 2시간 남짓이었지만 집에 가서도 할 생각으로 만들고 싶은걸 만들어보자 라는 마인드로 시작했다

1. 로또 번호 추첨기
2. 나만의 유튜브 플레이어
3. 시한 폭탄 게임

대략적으로 3가지 아이디어를 생각중이었는데 최대한 빠르고 간단하게 만들 수 있는건 로또 번호 추첨기로 생각했다

했으나 교수님께서 한가지 예시를 들으시면서 저번 교육 과정 학생들 중에는 로또 번호 추첨기를 하는 사람들이 있었다고 얘기하셨다

어떤 기능을 넣을까 하다가 유튜브 API를 할당받아 폼에서 검색한 후 타이틀 검색 결과를 리스트로 보여주고 해당 리스트를 클릭하면 오른쪽에 바로 실행되게끔 하고 싶었다

▶ textBox 에 검색하고 싶은 내용을 넣고 ▶ Search 버튼을 누르면 ▶ 이벤트 발생 후 ▶ 아래 listView 영역에 결과를 넣고 ▶ 우측 미디어 플레이어에서 영상을 재생 의 결과로 만들고 싶었다

위 링크를 통해 개발자들이 api 를 호출할 때의 가이드라인을 살펴볼 수 있다
프로젝트를 만들고 ▶ api 신청을 하고 ▶ 발급되는 api 키 값을 잘 복사하고 ▶ 제공하는 목록을 살피고 ▶ 필요한 정보를 요청 받는다
아직 api 에 대해선 구체적으로 배운건 없지만 써봤기도 하고 쓸줄만 알기에 추후에 디테일한 부분까지 알게 되거나 공유할 부분이 있으면 포스트 예정

🤯 방황 : 미디어 플레이어에서 온라인 링크의 영상 재생법 😇 해결 : 유튜브 링크를 불러오면 해당 링크의 영상을 다운받자!

private async void listView1_DoubleClick(object sender, EventArgs e)
        {
            using (FolderBrowserDialog fbd = new FolderBrowserDialog() { Description = "Set the path to download" })
            {
                if (fbd.ShowDialog() == DialogResult.OK)
                {
                    try
                    {
                        var youtube = YouTube.Default;
                        var video = await youtube.GetVideoAsync(listView1.SelectedItems[0].Name);
                        File.WriteAllBytes(fbd.SelectedPath + @"\" + video.FullName + ".mp4", await video.GetBytesAsync());

                    }
                    catch
                    {
                        MessageBox.Show("Failed to decrypt URL!");
                    }
                }
        }

listView 가 더블클릭되는 이벤트 발생시 위와 같은 코드를 통해 해당 유튜브 링크의 영상을 다운 받을 수 있다는 정보를 참고하여 실행해보았다

https://a6ly.dev/88 VideoLibrary 라는 패키지를 활용하는데 컴퓨터 사양 문제인지 다운로드의 속도 문제인지 이벤트 발생만 시키면 계속 먹통이 되었다 😰 결국 계속되는 오류로 시간을 낭비하다가 방법을 바꿔보기로 했다 찾아보니 보통 Process.Start()로 브라우저 자체를 실행시키고 해당 브라우저에서 유튜브 링크로 이동, 그리고 바로 시작이 되게끔 구성을 한 분들이 계셨다 하지만 좀 아쉬웠다 :( 브라우저를 띄울거였으면 그냥 브라우저로 유튜브 들어가서 봤지 프로그램 자체에서 실행 시키고 싶었다
④ C# 내 WebBrowser 이용
WebBrowser 툴을 활용해서 우측 창에 유튜브 링크를 띄우자!

이래나 저래나 사실 브라우저에서 트는건 같아 어쩔수 없지만 구색은 갖추었다 생각해서 위와 같은 방법을 채택했다

private async void btnStart_Click(object sender, EventArgs e)
        {
            string url = textBox1.Text;
            webBrowser1.Navigate(url);
        }

위와 같이 버튼을 누르면 textBox 안의 텍스트를 url 로 긁어 navigate 명령을 통해 웹브라우저 영역에 넣어줬다

여기서 알게 된 것이 c# 폼에서의 웹 브라우저는 기본 설정이 IE7 로 되어있단다..

이젠 구시대의 유물이 되어버린 익스플로러에는 유튜브 재생이 지원되지 않는것이다 😢
다시 생각을 바꾸어 크롬을 띄우기로 했다 그런데 크롬을 띄우기 위해선 너겟 패키지 + 호출이 필요했다

CefSharp 을 통해 chromiumWebBrowser 를 불러주어야 해당 영역에 크롬을 불러올 수 있었다
⑤ chromiumWebBrowser
https://luckygg.tistory.com/339 우선 웹브라우저를 불러들일 pictureBox 를 불러주고 해당 영역에 패키지로 설치된 chromiumWebBrowser를 불러주면 바로 실행이 되는데

pictureBox 에 불러들인 웹 사이트의 주소를 바꾸면 이동할 주소의 사이트가 나오질 않고 최초 호출한 사이트의 주소만 고정적으로 박혀있는 것이었다..

그러고 보니 pictureBox 를 수업 중에 써본 적은 있어도 초기화 하는 법은 안써봤는데 찾아보니 dispose 로 해제를 하면 된다~ 라는데 해제를 해버리면 아예 영역 자체가 사라져 더이상 사이트를 나타낼 영역도 없어지는 것이었다 😂
그래서 최종적으로 알아본 것이 panel 영역을 주고 다른 주소로 이동할 때마다 컨트롤로 clear 와 add 를 넣어주면 다른 주소로의 이동도 가능하지 않을까 했는데 역시나 가능한 방법이었다

기존에 있던 버튼은 살리고 유튜브 검색 결과를 나타내는 버튼으로 진행, 이동하고 싶은 웹사이트를 입력할 textBox 2개를 추가하고 각 영역에 이벤트를 넣어줬다

많이 부족한 프로그램이지만 결과 자체가 나타난다는 것에 큰 성취감을 느꼈고 아쉬운 것은 c#에 대해 심도있게 배운 부분이 많이 모자라 전역 변수로 설정할 때 나타나는 오류라든지 static, async, 변수 타입 등등 여러 상황에 직면했을 때 어떻게 대응해야 할지 감이 잘 안온다는 것이다
복잡하고 반복되는 코드들로 구성되어서 많이 너저분하지만 앞으로 이러한 간단한 프로그램들도 효율적이고 성능 좋은 코드로 구성해봐야겠다