바로 Cloudinary로 웹을 위한 화면 녹화기 구축!
25313 단어 videowebdevbeginnersjavascript
이 강좌는 이 모든 것이 어떻게 작동하는지 깊이 있게 연구하고 화면 녹화기를 웹 응용 프로그램에 통합시키는 방법을 보여 줍니다.가장 좋은 것은 Cloudinary의 이미지와 비디오 플랫폼에 비디오 요약을 직접 보내서 Cloudinary API를 사용하여 쉽게 접근하고 실시간으로 검색할 수 있다는 것입니다.
이 강좌가 끝날 때 다음과 같은 프레젠테이션 응용 프로그램을 만들 것입니다.
참고: 이것은 GIF가 있는 위치를 보여 줍니다.
선결 조건을 실현하다.
현재 이 강좌의 일부 코드는 실험적인 기능을 필요로 하는데, 이러한 기능들은 곧 크롬 브라우저에 집적될 것이다.이러한 기능을 활성화하려면 다음과 같이 하십시오.
chrome://flags로 이동하여 현재 Chrome 플래그를 봅니다.Experimental Web Platform features 를 입력하고 Enter 키를 누릅니다.
인터페이스 구축
웹에 화면 레코더를 만들려면 일반 HTML과 JavaScript를 사용하여 인코딩해야 합니다.먼저 다음 절차에 따라 인터페이스를 구축한다.
mkdir cloudy-snap
cd cloudy-snap
cloudy-snap 에서 index.html 파일을 만들고 코드를 프레젠테이션 응용 프로그램에 저장합니다.유형:touch index.html
cloudy-snap을 편집합니다.<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Cloudy Snap</title>
<style>
body{
display: flex;
flex-direction: column;
align-items: center;
}
.container{
display: flex;
flex-direction: column;
align-items: center;
}
#videoElement{
width: 50%;
padding: 30px;
}
</style>
</head>
<body>
<img src="https://res.cloudinary.com/cloudinary/image/upload/c_scale,w_200/v1/logo/for_white_bg/cloudinary_vertical_logo_for_white_bg.png">
<h1>CloudySnap</h1>
<p>Take a screen recording on the web and upload it to Cloudinary</p>
<div class="container">
<video id="videoElement" autoplay></video>
<button id="recorder">
Capture screen for 2 seconds and Upload to Cloudinary
</button>
</div>
</body>
</html>
index.html을 실행합니다. 이때 인터페이스와 상호작용으로 인해 기록기가 응답하지 않습니다.다음 절에서는 레코더에 기능을 추가하고 작동하는 방법을 보여 줍니다.
관련 기능 추가
스크린 레코더에 기능을 추가하려면
index.html 파일에 다음 스크립트를 넣습니다.[...]
<script>
let recorder = document.getElementById('recorder')
let videoElement = document.getElementById('videoElement')
recorder.onclick = async () => {
let mStream = await navigator.getDisplayMedia({ 'video': true })
videoElement.srcObject = mStream
let opts = { mimeType: 'video/webm; codecs=vp9' };
let rec = new MediaRecorder(videoElement.srcObject, opts);
let blobs = [];
rec.ondataavailable = (e) => (e.data && e.data.size > 0) ? blobs.push(e.data) : null;
rec.onstop = () => {
// get the image blob
let finalBlob = new Blob(blobs, { type: 'video/mp4' });
// create form data for submission
let formData = new FormData();
formData.append('upload_preset', 'CLOUDINARY_UPLOAD_PRESET');
formData.append('api_key', "CLOUDINARY_API_KEY");
formData.append('file', finalBlob);
var xhr = new XMLHttpRequest();
xhr.open("POST", 'https://api.cloudinary.com/v1_1/CLOUDINARY_CLOUD_NAME/auto/upload');
xhr.onreadystatechange = function () {
if (this.readyState == XMLHttpRequest.DONE && this.status == 200) {
console.log(this.status);
alert("Video uploaded to your cloudinary media library");
}
}
xhr.send(formData);
}
rec.start(100);
setTimeout(() => rec.stop(), 2000)
};
</script>
[...]
Be sure to replace the variables
CLOUDINARY_UPLOAD_PRESET,CLOUDINARY_API_KEY, andCLOUDINARY_CLOUD_NAMEwith their values for your Cloudinary account. To learn how to obtain those values, see the next section.
스크립트의 다음 내용을 참고하십시오.
index.html 의 srcObject 속성에 할당합니다.let mStream = await navigator.getDisplayMedia({ 'video': true })
videoElement.srcObject = mStream
다음 섹션에서는 Cloudinary와 녹화를 연결하는 방법에 대해 자세히 설명합니다.이후 녹화된 내용을 Cloudinary 미디어 라이브러리에 저장하여 동영상을 처리하는 다양한 기능을 얻을 수 있습니다.
Cloudinary와 연결
연결 프로세스 이해
videoElement 파일의 코드 세그먼트:[...]
let opts = { mimeType: 'video/webm; codecs=vp9' };
let rec = new MediaRecorder(videoElement.srcObject, opts);
let blobs = [];
rec.ondataavailable = (e) => (e.data && e.data.size > 0) ? blobs.push(e.data) : null;
rec.onstop = () => {
// get the image blob
let finalBlob = new Blob(blobs, { type: 'video/mp4' });
// create form data for submission
let formData = new FormData();
formData.append('upload_preset', 'CLOUDINARY_UPLOAD_PRESET');
formData.append('api_key', "CLOUDINARY_API_KEY");
formData.append('file', finalBlob);
var xhr = new XMLHttpRequest();
xhr.open("POST", 'https://api.cloudinary.com/v1_1/CLOUDINARY_CLOUD_NAME/auto/upload');
xhr.onreadystatechange = function () {
if (this.readyState == XMLHttpRequest.DONE && this.status == 200) {
console.log(this.status);
alert("Video uploaded to your cloudinary media library");
}
}
xhr.send(formData);
}
rec.start(100);
setTimeout(() => rec.stop(), 2000)
[...]
index.html 미디어 기록을 만들어서 핵심 업로드 기능을 실현한다.다음은 videoElement.srcObject 변수의 속성 정의입니다. 기록기가 어떻게 각종 상황에서 행동을 취하는지 지시합니다.rec 부동산은 특수한 이익을 가지고 있다.기록이 완료되면 기록기는 기록된 데이터를 가져와 단일blob으로 Cloudinary에 보냅니다. 여기에는 Cloudinary의 업로드 사전 설정이 포함되어 있습니다. 업로드한 비디오를 더 처리하려면 Cloudinary 를 이용하십시오.우선 create an account 저기 있습니다.
클라우드 이름 찾기
Cloudinary를 사용하여 계정 세부 정보에 클라우드 이름이 표시되는 대시보드(미디어 콘솔)로 이동합니다(아래 화면 캡처 참조).이 이름으로 이전 코드 세그먼트
rec.onstop 파일 CLOUDINARY_CLOUD_NAME 과 CLOUDINARY_API_KEY 변수를 대체합니다. Cloudinary 업로드 사전 설정 작성
Cloudinary Upload 사전 설정을 사용하면 이미지 업로드의 기본 동작을 설정할 수 있습니다.즉, 이미지를 업로드할 때마다 이미지에 적용할 매개 변수를 추가하지 않고 Cloudinary 콘솔에서 태그, 변환 및 기타 분석 사전 설정을 정의할 수 있습니다.코드에 미리 설정된 이름만 지정하면 됩니다!
사전 설정을 만들려면 Upload Settings 화면으로 이동하여 사전 설정 링크 추가 를 클릭합니다.
그런 다음 업로드 사전 설정 추가 화면을 표시합니다.
사전 설정 이름에서 선택한 이름을 입력하고 모드를 서명하지 않음으로 설정한 다음 필요에 따라 다른 세부 정보를 지정합니다.
이제
index.html 파일로 돌아가서 미리 설정된 이름으로 바꾸십시오 index.html.Cloudinary에 업로드 테스트
현재 모든 Cloudinary 세부 정보를
CLOUDINARY_UPLOAD_PRESET 파일에 추가했습니다. Chrome 브라우저로 이동하여 프레젠테이션 프로그램을 실행하십시오.그러면 다음 화면이 표시됩니다. 업로드된 비디오 액세스
업로드된 이미지에 액세스하려면 다음으로 이동하십시오Cloudinary Media Library:
이제 포맷, 크기 조정, 재단 등 다양한 방식으로 동영상을 쉽고 효율적으로 변환할 수 있습니다.자세한 내용은 을 참조하십시오. Cloudinary Documentation
계속 전진하다
이제 Cloudinary와 JavaScript를 사용하여 웹에 간단한 화면 기록기를 구축하는 방법을 배웠습니다.전체 코드는 Github 저장소를 참조하십시오.이 프레젠테이션은 CodePen 에서도 확인할 수 있습니다.
당신도 Gitbook 강좌를 통해 본문을 방문할 수 있습니다.
이 강좌에서 설명한 개념을 마음대로 사용하여 다른 응용 프로그램을 구축하십시오.Cloudinary는 일련의 우수한 기능을 제공하여 이미지와 영상 관리를 웹과 모바일 응용 프로그램에서 직관적이고 빈틈없고 신속하게 한다.Docheck them out.
Reference
이 문제에 관하여(바로 Cloudinary로 웹을 위한 화면 녹화기 구축!), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/ore/building-a-screen-recorder-for-the-web-with-cloudinary-in-a-jiffy-i6n텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
