?? ? ?? ????? ??? ???? API? ???? ??? ????(?: ??? ? ???)? ?? ???? ?? ?? ??????. ??? API ? ??? ???? ?????? ?? ???? ???? ??? ? ?? MediaRecorder API???.
? ?????? ???? API? ?? ???? ??? ?????, ??? ???? ????, ??? ???? ????? ? ??? ???? JavaScript? ???? ???? ???? ??? ?????!
MediaRecorder API? ???? ??? ??????
???? ???? ??? ???? ????? ?? ??? ????(Flash ?)? ??????. ??? WebRTC ??? ???? ?? ?? ??? ?? ???? ????, P2P ??? ???, ???, ???, ??? ?? ??? ??? ?? ??? ? ????.
MediaRecorder API? ? ??? ???, ?????? ??? ?? ??? ???? ??????.
?????? ???? ???? ??
??? ??? ?? ??? ??? ?????.
- navigator.mediaDevices ??????? getUserMedia() ???? ???? ??? ??????.
- MediaRecorder API? ???? ???? ?????.
- ???? ??? ????? ???? ??? ??? ??? ? ????.
?? ??? ???????.
?: ?????? ??? ??
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Video Recorder</title>
</head>
<body>
<h1>Video Recorder using JavaScript</h1>
<video id="video" autoplay></video>
<button id="start-btn">Start Recording</button>
<button id="stop-btn" disabled>Stop Recording</button>
<video id="recorded-video" controls></video>
<a id="download-link" download="recorded-video.webm">Download Recorded Video</a>
<script>
const videoElement = document.getElementById('video');
const startButton = document.getElementById('start-btn');
const stopButton = document.getElementById('stop-btn');
const recordedVideoElement = document.getElementById('recorded-video');
const downloadLink = document.getElementById('download-link');
let mediaRecorder;
let recordedChunks = [];
// Access webcam
async function startVideoStream() {
const stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
videoElement.srcObject = stream;
// Set up MediaRecorder to record the stream
mediaRecorder = new MediaRecorder(stream);
// When data becomes available, store it
mediaRecorder.ondataavailable = (event) => {
if (event.data.size > 0) {
recordedChunks.push(event.data);
}
};
// When recording stops, create a video blob and show it
mediaRecorder.onstop = () => {
const blob = new Blob(recordedChunks, { type: 'video/webm' });
const videoURL = URL.createObjectURL(blob);
recordedVideoElement.src = videoURL;
downloadLink.href = videoURL;
};
}
// Start recording
startButton.addEventListener('click', () => {
recordedChunks = [];
mediaRecorder.start();
startButton.disabled = true;
stopButton.disabled = false;
});
// Stop recording
stopButton.addEventListener('click', () => {
mediaRecorder.stop();
startButton.disabled = false;
stopButton.disabled = true;
});
// Initialize the video stream
startVideoStream();
</script>
</body>
</html>
?? ??:
1. ??? ?? ??
navigator.mediaDevices.getUserMedia() ???? ???? ???? ??? ? ???? ?? ???? ?????.
const stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
videoElement.srcObject = stream;
? ???? ??? ???? ??? ??? ? ???? ??? MediaStream ??? ???? Promise? ?????. ??? ????
2. ??? ??? ??
??? ????? ???? MediaRecorder ????? ???? ???? ??? ? ????.
mediaRecorder = new MediaRecorder(stream);
MediaRecorder? ???? ??? ???? ???? ??? ? ?? ??? ondataavailable ???? ?????. ??? ??? ??? recordsChunks?? ??? ?????.
mediaRecorder.ondataavailable = (event) => {
if (event.data.size > 0) {
recordedChunks.push(event.data);
}
};
3. ?? ?? ? ?? ??
??? ???? ??? Blob?? ???? ??? ????? URL? ?????.
mediaRecorder.onstop = () => {
const blob = new Blob(recordedChunks, { type: 'video/webm' });
const videoURL = URL.createObjectURL(blob);
recordedVideoElement.src = videoURL;
downloadLink.href = videoURL;
};
??
??? ??? ????
??? ???? ?? ? ?? ??? ??????:
- ?? ??: mediaRecorder.start()? ???? ??? ?????.
- ?? ??: mediaRecorder.stop()? ???? ??? ?????.
?? ? ???? ?? ??? ???? ?? ??? ??????? ??????.
??? ? ?? ?? ??
- ?? ?? ??/?? ??: mediaRecorder.pause() ? mediaRecorder.resume() ???? ???? ?? ?? ? ?? ?? ??? ??? ? ????.
- ??? ??: ????? ??? .webm ??? ?????, video/mp4 ? ???? ??? ?? MIME ??? ??? ? ????.
- ??? ???: ?? ?? ?? ??? ?? ??? ???? ??? ????? ??? ??? ? ????.
??
MediaRecorder API? getUserMedia() ???? ???? JavaScript? ???? ?????? ?? ???? ???? ?? ??? ??? ???????. ??? ??? ???? ?? ????? ??? ???? ??? ?? ???? ???? ??? ??????? ??? ? ????.
?? ?? ??? ? ???????? ??? ?? ??? ?? ???? ????? ?????? ?? ???? ???? ?? ?? ????? ? ?? ??? ??? ? ????.
??? ?????!
? ??? JavaScript ? ???? API? ???? ??? ??? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!
? AI ??
Undress AI Tool
??? ???? ??
Undresser.AI Undress
???? ?? ??? ??? ?? AI ?? ?
AI Clothes Remover
???? ?? ???? ??? AI ?????.
Clothoff.io
AI ? ???
Video Face Swap
??? ??? AI ?? ?? ??? ???? ?? ???? ??? ?? ????!
?? ??
??? ??
???++7.3.1
???? ?? ?? ?? ???
SublimeText3 ??? ??
??? ??, ???? ?? ????.
???? 13.0.1 ???
??? PHP ?? ?? ??
???? CS6
??? ? ?? ??
SublimeText3 Mac ??
? ??? ?? ?? ?????(SublimeText3)
node.js?? HTTP ????? ???
Jul 13, 2025 am 02:18 AM
Node.js?? HTTP ??? ???? ? ?? ???? ??? ????. 1. ?? ????? ????? ??? ??? ? ?? ????? ?? ?? ? https.get () ??? ?? ??? ??? ? ?? ????? ?? ??? ?????. 2.axios? ??? ???? ? ?? ??????. ??? ??? ??? ??? ??? ??? ???/???, ?? JSON ??, ???? ?? ?????. ??? ?? ??? ????? ?? ????. 3. ?? ??? ??? ??? ??? ???? ???? ??? ??? ???? ?????.
JavaScript ??? ?? : ?? ? ??
Jul 13, 2025 am 02:43 AM
JavaScript ??? ??? ?? ?? ? ?? ???? ????. ?? ???? ???, ??, ??, ?, ???? ?? ? ??? ?????. ?? ????? ?? ?? ? ? ??? ????? ?? ??? ??? ????. ??, ?? ? ??? ?? ?? ??? ??? ??? ???? ??? ??? ???? ??? ?? ??? ????. ?? ? ????? ??? ???? ? ??? ? ??? TypeofNull? ??? ?????? ??? ? ????. ? ? ?? ??? ???? ?????? ????? ???? ??? ???? ? ??? ? ? ????.
REACT vs Angular vs Vue : ?? JS ??? ??? ?? ?????
Jul 05, 2025 am 02:24 AM
?? JavaScript ??? ??? ??? ?????? ?? ??? ?? ?? ??? ?? ???? ????. 1. ??? ???? ???? ?? ??? ?? ? ? ???? ??? ??? ?? ? ?? ????? ?????. 2. Angular? ?????? ??? ?? ???? ? ?? ?? ??? ??? ??? ???? ?????. 3. VUE? ???? ?? ??? ???? ?? ?? ??? ?????. ?? ?? ?? ??, ? ??, ???? ???? ? SSR? ???? ??? ??? ??? ???? ? ??? ?????. ???, ??? ??? ??? ????? ????. ??? ??? ??? ??? ?? ????.
JavaScript Time Object, ??? Google Chrome? EACTEXE, ? ?? ? ???? ?????.
Jul 08, 2025 pm 02:27 PM
?????, JavaScript ???! ?? ? JavaScript ??? ?? ?? ?????! ?? ?? ??? ??? ??? ? ????. Deno?? Oracle? ?? ??, ??? JavaScript ?? ??? ????, Google Chrome ???? ? ??? ??? ???? ?????. ?????! Deno Oracle? "JavaScript"??? ????? Oracle? ?? ??? ??? ??????. Node.js? Deno? ??? ? Ryan Dahl? ??? ?????? ???? ????? JavaScript? ??? ???? Oracle? ????? ???? ?????.
?? API? ???? ??? ???? ??? ??????
Jul 08, 2025 am 02:43 AM
Cacheapi? ?????? ?? ???? ??? ???? ???, ?? ??? ??? ?? ???? ? ??? ?? ? ???? ??? ??????. 1. ???? ????, ??? ??, ?? ?? ?? ???? ???? ??? ? ????. 2. ??? ?? ?? ??? ?? ? ? ????. 3. ?? ?? ?? ?? ?? ??? ??? ?? ?????. 4. ??? ???? ?? ?? ???? ?? ?? ?? ?? ?? ???? ?? ?? ??? ??? ? ????. 5. ?? ???? ??, ??? ??? ? ??? ??, ?? ??? ? ?? ???? ???? ???? ? ?? ?????. 6.?? ??? ?? ?? ?? ??, ???? ?? ? HTTP ?? ????? ?????? ???????.
?? ??? : JavaScript? ??, ?? ?? ? ?? ?????
Jul 08, 2025 am 02:40 AM
??? JavaScript?? ??? ??? ?????? ?? ???????. ?? ??, ?? ?? ? ??? ??? ?? ????? ????? ?????. 1. ?? ??? ??? ????? ???? ??. ()? ?? ??? ??? ?????. ?. ()? ?? ??? ?? ??? ??? ?? ? ? ????. 2. ?? ??? .catch ()? ???? ?? ??? ??? ?? ??? ??????, ??? ???? ???? ????? ??? ? ????. 3. Promise.all ()? ?? ????? (?? ?? ?? ? ??????? ??), Promise.Race () (? ?? ??? ?? ?) ? Promise.AllSettled () (?? ??? ???? ??)
??? ??. ?? ????? ??? ????? ??? ?? ??
Jul 06, 2025 am 02:36 AM
.map (), .filter () ? .reduce ()? ?? JavaScript ?? ?? ???? ??? ??? ??? ? ? ????. 1) .map ()? ??? ??? ??? ???? ? ??? ???? ? ?????. 2) .filter ()? ???? ??? ????? ? ?????. 3) .reduce ()? ???? ?? ??? ???? ? ?????. ???? ??? ????? ??? ?? ?? ??? ?????.
JS Roundup : JavaScript ??? ??? ?? ?? ???
Jul 08, 2025 am 02:24 AM
JavaScript? ??? ??? ?? ??, ? ? ? ?? ???? ???? ??? ??? ?????. 1. ?? ??? ?? ??? ???? ??? ??? ??? ??? ?? WebAPI? ?????. 2. WebAPI? ??????? ??? ?? ? ? ??? ?? ??? (??? ?? ?? ???? ??)? ????. 3. ??? ??? ?? ??? ?? ??? ?????. ?? ??? ??? ????? ??? ??? ?? ? ???? ?????. 4. ???? ?? (? : Promise. 5. ??? ??? ???? ?? ???? ???? ?? ?? ?? ??? ????? ? ??????.
