프로그래밍/Js 58

webRTC 카메라/오디오 권한 획득 기본 샘플

WebRTC 에서 카메라 권한 부분을 확인해 보도록 하겠습니다. 모든 WebRTC 는 HTTPS (SSL) 브라우져에서만 사용할수 있습니다. getUserMedia() 위 메서드는 요청된 미디어 유형을 포함하는 트랙을 생성하여 미디어 입력을 사용할수 있는 권한을 사용자에 요청합니다. 그 스트림은 예를 들어 비디오 트랙(하드웨어 또는 카메라, 비디오 녹화 장치, 화면 공유 서비스 등과 같은 가상 비디오 소스에 의해 생성됨), 오디오 트랙(유사하게 물리적 또는 마이크, A/D 변환기 등과 같은 가상 오디오 소스) 및 가능한 기타 트랙 유형. getUserMedia() 는 Promise 객체로 반환됩니다. # 다이렉트 navigator.mediaDevices.getUserMedia(mediaStreamCons..

프로그래밍/Js 2023.02.21

webRTC 이용하여 비디오 채팅 방법 with Node.js + Socket.io

webRTC 를 이용하여 비디오 채팅방을 만들어보도록 하겠습니다. webRTC 는 https 이용해야 하기 때문에 node exporess 에서 SSL 적용을 해줘야 합니다. 최종화면 기본적인 SSL ssl_server.js // Dependencies const fs = require('fs'); const http = require('http'); const https = require('https'); const express = require('express'); const app = express(); // Certificate 인증서 경로 const privateKey = fs.readFileSync('/etc/httpd/ssl/xxx.com_2022.key', 'utf8'); const ce..

프로그래밍/Js 2023.02.21

vue3 에 tradingview 차트 연동 (소스추가)

출력결과 vue3 와 트레이딩뷰 차트 기본적인 설치는 아래 포스트 참고 하세요 https://trytoso.tistory.com/1627 트레이딩뷰챠트(tradingview) + vue3 기본차트 띄우기 vue3 를 사용하여 기본적인 트레이딩뷰챠트(lightweight-charts) 를 띄우려고 한다. KB star 에서 사용하던 vue3 프로젝트를 기본으로 한다. 트레이딩뷰챠트를 사용하기 위해 가장 먼저 해야 할 일은 lightwe trytoso.tistory.com 프로젝트 구조 main.js import { createApp } from 'vue' import './style.css' import App from './AppChart.vue' import store from './store' imp..

프로그래밍/Js 2023.01.19

vue3 Composition API 에서 JS plugin 추가 하기

option API 사용이 아닌 Composition API 에서 공통인 common.js 추가하고 싶을때 사용합니다. Composition API 는 사용합니다. option API 는 this.$common 사용하는 반면 Composition API 는 inject 를 사용합니다. js/common.js 사용할 컴포넌트에서 inject 에서 사용할 이름을 지정해줍니다. app.provide('common',common) export default { install:(app) => { const common = { cc(str) { console.log('>>>>>common.js111 >>>>' + str); }, dd(str) { console.log('>>>>>common.js222 >>>>' +..

프로그래밍/Js 2023.01.17

vue3 Composition API 에서 jQuery 사용하기

vue3 에서 jQuery 사용하는 방법을 알아보도록 하겠습니다. jQuery 설치 npm install --save jquery jQuery 설치 확인 보통 main.js 파일에 jQuery 를 import 해줍니다. $ 한개 대신 $$ 두개를 사용하려고 합니다. import { createApp } from 'vue' import './style.css' import App from './AppChart.vue' import store from './store' import AfterLoginClass from './js/class/AfterLogin' import jQuery from 'jquery' import mitt from 'mitt' const emitter = mitt(); /* crea..

프로그래밍/Js 2023.01.17

websocket 바이너리 전송 arraybuffer

웹소켓 전송시 response ByteBuffer 로 받을때에 결과 JS let SOCKET_URL = "wss://~~~"; let socket = new WebSocket(SOCKET_URL); socket.binaryType = "arraybuffer"; // 바이너리로 받을려면 해야함 socket.onopen = function(e) { socket.send("---> socket send"); } socket.onmessage = function(event) { if(typeof event.data == "string") console.log("string 메세지"); else { console.log("스트링타입아님"); console.log(event.data.byteLength); cons..

프로그래밍/Js 2022.05.06

Shared Workers 이용하여 WebSocket 연결 방법 (웹소켓을 연결한 상태에서 새로고침 또는 다른 페이지로 이동시 웹소켓 연결을 유지하는게 목적)

이 문서에서 하려고 하는 목적 사용자가 페이지를 새로 고칠 때 소켓이 닫힙니다. 그것은 원래 그렇습니다. 그러나 하고싶은것은 페이지 새로 고침 전반에 걸쳐 지속적인 웹 소켓 연결을 갖는 것입니다. 해결방법 사용자가 귀하의 페이지에 없는 경우에도 연결되도록 하는 것은 일종의 보안 위반이기 때문에 이것이 작동하는지 확실하지 않습니다. (새로 고침을 하다 보면 페이지를 빠져나왔다가 다시 들어가게 되기 때문입니다.) 가장 좋은 방법은 백그라운드에서 실행할 수 있는 서비스 워커를 사용하는 것입니다 웹 소켓을 사용하고 있으므로 SharedWorker를 사용하여 웹 소켓에 대한 새 스레드를 만드는 것이 좋습니다. 즉 웹소켓을 연결한 상태에서 새로고침 또는 다른 페이지로 이동시 웹소켓 연결을 유지하는데 목적이 있습니다..

프로그래밍/Js 2021.12.17

웹워커 안에서 웹소켓 구동 시험 테스트 + Node 소켓 서버

.개요 웹 브라우저 JavaScript 런타임은 기본적으로 단일 스레드 환경입니다. 그러나 HTML 표준은 웹 브라우저가 메인 스레드와 백그라운드 스레드(워커 스레드)에서 JavaScript를 실행할 수 있도록 하는 웹 워커 기능을 도입하여 개발자가 웹 브라우저에서 다중 스레드 JavaScript 응용 프로그램을 구현할 수 있도록 합니다. 본 문서는 JavaScrip 웹 워커를 사용하여 WebSocket API 웹 애플리케이션을 구현하는 방법을 보여줍니다. .웹소켓 개요 WebSocket 사양은 웹 페이지가 원격 호스트와의 양방향 통신을 위해 WebSockets 프로토콜을 사용할 수 있도록 하는 API를 정의합니다. WebSocket 인터페이스를 소개하고 웹을 통해 단일 소켓을 통해 작동하는 전이중 통신..

프로그래밍/Js 2021.11.09

node + ws + express webSocket 샘플 예제

. ws/express 모듈 설치 $ npm install ws $ npm install express .디렉토리 구조 $ pwd /home/naya/www/socket $ ls -al -rw-rw-r-- 1 nya nya 1388 11월 8 15:49 app.js -rw-rw-r-- 1 nya nya 1547 11월 8 15:50 index.html drwxrwxr-x 53 nya nya 4096 11월 8 15:43 node_modules -rw-rw-r-- 1 nya nya 32132 11월 8 15:43 package-lock.json -rw-rw-r-- 1 nya nya 73 11월 8 15:43 package.json $ vi app.js const path = require("path"); ..

프로그래밍/Js 2021.11.08