Programming/web 관련2024. 9. 24. 12:04

예전에 본 것 같긴한데 해본적은 없는 것 같아서 검색

[링크 : 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

'Programming > web 관련' 카테고리의 다른 글

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
웹 브라우저 쿠키  (0) 2024.03.27
Posted by 구차니
Programming/web 관련2024. 9. 19. 23:35

javascript로 3d 그래픽을 그리는 라이브러리라는데

webGL을 이용한건진 잘 모르겠다.

[링크 : https://threejs.org/]

 

fog도 그냥 설정해주는거 보면 꽤나 추상화된 gl 라이브러리라고 보면 되려나?

[링크 : https://github.com/mrdoob/three.js/blob/master/examples/webgl_interactive_buffergeometry.html]

'Programming > web 관련' 카테고리의 다른 글

웹 브라우저에서 웹 캠 띄우기  (0) 2024.09.24
XMLHttpRequest 가로채기  (0) 2024.07.19
web worker  (0) 2024.07.19
mirage.js - api mockup  (0) 2024.07.19
웹 브라우저 쿠키  (0) 2024.03.27
Posted by 구차니

웹 소켓으로 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]

'Programming > javascript & HTML' 카테고리의 다른 글

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
Posted by 구차니

'Programming > javascript & HTML' 카테고리의 다른 글

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
Posted by 구차니
Programming/web 관련2024. 7. 19. 18:29

'Programming > web 관련' 카테고리의 다른 글

웹 브라우저에서 웹 캠 띄우기  (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
Posted by 구차니
Programming/web 관련2024. 7. 19. 18:27

자바 스크립트의 메인 쓰레드가 아닌 브라우저의 백그라운드 쓰레드로 돌리는 기능.

탭이 비활성화 되어도 멀티 쓰레드로 작동이 된다고.

 

[링크 : https://samori.tistory.com/87]

[링크 : https://medium.com/hcleedev/web-web-worker-사용법과-주의할-점-webpack-메모리-문제-테스트-모킹-2d77c5b23afe]

'Programming > web 관련' 카테고리의 다른 글

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
Posted by 구차니
Programming/web 관련2024. 7. 19. 15:00

신기하게도(?) 크롬의 XMLHttpRequest 나 fetch 명령을 가로채서

서버 구동없이 클라이언트에서 api 목업을 한다고 한다.

 

네트워크로 나가지만 않을뿐 결국에는 함수의 결과물을 리턴해주는 식으로 간소화 하는건가..?

[링크 : https://miragejs.com/]

'Programming > web 관련' 카테고리의 다른 글

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
Posted by 구차니
Programming/node.js2024. 7. 18. 10:58

색상을 포함한 스타일 지정 가능한 라이브러리 찾는중

예제를 봐서는 멀티시트도 지원

 

[링크 : https://www.npmjs.com/package/node-excel-export]

'Programming > node.js' 카테고리의 다른 글

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
Posted by 구차니
Programming/chart.js2024. 6. 27. 16:35

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)를 지정하면 그정도 까진 사단이 안난다는 의미인 듯.

[링크 : https://stackoverflow.com/questions/55545191/]

'Programming > chart.js' 카테고리의 다른 글

chart.js multi y axis  (0) 2023.09.27
chart.js 특정 항목 보이지 않게 하기(가로줄 치기)  (0) 2023.03.10
chart.js 수직 도움선  (0) 2023.01.27
Posted by 구차니

창을 figure라고 하는 것 같은데

openCV는 창을 명시하고 그릴 데이터를 지정한다면

openGL은 선택을 하고 그리는 거라 순서가 필요한데

matplotlib은 openGL 처럼 그릴곳을 선택하고 그리는 컨셉을 사용한 듯.

 

>>> plt.ion() # 인터랙티브모드 전환
<matplotlib.pyplot._IonContext object at 0x71521b249b40>
>>> plt.figure(1) # 여기서 Figure 1 이라는 창이 열림
<Figure size 640x480 with 0 Axes>
>>> plt.plot([1,2,3]) # Figure 1 창에 그래프 그려짐
[<matplotlib.lines.Line2D object at 0x7152194aead0>]
>>> plt.figure(2) # 여기서 Figure 2 이라는 창이 열림
<Figure size 640x480 with 0 Axes>
>>> plt.plot([2,3,4,5]) # Figure 2 창에 그래프 그려짐
[<matplotlib.lines.Line2D object at 0x71521a9c2410>]
>>> plt.figure(1) # UI 상으로 변동은 없으나 Figure 1 창에 그리도록 선택
<Figure size 640x480 with 1 Axes>
>>> plt.plot([2,3,4,5]) # Figure 1 창에 추가로 그려짐
[<matplotlib.lines.Line2D object at 0x71521a9eca30>]

[링크 : https://matplotlib.org/stable/gallery/subplots_axes_and_figures/multiple_figs_demo.html]

 

하나의 창 안에서 나누는건 subplot 인듯

[링크 : https://stackoverflow.com/questions/41210823/display-multiple-images-in-subplots]

Posted by 구차니