openvidu-insecure-vue - OpenVidu Docs

제일 상위 session

<div id="session" v-if="session">
			<div id="session-header">
				<h1 id="session-title">{{ mySessionId }}</h1>
				<input class="btn btn-large btn-danger" type="button" id="buttonLeaveSession" @click="leaveSession" value="Leave session">
			</div>
			<div id="main-video" class="col-md-6">
				<user-video :stream-manager="mainStreamManager"/>
			</div>
			<div id="video-container" class="col-md-6">
				<user-video :stream-manager="publisher" @click.native="updateMainVideoStreamManager(publisher)"/>
				<user-video v-for="sub in subscribers" :key="sub.stream.connection.connectionId" :stream-manager="sub" @click.native="updateMainVideoStreamManager(sub)"/>
			</div>
		</div>

publisher : currentUser

subscriber : 외 다른 사람들

\@click.native : user-video 컴포넌트 이벤트로 내려가지 않고 상위 컴포에서 이벤트 선언, 실행 가능

• session 하위 uservideo → Ov-video

<template>
<div v-if="streamManager">
	<ov-video :stream-manager="streamManager"/>
	<div><p>{{ clientData }}</p></div>
</div>
</template>

...

	computed: {
		clientData () {
			const { clientData } = this.getConnectionData();
			return clientData;
		},
	},

	methods: {
		getConnectionData () {
			const { connection } = this.streamManager.stream;
			return JSON.parse(connection.data);
		},
	},
};
</script>

stream-manager : 영상 당사자

Stream

https://openvidu_cn.gitee.io/openvidu_docs_cn/api/openvidu-browser/classes/stream.html

• Properties
  • audioActice: boolean
  • connection: Connection
  • creattionTime: number
  • filter: Fiter
  • frameRate(Optional)
  • hasAudio: boolean
  • hasVideo: boolean
  • streamId: string
  • StreamManager: StreamManager → Publisher or Subscriber
  • videoActive: boolean
  • videoDimensions: { height: number; width: number }
• Methods
  • applyFilter(type: string, options: Object)
  • removeFilter()

Connection

• Properties

  • conenctionId: string

  • creationTiem: number

  • data: string ; 특정 사용자와 관련된 데이터, 사용자에 관한 모든 정보를 브로드캐스트 할 수 있음

    ⇒ 처음에 getToken에서 넘겨주는 데이터를 가져올 수 있음

    ⇒ 이름 보내주고 video화면에 띄워줄 수 있음 그럴 생각 없으면 굳이 가져올 필요 없음

    ⇒ 아이템 사용시 안내문구에 사용할 수 있을듯

Subscriber

• Properties
  • id: string
  • remote: boolean
  • stream: Stream
  • targetElement: HTMLElement
  • videos