'프론트엔드'에 해당되는 글 19건

반응형

Janus의 official page에 있는 데모 페이지 소스코드를 읽어보다 official documentation에는 없는 내용이 있어서 기록함.

Send에 plugin으로부터 response가 왔을때 성공여부에 따른 callback을 호출할 수 있다.

데모 페이지 소스 코드의 일부:

    screentest.send({"message": create, success: function(result) {
        var event = result["videoroom"];
        Janus.debug("Event: " + event);
        if(event != undefined && event != null) {
            // Our own screen sharing session has been created, join it
            room = result["room"];
            Janus.log("Screen sharing session created: " + room);
            myusername = randomString(12);
            var register = { "request": "join", "room": room, "ptype": "publisher", "display": myusername };
            screentest.send({"message": register});
        }
    }});

screentest는 pluginHandler인데, send에서 저렇게 일반적으로 보내는 message말고도 success와 error 콜백함수를 보낼 수 있다.

아래는 janus.js안의 코드인데, send의 파라미터로 넘어온 객체 전체를 sendMessage라는 private method에 넘겨준다.

send : function(callbacks) { sendMessage(handleId, callbacks); },

그리고 sendMessage에서는:

callbacks.success = (typeof callbacks.success == "function") ? callbacks.success : Janus.noop;
callbacks.error = (typeof callbacks.error == "function") ? callbacks.error : Janus.noop;
var message = callbacks.message;

이런식으로 사용한다.

반응형
블로그 이미지

개발자_무형

,
반응형

 

설치하는 과정을 편하게 Dockerfile로 만들었다.

 

기존에 다른사람이 올려놓은 Dockerfile은 최신 janus와 안맞아서 패키지들을 최신가이드에 맞게 바꿔주었다.
이미지 빌드와 실행은 repository의 readme에 나와있다.
https://github.com/cjsjyh/janus_server

 

=========================

 

Official Repository: https://github.com/meetecho/janus-gateway

 

ReadMe를 따라서 진행하다가 안되서 추가된 부분들이 있다.

 

aptitude install libmicrohttpd-dev libjansson-dev \ libssl-dev libsrtp-dev libsofia-sip-ua-dev libglib2.0-dev \ libopus-dev libogg-dev libcurl4-openssl-dev liblua5.3-dev \ libconfig-dev pkg-config gengetopt libtool automake

 

Readme에는 없지만 libnice를 설치하기 위해 추가로 패키지를 설치해야된다

brew install gtk-doc  // macOS
apt-get install gtk-doc-tools // Ubuntu

 

libnice 설치:

git clone https://gitlab.freedesktop.org/libnice/libnice
cd libnice
./autogen.sh
./configure --prefix=/usr
make && sudo make install

 

libsrtp 설치:
Readme에 써진대로 1.5.4를 설치하면 최신버전의 openssl을 지원하지 않아 ./configure --prefix=/usr --enable-openssl에서 에러가 난다. 아래처럼 버전을 작성일 기준 가장 최신버전인 2.3.0버전으로 바꿔주었다.

wget https://github.com/cisco/libsrtp/archive/v2.3.0.tar.gz
tar xfv v2.3.0.tar.gz
cd libsrtp-2.3.0
./configure --prefix=/usr --enable-openssl
make shared_library && sudo make install

저는 http를 사용하여 janus서버와 통신할 것이기 때문에 기타 연결방법을 위한 패키지 설치는 건너뛰도록 하겠습니다.

documentation 빌드를 위한 패키지 설치:

aptitude install graphviz

 

doxygen을 그냥 설치하면 가장 최신버전이 깔리는데 그럼 janus에서 에러를 낸다. 에러를 내지 않는 1.8.11버전으로 다운로드를 한다

wget https://svwh.dl.sourceforge.net/project/doxygen/rel-1.8.11/doxygen-1.8.11.src.tar.gz

 

실제 janus패키지 설치:

git clone https://github.com/meetecho/janus-gateway.git
cd janus-gateway
sh autogen.sh

./configure --prefix=/opt/janus
make
make install

make configs

 

websocket과 data channel은 사용할 수도 있을 것 같아서 제외한 나머지는 비활성화 시켰습니다.

./configure --disable-rabbitmq --disable-mqtt

 

--여기서부터 Dockerfile로 넘어가서 작업함--

반응형

'프론트엔드' 카테고리의 다른 글

WebRTC 기본 개념 정리  (0) 2020.12.24
Janus screen sharing 만들기  (1) 2020.03.19
Intel Open WebRTC Toolkit 클라이언트 삽질기  (0) 2020.03.13
8. GraphQL Introspection  (0) 2019.12.26
7. GraphQL Subscription  (0) 2019.12.26
블로그 이미지

개발자_무형

,
반응형

Client코드를 작성하기 앞서, Intel에서 제공한 샘플코드를 참고하여 사용하는 법을 익히려고 합니다.

모든 코드는 아래의 참고자료의 owt-client-javascript repo를 기준으로 합니다

src/samples/conference/public/scripts/index.js를 보면 기본적인 conference를 생성/접속하는 법이 나와있는 것 같다.
134번째 줄부터 시작하는 window.onload에 createToken을 하고, 만들어진 tokenString을 callback함수에 넘겨 conference에 입장한다.

createToken()src/samples/conference/public/scripts/rest-sample.js에 있다. 이 부분은 자신의 필요에 맞게 바꾸면 될것 같다.

그리고 조금 더 내려가면 가장 중요한 conference.join(token).then( ....이 있는데 여기서 token이 어떤정보를 가지고 있어야되는지를 알아야한다. src/sdk/conference/client.js를 보면 ConferenceClient 클래스 안에 this.join이 있다.

Custom signaling

custom signaling을 사용하려면 conference = new Owt.Conference.ConferenceClient();로 ConferenceClient를 생성할 때 두번째 인자로 넣어주면된다. 이 객체는 .send(), .connect(), .disconnect()를 가지고 있어야하며 disconnect했을때와 참여자, 스트림 등이 바뀌었을때 처리할 수 있도록 disconnectdata 이벤트를 발생시켜야한다. 실제 스트림 등 데이터를 전달하고 싶으면 data 이벤트를 발생시켜 처리힌다. 그러면 ConferenceClient는 onSignalingMessage()를 호출해 처리한다.

new Owt.Conference.ConferenceClient(config, signalImp)

두번째인자는 앞에서 언급한대로 자신만의 signaling을 구현하고 싶을때 넘겨주고, config는 sdk > conference > client.js의 createPeerConnectionChannel()에서 new ConferencePeerConnectionChannel(config, signalingForChannel)에서 인자로 넘어간다. 그러므로 config의 host에는 media server로 연결되는 host가 있어야되는 것 같다.

conference.join(tokenString)

join을 살펴보면 처음에 tokenString을 Base64.decodeBase64로 복호화를 한다. 따라서 toikenString은 base64로 암호화되어있어야한다.
그리고 아래 나오는 코드를 보면 join에서 token.securetoken.host를 접근하는데 token.secure은 정의되지않아도 (token.secure === true)에 의해 false로 바뀌어 isSecure에 저장되므로 괜찮다. token.host는 http 프로토콜을 붙이지 않으면 isSecure를 검사해서 http나 https를 붙여주는데 만약 자신의 서버가 https://인데 token.secure를 true로 하지도 않고 host에도 붙이지 않으면 잘못된 host로 접근할 것이다.

signalingState는 READY, CONNECTING, CONNECTED가 있으며 접속하는 중이거나 이미 접속된 상태에서 join을 호출하면 더 이상 진행하지않고 종료한다. 아무와도 연결되지않은 READY상태라면 CONNECTING으로 바꾸고 계속 진행한다.

아직 이해되지 않는점:
conference.join(tokenString)을 호출하면 tokenString을 decode하고, token에서 host를 signaling.connect(host)로 넘겨준다. 그렇다면 coference.join(token)의 host는 signaling 서버의 url이라는 뜻인데.. 이전에 연결할때는 wss프로토콜을 사용하였었다. 그런데 conference.join에서는 wss가 아니라 https 혹은 http를 붙여서 보내주는데 음.. 뭔가 잘못이해한건가

참고자료:
https://software.intel.com/sites/products/documentation/webrtc/js/index.html

https://github.com/open-webrtc-toolkit

https://github.com/open-webrtc-toolkit/owt-client-javascript

반응형

'프론트엔드' 카테고리의 다른 글

Janus screen sharing 만들기  (1) 2020.03.19
Janus media server 설치하기  (4) 2020.03.17
8. GraphQL Introspection  (0) 2019.12.26
7. GraphQL Subscription  (0) 2019.12.26
6. GraphQL Mutations  (0) 2019.12.26
블로그 이미지

개발자_무형

,
반응형

# What is Introspection
Inspection is the ability to query details about the current API's schema.

```
query {
  __schema {    // introspection!
    types {
      name
      description
    }
  }
}
```

반응형

'프론트엔드' 카테고리의 다른 글

Janus media server 설치하기  (4) 2020.03.17
Intel Open WebRTC Toolkit 클라이언트 삽질기  (0) 2020.03.13
7. GraphQL Subscription  (0) 2019.12.26
6. GraphQL Mutations  (0) 2019.12.26
5. GraphQL Interface  (0) 2019.12.26
블로그 이미지

개발자_무형

,
반응형

---

# What is Subscription
Subscription is used when the client wants real-time updates pushed from the server.

```
subscription
  liftStatusChange {
    name
    capacity
    status
  }
}
```

반응형

'프론트엔드' 카테고리의 다른 글

Intel Open WebRTC Toolkit 클라이언트 삽질기  (0) 2020.03.13
8. GraphQL Introspection  (0) 2019.12.26
6. GraphQL Mutations  (0) 2019.12.26
5. GraphQL Interface  (0) 2019.12.26
4. GraphQL Union  (0) 2019.12.26
블로그 이미지

개발자_무형

,
반응형

# What is Mutation
*Query* describes all the read actions of data. However, Mutation performs data change.

Example:
```
mutation burnItDown {
  deleteAllData
}
```

Example:
```
mutation createSong {
  addSong(title: "No Scrubs", numberOne: true, performerName:"TLC"){
    id
    title
    numberOne
  }
}
```
addSong() adds data in parenthesis into the database.
following {} specifies which fields to retrieve if mutation returns an object.

반응형

'프론트엔드' 카테고리의 다른 글

8. GraphQL Introspection  (0) 2019.12.26
7. GraphQL Subscription  (0) 2019.12.26
5. GraphQL Interface  (0) 2019.12.26
4. GraphQL Union  (0) 2019.12.26
3. GraphQL Fragments  (0) 2019.12.26
블로그 이미지

개발자_무형

,
반응형

What is an Interface

An Interface is an abstract type that specifies fields that should be implemented in similar object types. When another type implements the interface, it needs to include all the fields from the interface and may add its own fields. It acts like a virtual function in C++.

useful link: https://graphqlmastery.com/blog/graphql-interfaces-and-unions-how-to-design-graphql-schema

반응형

'프론트엔드' 카테고리의 다른 글

7. GraphQL Subscription  (0) 2019.12.26
6. GraphQL Mutations  (0) 2019.12.26
4. GraphQL Union  (0) 2019.12.26
3. GraphQL Fragments  (0) 2019.12.26
2. GraphQL Query  (0) 2019.12.26
블로그 이미지

개발자_무형

,

4. GraphQL Union

프론트엔드 2019. 12. 26. 15:39
반응형

If you want to return different types on different queries, you can use **union**.

```
union AgendaItem = StudyGroup | Workout
```

```
query schedule {
  agneda {
    ...on Workout {
      name
      reps
    }
    ...on StudyGroup {
      name
      subject
      students
    }
  }
}
```

```
...on Workout
```
is an inline fragment with the name "Workout"
you can also use named fragments (from previous post).

반응형

'프론트엔드' 카테고리의 다른 글

6. GraphQL Mutations  (0) 2019.12.26
5. GraphQL Interface  (0) 2019.12.26
3. GraphQL Fragments  (0) 2019.12.26
2. GraphQL Query  (0) 2019.12.26
1. What is GraphQL  (0) 2019.12.26
블로그 이미지

개발자_무형

,