테마 구성 요소를 사용하여 YouTube 및 Vimeo에 영상 업로드

[ti0]

이 새로운 테마 컴포넌트는 Discourse 작성기에서 YouTube 및 Vimeo로 비디오를 업로드할 수 있게 해줍니다. 최근 제가 개발한 플러그인에 이미 익숙하신 분들을 위해, 동일한 기능이 이제 모든 테마에 추가할 수 있는 이 테마 컴포넌트로 제공됩니다. 이를 통해 설치 과정이 훨씬 간편해졌으며, 플러그인과 완전히 동일한 방식으로 작동합니다.

기능

모든 포럼 멤버가 Vimeo 또는 YouTube로 비디오를 업로드할 수 있습니다(관리자는 둘 중 하나 또는 둘 다 활성화하도록 설정할 수 있음).

관리자는 Vimeo로 업로드된 비디오의 조회 및 임베드 프라이버시를 관리자 설정을 통해 제어할 수 있습니다.

사용자는 업로드 모달에서 YouTube로 업로드된 비디오의 조회 프라이버시를 제어할 수 있습니다.

플러그인 데모를 여기서 시청할 수 있습니다(설정 페이지를 제외하고 컴포넌트에서도 모든 것이 동일합니다. 컴포넌트 설정 페이지는 관리자 > 사용자 정의 > 컴포넌트 > 비디오 업로드에서 찾을 수 있습니다):

Discourse Video Upload Plugin with YouTube and Vimeo Demo

구성

중요: 테마 컴포넌트의 경우, 인스턴스에서 사용되는 테마에 대해 해당 컴포넌트를 활성화했는지 확인해야 합니다(‘모든 테마 추가’를 클릭하거나 원하는 테마를 선택하세요).

YouTube 및 Vimeo 업로드를 활성화하기 위한 개발자 설정은 아래에 나열되어 있습니다. 직접 설정하기보다 누군가 대신 해주는 것을 선호한다면, @ti0에게 연락하여 지원을 요청할 수 있습니다.

YouTube 업로드용

Vimeo 업로드는 공용 계정으로 전송되는 반면, YouTube 업로드는 업로드한 사용자의 계정으로 전송됩니다.

단계 보기

• https://console.developers.google.com에서 계정과 프로젝트를 생성하세요.

• YouTube Data API v3를 활성화하세요.

• 외부 사용자를 위한 OAuth 동의 화면을 설정하세요(모든 Discourse 포럼 사용자가 하나의 Google 조직에 속하지 않는 한).

• 자격 증명을 설정하세요:

  • OAuth 클라이언트 ID를 생성하세요.
  • 웹 애플리케이션 유형을 선택하세요.
  • 승인된 JavaScript 원본(Authorized Javascript origins) 섹션에 Discourse 인스턴스 URL을 추가하세요.

• 생성된 클라이언트 ID만 복사하세요.

• Discourse 관리자의 컴포넌트 설정 페이지로 이동하여 클라이언트 ID를 youtube api client id 필드에 붙여넣으세요.

• youtube upload enabled 설정을 활성화하여 YouTube 업로드를 활성화하세요.

• 필요에 따라 YouTube의 기본 조회 프라이버시 옵션을 조정하세요.

• 이제 Discourse 주제 작성기에서 YouTube로 직접 비디오를 업로드할 수 있어야 합니다.

Vimeo 업로드용

아래 단계를 따라 컴포넌트를 설정하면, 모든 커뮤니티 사용자가 귀하의 Vimeo 계정으로 비디오를 업로드할 수 있게 됩니다.

귀하의 Vimeo 계정 한도 및 사용에 대한 책임은 귀하에게 있습니다.

단계 보기

• Vimeo Developers에서 계정과 앱을 생성하세요:
  https://developer.vimeo.com/apps/new

• 업로드 권한이 있는 액세스 토큰을 생성하세요.

• Discourse 관리자의 컴포넌트 설정 페이지로 이동하여 생성된 액세스 토큰을 vimeo api access token 설정에 추가하고 저장하세요.

• vimeo upload enabled 설정을 활성화하여 Vimeo 업로드를 활성화하세요.

• 조회 및 임베드 프라이버시 옵션을 조정하세요.

  • 프라이버시 옵션(privacy.view 및 privacy.embed)에 대해 이 Vimeo 페이지를 참조하세요.

• 이제 Discourse 주제 작성기에서 Vimeo로 직접 비디오를 업로드할 수 있어야 합니다.

비디오 게시하기

• 비디오를 게시하려면 새 주제를 생성하거나 기존 주제에 답글을 쓰세요.

• 작성기 툴바의 새 Upload to Video 버튼(비디오 아이콘)을 클릭하세요. 이 버튼은 플러그인 설정에서 YouTube 또는 Vimeo(또는 둘 다)를 활성화한 경우에만 표시됩니다.

• 비디오 파일을 선택하고 원하면 제목 및 설명과 같은 세부 정보를 편집하세요.

• Upload to Vimeo 또는 Upload to YouTube 버튼을 클릭하세요.

  • 표시되는 버튼은 YouTube / Vimeo 업로드(둘 중 하나 또는 둘 다)를 활성화했는지에 따라 달라집니다.

  • 업로드 진행 상황을 표시한 후, 비디오가 트랜스코딩 과정을 완료할 때까지 대기합니다.

  • 트랜스코딩이 완료될 때까지 모달이 열린 상태로 유지됩니다.

  • 트랜스코딩이 완료되면 비디오 링크가 작성기에 추가됩니다(트랜스코딩 오류가 발생한 경우를 제외하고).

• 게시물을 저장하면, 다른 모든 커뮤니티 사용자가 귀하의 비디오를 볼 수 있게 됩니다(선택한 프라이버시 옵션에 따라).

기능 요청

추가 기능이나 지원을 저에게 연락하여 요청할 수 있습니다. @ti0

기여

이 테마 컴포넌트가 도움이 되었다면, 이 PayPal 링크를 통해 개발자에게 기부해 주시면 감사하겠습니다: PayPal.Me

크고 작은 기여 모두 환영합니다

컴포넌트 / 플러그인을 개선하고 싶으시다면 PR을 환영합니다.

	미리보기	테마 생성자 미리보기
	저장소	discourse-video-upload
	설치 가이드	테마 또는 테마 컴포넌트 설치 방법
	Discourse 테마 초보?	Discourse 테마 사용 입문자 가이드

[Canapin (Coin-coin le Canapin)]

@ti0

이것은 설치를 훨씬 쉽게 만들어 주며, 플러그인과 정확히 같은 방식으로 작동합니다.

그렇다면 플러그인은 중단되나요?

[ti0]

지금은 아니지만, 테마 컴포넌트를 유지하는 것이 훨씬 쉬울 것 같습니다. 당분간 플러그인을 유지하되, 테마 컴포넌트로 이동을 권장합니다.

[Don]

@ti0 님, 감사합니다 이번에도 정말 훌륭합니다 플러그인보다 테마 컴포넌트를 사용하는 것이 훨씬 쉽네요.

한 가지 질문이 있습니다. 이 텍스트들도 번역에 포함해 주실 수 있을까요? 업로드 중, 비디오 트랜스코딩 중, 그리고 비디오 상세 정보의 제목, 설명 등? 감사합니다!

[ti0]

@Don 이제 컴포넌트의 모든 라벨을 사용자 정의할 수 있습니다

[Don]

안녕하세요

여러분의 컴포넌트가 정말 마음에 듭니다. 만들어 주셔서 다시 한번 감사합니다.

처음에는 아주 잘 작동했지만, 이제 문제가 생겼습니다.
때때로 비디오(mp4 파일만 해당)를 트랜스코딩하는 동안 status.error.transcode 오류가 발생합니다. 비디오는 정상적으로 업로드되지만, Vimeo에서는 표시되는 반면 컴포저에 링크가 삽입되지 않습니다.

또 다른 문제는 MacOS Safari 브라우저에서 mp4 파일을 업로드할 수 없다는 점입니다.

이 문제들을 어떻게든 해결할 수 있을까요?

답변 주셔서 감사합니다!

[ti0]

안녕하세요 @Don, MacOS Safari에서 이 엣지 케이스를 찾아내 주셔서 감사합니다. Safari의 문제인 것 같습니다 (SO에 대한 참고). 테마 컴포넌트에서 이 문제를 수정했으므로, 업데이트 후 페이지를 새로고침하시면 Safari에서 mp4 파일을 업로드할 수 있어야 합니다. 제 컴퓨터에서 테스트해 보니 이제 정상적으로 작동합니다.

트랜스코딩 오류에 관해서는, 이는 Vimeo 측에서 발생하는 문제로 저희 쪽에서는 대응할 방법이 없습니다.

[Don]

빠른 수정 감사합니다! 이제 Safari에서 완벽하게 작동합니다

[Don]

안녕하세요 @ti0,

Vimeo 업로드 메커니즘이 변경된 것 같습니다. 포럼 작성기에 링크를 넣으면 Vimeo에서 비디오 변환을 시작합니다. 따라서 비디오가 아직 준비되지 않아 포럼에서 원박스(onebox) 처리되거나 재생되지 않습니다. 도움을 주셔서 감사합니다!

[anon82467725]

@Don

다른 문제는 macOS Safari 브라우저에서 mp4 파일을 업로드할 수 없다는 것입니다.

저도 마찬가지입니다. 하지만 이제 이 문제가 모든 플랫폼의 Mozilla Firefox에도 영향을 미치는 것으로 보입니다.

Mozilla Firefox에서 발생한 다른 문제들이 몇 가지 있었지만, 추가적인 설명을 제공하기 위해 해당 문제들을 다시 확인해야 합니다.

[Don]

제 생각에는 문제가 이렇습니다. Vimeo에는 업로드 이후, 변환 이전 사이에 변환 대기 섹션이 있습니다.

컴포넌트에는
const STATUS_POLLING_INTERVAL_MILLIS = 10000;

제 이해가 맞다면, 업로드 프로세스 이후 변환 대기 프로세스가 비디오 완료로 돌아올 때까지 10초마다 Vimeo에 요청을 보내는 것입니다. Vimeo API가 Webhook 등을 지원하지 않기 때문에… 따라서 Transcoding 프로세스가 여전히 진행 중인지 완료되었는지 확인하기 위해 주기적으로 요청을 보내야 합니다.

더 나은 솔루션이 나올 때까지 이 값을 60초로 변경했습니다. 이렇게 하면 대부분의 업로드에서 변환 대기 프로세스 요청을 건너뛸 수 있을 것입니다. 작은 파일(약 10MB), 중간 파일(약 500MB), 큰 파일(약 2GB) 업로드로 테스트했습니다.
작은 파일의 경우 대기 시간은 몇 초(약 4~5초)이고, 중간 파일은 약 10~15초, 큰 파일은 약 40~45초입니다. 업로드된 파일의 크기에 따라 달라지는 것 같습니다.
동작하는 것처럼 보이지만, 변환 대기 프로세스가 60초보다 더 오래 걸리면 이전과 동일하게 링크를 붙여넣습니다. 이 변환 대기 프로세스를 건너뛸 수 있다면 좋겠습니다.

[Zup]

Vimeo 업로드가 내 공용 계정이 아니라 업로더의 계정으로 들어가도록 하는 것이 가능한가요?

[linzo (Collins)]

@ti0 나만 그런 건지 모르겠지만, 뭔가 깨진 것 같습니다. 업로드가 Authenticating 단계에서 멈춰 있고, Chrome 콘솔에 다음 오류가 표시됩니다

출처가 사이트의 Content Security Policy(CSP)에 나열되지 않아 일부 리소스가 차단되었습니다. 사이트의 CSP는 허용 목록(allowlist) 기반으로 작동하므로, 리소스에 액세스하려면 허용 목록에 해당 리소스가 나열되어 있어야 합니다.

사이트의 Content Security Policy는 HTTP 헤더(권장)를 통해 설정하거나, meta HTML 태그를 통해 설정할 수 있습니다.

이 문제를 해결하려면 다음 중 하나를 수행하세요:

1. (권장) `'script-src'`에 허용 목록을 사용하고 있다면, 엄격한 CSP(strict CSP)가 XSS에 대해 더 견고하므로 허용 목록 CSP에서 엄격한 CSP로 전환하는 것을 고려해 보세요. 엄격한 CSP 설정 방법은 여기에서 확인하세요.

2. 또는 차단된 모든 리소스가 신뢰할 수 있는지 신중하게 확인하세요. 신뢰할 수 있다면, 해당 리소스의 출처를 사이트의 CSP에 포함하세요. ⚠️신뢰할 수 없는 출처를 사이트의 CSP에 절대 추가하지 마세요. 출처를 신뢰하지 않는 경우, 리소스를 자체 사이트에 호스팅하는 것을 고려해 보세요.

영향을 받은 리소스
https://apis.google.com/_/scs/apps-static/_/js/k=oz.gapi.en_US.bnEFfFZ9cyI.O/m=auth2,client/rt=j/sv=1/d=1/ed=1/am=AQ/rs=AGLTcCNaq8ri2P66tzK7chsKcRiE1CsLyQ/cb=gapi.loaded_0?le=ili,ipu,ili,ipu`

차단됨 script-src-elem api.js:12

[ti0]

@linzo 이것은 CSP 문제이며, 테마 컴포넌트와는 무관합니다. Discourse CSP에 대한 내용은 여기서 확인하세요: Mitigate XSS Attacks with Content Security Policy

@Zup

Vimeo 업로드가 제 공용 계정이 아니라 업로더의 계정으로 갔으면 좋겠는데… 가능할까요?

@Zup, 이것은 추가 기능 요청입니다. 물론 가능하지만, 구현을 원하신다면 유료로 처리해야 하는 추가 작업입니다. 원하시면 말씀해 주세요.

@Don

그러면 비디오가 준비가 되지 않아서 포럼에서 원박스(onebox)로 재생할 수 없다는 뜻인가요?

늦게 답변드려 죄송합니다. 네, 업로드 후 트랜스코딩 과정이 있으며, 비디오를 임베드하기 전에 업로드 다이얼로그에서 이를 표시합니다. 제 환경에서는 정상적으로 작동하고 있습니다. 트랜스코딩이 완료될 때까지 대기한 후, 그때서야 다이얼로그를 닫고 비디오를 임베드합니다. 데모는 다음과 같습니다:

[debryc (Deborah Chang)]

이 테마 컴포넌트의 가능성에 정말 기대가 큽니다. 이 테마 컴포넌트가 모바일에서도 작동하나요? 즉, 스마트폰에서 사진 라이브러리의 영상을 업로드할 수 있는 건가요?

테마 제작자 미리보기에서 확인해 보려고 했는데, 액세스 거부(Access Denied) 알림이 표시되었습니다.

[Don]

데보라님,

저희 포럼에서는 Vimeo 업로드를 사용하고 있으며, 모든 기기에서 아주 잘 작동합니다. 선택 과정은 Discourse와 동일하지만, 동영상을 선택한 후에는 업로드를 시작하려면 Vimeo 또는 YouTube 업로드 버튼을 클릭해야 합니다.

[debryc (Deborah Chang)]

포럼이 공개되어 있나요? 한번 보고 싶은데, 실제로 어떻게 돌아가는지 보고 싶어요! URL이 뭔가요?

[davidkingham]

이것은 정말 잘 작동합니다! 특정 Vimeo 폴더에 영상을 업로드할 수 있는 기능이 있다면, 사용자 업로드와 제 영상을 따로 관리할 수 있을 텐데 좋겠습니다. 감사합니다!

[ti0]

좋아해서 기뻐요 이 기능 요청에 기여할 의향이 있다면 제가 구현하거나 PR을 제출할 수 있으니 알려주세요.

[debryc (Deborah Chang)]

자동 자막을 생성하고 기본적으로 자막을 표시할 수 있나요? 접근성 측면에서 저희에게 정말 중요한 부분입니다.