동영상 업로드 방법은 신규 고객으로부터 가장 많이 받는 질문 중 하나입니다. 개발자의 경우 파일 업로드를 구현하는 것은 몇 번 해본 적이 있는 작업이지만 항상 번거로운 작업입니다.
파일 선택기 입력
파일피커(현재 파일스택)를 사용하면 파일을 쉽게 업로드할 수 있습니다. 정말 쉽습니다. 로컬 파일에만 국한되지 않고 Dropbox와 Google부터 웹캠에서 직접 동영상을 녹화하는 것까지 다양한 소스를 지원합니다. 가장 좋은 점은 프런트엔드를 벗어나지 않고도 이 모든 작업을 수행할 수 있다는 것입니다.
다른 작업을 하기 전에 먼저 Filepicker 계정에 가입해야 합니다. 계정을 만든 후 대시보드에 앱이 없는 경우 새 앱을 만듭니다. 표시되는 API 키를 메모해 두세요. 나중에 사용할 것이니까요. Filepicker는 시작하기에 충분한 S3 버킷을 제공하지만 잠시 시간을 내어 업로드를 위한 대상 S3 버킷을 설정하세요.
기본 HTML5 템플릿으로 같은 페이지에서 시작하겠습니다. 간단하게 만들기 위해 jQuery를 사용할 예정이므로 상용구와 함께 파일 선택기 라이브러리를 포함하겠습니다.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Zencoder Dropzone</title>
<!-- jQuery Include -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!-- Filepicker.io Include -->
<script type="text/javascript" src="//api.filepicker.io/v1/filepicker.js"></script>
</head>
<body>
<div id="content">
<h1>Upload all the things!</h1>
</div>
</body>
</html>이제 Filepicker JavaScript API를 사용하여 사용자가 파일을 선택하여 S3 버킷에 저장할 수 있도록 할 수 있습니다. 또한 사용자가 클릭할 수 있도록 본문의 링크와 연결해야 합니다. Filepicker JavaScript include 아래에 추가하세요. 먼저 업로드 링크를 추가해 보겠습니다. 이미 크고 눈에 잘 띄는 h1 태그에 링크를 추가해 보겠습니다.
<h1><a href="#" id="upload-link">Upload all the things!</a></h1>이제 이 링크를 사용하여 다음을 트리거하려고 합니다. filepicker.pickAndStore 를 클릭합니다. 여기서 앞서 메모해둔 API 키를 사용합니다. 이 스니펫을 페이지 헤드의 파일 선택기 JavaScript 포함 아래에 배치합니다.
<script type="text/javascript">
$(function() {
filepicker.setKey('The_Key_From_Your_Dashboard');
$('a').click(function(e) {
e.preventDefault(); // This keeps the normal link behavior from happening
filepicker.pickAndStore({},{location: 's3'},function(fpfiles){
console.log(JSON.stringify(fpfiles));
});
});
});
</script>HTML을 제공하기 위해 일종의 웹 서버를 사용해야 하며, 그렇지 않으면 외부 JavaScript 파일을 로드할 수 없습니다. http-server와 같은 것을 사용할 수도 있지만, GitHub 리포지토리에 정적 파일을 제공하는 기본 Node 애플리케이션이 있습니다.
아무 파일이나 선택하고(비교적 작은 파일을 선택하는 것이 좋습니다) 업로드합니다. 현재 업로드에 성공하면 파일에 대한 fpfiles 객체를 콘솔에 추가할 수 있으므로 파일을 업로드한 후 콘솔을 살펴보세요. 모든 것이 계획대로 진행되었다면 새로 업로드한 파일에 대한 정보가 포함된 개체가 있을 것입니다.
방금 컴퓨터에서 간단한 HTML 마크업을 포함하여 총 27줄의 코드만 있는 파일을 업로드했습니다. 하지만 파일을 업로드하고 그대로 두는 것만으로는 유용하지 않으므로 사용자가 동영상을 업로드하고 인코딩할 수 있도록 만들어 보겠습니다.
젠코더 추가
먼저 업로더가 동영상 파일만 허용하도록 변경해 보겠습니다. 파일 선택기를 사용하면 모방 유형별로 제한할 수 있으므로 저와 같은 경우 다음과 같이 시도해보고 싶을 수 있습니다. {mimetype: 'video/*'}. 이 방법은 Chrome에서도 잘 작동하지만 Safari 사용자는 업로드할 수 있는 파일의 하위 집합이 훨씬 작아집니다. 동영상의 경우 확장자로 제한하는 것이 훨씬 더 안정적이므로 이 방법을 사용하겠습니다.
$('a').click(function(e) {
e.preventDefault(); // This keeps the normal link behavior from happening
var acceptedExtensions = ['3g2','3gp','3gp2','3gpp','3gpp2','aac','ac3','eac3','ec3','f4a','f4b','f4v','flv','highwinds','m4a','m4b','m4r','m4v','mkv','mov','mp3','mp4','oga','ogg','ogv','ogx','ts','webm','wma','wmv'];
filepicker.pickAndStore({extensions: acceptedExtensions},{location: 's3'},function(fpfiles){
console.log(JSON.stringify(fpfiles));
});
});이 허용 파일 세트를 제한하거나 더 추가할 수 있지만, 저는 쉬운 방법을 택하여 Zencoder 형식 문서에 있는 유효한 출력 형식 목록을 사용했습니다. 여기에는 일부 오디오 파일이 포함되어 있지만, Zencoder는 오디오 전용 인코딩을 지원하므로 그대로 두어도 됩니다. 이제 링크를 클릭하고 로컬 파일을 찾아보면 목록에서 확장자를 가진 파일만 선택할 수 있다는 것을 알 수 있습니다. 허용되지 않는 파일을 드래그 앤 드롭하려고 하면 오류가 발생합니다.
이제 젠코더가 지원할 수 있는 파일만 업로드할 것이므로 업로드가 성공하면 해당 파일이 인코딩을 위해 젠코더로 전송되도록 만들어 보겠습니다. 그러기 전에 Zencoder API 키를 설정해야 합니다. 파일 선택기 키 바로 아래에 이 키를 포함하면 됩니다.
filepicker.setKey('The_Key_From_Your_Dashboard');
var zenKey = 'Zencoder_API_Key';이제 jQuery의 $.ajax 를 클릭하여 업로드가 성공하면 Zencoder에 API 요청을 전송합니다.
filepicker.pickAndStore({extensions: acceptedExtensions},{location: 's3'},function(fpfiles){
// This is the simplest Zencoder API call you can make. This will output an h.264 mp4 with AAC audio and
// save it to Zencoder's temporary storage on S3.
var request = {
"input": fpfiles[0].url
}
// Let's use $.ajax instead of $.post so we can specify custom headers.
$.ajax({
url: 'https://app.zencoder.com/api/v2/jobs',
type: 'POST',
data: JSON.stringify(request),
headers: { "Zencoder-Api-Key": zenKey },
dataType: 'json',
success: function(data) {
$('body').append('Job created! <a href="https://app.zencoder.com/jobs/'+ data.id +'">View Job</a>')
},
error: function(data) {
console.log(data);
}
});
});이제 페이지를 새로고침하고 동영상을 업로드합니다. 모든 것이 계획대로 진행되었다면 새로 만든 작업에 대한 링크가 포함된 성공 메시지가 표시될 것입니다.
47줄의 코드만 입력하면 동영상을 업로드하고 인코딩을 위해 전송할 수 있는 웹 페이지를 만들 수 있습니다.
참고 및 경고
젠코더 API 키를 자바스크립트 내부에 일반 텍스트로 넣는 것은 좋지 않습니다. 다시 한 번 강조합니다: 다른 사람이 액세스할 수 있는 코드에 사용하지 마세요. 다른 사람이 API 키를 가져가서 원하는 모든 동영상을 인코딩하는 것을 막을 수는 없습니다.
훨씬 더 좋은 방법은 설명한 대로 Filepicker를 사용하되 실제로는 API 키가 노출되지 않는 백엔드에서 Zencoder API 호출을 하는 것입니다.
한 단계 더 발전하기
드래그 앤 드롭은 정말 멋지므로 전체 페이지에 Filepicker의 makeDropPane. 사용자는 어떤 작업을 수행하기 전에 API 키를 입력해야 하며 코드에 저장되지 않으므로 데모 를 온라인에 올려도 안전합니다.
이 버전은 API 키의 유효성을 검사하고, 최근 Zencoder 작업 내역을 포함하며, 요청 템플릿을 수정할 수 있습니다. 이러한 모든 설정은 브라우저의 로컬 저장소에 저장되므로 새로 고침 시 모든 설정이 손실되지 않습니다.
