시대가 좋아지긴 했다.
맨날 카메라에서 옮기고, Depth에서 막히고 그랬는데
웹에서 이렇게 작동하는 소스를 바로 생성이 가능하다니.
이걸 다시 분석하고 이해해서 원하는걸 만들어 봐야겠다.
그나저나 쉐이더까지 뚝딱이라니.. 무섭네
| 웹 브라우저에서 웹 캠 띄우기 (0) | 2024.09.24 |
|---|---|
| three.js (0) | 2024.09.19 |
| XMLHttpRequest 가로채기 (0) | 2024.07.19 |
| web worker (0) | 2024.07.19 |
| mirage.js - api mockup (0) | 2024.07.19 |
예전에 본 것 같긴한데 해본적은 없는 것 같아서 검색
[링크 : https://velog.io/@davelee/browser에서-webcam-이용하기]
| const constraints = { audio: true, video: { width: 1280, height: 720 }, }; navigator.mediaDevices .getUserMedia(constraints) .then((mediaStream) => { const video = document.querySelector("video"); video.srcObject = mediaStream; video.onloadedmetadata = () => { video.play(); }; }) .catch((err) => { // always check for errors at the end. console.error(`${err.name}: ${err.message}`); }); |
[링크 : https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia]
| Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers. navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia; if (navigator.getUserMedia) { navigator.getUserMedia( { audio: true, video: { width: 1280, height: 720 } }, (stream) => { const video = document.querySelector("video"); video.srcObject = stream; video.onloadedmetadata = (e) => { video.play(); }; }, (err) => { console.error(`The following error occurred: ${err.name}`); }, ); } else { console.log("getUserMedia not supported"); } |
[링크 : https://developer.mozilla.org/en-US/docs/Web/API/Navigator/getUserMedia] deprecated
| webgl + three.js를 이용한 GL 공부하기 (feat 클로드) (0) | 2024.10.18 |
|---|---|
| three.js (0) | 2024.09.19 |
| XMLHttpRequest 가로채기 (0) | 2024.07.19 |
| web worker (0) | 2024.07.19 |
| mirage.js - api mockup (0) | 2024.07.19 |
javascript로 3d 그래픽을 그리는 라이브러리라는데
webGL을 이용한건진 잘 모르겠다.
[링크 : https://threejs.org/]
fog도 그냥 설정해주는거 보면 꽤나 추상화된 gl 라이브러리라고 보면 되려나?
[링크 : https://github.com/mrdoob/three.js/blob/master/examples/webgl_interactive_buffergeometry.html]
| webgl + three.js를 이용한 GL 공부하기 (feat 클로드) (0) | 2024.10.18 |
|---|---|
| 웹 브라우저에서 웹 캠 띄우기 (0) | 2024.09.24 |
| XMLHttpRequest 가로채기 (0) | 2024.07.19 |
| web worker (0) | 2024.07.19 |
| mirage.js - api mockup (0) | 2024.07.19 |
웹 소켓으로 float 형을 보내고 받는 예제를 만들어 달라고 gpt에 요청했더니
처음보는 객체...? 메소드가 보여서 검색
그런데 push 하면 안느리려나? 조금 걱정되네
Int32Array나 Float32Array로 좀더 해보고 안되면 DataView로 해봐야겠다.
| socket.onmessage = function(event) { const data = event.data; const floatData = []; const intData = []; const floatSize = 4; // float32는 4바이트 const intSize = 4; // int32는 4바이트 const floatArrayLength = 4; const intArrayLength = 4; const view = new DataView(data); // float32 배열 추출 for (let i = 0; i < floatArrayLength; i++) { floatData.push(view.getFloat32(i * floatSize, true)); } // int32 배열 추출 for (let i = 0; i < intArrayLength; i++) { intData.push(view.getInt32(floatArrayLength * floatSize + i * intSize, true)); } document.getElementById("floatData").textContent = JSON.stringify(floatData); document.getElementById("intData").textContent = JSON.stringify(intData); }; |
[링크 : https://chatgpt.com/share/fb063d40-1441-457c-a209-0f594d2c482d]
[링크 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/DataView/DataView]
[링크 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/DataView/getFloat32]
| javascript ... (rest parameter) (0) | 2024.08.12 |
|---|---|
| qr decoder (0) | 2024.04.19 |
| QR decoder로 로또 추첨하기 (0) | 2024.04.16 |
| javascript 집합(set) 내용 출력하기 (0) | 2024.04.16 |
| js split() (0) | 2024.04.12 |
이건 연산자 인가 아닌가..
[링크 : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters]
| js DataView() (0) | 2024.08.21 |
|---|---|
| qr decoder (0) | 2024.04.19 |
| QR decoder로 로또 추첨하기 (0) | 2024.04.16 |
| javascript 집합(set) 내용 출력하기 (0) | 2024.04.16 |
| js split() (0) | 2024.04.12 |
mirage.js 에서 사용하는 기술 같은데 써볼일 있으려나?
[링크 : https://github.com/shenzhenjinma/hook-chrome-ajax/blob/develop/background.js]
| 웹 브라우저에서 웹 캠 띄우기 (0) | 2024.09.24 |
|---|---|
| three.js (0) | 2024.09.19 |
| web worker (0) | 2024.07.19 |
| mirage.js - api mockup (0) | 2024.07.19 |
| 웹 브라우저 쿠키 (0) | 2024.03.27 |
자바 스크립트의 메인 쓰레드가 아닌 브라우저의 백그라운드 쓰레드로 돌리는 기능.
탭이 비활성화 되어도 멀티 쓰레드로 작동이 된다고.
[링크 : https://samori.tistory.com/87]
[링크 : https://medium.com/hcleedev/web-web-worker-사용법과-주의할-점-webpack-메모리-문제-테스트-모킹-2d77c5b23afe]
| three.js (0) | 2024.09.19 |
|---|---|
| XMLHttpRequest 가로채기 (0) | 2024.07.19 |
| mirage.js - api mockup (0) | 2024.07.19 |
| 웹 브라우저 쿠키 (0) | 2024.03.27 |
| let's encrypt 방식 (0) | 2024.02.02 |
신기하게도(?) 크롬의 XMLHttpRequest 나 fetch 명령을 가로채서
서버 구동없이 클라이언트에서 api 목업을 한다고 한다.
네트워크로 나가지만 않을뿐 결국에는 함수의 결과물을 리턴해주는 식으로 간소화 하는건가..?
[링크 : https://miragejs.com/]
| XMLHttpRequest 가로채기 (0) | 2024.07.19 |
|---|---|
| web worker (0) | 2024.07.19 |
| 웹 브라우저 쿠키 (0) | 2024.03.27 |
| let's encrypt 방식 (0) | 2024.02.02 |
| ajax session 인증 (0) | 2024.01.26 |
색상을 포함한 스타일 지정 가능한 라이브러리 찾는중
예제를 봐서는 멀티시트도 지원
| web qr decoder (0) | 2024.04.04 |
|---|---|
| node.js 웹소켓 채팅 서버 예제 (0) | 2022.07.14 |
| ubuntu 18.04 / nodej.s 18.x 실패 (0) | 2022.05.19 |
| 웹소켓 (0) | 2022.03.25 |
| broadway / jsmpeg (0) | 2020.09.16 |
chart.js 에서 반응형 설정은 아래와 같은데
| options : { responsive : true, } |
[링크 : https://www.chartjs.org/docs/latest/configuration/responsive.html]
정작 이렇게 설정하고 보면 아래와 같이 나오는데
요걸 창 크기 줄여서 작게 만들고
다시 화면을 원래대로 키우면 그래프는 안커진다.
머라머라 써있는데 모르겠고
| Important Note Detecting when the canvas size changes can not be done directly from the canvas element. Chart.js uses its parent container to update the canvas render and display sizes. However, this method requires the container to be relatively positioned and dedicated to the chart canvas only. Responsiveness can then be achieved by setting relative values for the container size (example ): <div class="chart-container" style="position: relative; height:40vh; width:80vw"> <canvas id="chart"></canvas> </div> Copied! The chart can also be programmatically resized by modifying the container size: chart.canvas.parentNode.style.height = '128px'; chart.canvas.parentNode.style.width = '128px'; Copied! Note that in order for the above code to correctly resize the chart height, the maintainAspectRatio option must also be set to false. |
[링크 : https://www.chartjs.org/docs/latest/configuration/responsive.html#important-note]
responsive : true 하고
창의 최소 높이(css min-height)를 지정하면 그정도 까진 사단이 안난다는 의미인 듯.
| chart.js multi y axis (0) | 2023.09.27 |
|---|---|
| chart.js 특정 항목 보이지 않게 하기(가로줄 치기) (0) | 2023.03.10 |
| chart.js 수직 도움선 (0) | 2023.01.27 |
|
