Livecast

기본 설정

방송을 하기 전에 각 플렛폼 별 프로젝트 설정을 진행 합니다.

개발

RemonCast 클래스는 방송 생성 및 시청을 위한 기능을 제공합니다. RemonCast 클래스의 create() 함수와 join() 함수를 이용하여 방송 기능을 이용 할 수 있습니다.
전체적인 구성과 흐름은 아래를 참고하세요.

View 등록

방송 송출자가 스스로의 모습을 확인하거나, 시청자가 방송을 보기 위해서 실제 비디오가 그려지는 View를 정하고 연결해야 됩니다. 방송 송출자에게는 스스로가 보이도록 Local View를 등록 하고, 시청자에게는 송출자가 보이도록 Remote View를 등록합니다.
Web
Android
iOS - Swift
iOS - ObjC
1
<!-- Caster : local view -->
2
<video id="localVideo" autoplay muted></video>
Copied!
1
<!-- Viewer : remote view -->
2
<video id="remoteVideo" autoplay></video>
Copied!
1
<!-- Caster : local view -->
2
<com.remotemonster.sdk.PercentFrameLayout
3
android:id="@+id/perFrameLocal"
4
android:layout_width="match_parent"
5
android:layout_height="match_parent">
6
<org.webrtc.SurfaceViewRenderer
7
android:id="@+id/surfRendererLocal"
8
android:layout_width="match_parent"
9
android:layout_height="match_parent" />
10
</com.remotemonster.sdk.PercentFrameLayout>
Copied!
1
<!-- Viewer : remote view -->
2
<com.remotemonster.sdk.PercentFrameLayout
3
android:id="@+id/perFrameRemote"
4
android:layout_width="match_parent"
5
android:layout_height="match_parent">
6
<org.webrtc.SurfaceViewRenderer
7
android:id="@+id/surfRendererRemote"
8
android:layout_width="match_parent"
9
android:layout_height="match_parent" />
10
</com.remotemonster.sdk.PercentFrameLayout>
Copied!
ConstraintLayout 과 같이 안드로이드에서 제공하는 레이아웃으로 구성할 수 있습니다.
1
<androidx.constraintlayout.widget.ConstraintLayout
2
android:id="@+id/constraintLayout"
3
android:layout_width="match_parent"
4
android:layout_height="match_parent"
5
tools:context=".MainActivity">
6
7
<!-- Remote -->
8
<RelativeLayout
9
android:id="@+id/layoutRemote"
10
android:layout_width="0dp"
11
android:layout_height="0dp"
12
android:layout_margin="10dp"
13
app:layout_constraintDimensionRatio="H,1:1.33"
14
app:layout_constraintStart_toStartOf="parent"
15
app:layout_constraintTop_toTopOf="parent"
16
app:layout_constraintEnd_toEndOf="parent"
17
app:layout_constraintBottom_toBottomOf="parent"
18
>
19
<org.webrtc.SurfaceViewRenderer
20
android:id="@+id/surfRendererRemote"
21
android:layout_width="match_parent"
22
android:layout_height="match_parent" />
23
</RelativeLayout>
24
25
<!-- Local -->
26
<RelativeLayout
27
android:id="@+id/layoutLocal"
28
android:layout_width="80dp"
29
android:layout_height="0dp"
30
android:layout_margin="18dp"
31
app:layout_constraintDimensionRatio="H,1:1.33"
32
app:layout_constraintVertical_bias="0.1"
33
app:layout_constraintTop_toTopOf="parent"
34
app:layout_constraintRight_toRightOf="parent"
35
app:layout_constraintBottom_toBottomOf="parent"
36
>
37
38
<org.webrtc.SurfaceViewRenderer
39
android:id="@+id/surfRendererLocal"
40
android:layout_width="match_parent"
41
android:layout_height="match_parent"
42
/>
43
<ImageView
44
android:layout_width="match_parent"
45
android:layout_height="match_parent"
46
android:src="@drawable/remon_identity"
47
android:scaleType="fitCenter"
48
android:visibility="visible"
49
/>
50
</RelativeLayout>
51
</androidx.constraintlayout.widget.ConstraintLayout>
Copied!
Interface Builder를 통해 지정 하게 되며 iOS - Getting Start에 따라 환경설정을 했다면 이미 View등록이 완료된 상태 입니다. 혹, 아직 완료가 안된 상태라면 아래를 참고하세요.
Interface Builder를 통해 지정 하게 되며 iOS - Getting Start에 따라 환경설정을 했다면 이미 View등록이 완료된 상태 입니다. 혹, 아직 완료가 안된 상태라면 아래를 참고하세요.
보다 더 자세한 내용은 아래를 참고하세요.

방송생성

RemonCastcreate() 함수를 이용하여 방송 만들 수 있습니다. create() 함수가 호출 되면 Remon의 미디어 서버에다른 사용자들이 접속 할 수 있는 방송이 채널로써 만들어 지게 됩니다. 이때 채널이 만들어 지면서 channelId를 반환하게 되고, 이를 통해 시청자가 접근할 수 있습니다.
Web
Android - Java
Android - Kotlin
iOS - Swift
iOS - ObjC
1
// <video id="localVideo" autoplay muted></video>
2
let myChannelId
3
4
const config = {
5
credential: {
6
serviceId: 'MY_SERVICE_ID',
7
key: 'MY_SERVICE_KEY'
8
},
9
view: {
10
local: '#localVideo'
11
},
12
media: {
13
sendonly: true
14
}
15
}
16
17
const listener = {
18
onCreate(channelId) {
19
myChannelId = channelId
20
}
21
}
22
23
const caster = new Remon({ listener, config })
24
caster.createCast()
Copied!
1
caster = RemonCast.builder()
2
.serviceId("MY_SERVICE_ID")
3
.key("MY_SERVICE_KEY")
4
.context(CastActivity.this)
5
.localView(surfRendererlocal) // local Video Renderer
6
.build();
7
8
caster.onCreate((channelId) -> {
9
myChannelId = channelId;
10
});
11
12
caster.create();
Copied!
1
caster = RemonCast.builder()
2
.serviceId("MY_SERVICE_ID")
3
.key("MY_SERVICE_KEY")
4
.context(CastActivity.this)
5
.localView(surfRendererlocal) // local Video Renderer
6
.build()
7
8
caster.onCreate { channelId ->
9
myChannelId = channelId;
10
}
11
12
caster.create()
Copied!
1
remonCast.create("MY_CHANNEL_ID")
Copied!
혹은 아래와 같이 Interface Builder 없이 작성 가능합니다.
1
let caster = RemonCast()
2
caster.serviceId = "MY_SERVICE_ID"
3
caster.serviceKey = "MY_SERVICE_KEY"
4
caster.localView = localView
5
6
remonCast.onCreate { (channelId) in
7
let myChannelId = caster.channelId
8
}
9
10
caster.create("MY_CHANNEL_ID")
Copied!
1
[remonCast create:@"MY_CHANNEL_ID"];
Copied!
Or you can create it without Interface Builder as follows.
1
RemonCast *caster = [[RemonCast alloc]init];
2
caster.serviceId = @"MY_SERVICE_ID";
3
caster.serviceKey = @"MY_SERVICE_KEY";
4
caster.localView = localView;
5
6
[self.remonCast onCreateWithBlock:^(NSString * _Nullable chId) {
7
[self.channelIdLabel setText:chId];
8
}];
9
10
[caster create:@"MY_CHANNEL_ID"];
Copied!

방송시청

RemonCastjoinRoom(channelId) 함수를 이용하면 방송에 참여 할 수 있습니다. 이때 원하는 channelId를 알려줘야 하는데 보통 아래의 Channel을 참고하여 전체 목록을 통해 사용자가 선택하는 방식이 많이 사용됩니다.
Web
Android - Java
Android - Kotlin
iOS - Swift
iOS - ObjC
1
// <video id="remoteVideo" autoplay></video>
2
let myChannelId
3
4
const config = {
5
credential: {
6
serviceId: 'MY_SERVICE_ID',
7
key: 'MY_SERVICE_KEY'
8
},
9
view: {
10
local: '#remoteVideo'
11
},
12
media: {
13
recvonly: true
14
}
15
}
16
17
const listener = {
18
onJoin() {
19
// Do something
20
}
21
}
22
23
const viewer = new Remon({ listener, config })
24
viewer.joinCast('MY_CHANNEL_ID') // myChnnelId from caster
Copied!
1
viewer = RemonCast.builder()
2
.serviceId("MY_SERVICE_ID")
3
.key("MY_SERVICE_KEY")
4
.context(ViewerActivity.this)
5
.remoteView(surfRendererRemote) // remote video renderer
6
.build();
7
8
viewer.onJoin(() -> {});
9
10
viewer.join("MY_CHANNEL_ID"); // myChid from caster
Copied!
1
viewer = RemonCast.builder()
2
.serviceId("MY_SERVICE_ID")
3
.key("MY_SERVICE_KEY")
4
.context(ViewerActivity.this)
5
.remoteView(surfRendererRemote) // remote video renderer
6
.build()
7
8
viewer.onJoin{
9
}
10
11
viewer.join("MY_CHANNEL_ID") // myChid from caster
Copied!
1
remonCast.join("MY_CHANNEL_ID")
Copied!
혹은 아래와 같이 Interface Builder 없이 작성 가능합니다.
1
let viewer = RemonCast()
2
viewer.serviceId = "MY_SERVICE_ID"
3
viewer.key = "MY_SERVICE_KEY"
4
viewer.remoteView = remoteView
5
6
viewer.onJoin {
7
// Do something
8
}
9
10
viewer.join("MY_CHANNEL_ID")
Copied!
1
[remonCast join:@"MY_CHANNEL_ID"]
Copied!
Or you can create it without Interface Builder as follows.
1
RemonCast *caster = [[RemonCast alloc]init];
2
caster.serviceId = @"MY_SERVICE_ID";
3
caster.serviceKey = @"MY_SERVICE_KEY";
4
caster.localView = localView;
5
6
[self.remonCast onJoinWithBlock:^() {
7
8
}];
9
10
[caster join:@"MY_CHANNEL_ID"];
Copied!

Callbacks

개발중 다양한 상태 추적을 돕기 위한 Callback을 제공 합니다.
    안드로이드 2.4.13, iOS 2.6.9 버전부터 콜백은 모두 UI Thread 에서 호출됩니다.
Web
Android - Java
Android - Kotlin
iOS - Swift
iOS - ObjC
1
const listener = {
2
onInit(token) {
3
// UI 처리등 remon이 초기화 되었을 때 처리하여야 할 작업
4
},
5
6
onConnect(channelId) {
7
// 통화 생성 후 대기 혹은 응답
8
},
9
10
onComplete() {
11
// Caller, Callee간 통화 시작
12
},
13
14
onClose() {
15
// 종료
16
}
17
}
Copied!
1
remonCast = RemonCast.builder().build();
2
3
// UI 처리등 remon이 초기화 되었을 때 처리하여야 할 작업
4
remonCast.onInit(() -> {
5
});
6
7
// 방송 생성
8
remonCast.onCreate((channelId) -> {
9
});
10
11
// 방송 참
12
remonCast.onJoin ( () -> {
13
});
14
15
// Caller, Callee간 통화 시작
16
remonCast.onComplete(() -> {
17
});
18
19
// 종료
20
remonCast.onClose(() -> {
21
});
Copied!
1
remonCast = RemonCast.builder().build()
2
3
// UI 처리등 remon이 초기화 되었을 때 처리하여야 할 작업
4
remonCast.onInit {
5
}
6
7
// 방송 생성
8
remonCast.onCreate { channelId -> {
9
}
10
11
// 방송 참
12
remonCast.onJoin {
13
}
14
15
// Caller, Callee간 통화 시작
16
remonCast.onComplete {
17
}
18
19
// 종료
20
remonCast.onClose {
21
}
Copied!
1
let remonCast = RemonCast()
2
3
remonCast.onInit { [weak self] in
4
// UI 처리등 remon이 초기화 되었을 때 처리하여야 할 작업
5
}
6
7
remonCast.onCreate { [weak self](channelId) in
8
// 해당 'chid'로 미리 생성된 채널이 없다면 다른 사용자가 해당 'chid'로 연결을 시도 할때 까지 대기 상태가 됩니다.
9
}
10
11
remonCast.onJoin { [weak self] in
12
}
13
14
remonCast.onComplete { [weak self] in
15
// Caller, Callee간 통화 시작
16
}
17
18
remonCast.onClose { [weak self](closeType) in
19
// 종료
20
}
Copied!
1
RemonCast *remonCast = [[RemonCast alloc] init];
2
3
[remonCast onInitWithBlock:^{
4
// Things to do when remon is initialized, such as UI processing, etc.
5
}];
6
7
[remonCast onConnectWithBlock:^(NSString * _Nullable chId) {
8
// Make a call then wait the callee
9
}];
10
11
[remonCast onJoinWithBlock:^{
12
}];
13
14
[remonCast onCompleteWithBlock:^{
15
// Start between Caller and Callee
16
}];
17
18
[remonCast onCloseWithBlock:^{
19
// End calling
20
}];
Copied!
더 많은 내용은 아래를 참조 하세요.​

Channel 목록 조회

방송을 만들면 채널이 생성되고 고유한 channelId가 생성 됩니다. 이 channelId를 통해 시청자가 생성된 방송에 접근가능합니다. 이때 방송중인 전체 채널 목록을 아래와 같이 조회 가능합니다.
Web
Android - Java
Android - Kotlin
iOS - Swift
iOS - ObjC
1
const remonCast = new Remon()
2
const casts = await remonCast.fetchCasts()
Copied!
1
remonCast = RemonCast.builder().build();
2
3
remonCast.onFetch((casts) -> {
4
// Do something
5
});
6
7
remonCast.featchCasts();
Copied!
1
remonCast = RemonCast.builder().build()
2
3
remonCast.onFetch { casts ->
4
// Do something
5
}
6
7
remonCast.featchCasts()
8
Copied!
1
let remonCast = RemonCast()
2
3
remonCast.fetchCasts { (error, results) in
4
// Do something
5
}
Copied!
1
RemonCast *remonCast = [[RemonCast alloc]init];
2
[remonCast fetchCastsWithIsTest:YES
3
complete:^(NSArray<RemonSearchResult *> * _Nullable chs) {
4
// Do something
5
}];
Copied!
더 자세한 내용은 아래를 참고하세요.

종료

방송의 송출, 시청이 끝났을 경우 꼭 RemonCast객체를 close()해주어야 합니다. close를 통해서 모든 방송 자원과 미디어 스트림 자원이 해제됩니다.
Web
Android - Java
Android - Kotlin
iOS - Swift
iOS - ObjC
1
const remonCast = new Remon()
2
remonCast.close()
Copied!
1
remonCast = RemonCast.builder().build();
2
remonCast.close();
Copied!
1
remonCast = RemonCast.builder().build()
2
remonCast.close()
Copied!
1
let remonCast = RemonCast()
2
remonCast.closeRemon()
Copied!
1
RemonCast *remonCast = [[RemonCast alloc]init];
2
[remonCast closeRemon];
Copied!

기타

아래를 통해 보다 자세한 설정, 실 서비스를 위한 프렉티스등 다양한 내용을 확인해 보세요.
Last modified 2yr ago