Video 태그

이윤우·2022년 1월 23일

getUserMedia html html 태그 mediaDevices video video 태그 음소거 태그 화면끄기

WebRTC

목록 보기

2/4

Video 태그

정의

HTML video 태그는 비디오 플레이백을 지원하는 미디어 플레이어를 문서에 삽입합니다.

매개변수

autoplay
- 준비되는 비디오가 즉시 재생을 시작하도록 지정
- autoplay="false" ==> autoplay 비활성화
muted
- 비디오의 오디오 출력이 음소거되도록 지정
poster
- 이미지가 동영상을 다운로드하는 동안 표시, 또는 사용자까지 재생 버튼 안타를 지정합니다.
width, height
- 비디오 플레이의 너비와 높이 설정

예시

<video src="videofile.ogg" autoplay poster="posterimage.jpg">
  Sorry, your browser doesn't support embedded videos,
  but don't worry, you can <a href="videofile.ogg">download it</a>
  and watch it with your favorite video player!
</video>

공식 문서: https://developer.mozilla.org/ko/docs/Web/HTML/Element/Video

MediaDevices.getUserMedia()

정의

사용자에게 미디어 입력 장치 사용 권한을 요청하며, 사용자가 수락하면 요청한 미디어 종류의 트랙을 포함한 MediaStream을 반환합니다.

반환하는 값은 MediaStream 객체로 이행하는 Promis 입니다. 사용자가 권한 요청을 거부했거나 일치하는 유형의 미디어를 사용할 수 없는 경우, 프로미스는 각각 NonAllowedError 와 NotFounError로 거부합니다.

매개변수

MediaStreamConstraints

audio와 video 요청 지정
```
{
  audio: true, video: true 
}
```

해상도 지정

{
  audio: true,
  video: {
    width: { min: 1024, ideal: 1280, max: 1920 },
    height: { min: 776, ideal: 720, max: 1080 }
  }
}

예시

// video 태그
const myFace = document.getElementById("myFace")

let constraints = {
  audio: true,
  video: {
    width: { min: 1024, ideal: 1280, max: 1920 },
    height: { min: 776, ideal: 720, max: 1080 }
  }
}

let stream;

async function getMedia(constraints) {
  try {
    stream = await navigator.mediaDevices.getUserMedia(constraints);
    myFace.srcObject = stream
    /* 스트림 사용 */
  } catch(err) {
    /* 오류 처리 */
  }
}

getMedia(constraints)

공식문서: https://developer.mozilla.org/ko/docs/Web/API/MediaDevices/getUserMedia

Muted, cameraOff

const muteBtn = document.getElementById("mute");
const cameraBtn = document.getElementById("camera");

let muted = false;
let cameraOff = false;

function handleMuteClick() {
  stream
    .getAudioTracks()
    .forEach((track) => (track.enabled = !track.enabled));
  if (!muted) {
    muteBtn.innerText = "Unmute";
    muted = true;
  } else {
    muteBtn.innerText = "Mute";
    muted = false;
  }
}

function handleCameraClick() {
  stream
    .getVideoTracks()
    .forEach((track) => (track.enabled = !track.enabled));
  if (cameraOff) {
    cameraBtn.innerText = "Turn Camera Off";
    cameraOff = false;
  } else {
    cameraBtn.innertText = "Turn Camera On";
    cameraOff = True;
  }
}

muteBtn.addEventListener("click", handleMuteClick);
cameraBtn.addEventListener("click", handleCameraClick);