[JavaScript] 자바스크립트에서 카메라 기능 사용하기

196_자바스크립트에서 카메라 기능 사용하기 [적용] 웹 카메라를 사용해 사이트 내 유저의 카메라 화면을 표시하고 싶을 때 [내용] 웹 카메라로 영상과 사운드의 사용이 가능하며, 반응형 콘텐츠와 실시간 비디오챗 등에 이용한다. 웹 카메라는 getUserMdeia()를 사용한다. video 요소 srcObject 속성에 웹 카메라 스트림을 지정하고, vidoe 요소에는 autoplay 속성을 지정한다. autoplay 속성을 지정하지 않으면 브라우저에 따라 화면의 표시가 지연되는 경우가 있다. HTML index.html JavaScript main.js let stream; async function loadAndPlay() { const video = document.getElementById('myV..

2022.07.25

[JavaScript] 자바스크립트에서 스크립트로 영상 제어하기

195_자바스크립트에서 스크립트로 영상 제어하기 [적용] 영상의 재생을 관리하고 싶을 때 [문법] 메소드 의미 반환 play() 재생 Promise pause() 일시정지 없음 [내용] video 요소의 play()와 pause()로 영상의 재생과 정지가 가능하다. HTML index.html 재생 정지 자바스크립트로 HTML의 video 요소를 참조한다. JavaScript main.js const video = document.querySelector('#myVideo'); play()를 사용해 영상을 재생한다. JavaScript main.js video.play(); 일시정지는 pause()를 사용하며, 영상 재생 바가 해당 위치에 멈춘다. 추후 해당 위치에서 다시 재생이 가능하다. JavaScr..

2022.07.25

[JavaScript] 자바스크립트에서 영상 로딩하기

194_자바스크립트에서 영상 로딩하기 [적용] 웹 사이트에 영상을 넣고 싶을 때 웹 사이트에 영상으로 효과를 넣고 싶을 때 [문법] 속성 의미 타입 src 리소스 지정 문자열 controls 컨트롤 바 표시 없음 autoplay 자동 재생 없음 loop 반복 없음 preload 영상 미리 불러오기 문자열 playsinline 인라인 재생 지정 없음 [내용] video 태그를 사용해 영상을 로딩할 수 있다. HTML에 video 요소를 배치하고, src 속성에 파일의 주소를 지정한다. sidth와 height 속성으로 비디오의 가로, 새로 길이를 지정하며, 길이 지정이 없으면 영상의 사이즈에 맞춰 표시된다. HTML index.html controls 속성을 사용하여 비디오 재생, 정지 버튼을 사용할 수 ..

2022.07.24

[JavaScript] 자바스크립트에서 Web Audio API 사용하기

193_자바스크립트에서 Web Audio API 사용하기 [적용] 모바일 웹 사이트에서 사운드를 동시에 재생하고 싶을 때 오디오 파형으로 사운드 비주얼라이저를 만들고 싶을 때 오디오 데이터를 서버에 전송하고 싶을 때 [내용] Web Audio API는 사운드를 다루는 고급 기능이다. audio 요소에 비해 기능이 많고 제양이 적다. 예를 들면 사운드 파형의 데이터를 가져와 비주얼라이저를 만들거나, 모바일 브라우저에서 여러 BGM과 효과음을 동시에 재생할 수 있다. 다만 고급 기능이므로 난이도가 있고 코드가 길어진다. 사운드 파일을 로딩하여 재생하는 예시를 확인해 보자. loadAndPlay() 함수를 사용해 사운드를 재생한다. HTML index.html 재생 정지 JavaScript main.js lo..

2022.07.24

[JavaScript] 자바스크립트에서 사운드 볼륨 조절하기

192_자바스크립트에서 사운드 볼륨 조절하기 [적용] 스크립트로 사운드의 볼륨을 조절하고 싶을 때 음소거 기능을 사용하고 싶을 때 [문법] 속성 의미 타입 volume 볼륨 값 숫자 muted 음소거 상태 여부 진리값 [내용] volume 속성을 사용해 사운드의 볼륨을 확인하거나 설정을 조정할 수 있는데, 그 범위는 0.0(음소거) ~ 1.0(최대 볼륨) 내에서 설정이 가능하다. muted 속성은 음소거 상태의 확인과 설정이 가능하다. volume 속성은 볼륨 크기의 세세한 조절이 가능하지만, muted 속성은 음소거 기능만 작동한다. JavaScript main.js const audio = document.querySelector('#myAudio'); audio.volume = 1.0; JavaSc..

2022.07.24

[JavaScript] 자바스크립트에서 사운드 재생 조절하기

191_자바스크립트에서 사운드 재생 조절하기 [적용] 사운드 재생 시간을 조절하고 싶을 때 [문법] 속성 의미 타입 currentTime 재생 헤드 값(second), 읽기/쓰기 기능 숫자 duration 사운드의 길이(second), 읽기 기능 숫자 [내용] audio 요소의 currenTime 속성을 사용해 현재 재생 위치(초 단위) 확이나 설정이 가능하며, 스크립트로 스킵 기능을 사용할 때도 유용하다. 사운드의 길이(Duration) 보다 작은 값을 설정하지 않도록 주의하자. JavaScript main.js const audio = document.querySelector('#myAudio'); audio.currnetTime = 1.0; duration 속성은 사운드의 길이를 확인할 수 있다. ..

2022.07.24

[JavaScript] 자바스크립트에서 스크립트로 사운드 제어하기

190_자바스크립트에서 스크립트로 사운드 제어하기 [적용] 스크립트로 사운드 재생 상태를 관리하고 싶을 때 [문법] 메소드 의미 반환 play() 재생 Promise pause() 일시정지 없음 [내용] audio 요소의 play()와 pause()를 사용해 사운드를 재생하거나 정지할 수 있다. HTML index.html 재생 정지 JavaScript (부분) main.js const audio = document.querySelector('#myAudio'); 재생은 play()를 사용한다. audio.play(); 일시정지는 pause()를 사용한다. 사운드 재생 바가 해당 위치에서 멈춘다. audio.Pause(); 실행결과 참조 : 실무에 바로 적용하는 자바스크립트 코드레시피 278 아케다 야스..

2022.07.24

[JavaScript] 자바스크립트에서 사운드 사용하기

189_자바스크립트 사운드 사용하기 [적용] 시운드를 HTML 태그로 조절하고 싶을 때 사운드를 반복 재생하고 싶을 때 사운드 컨트롤 UI를 표시하고 싶을 때 [문법] 속성 의미 타입 src 리소스 지점 문자열 controls 컨트롤 바 표시 없음 loop 루프 지정 없음 preload 미리 불러오기 문자열 [내용] audio 태그는 사운드 파일 재생 멀티미디어 관련 태그이다. HTML 내 audio 요소를 배치하고 src 속성에 사운드 파일을 지정한다. HTML index.html 재생이나 일시정지 등의 버튼을 사용할 수 있으며, controls를 사용하지 않으면 화면에는 버튼이 표시되지 않는다. 컨트롤 바는 브라우저에 따라 독자적인 디자인을 가진다. HTML index.html audio 요소의 사운..

2022.07.24

[JavaScript] 자바스크립트에서 스크립트로 이미지 요소 추가하기

188_자바스크립트에서 스크립트로 이미지 요소 추가하기 [적용] 동적으로 이미지를 배치하고 싶을 때 대량의 이미지를 효율적으로 배치하고 싶을 때 [문법] 메소드 의미 반환 new image() img 요소 인스턴스 생성 img 요소 [내용] img 요소의 인스턴스는 Image 객체를 사용해 생성하며, new Image() 대신 document.createElement('img')를 사용할 수도 있다. 작성한 요소는 DOM 트리에 추가가 필요하며, body 요소 내 표시하고자 할 때는 document.body.appendCHild()를 사용한다. HTML index.html JavaScript main.js // 삽입하고 싶은 요소를 참조 const container = document.querySelec..

2022.07.22

[JavaScript] 자바스크립트에서 Base64 형식 이미지 표시하기

187_자바스크립트에서 Base64 형식 이미지 표시하기 [적용] 프로그램으로 생성한 이미지 데이터를 표시하고 싶을 때 [내용] JPEG와 PNG 파일은 바이너리(Binary) 파일이므로 텍스트 에디터로 열 수 없지만, Base64를 사용하면 이미지를 문자열 상태로 관리할 수 있다. 자바스크립트는 Base64 문자열을 사용해 src 속성에 해당 문자열을 대입하여 이미지를 표시할 수 있다. Base64의 시작 문자열은 'data:image/jpeg;base64' 또는 'data:image/png;base64' 이다. HTML index.html JavaScript main.js const img = document.querySelector('#myImage'); img.src = 'data:image/jp..

2022.07.22