MediaDevices.getUserMedia()을 통해서 MediaStream을 얻을 수 있음.
[MediaDevices](https://developer.mozilla.org/ko/docs/Web/API/MediaDevices)
싱글톤 객체는 다음과 같이 [navigator.mediaDevices](https://developer.mozilla.org/ko/docs/Web/API/Navigator/mediaDevices)
를 사용해 접근한다.[MediaStreamConstraints
(en-US)](https://developer.mozilla.org/en-US/docs/Web/API/MediaStreamConstraints) 객체가 온다.MediaStream얻기
const init() = async () => {
const stream = await navigator.mediaDevices.getUserMedia({
audio: true,
video: true,
});
};
init();
얻은 MediaStream으로 video 재생하기
const video = document.getElementById("preview");
const init = async () => {
const stream = await navigator.mediaDevices.getUserMedia({
audio: true,
video: { width: 200, height: 100 },
});
video.srcObject = stream;
video.play();
};
init()
startBtn클릭시 innerText 바꿔주기
handleDownload기능은 나중에 추가해 줄 거임!
const handleStop = () => {
startBtn.innerText = "Download Recording";
startBtn.removeEventListener("click", handleStop);
startBtn.addEventListener("click", handleDownload);
}
const handleStart = () => {
startBtn.innerText = "Stop Recoding";
startBtn.removeEventListener("click", handleStart);
startBtn.addEventListener("click", handleStop);
}
startBtn.addEventListener("click", handleStart);
startBtn클릭시 video 녹화 시작하기
MediaRecorder.stop() 이 호출되면 MediaRecorder.ondataavailable event가 발생한다.
MediaRecorder.ondataavailable event를 이용하여 녹화한 video를 가져올 수 있다.
let stream;
let recorder;
const handleStop = () => {
startBtn.innerText = "Download Recording";
startBtn.removeEventListener("click", handleStop);
startBtn.addEventListener("click", handleDownload);
recorder.stop();
};
const handleStart = () => {
startBtn.innerText = "Stop Recoding";
startBtn.removeEventListener("click", handleStart);
startBtn.addEventListener("click", handleStop);
recorder = new MediaRecorder(stream);
recorder.ondataavailable = e => {
console.log(e);
};
recorder.start();
};
const init = async () => {
stream = await navigator.mediaDevices.getUserMedia({
audio: true,
video: { width: 200, height: 100 },
});
video.srcObject = stream;
video.play();
};
init();
startBtn.addEventListener("click", handleStart);
ondataavailable의 이벤트가 발생했을때 콘솔에 찍힌 이벤트 내용은 다음과 같다.
e.data로 녹화한 video data를 얻을 수 있음.
BlobEvent {isTrusted: true, data: Blob, timecode: 1635443942261.594, type: 'dataavailable', target: MediaRecorder, …}
isTrusted: true
bubbles: false
cancelBubble: false
cancelable: false
composed: false
currentTarget: MediaRecorder {stream: MediaStream, mimeType: 'video/x-matroska;codecs=avc1,opus', state: 'inactive', onstart: null, onstop: null, …}
data: Blob {size: 5026, type: 'video/x-matroska;codecs=avc1,opus'}
defaultPrevented: false
eventPhase: 0
path: []
returnValue: true
srcElement: MediaRecorder {stream: MediaStream, mimeType: 'video/x-matroska;codecs=avc1,opus', state: 'inactive', onstart: null, onstop: null, …}
target: MediaRecorder {stream: MediaStream, mimeType: 'video/x-matroska;codecs=avc1,opus', state: 'inactive', onstart: null, onstop: null, …}
timeStamp: 5154.80000000447
timecode: 1635443942261.594
type: "dataavailable"
[[Prototype]]: BlobEvent
const handleStop = () => {
startBtn.innerText = "Download Recording";
startBtn.removeEventListener("click", handleStop);
startBtn.addEventListener("click", handleDownload);
recorder.stop();
};
const handleStart = () => {
startBtn.innerText = "Stop Recoding";
startBtn.removeEventListener("click", handleStart);
startBtn.addEventListener("click", handleStop);
recorder = new MediaRecorder(stream);
recorder.ondataavailable = e => {
console.log(e);
const videoFile = URL.createObjectURL(e.data);
video.srcObject = null;
video.src = videoFile;
video.loop = true;
video.play();
};
recorder.start();
};
a.download = "My Recording.webm"로 해주면 다운로드 할 때 파일 이름이 My Recording.webm로 된다.
a.href로 videoFile을 주기위해 videoFile을 전역변수로 만들어줘야 한다.
const startBtn = document.getElementById("startBtn");
const video = document.getElementById("preview");
let stream;
let recorder;
let videoFile;
const handleDownload = () => {
const a = document.createElement("a");
a.href = videoFile;
a.download = "My Recording.webm";
document.body.appendChild(a);
a.click();
};
const handleStop = () => {
startBtn.innerText = "Download Recording";
startBtn.removeEventListener("click", handleStop);
startBtn.addEventListener("click", handleDownload);
recorder.stop();
};
const handleStart = () => {
startBtn.innerText = "Stop Recoding";
startBtn.removeEventListener("click", handleStart);
startBtn.addEventListener("click", handleStop);
recorder = new MediaRecorder(stream);
recorder.ondataavailable = e => {
console.log(e);
videoFile = URL.createObjectURL(e.data);
video.srcObject = null;
video.src = videoFile;
video.loop = true;
video.play();
};
recorder.start();
};
const init = async () => {
stream = await navigator.mediaDevices.getUserMedia({
audio: true,
video: { width: 200, height: 100 },
});
video.srcObject = stream;
video.play();
};
init();
startBtn.addEventListener("click", handleStart);