전체 글
![[WebRTC 02] 화면 공유(화면 녹화) 및 미디어 제어](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FuhLmI%2FbtrapFleDiB%2FovQ4fQMd3h9OReEgO7j8GK%2Fimg.png)
[WebRTC 02] 화면 공유(화면 녹화) 및 미디어 제어
개요 웹캠화면이 아닌 화면 녹화(화면 공유)를 하려면 어떻게 해야할까? 그리고 일정 수준 이상의 비디오 품질로 비디오를 스트림 하고자 하는 경우 어떻게 처리해야 할까? 이번 챕터에서는 화면 공유와 비디오 제약에 대해서 다루어볼 것입니다! Step1. 비디오 제약 미디어 장치에 액세스 할 때 가능한 한 자세한 제약 조건을 제공하는 것이 좋습니다. 간단한 제약으로 기본 카메라와 마이크를 열 수 있지만 응용 프로그램에 가장 적합한 미디어 스트림과는 거리가 먼 미디어 스트림을 제공 할 수 있습니다. 특정 제약 조건은 MediaTrackConstraint 개체에 정의되어 있습니다. 하나는 오디오 용이고 다른 하나는 비디오 용입니다. 이 객체의 속성은 ConstraintLong , ConstraintBoolean ..
![[WebRTC 01] 사전작업, HTML에 비디오 스트림 표시하기, 웹캠 HTML에 표현 <video>](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2F9EtuT%2FbtrapFFqDl3%2FtPqBZba1lkoJcVPfx72pGk%2Fimg.png)
[WebRTC 01] 사전작업, HTML에 비디오 스트림 표시하기, 웹캠 HTML에 표현 <video>
개요 저는 HTML 화면에 비디오를 띄우는 방법 조차 몰랐기때문에, WebRTC에서 P2P 연결을 하기 이전에 비디오 스트림을 HTML 화면에 뿌리는 것부터 알아봤습니다 로컬 비디오 스트림을 html에 보이게 하는것은 JS로 구현이 가능하다. 여기 에서 미디어 스트림과 관련된 매서드들을 확인할 수 있습니다. 튜토리얼은 WebRTC 공식 가이드에 따라서 진행했으며, 중복된 코드가 있어서 일부 코드를 수정했습다. Step1. HTML video 태그 html에서 작성할 내용은 아주 간단합니다.video 태그만 있으면 된다. JS에서 이 태그를 잡아서 비디오 스트림을 뿌려줄 것이기때문! select는 카메라 및 오디오가 여러개여서 선택이 가능한 경우를 위해 두었습니다. Step 2. 사용(접근) 가능한 미디어..
![[WebRTC 00] WebRTC란? 개념 | 동작방식 | STUN & TURN | ICE | 설명](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbcmlOH%2FbtraqRMkyfN%2FBQBVPQvzkRlNLfkpb8J9K1%2Fimg.png)
[WebRTC 00] WebRTC란? 개념 | 동작방식 | STUN & TURN | ICE | 설명
WebRTC란? WebRTC (Web Real-Time Communication)는 웹 브라우저 간에 플러그인의 도움 없이 서로 통신할 수 있도록 설계된 JavaScript API입니다. 피어간에 전송되는 비디오, 음성 및 일반 데이터를 지원하므로 개발자는 강력한 음성 및 비디오 통신 솔루션을 구축할 수 있습니다. Android 및 iOS 애플리케이션과 같은 기본 클라이언트의 경우 동일한 기능을 제공하는 라이브러리를 사용할 수 있으며, WebRTC 프로젝트는 오픈 소스 이며 Apple, Google, Microsoft 및 Mozilla 등이 지원합니다. 요약하자면 webRTC는 데이터를 P2P로 실시간 전송이 가능한 JavaScript API 입니다. 전체적인 흐름과 개념은 여기를 클릭하면 영상으로 이해..
![[Java Script & CSS] 페이지네이션 스크롤 인터렉티브 구현! (Pagination, Scroll Animation / Interactive)](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FSCuuP%2Fbtq9eDjg2fM%2FbiYRsOKObq2IJrTJc9YzLK%2Fimg.png)
[Java Script & CSS] 페이지네이션 스크롤 인터렉티브 구현! (Pagination, Scroll Animation / Interactive)
js와 css로 페이지네이션, 스크롤 인터렉티브를 만들어보자! 목표 Goal💨 버튼으로 페이지 이동 스크롤로 페이지 이동 네비게이션 요소로 페이지 이동 현재 페이지 표시 페이지 이동시 배경화면, 이미지, 프로그래스바(Progress Bar) 부드럽게 변경(트렌지션) Preview 👍여기 클릭 HTML html은 간단한 태그들로 구성됩니다. 목표에서 설명한 것들을 구현하기 위한 요소들을 생성해줍니다. 이전, 다음 페이지로 이동하는 버튼과 Progress Bar를 작성하고, 그에 맞는 클래스 이름을 지정합니다. section 태그는 각 페이지별로 보여줄 내용을 포함합니다. 페이지 번호(혹은 제목), 내용, 이미지로 구성했습니다. ul태그는 네비게이션 역할을 하기 위해 page수(section수) 와 동일하게..
![[AWS 클라우드] EC2 인스턴스로 리눅스 Linux 설치 및 서버 구축하기](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FcyJwvT%2Fbtq8qIYD358%2FUV7cX3DUuGEz9R7PFXoug0%2Fimg.png)
[AWS 클라우드] EC2 인스턴스로 리눅스 Linux 설치 및 서버 구축하기
리눅스 리눅스(Linux)[4]는 1991년 9월 17일 리누스 토르발스가 처음 출시한 운영 체제 커널인[5][6][7] 리눅스 커널에 기반을 둔 오픈 소스 유닉스 계열 운영 체제 계열이다.[8] 리눅스는 일반적으로 리눅스 배포판 안에 패키지 처리된다. - 위키 백과 요약하자면, 리눅스는 Window, mac ios와 마찬가지로 운영체제이며, 리눅스 커널에 기반을 두었다. 기타 다른 운영체제와 비교하자면, 리눅스는 오픈 소스 유닉스 계열 운영체제로 그 코드가 모두 공개되어 있다. 리눅스는 그 자체로는 커널 기반이라 일반 사용자가 보기에는 당황스러울 것 같은 인터페이스를 가지고 있다. 그래서 보통은 배포판을 사용한다. 리눅스 배포판 은 리눅스 커널, GNU 소프트웨어 및 여러 가지 자유 소프트웨어로 구성된..
![[Vue] Vue Project 생성 하는 방법 & Vue CLI](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FoLGHo%2Fbtq79i8km7c%2FFRjyfAaz7PcFyZxtigWSgk%2Fimg.png)
[Vue] Vue Project 생성 하는 방법 & Vue CLI
Vue 프로젝트를 생성하고, router를 추가하자! Vue 란? Vue.js(간단히 Vue, /vjuː/, 뷰/view)는 웹 애플리케이션의 사용자 인터페이스를 만들기 위해 사용하는 오픈 소스 프로그레시브 자바스크립트 프레임워크이다.[4] 다른 자바스크립트 라이브러리를 사용하는 웹 애플리케이션 프로젝트에 Vue.js를 도입하기 쉽게 설계되어 있는데, 이는 Vue.js가 점진적으로 채택할 수 있게 설계되어 있기 때문이다. 한편 Vue.js는 고성능의 싱글 페이지 애플리케이션(SPA)을 구축하는데 이용가능하다. 출처 : 위키백과 (https://ko.wikipedia.org/wiki/Vue.js) 즉, Vue는 front-end의 클라이언트 서버를 구축하기 위한 프레임워크로, 자바스크립트에 기반한다. 바닐..
[프로그래머스] Level 1 | 완주하지 못한 선수 | Java Script
문제 보기 : https://programmers.co.kr/learn/courses/30/lessons/42576 코딩테스트 연습 - 완주하지 못한 선수 수많은 마라톤 선수들이 마라톤에 참여하였습니다. 단 한 명의 선수를 제외하고는 모든 선수가 마라톤을 완주하였습니다. 마라톤에 참여한 선수들의 이름이 담긴 배열 participant와 완주한 선수 programmers.co.kr 설명 해쉬 문제로 오브젝트를 사용하면 되는 문제이다. sort로 푸는 방법도 있지만, 오브젝트를 이용하는 것이 좀 더 빠르다. 참가자의 요소를 순회하면서 오브젝트의 키값으로 넣고 처음 나온 경우 value는 1로, 그렇지 않은 경우 기존 값에 +1한다. 완주자의 요소를 순회하며 오브젝트의 벨류를 -1 한다. 최종적으로 오브젝트를..
[Vanilla Java Script] 변수 let, const, var
JS에서의 변수의 종류와 선언, 할당에 대해 알아보자! ECMA Script 6+ 변수 선언 키워드 let const var 재할당 가능 불가능 가능 재선언 불가능 불가능 가능 스코프 블록 스코프 블록 스코프 함수 스코프 js에서 변수 선언 키워드는 let, const, var 3가지가 있다. 과거의 js에서는 모두 var로 통용되었는데 호이스팅*등의 문제로 ES6+로는 let과 const를 사용하는 것을 권장하고 있다. *호이스팅 : 변수 선언 이전에 참조 할 수 있는 현상으로, 선언 전에 사용하면 undifined를 반환 변수 선언 및 할당 변수는 선언 후 할당할 수 도 있고, 선언과 할당을 동시에 할 수 있다. let num1 // 선언 console.log(num1) // undefined num..