재생 중인 동영상과 음악 컨트롤하기 [실패]

지난 5월에는 토이프로젝트로서 웹 브라우저에서 재생중인 동영상과 음악을 제어해주는 유틸리티 프로그램을 만들어보고자 했다. 결과로 '재생', '정지', '다음', '이전' 기능은 만들 수 있었지만, '뒤로 이동', '특정 시간으로 이동'과 같은 기능은 만들 수 없어 실용성이 부족하여 중간에 개발을 그만두었다.

이 과정에 관하여 단순 정리한 글로, 읽어도 큰 도움이 되는 글은 아니다.

계획

제어 프로그램 창

이번에 토이프로젝트로서 만들고자 한 프로그램은 웹 브라우저의 동영상과 음악을 재생, 정지 등을 할 수 있는 제어 프로그램이다. 이와 같은 프로그램을 계획하게 된 이유는 동영상을 재생한 상태로 창을 최소화하고 소리만 들을 때가 있는데, 브라우저 창을 다시 열 필요 없이 편하게 제어하기 위해서이다.

사실 비슷한 기능이 존재하긴 했지만 부족한 점이 있었다. 문단 아래 사진은 크롬 브라우저와 윈도우에서 제공하는 미디어 제어 기능의 사진이다. 크롬 브라우저는 Media Session이 잘 정의된 웹페이지의 경우 '뒤로 이동' 등 모든 기능을 제공하지만, 무조건 창을 키우고 주소창 옆의 버튼을 눌러야 하는 점이 불편했다. 이와 달리 윈도우의 기본 기능은 불륨 조절 키를 누르면 우측 위에 바로 나타나지만, '뒤로 이동'과 같은 기능을 제공해 주지 않았다.

크롬 브라우저의 미디어 제어 기능(좌 또는 상), 윈도우의 제어 기능(우 또는 하)

처음 계획하면서 검색된 자료는 MDN Web Docs의 Media Session API 문서이다. Media Session API는 웹의 미디어를 재생할 때, 미디어의 메타데이터를 제공하고, 미디어를 제어하기 위한 Action Handler를 정의해주는 API이다. Action Handler에는 '재생(play)', '정지(pause)'와 같은 기본적인 제어를 위한 핸들러와 '뒤로 이동(seekbackward)', '앞으로 이동(seekforward)'과 같은 핸들러가 있다. 이때 웹페이지에 해당 핸들러 호출시 어떤 동작을 수행할 지 정의해주면, 해당 기능을 브라우저단이나 시스템단에서 사용할 수 있는 걸로 보인다.

필요했던 버튼들

위 내용을 보고 웹페이지에 Action Handler만 잘 정의되어 있다면 '재생', '정지' 같은 기능은 물론 '뒤로 이동'이나 '앞으로 이동', '특정 시간으로 이동'과 같은 기능을 프로그램 상에 구현할 수 있겠다고 생각했다. 또, 재생 상태(MediaPositionState)도 알 수 있다면 마지막으로 본 위치 저장 기능 같은 것도 만들 수 있겠다고 예상했다.

방법

계획한 프로그램은 UWP 앱으로 개발하기로 결정하였다. Windows 운영체제에서 어떻게 미디어 제어를 할 수 있나 검색해보니 WinRT API에서 해당 방법이 제공되고 있었다. Windows.Media.Control 네임스페이스에 정의된 GlobalSystemMediaTransportControlsSession 클래스와 그와 관련된 클래스들을 사용하는 것이다.

• GlobalSystemMediaTransportControlsSession 클래스 : 제어 메소드를 갖고, 세션에 대응하는 클래스
• GlobalSystemMediaTransportControlsSessionManager 클래스 : 시스템에서 세션들을 리스트로 넘겨줌
• GlobalSystemMediaTransportControlsSessionMediaProperties 클래스 : 세션의 메타데이터를 나타냄
• GlobalSystemMediaTransportControlsSessionPlaybackInfo 클래스 : 세션의 상태, 사용 가능 컨트롤을 나타냄
• GlobalSystemMediaTransportControlsSessionTimelineProperties 클래스 : 세션의 재생 시간 관련된 걸 나타냄

시스템의 세션 리스트

기본적으로 UWP에서 해당 API를 사용할 수 있고, WPF도 같은 닷넷 기반으로서 해당 API를 사용할 수 있는 걸로 보이지만, 이 문서에 따르면 ISystemMediaTransportControlsInterop COM 인터페이스를 사용하라는 것으로 보여, 간단하지 않아 보였기에 UWP 기반으로 프로그램을 개발하기로 결정하였다.

마주한 문제

개발을 시작한 이후 몇몇 문제점이 나타났다.

하나는 많은 웹페이지들이 Media Session을 구현해놓지 않았다는 것이다. Media Session을 따로 정의해주지 않은 경우에는 '재생(play)', '정지(pause)' 기능만 사용할 수 있다. 이 때문에 많은 웹페이지에서 '재생', '정지' 이외의 작업을 할 수 없었다. 이는 현재 Media Session API가 Draft 상태로 웹표준으로 채택되지 않았다는 걸 고려해야 할 거 같다.

크롬브라우저에서 Flo 음악 재생시 좌측 사진과 같이 나타나나 확장 프로그램 설치시 우측 사진과 같이 바뀐다.

하지만 크로미움 기반의 브라우저에서는 확장 프로그램을 통해 제 3자가 임의로 Media Session의 메타데이터와 Action Handler를 정의해주는 스크립트를 삽입할 수 있었다. 예를 들어 Flo MediaSession이나 Media Session Master 확장 프로그램은 웹페이지에서 제목 등을 찾아 메타데이터로 설정하고, '이전(previous)', '다음(next)', '뒤로 이동(seekbackward)', '앞으로 이동(seekforward)'에 해당하는 Action Handler 코드를 직접 정의해주는 식의 확장 프로그램이었다. 내부 코드를 봤을 때 재생 스크롤바의 값을 설정한 후 클릭 이벤트를 발생시켜 음악을 앞뒤로 이동하는 코드를 만든 것은 인상 깊었다.

재생, 정지, 중단 이외의 제어를 할 수 없다.

다른 하나의 문제는 WinRT API에서 미디어 컨트롤 기능을 제공하기는 하나, '재생', '정지', '중단' 이외의 제어를 할 수 없다는 것이다. GlobalSystemMediaTransportControlsSession 클래스에서 Media Session의 seekbackward, seekforward, seekto와 같은 액션을 호출하는 메서드가 제공되지 않았으며, TimelineProperties 인스턴스를 받아와도 현재 재생 상태(position)을 받아올 수 없었다. 같은 UWP 앱인 ‘영화 및 TV’ 앱에서 영상을 재생했을 때는 position에 접근할 수 있으나, 웹 브라우저의 미디어 세션은 null 값이 반환되었던 것이다. 이로 인해 '뒤로 이동', '앞으로 이동'이나 '특정 시간으로 이동', 마지막으로 본 위치 저장 등의 기대한 기능 대부분을 구현할 수 없었다. 결과 예상보다 실용성이 굉장히 떨어졌다.

결과

동영상과 함께 실행된 화면

결과로 미디어 제어 기능이라는 핵심 부분에서 실용성이 무척 떨어져 만드는 것을 그만 두었다. 기존의 윈도우 기본 기능에 비해 나은 점이 없어 굳이 이 앱을 사용해야할 이유가 적어졌기 때문이다.

Media Session API는 현재 W3C에서 Draft 상태로 앞으로 웹 표준으로 채택될 수도 있는 상태이다. 이것이 웹 표준으로 채택된다면 많은 웹사이트들이 직접 Media Session을 사용할 수 있게 구현하고, 브라우저와 WinRT API에서 부족한 기능들을 접근할 수 있게 추가해줄 수도 있다고 생각한다. 그렇게 된다면 원하는 기능을 만드는 것이 가능할 것이다.

하지만 현재로선 UWP 앱에서 '재생', '정지', '다음', '이전', '중단' 이외의 미디어 제어 기능은 구현 불가능하다는 것이 결론이다.