Why

레시피 영상이 요리 초보의 진도에 맞춰 재생되게 하고 싶다.

시연 동영상

How

• 비접촉 방식(제스쳐/음성)을 활용하여 유튜브를 제어한다.
• 안드로이드 환경에서 구현

블록 다이어그램

명령어 적용부

제스쳐/음성 인식부로 들어온 반환값을 참조하여 알맞은 동영상 제어를 수행한다.

사용 기술

PierfrancescoSoffritti YouTube API Github

Unofficial API 선택 이유

구글에서 제공해주는 Official YouTube API가 존재한다.
그러나 구글 API의 다음과 같은 두 가지 이유 때문에 Unofficial을 선택했다.

1. 유지/보수 미흡으로 인한 수많은 에러
2. UI Customizing 불가
3. MediaPipe와의 Class 충돌

3번을 부연 설명하자면 MediaPipe는 AppCompatActivity를 extends하고 구글 API는 YouTubeBaseActivity를 extends한다.

2개의 클래스를 동시에 extends 하여 사용 가능한지는 잘 모르겠으나 현재의 능력으로는 불가능하다고 판단하여 MediaPipe와 같은 클래스를 상속하는 라이브러리가 필요했다.

추가적으로, 해당 라이브러리는 Google Official YouTube API를 래핑하여 만들어진 라이브러리이므로 유튜브 보안 정책에 위반되지 않는다.

유튜브 불러오기

YouTubePlayer.loadVideo(String videoId, float startTime)
YouTubePlayer.cueVideo(String videoId, float startTime)

유튜브를 제어하기 위해서는 가장 먼저 동영상을 불러와야 한다. 이 때, 두 가지 함수를 사용할 수 있다.

loadVideo는 로딩과 동시에 바로 재생을 시켜주는 함수이고, cueVideo는 로딩만 해주는 함수이다.

cueVideo를 사용하면 썸네일 상태로 로딩된다.

재생/정지

			// 정지 명령어
            Button btnPause = (Button) findViewById(R.id.btn_pause);
            btnPause.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View view) {
                    youTubePlayer.pause();
                }
            });
            // 재생 명령어
            Button btnPlay = (Button) findViewById(R.id.btn_play);
            btnPlay.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View view) {
                    youTubePlayer.play();
                }
            });

세부 메서드만 달라지고 전체적인 골격이 비슷한 구조로 반복된다.

1. 특정 이벤트를 수행하는 버튼을 생성한다.
2. 버튼이 클릭되었을 때
3. 이벤트를 수행한다.

youTubePlayer.pause();
youTubePlayer.play();

위 2개의 메서드가 핵심이다.

점프

			// 앞으로 점프
            Button btnAdvance = (Button) findViewById(R.id.btn_advance);
            btnAdvance.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View view) {
                    youTubePlayer.addListener(tracker);
                    Float cur_time = tracker.getCurrentSecond();
                    Float flag = cur_time + (float) 10.0;
                    youTubePlayer.seekTo(flag);
                }
            });

1. 현재 시각을 저장
2. 저장된 시각에 ±10초 후 저장
3. 저장된 시각으로 이동

getCurrentSecond() = 현재 시각 float 반환
seekTo(float) = float 시각으로 time bar 이동

속도 조절

			// 반속 재생
            Button btnHalfSpeed = (Button) findViewById(R.id.btn_half_speed);
            btnHalfSpeed.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View view) {
                    youTubePlayer.setPlaybackRate(PlayerConstants.PlaybackRate.RATE_0_5);
                }
            });

RATE 뒤의 숫자로 속도를 조절한다.

타임스탬프

			// 타임스탬프 저장을 안 하고 불러오기 먼저 클릭하였을 경우, 에러가 발생하므로
            // 이를 위해 타임스탬프 저장 시간을 0으로 초기화 해준다.
            time_stamp = tracker.getCurrentSecond();
            // 타임스탬프 시각 저장
            Button btnSave = (Button) findViewById(R.id.btn_save);
            btnSave.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View view) {
                    youTubePlayer.addListener(tracker);
                    time_stamp = tracker.getCurrentSecond();
                    int hour = (int) Math.round(time_stamp)/60;
                    int sec = Math.round(time_stamp) - (hour*60);
                    String msg = "저장 시각: " + hour + "분" + sec + "초";
                    Toast.makeText(getApplicationContext(), msg, Toast.LENGTH_LONG).show();
                }
            });

로직은 변수에 현재 시각을 담아 언제든지 불러올 수 있도록 하는 단순한 설계이지만 초기 타임 스탬프 변수를 반드시 초기화 해주어야 하는 특징이 있었다.