Veed API를 사용하여 노드에 비디오 및 이미지에 워터마크를 추가하는 방법
이 문서에서는 Node JS를 사용하여 이 작업을 수행하는 절차에 대해 설명합니다.
우리 시작합시다!
설치 및 설정
우선, 우리는 프로젝트를 설정하고, 필요한 모든 의존항을 설치하며, 4개의 간단한 절차를 통해 최종 결과를 얻을 준비를 할 것이다.
1. API 키 등록 및 가져오기
signup for your free Veed account으로 링크를 클릭하십시오.
등록이 완료되면 작업공간 대시보드를 볼 수 있습니다.Veed에서 동영상 편집 활동을 관리하는 집이야.
작업공간 대시보드에서 측면 메뉴에서 설정 탭을 클릭합니다.아래와 같이 섹션이 열립니다.페이지 아래쪽에 "API 사용"이라는 단추가 있습니다.대시보드의 API 섹션을 활성화하려면 버튼을 클릭합니다.
완성되면 아래 부분으로 안내됩니다.여기서 API와 모든 상호 작용을 수행하는 데 필요한 API 키를 복사할 수 있습니다.또한 후속 액세스를 위해 API 탭이 측면 메뉴에 추가되었습니다.
참고:
개발 과정에서 테스트 키 key_test_XXXXXXXXXXXXXX을 사용하고 배포 환경을 생산 키 key_live_XXXXXXXXXXXXXX으로 전환해야 합니다.
2. 노드 및 NPM 설치
시스템에 npm이 설치되어 있는지 확인합니다.
node -v && npm -v
콘솔에 인쇄된 버전 번호를 보실 수 있습니다.없으면 공식 Node.js site을 방문하여 플랫폼 설치 지침을 확인할 수 있습니다.
현재 node와 NPM이 설치되어 있으며 다음 명령을 실행하여 프로젝트 디렉터리를 설정합니다.
3. 프로젝트 디렉토리 설정
프로젝트 디렉토리를 만듭니다.
mkdir watermark-video-app
방금 만든 디렉터리를 입력하고 항목을 초기화합니다.
cd watermark-video-app && npm init -y
이것은 프로젝트와 관련된 설정을 포함하는 package.json 파일을 만들 것입니다. 그러나 가장 중요한 것은 프로젝트의 의존항을 포함합니다.
4. 종속성 설치
이 프로젝트에 대해 설치해야 하는 유일한 종속 항목은 VEED API 노드 라이브러리입니다.이렇게 하려면 터미널에서 다음 명령을 실행하십시오.
npm i @veedstudio/veed-node --save
현재 우리는 필요한 의존항을 성공적으로 설치했고, 마지막 단계는 웹훅을 설정해야 한다.
5. 웹훅 설정
VEED API는 매번 API를 폴링하여 렌더링이 언제 완성되는지 알아보는 것이 아니라 웹훅에 대한 지원을 제공하여 사용자가 주의할 만한 작업이 발생할 때(예를 들어 렌더링이 시작되었거나 렌더링이 완료되었을 때) 수시로 이벤트를 수신할 수 있도록 한다
이 목적에 사용할 웹 훅 URL을 가져오려면 https://webhook.site/으로 가서 웹 훅 URL을 검색하십시오.유일한 URL을 복사한 다음 작업 영역 대시보드로 바로 이동합니다.API 탭에서는 이전에 복사한 URL을 붙여넣은 다음 저장을 클릭합니다.
이제 우리는 이 모든 것을 완성했고 동영상에 워터마크를 추가할 준비를 하고 있다.
비디오 워터마크
이제 우리는 진정한 수인을 실현하기 위해 코드를 작성할 것이다.먼저 좋아하는 IDE에서 만든 폴더를 열고 Webhook URL이라는 파일을 만듭니다.
다음 코드를 복사해서 이 파일에 붙여넣으십시오.
const API_KEY = 'YOUR_API_KEY_HERE';
const veed = require("@veedstudio/veed-node")(API_KEY);
const FILE_URL = 'https://storage.googleapis.com/veed-docs/sample-video.mp4'
const renderOptions = {
"elements":[
{
"type":"video",
"params":{
"source":{
"url": FILE_URL
}
}
},
{
"type":"text",
"params":{
"value":"WATERMARK",
"style":{
"font":"Helvetica",
"size":48.0,
"display":"normal",
"color":"#FFFFFF",
"secondary_color":"#ffffff",
"align":"center",
"line_height":0.0,
"letter_spacing":0.0,
},
"position":{
"origin":"bottom left",
"x":0.5,
"y": 1.0
},
"z_index":1
}
}
]
}
veed.render.create(renderOptions).then((result)=>{
console.log(result)
});
위에서, 우리는 먼저 VEED 패키지를 가져오고, 계기판의 index.js을 매개 변수로 내연에 전달하여 초기화합니다.
다음은 이 프레젠테이션의 예제 비디오에 사용할 URL을 저장하는 API_KEY이라는 변수를 설명합니다.
그런 다음 렌더링 객체를 계속 구성합니다.렌더링 객체는 미디어 자산에 어떤 편집을 적용해야 하는지를 설명하는 객체 속성으로 표시되는 명령 세트입니다.일반적으로 렌더링 요소와 렌더링 매개변수로 구성됩니다.위의 코드 세션에서 원소는 하나의 그룹이므로, 필요한 결과를 실현하기 위해 임의의 원소와 설정을 추가할 수 있음을 주의하십시오.
위에서 우리는 FILE_URL 요소를 추가하고 video 매개 변수를 사용하여 그 원소를 지정했다.또한 추가할 워터마크와 구성을 지정하는 source 요소를 추가했습니다.
마지막으로, 우리는 VEED 패키지를 사용하여 새로운 렌더링을 만들고, 동시에 text을 매개 변수로 전달합니다.
현재, 우리는 다음 명령을 사용하여 터미널에서 스크립트를 실행할 수 있습니다.
node index.js
성공하면 콘솔에서 다음과 같이 렌더링 ID를 포함하는 유효 로드를 찾을 수 있습니다.
{ id: '163688fb-4626-4f12-a165-12576fe54023' }
워터마크가 있는 비디오 가져오기
워터마크가 찍힌 동영상을 얻을 수 있는 몇 가지 방법이 있다.
1. 웹훅 사용
대시보드에 추가된 웹훅 URL을 복사한 https://webhook.site 페이지로 돌아갑니다.렌더링이 진행되면 여러 이벤트가 이 URL로 전송됩니다.
왼쪽에서 받은 이벤트 목록을 찾을 수 있습니다.너는 그 중 하나를 눌러서 모든 유효 하중에서 보내는 데이터를 볼 수 있다.렌더링은 렌더링이 완료될 때까지 renderOptions percentage에서 시작됩니다.
{
"type": "RENDER/PROGRESS",
"payload": {
"render_id": "17cf9aad-807d-4f68-98b7-f748b8d67c22",
"percentage": 0
}
}
완료되면 요청한 워터마크 동영상 URL이 포함된 0 이벤트를 받게 됩니다.
{
"type": "RENDER/SUCCESS",
"payload": {
"render_id": "e52aad52-5ab0-465d-8341-fdabd6302cf1",
"progress": 100,
"url": "https://storage.googleapis.com/veed-prod-video-bucket/veedapi%2Frenders%2Fe52aad52-5ab0-465d-8341-fdabd6302cf1%2Foutput%2Fh5PIjzgDpai~x1srAbH1X.mp4?X-Goog-Algorithm=GOOG4-RSA-SHA256&X-Goog-Credential=prod-api%40veed-prod-server.iam.gserviceaccount.com%2F20210228%2Fauto%2Fstorage%2Fgoog4_request&X-Goog-Date=20210228T210416Z&X-Goog-Expires=9000&X-Goog-SignedHeaders=host&X-Goog-Signature=4ce2e4664470fb81f450e91fe63bdcd29e1077eed756a94eb3923b5740acbbc4618a91b148a5cd4b3540db615a95f0842893cc013aa965a8099d671724de058852816ec795bd17d483a51b944b8cc461a7b3bf0e3f51b5ed702dde0a5bbada3bb68fcc1de3d6fd1bcb8262f3199b28218d2de0dd9a4b2eaee5583b0ccbd52022e5a99a49f71972ed1c0ba28a9ae2d93f0e1b88f2b1308f8ff6375ad3ae31c80c42a9968d7ee572cfab03c0e153ac3ee67a4cdf9f8f8b4dca3fa42ae4240e01e259aa4808973607a71df681bee691e64d663436600b0b95852d26aa857dfc6d74e571207c93d201f31d0e1505dbc374d36076bf5caccd6a38281771af50017892"
}
}
2.여론조사 API
웹훅이 없으면 렌더링이 완료된 정확한 시간을 판단할 수 없습니다.따라서 다른 방법은 API를 폴링하는 것입니다.VEED 패키지를 사용할 수 있습니다.100을 RENDER/SUCCESS으로 교체하면 된다.스크립트를 다시 실행합니다.콘솔에 인쇄된 응답을 보실 수 있습니다.렌더링이 완료되고 URL을 다운로드할 준비가 되면 다음과 같은 응답을 받게 됩니다.
{
id: '540ba741-bead-42cd-bcbe-dcd2d0663d8d',
workspace_id: '78c897c9-810d-4a33-97e2-15c796a05161',
data: { elements: [ [Object], [Object] ] },
latest_event: {
type: 'RENDER/SUCCESS',
payload: {
render_id: '540ba741-bead-42cd-bcbe-dcd2d0663d8d',
progress: 100,
url: 'https://storage.googleapis.com/veed-prod-video-bucket/veedapi%2Frenders%2F540ba741-bead-42cd-bcbe-dcd2d0663d8d%2Foutput%2FzBG_du_k~qL5dLS9YT6Oa.mp4?X-Goog-Algorithm=GOOG4-RSA-SHA256&X-Goog-Credential=prod-api%40veed-prod-server.iam.gserviceaccount.com%2F20210301%2Fauto%2Fstorage%2Fgoog4_request&X-Goog-Date=20210301T084032Z&X-Goog-Expires=9001&X-Goog-SignedHeaders=host&X-Goog-Signature=7b9dd8d71a055867a1cc0947f24050ec145b863be3c787963f820ff218d9a55201c45b509cbdb48c8460a71c2f3c433c4809c55ffa610c5964d07e7fdcee3f19f3bb2cde93b104b7b66930fde8ccbc278c0a33afac5ad671d6265ab2e6e9ae0a96ddf6103ba7028f3508dfd1fb35aef37dc6a0cf28d245fcfc8d4ef825a3656aec6f0cee6f25c69422351e84d56226129b9168ce364d394bbffd8682b37efdd438b90b259aa964e41b714660343885020b3a4664db37c35019b82f397d270085881098a1ece6a7e2bc4c055d4db6b3ea3137fbd2c7576eb140b8ef1cb2d6479d36094450b2ee82335a84514b5ec14c28ef770eb0c4188e8fde6321ff68ee28a9'
}
},
created_at: 1614588003775,
modified_at: 1614588032628
}
이제 veed.render.create(renderOptions)을 복사하여 브라우저에 붙여넣을 수 있습니다.veed.render.get({id:'YOUR_RENDER_ID_GOES_HERE'})을 클릭하면 다운로드가 자동으로 시작됩니다.
결론
축하드립니다. VEED API를 사용하여 Node에서 비디오에 워터마크를 추가하는 방법을 성공적으로 배웠습니다.설명서를 사용하여 API를 더욱 자세히 탐색하고 자신의 응용 프로그램이나 API를 구축하여 이 API를 더욱 교묘하게 활용하고 아래의 평론 부분에서 공유하도록 권장합니다.
나는 네가 창조한 마법을 매우 보고 싶다.다음에 또 만나요!
리소스
node -v && npm -v
mkdir watermark-video-app
cd watermark-video-app && npm init -y
npm i @veedstudio/veed-node --save
이제 우리는 진정한 수인을 실현하기 위해 코드를 작성할 것이다.먼저 좋아하는 IDE에서 만든 폴더를 열고
Webhook URL이라는 파일을 만듭니다.다음 코드를 복사해서 이 파일에 붙여넣으십시오.
const API_KEY = 'YOUR_API_KEY_HERE';
const veed = require("@veedstudio/veed-node")(API_KEY);
const FILE_URL = 'https://storage.googleapis.com/veed-docs/sample-video.mp4'
const renderOptions = {
"elements":[
{
"type":"video",
"params":{
"source":{
"url": FILE_URL
}
}
},
{
"type":"text",
"params":{
"value":"WATERMARK",
"style":{
"font":"Helvetica",
"size":48.0,
"display":"normal",
"color":"#FFFFFF",
"secondary_color":"#ffffff",
"align":"center",
"line_height":0.0,
"letter_spacing":0.0,
},
"position":{
"origin":"bottom left",
"x":0.5,
"y": 1.0
},
"z_index":1
}
}
]
}
veed.render.create(renderOptions).then((result)=>{
console.log(result)
});
index.js을 매개 변수로 내연에 전달하여 초기화합니다.다음은 이 프레젠테이션의 예제 비디오에 사용할 URL을 저장하는
API_KEY이라는 변수를 설명합니다.그런 다음 렌더링 객체를 계속 구성합니다.렌더링 객체는 미디어 자산에 어떤 편집을 적용해야 하는지를 설명하는 객체 속성으로 표시되는 명령 세트입니다.일반적으로 렌더링 요소와 렌더링 매개변수로 구성됩니다.위의 코드 세션에서 원소는 하나의 그룹이므로, 필요한 결과를 실현하기 위해 임의의 원소와 설정을 추가할 수 있음을 주의하십시오.
위에서 우리는
FILE_URL 요소를 추가하고 video 매개 변수를 사용하여 그 원소를 지정했다.또한 추가할 워터마크와 구성을 지정하는 source 요소를 추가했습니다.마지막으로, 우리는 VEED 패키지를 사용하여 새로운 렌더링을 만들고, 동시에
text을 매개 변수로 전달합니다.현재, 우리는 다음 명령을 사용하여 터미널에서 스크립트를 실행할 수 있습니다.
node index.js
{ id: '163688fb-4626-4f12-a165-12576fe54023' }
워터마크가 있는 비디오 가져오기
워터마크가 찍힌 동영상을 얻을 수 있는 몇 가지 방법이 있다.
1. 웹훅 사용
대시보드에 추가된 웹훅 URL을 복사한 https://webhook.site 페이지로 돌아갑니다.렌더링이 진행되면 여러 이벤트가 이 URL로 전송됩니다.
왼쪽에서 받은 이벤트 목록을 찾을 수 있습니다.너는 그 중 하나를 눌러서 모든 유효 하중에서 보내는 데이터를 볼 수 있다.렌더링은 렌더링이 완료될 때까지 renderOptions percentage에서 시작됩니다.
{
"type": "RENDER/PROGRESS",
"payload": {
"render_id": "17cf9aad-807d-4f68-98b7-f748b8d67c22",
"percentage": 0
}
}
완료되면 요청한 워터마크 동영상 URL이 포함된 0 이벤트를 받게 됩니다.
{
"type": "RENDER/SUCCESS",
"payload": {
"render_id": "e52aad52-5ab0-465d-8341-fdabd6302cf1",
"progress": 100,
"url": "https://storage.googleapis.com/veed-prod-video-bucket/veedapi%2Frenders%2Fe52aad52-5ab0-465d-8341-fdabd6302cf1%2Foutput%2Fh5PIjzgDpai~x1srAbH1X.mp4?X-Goog-Algorithm=GOOG4-RSA-SHA256&X-Goog-Credential=prod-api%40veed-prod-server.iam.gserviceaccount.com%2F20210228%2Fauto%2Fstorage%2Fgoog4_request&X-Goog-Date=20210228T210416Z&X-Goog-Expires=9000&X-Goog-SignedHeaders=host&X-Goog-Signature=4ce2e4664470fb81f450e91fe63bdcd29e1077eed756a94eb3923b5740acbbc4618a91b148a5cd4b3540db615a95f0842893cc013aa965a8099d671724de058852816ec795bd17d483a51b944b8cc461a7b3bf0e3f51b5ed702dde0a5bbada3bb68fcc1de3d6fd1bcb8262f3199b28218d2de0dd9a4b2eaee5583b0ccbd52022e5a99a49f71972ed1c0ba28a9ae2d93f0e1b88f2b1308f8ff6375ad3ae31c80c42a9968d7ee572cfab03c0e153ac3ee67a4cdf9f8f8b4dca3fa42ae4240e01e259aa4808973607a71df681bee691e64d663436600b0b95852d26aa857dfc6d74e571207c93d201f31d0e1505dbc374d36076bf5caccd6a38281771af50017892"
}
}
2.여론조사 API
웹훅이 없으면 렌더링이 완료된 정확한 시간을 판단할 수 없습니다.따라서 다른 방법은 API를 폴링하는 것입니다.VEED 패키지를 사용할 수 있습니다.100을 RENDER/SUCCESS으로 교체하면 된다.스크립트를 다시 실행합니다.콘솔에 인쇄된 응답을 보실 수 있습니다.렌더링이 완료되고 URL을 다운로드할 준비가 되면 다음과 같은 응답을 받게 됩니다.
{
id: '540ba741-bead-42cd-bcbe-dcd2d0663d8d',
workspace_id: '78c897c9-810d-4a33-97e2-15c796a05161',
data: { elements: [ [Object], [Object] ] },
latest_event: {
type: 'RENDER/SUCCESS',
payload: {
render_id: '540ba741-bead-42cd-bcbe-dcd2d0663d8d',
progress: 100,
url: 'https://storage.googleapis.com/veed-prod-video-bucket/veedapi%2Frenders%2F540ba741-bead-42cd-bcbe-dcd2d0663d8d%2Foutput%2FzBG_du_k~qL5dLS9YT6Oa.mp4?X-Goog-Algorithm=GOOG4-RSA-SHA256&X-Goog-Credential=prod-api%40veed-prod-server.iam.gserviceaccount.com%2F20210301%2Fauto%2Fstorage%2Fgoog4_request&X-Goog-Date=20210301T084032Z&X-Goog-Expires=9001&X-Goog-SignedHeaders=host&X-Goog-Signature=7b9dd8d71a055867a1cc0947f24050ec145b863be3c787963f820ff218d9a55201c45b509cbdb48c8460a71c2f3c433c4809c55ffa610c5964d07e7fdcee3f19f3bb2cde93b104b7b66930fde8ccbc278c0a33afac5ad671d6265ab2e6e9ae0a96ddf6103ba7028f3508dfd1fb35aef37dc6a0cf28d245fcfc8d4ef825a3656aec6f0cee6f25c69422351e84d56226129b9168ce364d394bbffd8682b37efdd438b90b259aa964e41b714660343885020b3a4664db37c35019b82f397d270085881098a1ece6a7e2bc4c055d4db6b3ea3137fbd2c7576eb140b8ef1cb2d6479d36094450b2ee82335a84514b5ec14c28ef770eb0c4188e8fde6321ff68ee28a9'
}
},
created_at: 1614588003775,
modified_at: 1614588032628
}
이제 veed.render.create(renderOptions)을 복사하여 브라우저에 붙여넣을 수 있습니다.veed.render.get({id:'YOUR_RENDER_ID_GOES_HERE'})을 클릭하면 다운로드가 자동으로 시작됩니다.
결론
축하드립니다. VEED API를 사용하여 Node에서 비디오에 워터마크를 추가하는 방법을 성공적으로 배웠습니다.설명서를 사용하여 API를 더욱 자세히 탐색하고 자신의 응용 프로그램이나 API를 구축하여 이 API를 더욱 교묘하게 활용하고 아래의 평론 부분에서 공유하도록 권장합니다.
나는 네가 창조한 마법을 매우 보고 싶다.다음에 또 만나요!
리소스
{
"type": "RENDER/PROGRESS",
"payload": {
"render_id": "17cf9aad-807d-4f68-98b7-f748b8d67c22",
"percentage": 0
}
}
{
"type": "RENDER/SUCCESS",
"payload": {
"render_id": "e52aad52-5ab0-465d-8341-fdabd6302cf1",
"progress": 100,
"url": "https://storage.googleapis.com/veed-prod-video-bucket/veedapi%2Frenders%2Fe52aad52-5ab0-465d-8341-fdabd6302cf1%2Foutput%2Fh5PIjzgDpai~x1srAbH1X.mp4?X-Goog-Algorithm=GOOG4-RSA-SHA256&X-Goog-Credential=prod-api%40veed-prod-server.iam.gserviceaccount.com%2F20210228%2Fauto%2Fstorage%2Fgoog4_request&X-Goog-Date=20210228T210416Z&X-Goog-Expires=9000&X-Goog-SignedHeaders=host&X-Goog-Signature=4ce2e4664470fb81f450e91fe63bdcd29e1077eed756a94eb3923b5740acbbc4618a91b148a5cd4b3540db615a95f0842893cc013aa965a8099d671724de058852816ec795bd17d483a51b944b8cc461a7b3bf0e3f51b5ed702dde0a5bbada3bb68fcc1de3d6fd1bcb8262f3199b28218d2de0dd9a4b2eaee5583b0ccbd52022e5a99a49f71972ed1c0ba28a9ae2d93f0e1b88f2b1308f8ff6375ad3ae31c80c42a9968d7ee572cfab03c0e153ac3ee67a4cdf9f8f8b4dca3fa42ae4240e01e259aa4808973607a71df681bee691e64d663436600b0b95852d26aa857dfc6d74e571207c93d201f31d0e1505dbc374d36076bf5caccd6a38281771af50017892"
}
}
{
id: '540ba741-bead-42cd-bcbe-dcd2d0663d8d',
workspace_id: '78c897c9-810d-4a33-97e2-15c796a05161',
data: { elements: [ [Object], [Object] ] },
latest_event: {
type: 'RENDER/SUCCESS',
payload: {
render_id: '540ba741-bead-42cd-bcbe-dcd2d0663d8d',
progress: 100,
url: 'https://storage.googleapis.com/veed-prod-video-bucket/veedapi%2Frenders%2F540ba741-bead-42cd-bcbe-dcd2d0663d8d%2Foutput%2FzBG_du_k~qL5dLS9YT6Oa.mp4?X-Goog-Algorithm=GOOG4-RSA-SHA256&X-Goog-Credential=prod-api%40veed-prod-server.iam.gserviceaccount.com%2F20210301%2Fauto%2Fstorage%2Fgoog4_request&X-Goog-Date=20210301T084032Z&X-Goog-Expires=9001&X-Goog-SignedHeaders=host&X-Goog-Signature=7b9dd8d71a055867a1cc0947f24050ec145b863be3c787963f820ff218d9a55201c45b509cbdb48c8460a71c2f3c433c4809c55ffa610c5964d07e7fdcee3f19f3bb2cde93b104b7b66930fde8ccbc278c0a33afac5ad671d6265ab2e6e9ae0a96ddf6103ba7028f3508dfd1fb35aef37dc6a0cf28d245fcfc8d4ef825a3656aec6f0cee6f25c69422351e84d56226129b9168ce364d394bbffd8682b37efdd438b90b259aa964e41b714660343885020b3a4664db37c35019b82f397d270085881098a1ece6a7e2bc4c055d4db6b3ea3137fbd2c7576eb140b8ef1cb2d6479d36094450b2ee82335a84514b5ec14c28ef770eb0c4188e8fde6321ff68ee28a9'
}
},
created_at: 1614588003775,
modified_at: 1614588032628
}
축하드립니다. VEED API를 사용하여 Node에서 비디오에 워터마크를 추가하는 방법을 성공적으로 배웠습니다.설명서를 사용하여 API를 더욱 자세히 탐색하고 자신의 응용 프로그램이나 API를 구축하여 이 API를 더욱 교묘하게 활용하고 아래의 평론 부분에서 공유하도록 권장합니다.
나는 네가 창조한 마법을 매우 보고 싶다.다음에 또 만나요!
리소스
Reference
이 문제에 관하여(Veed API를 사용하여 노드에 비디오 및 이미지에 워터마크를 추가하는 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/worldclassdev/how-to-watermark-videos-images-in-node-using-the-veed-api-1lgd텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
