앞선 글들에서 파이어 베이스로 간단한 웹서비스를 만들다 보니, 특정 제품이나 페이지에 연계해서 동영상들을 파이어베이스에 업로드하는 기능과, 필요할 때마다 이렇게 파이어베이스에 업로드된 여러의 동영상들 중에서 원하는 것을 선택해 재생할 수 있으면 좋을 것 같았다.
이렇게 한다면 특정 상품에 연계된 동영상을 저장 및 재생할 수도 있어, 상품을 소개하는데 좋을 것 같기도 했고, 또한 같은 방식을 동영상 관리에 사용한다면 자신만의 동영상 라이브러리가 될 수도 있을 것 같기도 했다. 만일 영화나 애니메이션 자료들을 이렇게 관리할 수 있다면, 파이어 베이스를 통해 애니메이션이나 영화 OTT 같은 간단한 동영상플랫폼 비슷한 것을 흉내내볼수도 있겠다는 생각이 들었기 때문이다.
이러한 기능을 웹서비스에 적용하기 위해, 동영상 파일들을 파이어베이스에 업로드하는 기능과, 파이어 베이스에서 특정 비디오를 불러와 브라우저에서 재생하는 기능을 핵심 기능만 간단하게 구현해 보기로 했다.
동영상 업로드하기
우선 동영상 파일은 다음과 같은 방식으로 업로드하기로 했다.
이를 위해 다음과 같은 폼을 HTML로 만들어 동영상 파일과, 해당 비디오를 식별하기 위한 연결 번호를 입력받았다. 이 연결 번호는 비디오들을 선택적으로 불러오는데 사용하려는 목적이며, 추후 웹서비스에서도 이 연결 번호 값을 이용하여 비디오를 불러올 예정이다.
그리고 불러온 동영상 데이터는 다음과 같은 코드를 이용해 파이어베이스에 업로드했는데, 사실 원리상으로는 앞에서 여러 차례 소개한 일반 사진 파일들의 업로드와 완전히 일치한다.
이 과정에서 동영상 파일 이름이 중복되지 않도록 하기 위해, 동영상 파일의 이름을 timestamp를 이용하여 변경된 이름으로 파이어 베이스 내에 저장하였다. 이것으로 충분할까 하는 고민도 있었으나, 일반적으로 동영상 파일은 업로드에 그래도 조금 시간이 걸리므로, timestamp가 중복될 가능성은 없겠다는 판단이 들었다.
실제 저장 과정은 다음과 같이 uploadTask 구문을 이용해 중간 단계의 진행도를 표시하도록 했으며,
동영상 파일의 업로드가 완료된 이후에, 다음과 같이 파이어 스토어에 필수 정보인 동영상 저장 위치에 대한 URL 정보와, 식별용 연결 번호, 시간 정보를 컬렉션 문서로 저장하도록 했다. 필요에 따라 추가 정보를 함께 저장하면 좋을듯하다.
그리고, 진행도를 초기화하고, 입력 본의 값도 초기화해 주었다.
동영상 업로드가 완료되면 다음과 같은 형태가 된다.
동영상 선택 후 재생하기
파이어베이스에 업로드된 여러 개의 동영상 파일들 중 원하는 동영상을 불러와 재생하는 것도 동일한 폼을 사용했다.
우선 다음과 같은 폼을 그대로 사용했는데,
HTML 역시 업로드 때 사용한 것을 그대로 가져와, 파일 입력 부분은 삭제한 후 그대로 사용하였다.
입력받은 연결 번호를 이용해 실제 비디오를 불러와 재생하는 것은 다음 코드로 처리했는데
코드를 좀 설명하면…
먼저 입력받은 값이 공란이 아닌지를 확인한 후,
파이어 스토어의 컬렉션에서 해당 연결 번호 값이 있는지를 확인하고,
다음 코드를 이용해 640×480 화소에서 자동 재생하는 하도록 했다.
만일 화면 크기를 조절하려면 아래 640과 480 값을 변경해 주면 되며, 자동 재생이 싫은 경우 autoplay 옵션을 controls로 변경해 주면 된다.
동작하는 모습은 다음과 같다.
유튜브 형식 보기
한편, 위에서처럼 특정 연결번호를 입력하는 대신 파이어베이스에 업로드된 모든 동영상을 그대로 나열하고, 특정 비디오를 클릭하면 해당 동영상이 자동으로 실행되도록 코드를 만드는 것도 좋겠다는 생각이 들었다.
이것은 기본적으로는 위에서 특정 비디오를 불러오는 것과 원리는 동일하지만, 쿼리에 where조건을 적용하지 않은채 모든 동영상을 읽어온다는 것과, 각각의 동영상을 카드박스 형태로 나열한다는 점에 차이가 있다.
소스 코드
참고가 필요한 경우를 위해, 해당 소스코드를 다음에 첨부해 둔다.
업로드 부분
재생