melius

WebRTC API https://developer.mozilla.org/en-US/docs/Web/API/WebRTC_API WebRTC (Web Real-Time Communication)는 브라우저간 데이터 교환 뿐만 아니라 audio/video media를 캡쳐링(capturing) 하거나 스트리밍(streaming)할 수 있게 하는 기술이다. Introduction to WebRTC protocols https://developer.mozilla.org/en-US/docs/Web/API/WebRTC_API/Protocols NAT (Network Address Translation) NAT는 사용자 장치에 public IP address를 주기 위해서 사용된다. 라우터는 public IP 주소를..

WebAssembly Concepts https://developer.mozilla.org/en-US/docs/WebAssembly/Concepts WebAssembly는 브라우저(or Node.js)에서 실행가능한 low-level assembly-like 언어로서, C/C++이나 Rust로 작성한 코드를 컴파일하여 생성할 수 있으며, JavaScript와 함께 사용될 수 있다. WebAssembly key concepts Module / Memory / Table / Instance Wasm code는 Online Wasm Assembler를 사용거나 Emscripten을 사용하여 생성할 수 있다. Online Wasm Assembler WasmFiddle / WasmFiddle++ / WasmExp..

MediaStream Recording API https://developer.mozilla.org/en-US/docs/Web/API/MediaStream_Recording_API MediaStream 객체나 TMLMediaElement 객체에서 생성된 데이터를 capture하여 분석, 가공, 저장을 가능하게 해준다. Recording Process 1. media data의 source 생성 (MediaStream or HTMLMediaElement) 2. MediaRecorder 객체 생성 (source와 option 인수 전달) 3. MediaRecorder.ondataavailable 이벤트 핸들러 등록 4. source에서 데이터가 생성되면, MediaRecorder.start() 메소드를 호출..

Media Capture and Streams API https://developer.mozilla.org/en-US/docs/Web/API/Media_Streams_API MediaDevices MediaDevices.enumerateDevices() - Returns: Promise, fulfillment handler의 인수는 MediaDeviceInfo 배열 사용 가능한 Media Device의 정보를 확인할 수 있다. navigator.mediaDevices.enumerateDevices() .then(devices => { devices.forEach(device => console.log(device.kind, device.deviceId)); }) .catch(err => console.l..

The WebSocket API https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API Writing WebSocket client applications https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API/Writing_WebSocket_client_applications WebSocket WebSocket.binaryType - Value: "blob" or "arraybuffer", 연결에 사용되는 binary data type WebSocket.readyState - Value: 0(CONNECTING), 1(OPEN), 2(CLOSING), 3(CLOSED) let webSo..

Web Workers API https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API Worker는 background thread에서 script를 실행하는 객체로서, window 객체와 다른 전역 문맥에서 실행되므로, 직접적으로 DOM을 조작할 수 없다. Worker과 Main Thread간의 데이터 교환은 메시지를 통해서 이루어진다. - postMessage(), onmessage event handler * Functions and classes available to Web Workers Using Web Workers https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/U..

Web Audio API https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API Basic concepts behind Web Audio API https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API/Basic_concepts_behind_Web_Audio_API Web Audio Workflow 1. audio context 생성 2. context내에 source 생성 3. effects node 생성 4. final destination 선택 5. audio source에서 effects를 거쳐 destination 연결 각 audio node의 입력과 출력은 audio channel로..

https://developer.mozilla.org/en-US/docs/Web/API/Screen/orientation https://developer.mozilla.org/en-US/docs/Web/API/ScreenOrientation https://developer.mozilla.org/en-US/docs/Web/API/Screen/lockOrientation https://usefulangle.com/post/105/javascript-change-screen-orientation https://www.jotform.com/blog/html5-screen-orientation-api-uses-javascript-to-rotate-the-screen-89639/ https://code-boxx.c..