소행성왕자

WebRTC 를 이용하여 화상 채팅을 만들어 보도록 하겠습니다. 본 포스트는 turn 서버를 임대하여 내부 네트워크 와 외부 네트워크 간의 화상 채팅 성공 코드 입니다. 모든 기본 소스와 설명은 아래 링크를 참조했습니다. https://levelup.gitconnected.com/building-a-video-chat-app-with-node-js-socket-io-webrtc-26f46b213017 Building a Video Chat App with Node.js + Socket.io + WebRTC This tutorial will show you how to build a video chat app using JavaScript and NodeJS. It will also show you how..

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

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..

flutter 네이티브와 웹뷰와 데이터 통신하는 방법을 알아보도록 하겠습니다. webview 에서 버튼을 클릭하면 javascript 함수에서 flutter 를 호출합니다. 버튼 클릭시 webviewjsbridge 로 전송됩니다. decoding 해보겠습니다. 웹페이지의 javascript 에서 보낸 json 이 출력됩니다. . webview -> 네이티브 /lib/main.dart /* https://github.com/flutter/flutter/issues/117333 https://pub.dev/packages/webview_javascript_bridge https://blog.steinjun.net/post/8 */ import 'package:flutter/material.dart'; imp..

안드로이드 에뮬레이터를 이용하여 소켓통신을 해보도록 하겠습니다. 서버는 php 로 작성되어 있고 클라이언트는 안드로이드로 접속해보겠습니다. 서버의 포트는 25003 포트를 이용하겠습니다. server.php uses-permission 추가해줍니다. MainActivity.java package com.example.socket_example; import androidx.appcompat.app.AppCompatActivity; import android.os.Bundle; import android.os.Handler; import android.view.View; import android.widget.Button; import android.widget.Toast; import java.io.Ob..

안드로이드 스튜디오를 이용하여 flutter 에서 webview 추가하는 방법을 알아보겠습니다. pubspec.yml webview_flutter 추가 dependencies: flutter: sdk: flutter # The following adds the Cupertino Icons font to your application. # Use with the CupertinoIcons class for iOS style icons. cupertino_icons: ^1.0.2 webview_flutter: ^4.0.2// 추가 android > app > build.gradle 수정 defaultConfig { // TODO: Specify your own unique Application ID (htt..

fultter 이용하여 TCP socket 접속을 해보겠습니다. 본 블로그에서 만들려는 flutter는 클라이언트 socket 입니다. 안드로이드와 IOS 에 적용가능하도록 개발합니다. socket 서버 샘플은 아래 주소를 확인하세요. https://trytoso.tistory.com/1643 flutter 프로젝트를 생성 main.dart import 'package:flutter/material.dart'; import 'views/view_test.dart'; void main() { runApp(const MyApp()); } class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key); @override Widge..

socket 연결을 위한 소켓 서버 + 소켓 클라이언트를 php 로 간단히 만들어 보도록 하겠습니다. 1. socket Server (25003 포트를 사용한다.)

디자인 패턴의 템플릿 메소드 패턴에 대해 알아보려고 합니다. 크롤링을 주로 작업하면서 한개의 크롤러를 만들어 사용하다 여러가지 문제로 인해 여러개의 크롤러를 사용하기로 합니다. 이전까지는 curl 만 이용했지만 아래와 같이 curl 이외의 크롤러를 사용하기 위해 템플릿 메소드를 사용하기로 합니다. curl casperjs puppeteer 등등 다이어그램은 아래와 같습니다. ParseCurl 객체 ParsePuppeteer 객체 또는 다른 크롤러 추가시 OCP 를 만족하도록 추가만 해주면 됩니다. 다이어그램은 봤으니 프로그램을 살펴보도록 하겠습니다. 먼저 호스트 코드를 먼저 살펴보도록 하겠습니다. example.php

출력결과 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..