const videoElement = document.querySelector("video");  
videoElement.srcObject = stream;  

const recorder = new MediaRecorder(stream);  
recorder.start();  

// 모든 트랙 확인  
const allTracks = stream.getTracks();  
console.log(`총 ${allTracks.length}개 트랙`);

// 오디오만  
const audioTracks = stream.getAudioTracks();

// 비디오만  
const videoTracks = stream.getVideoTracks();

// 특정 ID로  
const track = stream.getTrackById("some-id");  

// 다른 스트림의 트랙 가져와서 추가  
const screenTrack = screenStream.getVideoTracks()[0];  
myStream.addTrack(screenTrack);

// 필요 없는 트랙 제거  
const videoTrack = myStream.getVideoTracks()[0];  
myStream.removeTrack(videoTrack);  

// 같은 트랙을 참조하지만 다른 ID  
const clonedStream = stream.clone();

// 용도: 같은 영상을 여러 곳에 사용  
videoElement1.srcObject = stream;  
videoElement2.srcObject = clonedStream;  

// 트랙이 추가되면  
stream.addEventListener("addtrack", (event) => {  
	console.log("새 트랙:", event.track.kind);  
	// "audio" 또는 "video"  
});

// 트랙이 제거되면  
stream.addEventListener("removetrack", (event) => {  
	console.log("트랙 제거됨");  
});

// 스트림이 활성화되면  
stream.addEventListener("active", () => {  
	console.log("스트림 사용 가능");  
});

// 모든 트랙이 종료되면  
stream.addEventListener("inactive", () => {  
	console.log("스트림 종료됨");  
});  

const track = stream.getVideoTracks()[0];

console.log(track.kind); // "video" 또는 "audio"  
console.log(track.label); // "FaceTime HD Camera"  
console.log(track.id); // "unique-id"  
console.log(track.readyState); // "live" 또는 "ended"  

// 카메라 끄기 (검은 화면 전송)  
videoTrack.enabled = false;

// 카메라 켜기  
videoTrack.enabled = true;

// 마이크 음소거  
audioTrack.enabled = false;  

// 읽기만 가능 (변경 불가)  
console.log(track.muted); // true 또는 false

// 이벤트로 감지  
track.addEventListener("mute", () => {  
	console.log("트랙이 음소거되었습니다");  
});

track.addEventListener("unmute", () => {  
	console.log("트랙이 다시 활성화되었습니다");  
});  

const videoTrack = stream.getVideoTracks()[0];

// 방법 1: enabled 사용 (임시로 끄기)  
videoTrack.enabled = false; // 카메라는 켜져 있지만 검은 화면  
videoTrack.enabled = true; // 다시 켜기 가능

// 방법 2: stop 사용 (완전히 종료)  
videoTrack.stop(); // 카메라 LED 꺼짐, 다시 켤 수 없음  

const originalTrack = stream.getVideoTracks()[0];  
const clonedTrack = originalTrack.clone();

// 같은 소스, 다른 ID  
console.log(originalTrack.id !== clonedTrack.id); // true  

// 둘 다 켜기  
const stream = await navigator.mediaDevices.getUserMedia({  
	video: true,  
	audio: true  
});

// 화면에 보여주기  
document.querySelector("#myVideo").srcObject = stream;  

const stream = await navigator.mediaDevices.getUserMedia({  
	video: {  
		width: { ideal: 1280 }, // 가능하면 1280px  
		height: { ideal: 720 } // 가능하면 720px  
	}  
});  

// 고화질 화상 회의  
video: {  
  width: { ideal: 1920 },  
  height: { ideal: 1080 },  
  frameRate: { ideal: 30 }  
}

// 모바일 데이터 절약  
video: {  
  width: { max: 640 },  
  height: { max: 480 },  
  frameRate: { max: 15 }  
}

// 전면 카메라 사용 (모바일)  
video: {  
  facingMode: 'user'  // 전면 카메라  
  // facingMode: 'environment'  // 후면 카메라  
}

// 오디오 품질 개선  
audio: {  
  echoCancellation: true,    // 메아리 제거  
  noiseSuppression: true,    // 배경 소음 제거  
  autoGainControl: true,     // 자동 볼륨 조절  
  sampleRate: { ideal: 48000 }  // 고음질  
}  

// 1. 사용 가능한 장치 목록  
const devices = await navigator.mediaDevices.enumerateDevices();

devices.forEach((device) => {  
	console.log(device.kind); // "videoinput", "audioinput"  
	console.log(device.label); // "FaceTime HD Camera"  
	console.log(device.deviceId); // 고유 ID  
});

// 2. 특정 장치 선택  
const constraints = {  
	video: {  
		deviceId: { exact: "specific-camera-id" }  
	}  
};  
const stream = await navigator.mediaDevices.getUserMedia(constraints);  

const screenStream = await navigator.mediaDevices.getDisplayMedia({  
	video: true,  
	audio: true // 시스템 오디오  
});  

const screenStream = await navigator.mediaDevices.getDisplayMedia({  
	video: true  
});

const screenTrack = screenStream.getVideoTracks()[0];

// 사용자가 공유 중지 버튼을 누르면  
screenTrack.onended = () => {  
	console.log("화면 공유 종료됨");  
	// UI 업데이트 또는 카메라로 복귀  
};  

// 카메라 + 화면 공유  
const camera = await navigator.mediaDevices.getUserMedia({  
	video: true,  
	audio: true  
});

const screen = await navigator.mediaDevices.getDisplayMedia({  
	video: true  
});

// 카메라 오디오 + 화면 비디오  
const combined = new MediaStream([...camera.getAudioTracks(), ...screen.getVideoTracks()]);  

const canvas = document.createElement("canvas");  
canvas.width = 1280;  
canvas.height = 720;  
const ctx = canvas.getContext("2d");

// 두 비디오를 나란히 배치  
function drawFrame() {  
	// 왼쪽에 카메라  
	ctx.drawImage(cameraVideo, 0, 0, 640, 720);

	// 오른쪽에 화면 공유  
	ctx.drawImage(screenVideo, 640, 0, 640, 720);

	requestAnimationFrame(drawFrame);  
}  
drawFrame();

// Canvas를 스트림으로 변환  
const compositeStream = canvas.captureStream(30); // 30fps  

// 이렇게 하면 카메라가 계속 켜져 있음  
const stream = await getUserMedia({ video: true });  
// ... 사용 후  
// 정리 안 함!  

const stream = await getUserMedia({ video: true });

// 사용 완료 후  
function cleanup() {  
	stream.getTracks().forEach((track) => {  
		track.stop(); // 카메라 LED 꺼짐  
	});  
}

// React라면 이렇게하면 되겠죠?  
useEffect(() => {  
	return () => {  
		cleanup(); // cleanup 함수  
	};  
}, [stream]);  

try {  
	const stream = await navigator.mediaDevices.getUserMedia({  
		video: true  
	});  
} catch (error) {  
	if (error instanceof DOMException) {  
		switch (error.name) {  
			case "NotAllowedError":  
				alert("카메라 권한을 허용해주세요");  
				break;  
			case "NotFoundError":  
				alert("카메라를 찾을 수 없습니다");  
				break;  
			case "NotReadableError":  
				alert("카메라가 이미 다른 앱에서 사용 중입니다");  
				break;  
			case "OverconstrainedError":  
				alert("요청한 설정을 지원하지 않습니다");  
				break;  
			default:  
				alert("미디어 장치 접근 중 오류가 발생했습니다");  
				break;  
		}  
	}  
}  

http://localhost:3000 (예외적으로 허용)  
http://127.0.0.1:3000 (예외적으로 허용)  
http://192.168.0.10:3000 (안 됨!)  

https://your-domain.com (필수!)  

// 음소거 상태여야 자동재생 가능  
videoElement.muted = true;  
await videoElement.play();  

// Wake Lock API (실험적)  
let wakeLock = null;

async function preventSleep() {  
	try {  
		wakeLock = await navigator.wakeLock.request("screen");  
	} catch (err) {  
		console.log("Wake Lock 실패:", err);  
	}  
}  

// 백그라운드에서는 품질 낮추기  
document.addEventListener("visibilitychange", () => {  
	if (document.hidden) {  
		// 탭이 백그라운드로 갔을 때  
		// 해상도 낮추기 또는 비디오 끄기  
	} else {  
		// 다시 활성화됐을 때  
		// 원래 품질로 복구  
	}  
});