JavaScript 로 동영상 해상도 확인후 서버로 전송하기
2025. 6. 4. 22:27ㆍ프로그램/Javascript
JavaScript(클라이언트 측)에서 동영상 해상도를 확인하고 PHP(서버 측)로 전송하는 방법을 자세히 알려드리겠습니다. 이 방법은 사용자가 동영상을 업로드하거나 페이지를 로드할 때 클라이언트 브라우저에서 직접 동영상의 메타데이터를 읽어 서버로 보내는 방식입니다.
이 과정은 크게 세 단계로 나뉩니다.
- HTML: 동영상을 표시하고 JavaScript 코드를 실행할 페이지.
- JavaScript: 동영상 해상도를 가져와 AJAX(Asynchronous JavaScript and XML) 요청으로 PHP에 전송.
- PHP: JavaScript로부터 전송된 해상도 데이터를 받아 처리.
1단계: HTML 페이지 준비
동영상을 로드할 <video> 태그와, 해상도를 확인하여 전송할 스크립트가 포함될 HTML 파일을 만듭니다. (예: index.html)
HTML
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>동영상 해상도 전송 예제</title>
</head>
<body>
<h1>동영상 해상도 확인 및 전송</h1>
<video id="myVideo" controls preload="metadata" style="max-width: 600px; display: block; margin-bottom: 20px;">
<source src="your_video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<p>
<button id="sendDimensionsBtn">동영상 해상도 전송하기</button>
</p>
<div id="statusMessage" style="margin-top: 20px; color: blue;"></div>
<script>
const videoElement = document.getElementById('myVideo');
const sendButton = document.getElementById('sendDimensionsBtn');
const statusMessage = document.getElementById('statusMessage');
let videoWidth = 0;
let videoHeight = 0;
// 동영상 메타데이터가 로드되면 해상도 정보 가져오기
videoElement.addEventListener('loadedmetadata', () => {
videoWidth = videoElement.videoWidth;
videoHeight = videoElement.videoElementHeight; // 오타 수정: videoElementHeight -> videoHeight
statusMessage.textContent = `동영상 해상도 감지됨: ${videoWidth}x${videoHeight}`;
console.log(`동영상 해상도: ${videoWidth}x${videoHeight}`);
});
// 에러 처리: 동영상을 로드할 수 없을 때
videoElement.addEventListener('error', (e) => {
statusMessage.textContent = '동영상 로드 중 오류 발생: ' + e.message;
console.error('동영상 로드 오류:', e);
});
// 버튼 클릭 시 PHP로 데이터 전송
sendButton.addEventListener('click', () => {
if (videoWidth === 0 || videoHeight === 0) {
statusMessage.textContent = '동영상 해상도를 먼저 감지해야 합니다.';
alert('동영상 해상도를 먼저 감지해야 합니다. 동영상이 완전히 로드되었는지 확인하세요.');
return;
}
statusMessage.textContent = '서버로 데이터 전송 중...';
fetch('save_video_dimensions.php', {
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded', // POST 요청의 기본 형식
},
// FormData를 사용하면 더 간편하게 보낼 수 있습니다:
// body: new URLSearchParams({
// width: videoWidth,
// height: videoHeight,
// video_url: videoElement.src // 동영상 URL도 함께 보낼 수 있음
// }).toString(),
body: `width=${videoWidth}&height=${videoHeight}&video_url=${encodeURIComponent(videoElement.src)}`
})
.then(response => response.text()) // 또는 response.json()
.then(data => {
statusMessage.textContent = `서버 응답: ${data}`;
console.log('서버 응답:', data);
})
.catch(error => {
statusMessage.textContent = '데이터 전송 중 오류 발생: ' + error.message;
console.error('Fetch 오류:', error);
});
});
// 페이지 로드 시 동영상 메타데이터 미리 로드 시도
// videoElement.load(); // preload="metadata" 속성으로 대체 가능
</script>
</body>
</html>
코드 설명 (HTML/JavaScript):
- <video id="myVideo" controls preload="metadata">: 동영상 요소입니다.
- controls: 재생/일시정지 등의 컨트롤러를 표시합니다.
- preload="metadata": 동영상의 메타데이터(길이, 해상도 등)만 미리 로드하도록 브라우저에 지시합니다. 전체 동영상 파일 로드를 기다리지 않아도 해상도를 얻을 수 있어 효율적입니다.
- videoElement.addEventListener('loadedmetadata', ...): 동영상의 메타데이터가 성공적으로 로드되면 이 이벤트가 발생합니다.
- videoElement.videoWidth 및 videoElement.videoHeight: 이 속성들은 loadedmetadata 이벤트 이후에 동영상의 실제 가로/세로 픽셀 값을 반환합니다.
- fetch('save_video_dimensions.php', { ... }): JavaScript의 fetch API를 사용하여 save_video_dimensions.php 파일로 HTTP POST 요청을 보냅니다.
- method: 'POST': POST 방식으로 데이터를 전송합니다.
- headers: { 'Content-Type': 'application/x-www-form-urlencoded' }: 서버가 데이터를 어떻게 인코딩했는지 알 수 있도록 헤더를 설정합니다. (일반적인 폼 제출 방식)
- body:width=${videoWidth}&height=${videoHeight}&video_url=${encodeURIComponent(videoElement.src)}: 전송할 데이터입니다.width,height,video_url을 쿼리 문자열 형식으로 만들어서 보냅니다.encodeURIComponent()`는 URL에 포함될 수 없는 특수 문자를 안전하게 인코딩합니다.
- .then().catch(): 서버로부터의 응답을 처리하고, 오류가 발생했을 때 처리하는 Promise 구문입니다.
2단계: PHP 스크립트 준비
JavaScript에서 보낸 데이터를 받아 처리할 PHP 파일을 만듭니다. (예: save_video_dimensions.php)
PHP
<?php
header('Content-Type: text/plain; charset=utf-8'); // 응답이 일반 텍스트임을 명시
// POST 요청으로 데이터가 전송되었는지 확인
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
// POST 데이터에서 너비, 높이, 동영상 URL 가져오기
$width = $_POST['width'] ?? 'N/A'; // ??는 PHP 7 이상 Null Coalescing Operator
$height = $_POST['height'] ?? 'N/A';
$video_url = $_POST['video_url'] ?? 'N/A';
// 데이터가 유효한지 간단히 검증 (더 강력한 검증 필요)
if (is_numeric($width) && is_numeric($height) && $width > 0 && $height > 0) {
// 여기에서 동영상 해상도 데이터를 데이터베이스에 저장하거나, 로그 파일에 기록하는 등의 서버 작업을 수행할 수 있습니다.
// 예: database_save_function($video_url, $width, $height);
// 예: file_put_contents('video_dimensions.log', "URL: {$video_url}, Width: {$width}, Height: {$height}\n", FILE_APPEND);
echo "SUCCESS: 동영상 해상도가 성공적으로 수신되었습니다. Width: {$width}, Height: {$height}, URL: {$video_url}";
} else {
echo "ERROR: 유효하지 않은 동영상 해상도 데이터입니다.";
}
} else {
// POST 요청이 아닌 경우
echo "ERROR: 이 스크립트는 POST 요청만 처리합니다.";
}
?>
코드 설명 (PHP):
- header('Content-Type: text/plain; charset=utf-8');: 클라이언트에 응답하는 데이터의 MIME 타입과 인코딩을 지정합니다.
- if ($_SERVER['REQUEST_METHOD'] === 'POST'): 요청이 POST 방식으로 왔는지 확인합니다.
- $_POST['width'], $_POST['height'], $_POST['video_url']: JavaScript에서 fetch 요청의 body에 보낸 데이터는 PHP의 $_POST 슈퍼글로벌 배열을 통해 접근할 수 있습니다.
- ?? 'N/A': PHP 7부터 도입된 Null Coalescing Operator로, 해당 키가 없으면 'N/A'를 기본값으로 사용합니다.
- is_numeric(): 수신된 값이 숫자인지 간단히 검증합니다. 실제 서비스에서는 더 강력한 유효성 검사(데이터 범위, SQL 인젝션 방지 등)가 필요합니다.
- 여기서 DB 저장, 로그 기록 등의 서버 로직을 구현합니다.
- echo: PHP 스크립트의 echo 출력은 JavaScript fetch의 response.text() (또는 response.json())로 클라이언트에 전달됩니다.
실행 방법:
- 위의 HTML 코드를 index.html로 저장합니다.
- 위의 PHP 코드를 save_video_dimensions.php로 저장합니다.
- index.html 파일에서 <video> 태그의 src="your_video.mp4" 부분을 실제 접근 가능한 MP4 파일 경로로 수정합니다. (예: src="sample.mp4"와 같이 같은 디렉터리에 샘플 MP4 파일을 두거나, 웹 서버의 공개된 경로로 지정)
- 이 두 파일을 웹 서버(Apache, Nginx 등)의 문서 루트 디렉터리에 업로드합니다.
- 브라우저에서 index.html 파일에 접근합니다 (예: http://localhost/index.html).
- 페이지가 로드되고 동영상 메타데이터가 로드되면 "동영상 해상도 감지됨" 메시지가 표시됩니다.
- "동영상 해상도 전송하기" 버튼을 클릭하면, JavaScript가 해상도 데이터를 PHP 스크립트로 전송하고, PHP 스크립트의 응답이 화면에 표시됩니다.
중요 보안 고려사항:
- 사용자로부터 받은 데이터($_POST로 수신된 데이터)는 항상 신뢰할 수 없습니다. 데이터베이스에 저장하거나 다른 용도로 사용하기 전에 **반드시 적절한 유효성 검사(Validation)와 살균(Sanitization)**을 수행해야 합니다 (예: filter_var(), mysqli_real_escape_string() 또는 PDO/Prepared Statements 사용).
- 이 예시는 HTTP POST 요청을 사용하므로, CORS(Cross-Origin Resource Sharing) 문제가 발생할 가능성이 적습니다. 하지만 만약 JavaScript를 다른 도메인에서 실행하고 PHP 스크립트로 데이터를 보내려 한다면 CORS 설정이 필요할 수 있습니다.
적용된 페이지 확인하기 : https://pds.luzensoft.com/detailview.php?fno=53175
루젠소프트 자료실
자료실,무료다운로드,프리웨어,셰어웨어,개발도구
pds.luzensoft.com
'프로그램 > Javascript' 카테고리의 다른 글
| Video, Audio 태그 LoadedMetaData 에서 얻을수 있는 정보 (0) | 2025.06.08 |
|---|---|
| jquery radio 값 가져오기 (0) | 2025.06.04 |
| 구조화된 데이터 (Schema Markup) - VideoObject 설정 방법 (0) | 2025.06.04 |
| JavaScript Beautifier (0) | 2025.05.21 |