implement video call functionality with user registration

playground/core-januscaler-demo-vue/src/pages/videocall.vue

@@ -1,17 +1,52 @@
 <template>
     <div>
-videocall
+        <div v-if="state === 'initial'">
+            <input v-model="username" type="text" placeholder="Enter username" />
+            <button @click="registerUser">Register</button>
+        </div>
+        <div v-if="state === 'registered'">
+            <input v-model="usernameToCall" type="text" placeholder="Enter username to call" />
+            <button @click="callUser">Call</button>
+        </div>
+        <div v-if="state === 'incall'">
+            <video ref="localVideo" autoplay></video>
+            <video ref="remoteVideo" autoplay></video>
+            <audio ref="remoteAudio" autoplay style="display:none;"></audio>
+            <p>Ongoing call...</p>
+        </div>
     </div>
 </template>
 
 <script setup lang="ts">
-import {JanuScaler}  from '@januscaler/browser-sdk'
-const client=new JanuScaler()
-await client.init({})
-const videoCallHandle=await client.videoCall.createServiceHandle()
+import { ref } from 'vue';
+import { VideoCallManager } from '../services/videocall/manager';
 
+const state = ref('initial');
+const username = ref('');
+const usernameToCall = ref('');
+const localVideo = ref<HTMLVideoElement | null>(null);
+const remoteVideo = ref<HTMLVideoElement | null>(null);
+const remoteAudio = ref<HTMLAudioElement | null>(null);
+
+const videoCallManager = new VideoCallManager({
+    token: 'januscaler-demo-token',
+    localVideoElement: localVideo,
+    remoteVideoElement: remoteVideo,
+    remoteAudioElement: remoteAudio,
+});
+
+async function registerUser() {
+    await videoCallManager.register(username.value);
+    state.value = 'registered';
+}
+
+async function callUser() {
+    await videoCallManager.call(usernameToCall.value);
+    state.value = 'incall';
+}
 </script>
 
-<style scoped>
 
-</style>
+<style scoped>
+/* Add your styles here */
+</style>

playground/core-januscaler-demo-vue/src/services/videocall/manager.ts

@@ -0,0 +1,67 @@
+import { JanuScaler } from '@januscaler/browser-sdk';
+import { Ref } from 'vue';
+
+export class VideoCallManager {
+  private client: any;
+  private videoCallHandle: any;
+  private localVideoElement: Ref<HTMLVideoElement | null>;
+  private remoteVideoElement: Ref<HTMLVideoElement | null>;
+  private remoteAudioElement: Ref<HTMLAudioElement | null>;
+
+  constructor({
+    token,
+    localVideoElement,
+    remoteVideoElement,
+    remoteAudioElement,
+  }: {
+    token: string;
+    localVideoElement: Ref<HTMLVideoElement | null>;
+    remoteVideoElement: Ref<HTMLVideoElement | null>;
+    remoteAudioElement: Ref<HTMLAudioElement | null>;
+  }) {
+    this.client = new JanuScaler({ token });
+    this.localVideoElement = localVideoElement;
+    this.remoteVideoElement = remoteVideoElement;
+    this.remoteAudioElement = remoteAudioElement;
+  }
+
+  async init() {
+    await this.client.init();
+    this.videoCallHandle = await this.client.videoCall.createServiceHandle();
+    console.log('VideoCallManager initialized');
+  }
+
+  async register(username: string) {
+    if (!this.videoCallHandle) await this.init();
+    await this.videoCallHandle.register(username);
+    console.log(`Registered as ${username}`);
+  }
+
+  async call(username: string) {
+    if (!this.videoCallHandle) throw new Error('Service handle not initialized');
+
+    const mediaStream = await navigator.mediaDevices.getUserMedia({ audio: true, video: true });
+
+    // Bind local video stream
+    if (this.localVideoElement.value) {
+      this.localVideoElement.value.srcObject = mediaStream;
+    }
+
+    mediaStream.getTracks().forEach((track) => {
+      this.videoCallHandle.addTrack(track);
+    });
+
+    const offer = await this.videoCallHandle.createOffer();
+    await this.videoCallHandle.setLocalDescription(offer);
+    await this.videoCallHandle.call(username, offer);
+
+    this.videoCallHandle.onTrack = (track:any) => {
+      if (track.kind === 'video' && this.remoteVideoElement.value) {
+        this.remoteVideoElement.value.srcObject = track.streams[0];
+      }
+      if (track.kind === 'audio' && this.remoteAudioElement.value) {
+        this.remoteAudioElement.value.srcObject = track.streams[0];
+      }
+    };
+  }
+}