neoris/openvidu-livekit-tutorials
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'dev'

Browse Source
This commit is contained in:
juancarmore 2024-08-01 18:18:07 +02:00
commit 1ef3727c35
15 changed files with 323 additions and 261 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
application-client/openvidu-android/app/src/main/AndroidManifest.xml
View File

@ -21,6 +21,9 @@
android:supportsRtl="true"
android:theme="@style/Theme.BasicAndroid"
tools:targetApi="31">
<activity
android:name=".ConfigureUrlsActivity"
android:exported="false" />
<activity
android:name=".RoomLayoutActivity"
android:configChanges="orientation|screenSize|screenLayout"

33
application-client/openvidu-android/app/src/main/java/io/openvidu/android/ConfigureUrlsActivity.kt Normal file
View File

@ -0,0 +1,33 @@
package io.openvidu.android
import android.os.Bundle
import android.widget.Toast
import androidx.appcompat.app.AppCompatActivity
import io.openvidu.android.databinding.ActivityConfigureUrlsBinding
class ConfigureUrlsActivity : AppCompatActivity() {
private lateinit var binding: ActivityConfigureUrlsBinding
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
binding = ActivityConfigureUrlsBinding.inflate(layoutInflater)
setContentView(binding.root)
binding.saveButton.setOnClickListener {
onSaveUrls()
}
}
private fun onSaveUrls() {
val serverUrl = binding.serverUrl.text.toString()
val livekitUrl = binding.livekitUrl.text.toString()
if (serverUrl.isNotEmpty() && livekitUrl.isNotEmpty()) {
Urls.livekitUrl = binding.livekitUrl.text.toString()
Urls.applicationServerUrl = binding.serverUrl.text.toString()
finish()
} else {
Toast.makeText(this, "Please fill in all fields", Toast.LENGTH_SHORT).show()
}
}
}

46
application-client/openvidu-android/app/src/main/java/io/openvidu/android/MainActivity.kt
View File

@ -2,33 +2,31 @@ package io.openvidu.android
import android.content.Intent
import android.os.Bundle
import android.view.LayoutInflater
import android.widget.Toast
import androidx.appcompat.app.AlertDialog
import androidx.appcompat.app.AppCompatActivity
import io.openvidu.android.databinding.ActivityMainBinding
import io.openvidu.android.databinding.DialogSettingsBinding
class MainActivity : AppCompatActivity() {
private lateinit var binding: ActivityMainBinding
// Configure this variables with correct URLs depending on your deployment
private var applicationServerUrl = "https://{YOUR-LAN-IP}.openvidu-local.dev:6443/"
private var livekitUrl = "wss://{YOUR-LAN-IP}.openvidu-local.dev:7443/"
override fun onCreate(savedInstanceState: Bundle?) {
checkUrls()
super.onCreate(savedInstanceState)
binding = ActivityMainBinding.inflate(layoutInflater)
setContentView(binding.root)
binding.participantName.setText("Participant%d".format((1..100).random()))
binding.participantName.setText("Participant%d".format((1..99).random()))
binding.joinButton.setOnClickListener {
navigateToRoomLayoutActivity()
}
}
binding.settingsButton.setOnClickListener {
showSettingsDialog()
private fun checkUrls() {
if (Urls.livekitUrl.isEmpty() || Urls.applicationServerUrl.isEmpty()) {
val intent = Intent(this, ConfigureUrlsActivity::class.java)
startActivity(intent)
}
}
@ -42,8 +40,6 @@ class MainActivity : AppCompatActivity() {
val intent = Intent(this, RoomLayoutActivity::class.java)
intent.putExtra("participantName", participantName)
intent.putExtra("roomName", roomName)
intent.putExtra("serverUrl", applicationServerUrl)
intent.putExtra("livekitUrl", livekitUrl)
startActivity(intent)
} else {
Toast.makeText(this, "Please fill in all fields", Toast.LENGTH_SHORT).show()
@ -51,30 +47,4 @@ class MainActivity : AppCompatActivity() {
binding.joinButton.isEnabled = true
}
/**
* This dialog allows to change the LiveKit URL and the application server URL
* from the application itself. This is useful for development purposes.
*/
private fun showSettingsDialog() {
val dialogBinding = DialogSettingsBinding.inflate(LayoutInflater.from(this))
dialogBinding.serverUrl.setText(applicationServerUrl)
dialogBinding.livekitUrl.setText(livekitUrl)
val builder = AlertDialog.Builder(this)
builder.setTitle("Configure URLs")
.setView(dialogBinding.root)
.setPositiveButton("Save") { dialog, _ ->
applicationServerUrl = dialogBinding.serverUrl.text.toString()
livekitUrl = dialogBinding.livekitUrl.text.toString()
dialog.dismiss()
}
.setNegativeButton("Cancel") { dialog, _ ->
dialog.dismiss()
}
val dialog = builder.create()
dialog.show()
}
}

10
application-client/openvidu-android/app/src/main/java/io/openvidu/android/RoomLayoutActivity.kt
View File

@ -39,9 +39,6 @@ class RoomLayoutActivity : AppCompatActivity() {
private lateinit var binding: ActivityRoomLayoutBinding
private lateinit var participantAdapter: ParticipantAdapter
private lateinit var APPLICATION_SERVER_URL: String
private lateinit var LIVEKIT_URL: String
private lateinit var room: Room
private val participantTracks: MutableList<TrackInfo> = mutableListOf()
@ -62,9 +59,6 @@ class RoomLayoutActivity : AppCompatActivity() {
leaveRoom()
}
APPLICATION_SERVER_URL = intent.getStringExtra("serverUrl") ?: ""
LIVEKIT_URL = intent.getStringExtra("livekitUrl") ?: ""
// Create Room object
room = LiveKit.create(applicationContext)
@ -106,7 +100,7 @@ class RoomLayoutActivity : AppCompatActivity() {
val token = getToken(roomName, participantName)
// Connect to the room with the LiveKit URL and the token
room.connect(LIVEKIT_URL, token)
room.connect(Urls.livekitUrl, token)
// Publish your camera and microphone
val localParticipant = room.localParticipant
@ -227,7 +221,7 @@ class RoomLayoutActivity : AppCompatActivity() {
* access to the endpoints.
*/
private suspend fun getToken(roomName: String, participantName: String): String {
val response = client.post(APPLICATION_SERVER_URL + "token") {
val response = client.post(Urls.applicationServerUrl + "token") {
contentType(ContentType.Application.Json)
setBody(TokenRequest(participantName, roomName))
}

8
application-client/openvidu-android/app/src/main/java/io/openvidu/android/Urls.kt Normal file
View File

@ -0,0 +1,8 @@
package io.openvidu.android
object Urls {
// Configure these variables with correct URLs depending on your deployment
// If you leave them empty, the user will be prompted to enter the URLs
var applicationServerUrl = ""
var livekitUrl = ""
}

12
application-client/openvidu-android/app/src/main/res/drawable/ic_settings.xml
View File

@ -1,12 +0,0 @@
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:tint="#000000"
android:viewportWidth="24"
android:viewportHeight="24">
<path
android:fillColor="@android:color/white"
android:pathData="M19.14,12.94c0.04,-0.3 0.06,-0.61 0.06,-0.94c0,-0.32 -0.02,-0.64 -0.07,-0.94l2.03,-1.58c0.18,-0.14 0.23,-0.41 0.12,-0.61l-1.92,-3.32c-0.12,-0.22 -0.37,-0.29 -0.59,-0.22l-2.39,0.96c-0.5,-0.38 -1.03,-0.7 -1.62,-0.94L14.4,2.81c-0.04,-0.24 -0.24,-0.41 -0.48,-0.41h-3.84c-0.24,0 -0.43,0.17 -0.47,0.41L9.25,5.35C8.66,5.59 8.12,5.92 7.63,6.29L5.24,5.33c-0.22,-0.08 -0.47,0 -0.59,0.22L2.74,8.87C2.62,9.08 2.66,9.34 2.86,9.48l2.03,1.58C4.84,11.36 4.8,11.69 4.8,12s0.02,0.64 0.07,0.94l-2.03,1.58c-0.18,0.14 -0.23,0.41 -0.12,0.61l1.92,3.32c0.12,0.22 0.37,0.29 0.59,0.22l2.39,-0.96c0.5,0.38 1.03,0.7 1.62,0.94l0.36,2.54c0.05,0.24 0.24,0.41 0.48,0.41h3.84c0.24,0 0.44,-0.17 0.47,-0.41l0.36,-2.54c0.59,-0.24 1.13,-0.56 1.62,-0.94l2.39,0.96c0.22,0.08 0.47,0 0.59,-0.22l1.92,-3.32c0.12,-0.22 0.07,-0.47 -0.12,-0.61L19.14,12.94zM12,15.6c-1.98,0 -3.6,-1.62 -3.6,-3.6s1.62,-3.6 3.6,-3.6s3.6,1.62 3.6,3.6S13.98,15.6 12,15.6z" />
</vector>

BIN
application-client/openvidu-android/app/src/main/res/drawable/openvidu_logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

89
application-client/openvidu-android/app/src/main/res/layout/activity_configure_urls.xml Normal file
View File

@ -0,0 +1,89 @@
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".ConfigureUrlsActivity">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="20dp">
<TextView
android:id="@+id/configureTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="48dp"
android:text="@string/configure_urls"
android:textSize="34sp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="@+id/serverUrlLabel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:labelFor="@+id/serverUrl"
android:text="@string/application_server_url"
android:textSize="20sp"
app:layout_constraintStart_toStartOf="@+id/serverUrl"
app:layout_constraintTop_toBottomOf="@+id/configureTitle" />
<EditText
android:id="@+id/serverUrl"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginHorizontal="16dp"
android:layout_marginTop="12dp"
android:autofillHints="Application Server URL"
android:ems="10"
android:inputType="textUri"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/serverUrlLabel"
tools:text="http://localhost:6080" />
<TextView
android:id="@+id/livekitUrlLabel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:labelFor="@+id/livekitUrl"
android:text="@string/livekit_url"
android:textSize="20sp"
app:layout_constraintStart_toStartOf="@+id/livekitUrl"
app:layout_constraintTop_toBottomOf="@+id/serverUrl" />
<EditText
android:id="@+id/livekitUrl"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginHorizontal="16dp"
android:layout_marginTop="12dp"
android:autofillHints="LiveKit URL"
android:ems="10"
android:inputType="textUri"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/livekitUrlLabel"
tools:text="http://localhost:7880" />
<Button
android:id="@+id/saveButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="24dp"
android:text="@string/save"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/livekitUrl" />
</androidx.constraintlayout.widget.ConstraintLayout>
</ScrollView>

184
application-client/openvidu-android/app/src/main/res/layout/activity_main.xml
View File

@ -1,110 +1,110 @@
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<ScrollView
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
android:layout_height="wrap_content"
android:padding="20dp">
<androidx.constraintlayout.widget.ConstraintLayout
<TextView
android:id="@+id/joinTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="48dp"
android:text="@string/join_room"
android:textSize="34sp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="@+id/participantLabel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:labelFor="@+id/participantName"
android:text="@string/participant"
android:textSize="20sp"
app:layout_constraintStart_toStartOf="@+id/participantName"
app:layout_constraintTop_toBottomOf="@+id/joinTitle" />
<EditText
android:id="@+id/participantName"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="20dp">
android:layout_marginHorizontal="16dp"
android:layout_marginTop="12dp"
android:autofillHints="Participant Name"
android:ems="10"
android:inputType="text"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/participantLabel"
tools:text="Participant1" />
<TextView
android:id="@+id/joinPageTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="48dp"
android:text="@string/join_room"
android:textSize="34sp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="@+id/roomLabel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:labelFor="@+id/roomName"
android:text="@string/room"
android:textSize="20sp"
app:layout_constraintStart_toStartOf="@+id/roomName"
app:layout_constraintTop_toBottomOf="@+id/participantName" />
<TextView
android:id="@+id/participantLabel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:labelFor="@+id/participantName"
android:text="@string/participant"
android:textSize="20sp"
app:layout_constraintStart_toStartOf="@+id/participantName"
app:layout_constraintTop_toBottomOf="@+id/joinPageTitle" />
<EditText
android:id="@+id/roomName"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginHorizontal="16dp"
android:layout_marginTop="12dp"
android:autofillHints="Room Name"
android:ems="10"
android:inputType="text"
android:text="@string/room_name"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/roomLabel" />
<EditText
android:id="@+id/participantName"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginHorizontal="16dp"
android:layout_marginTop="12dp"
android:autofillHints="Participant Name"
android:ems="10"
android:inputType="text"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/participantLabel"
tools:text="Participant1" />
<Button
android:id="@+id/joinButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="24dp"
android:text="@string/joinBtn"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/roomName" />
<TextView
android:id="@+id/roomLabel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:labelFor="@+id/roomName"
android:text="@string/room"
android:textSize="20sp"
app:layout_constraintStart_toStartOf="@+id/roomName"
app:layout_constraintTop_toBottomOf="@+id/participantName" />
<ImageView
android:id="@+id/imageView"
android:layout_width="131dp"
android:layout_height="136dp"
android:layout_marginTop="100dp"
android:contentDescription="@string/openvidu_logo"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/joinButton"
app:srcCompat="@drawable/openvidu_logo" />
<EditText
android:id="@+id/roomName"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginHorizontal="16dp"
android:layout_marginTop="12dp"
android:autofillHints="Room Name"
android:ems="10"
android:inputType="text"
android:text="@string/room_name"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/roomLabel" />
<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/openvidu_message"
android:textStyle="italic"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/imageView" />
<Button
android:id="@+id/joinButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="24dp"
android:text="@string/joinBtn"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/roomName" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
</ScrollView>
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="@+id/settingsButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="16dp"
android:layout_marginBottom="16dp"
android:backgroundTint="@color/colorPrimary"
android:clickable="true"
android:contentDescription="@string/settings"
android:focusable="true"
android:src="@drawable/ic_settings"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:tint="@color/white" />
</androidx.constraintlayout.widget.ConstraintLayout>
</ScrollView>

26
application-client/openvidu-android/app/src/main/res/layout/dialog_settings.xml
View File

@ -1,26 +0,0 @@
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginHorizontal="16dp"
android:orientation="vertical"
android:padding="16dp">
<EditText
android:id="@+id/serverUrl"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:autofillHints="Application Server URL"
android:hint="@string/application_server_url"
android:inputType="textUri" />
<EditText
android:id="@+id/livekitUrl"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:autofillHints="LiveKit URL"
android:hint="@string/livekit_url"
android:inputType="textUri" />
</LinearLayout>

5
application-client/openvidu-android/app/src/main/res/values/strings.xml
View File

@ -5,8 +5,11 @@
<string name="room">Room</string>
<string name="room_name">Test Room</string>
<string name="joinBtn">Join!</string>
<string name="openvidu_logo">OpenVidu logo</string>
<string name="openvidu_message">Made with love by <b>OpenVidu team</b></string>
<string name="application_server_url">Application Server URL</string>
<string name="livekit_url">LiveKit URL</string>
<string name="settings">Settings</string>
<string name="configure_urls">Configure URLs</string>
<string name="save">Save</string>
<string name="leave_room">Leave Room</string>
</resources>

2
application-client/openvidu-electron/src/app.js
View File

@ -1,6 +1,6 @@
const { Room, RoomEvent } = require("livekit-client");
// Configure this constants with correct URLs depending on your deployment
// Configure these constants with correct URLs depending on your deployment
const APPLICATION_SERVER_URL = "http://localhost:6080/";
const LIVEKIT_URL = "ws://localhost:7880/";

71
application-client/openvidu-ionic/src/app/app.component.html
View File

@ -8,18 +8,57 @@
>
<ion-icon slot="icon-only" name="logo-github"></ion-icon>
</ion-button>
<ion-button
href="https://livekit-tutorials.openvidu.io/tutorials/application-client/ionic/"
>
<ion-button href="https://livekit-tutorials.openvidu.io/tutorials/application-client/ionic/">
<ion-icon slot="icon-only" name="book"></ion-icon>
</ion-button>
</ion-buttons>
</ion-toolbar>
</ion-header>
@if (!room()) {
@if (settingUrls()) {
<ion-content [fullscreen]="true" class="ion-padding" id="settingUrls">
<div id="settings-dialog" class="form">
<h2>Configure URLs</h2>
<ion-list [formGroup]="urlsForm">
<ion-item>
<ion-input
formControlName="serverUrl"
label="Application Server URL"
labelPlacement="floating"
id="server-url"
placeholder="Application Server URL"
type="url"
required
></ion-input>
</ion-item>
<ion-item>
<ion-input
formControlName="livekitUrl"
label="LiveKit URL"
labelPlacement="floating"
id="livekit-url"
placeholder="LiveKit URL"
type="url"
required
></ion-input>
</ion-item>
</ion-list>
<ion-button
id="save-button"
class="form-button"
(click)="saveUrls()"
[disabled]="!urlsForm.valid"
expand="block"
shape="round"
color="primary"
>
Save
</ion-button>
</div>
</ion-content>
} @else if (!room()) {
<ion-content [fullscreen]="true" class="ion-padding" id="join">
<div id="join-dialog">
<div id="join-dialog" class="form">
<h2>Join a Video Room</h2>
<ion-list [formGroup]="roomForm">
<ion-item>
@ -45,22 +84,18 @@
></ion-input>
</ion-item>
</ion-list>
<ion-button id="join-button" (click)="joinRoom()" [disabled]="!roomForm.valid" expand="block" shape="round" color="primary">
<ion-button
id="join-button"
class="form-button"
(click)="joinRoom()"
[disabled]="!roomForm.valid"
expand="block"
shape="round"
color="primary"
>
Join!
</ion-button>
</div>
<ion-fab vertical="bottom" horizontal="end" slot="fixed">
<ion-fab-button
id="settings-button"
[disabled]="!roomForm.valid"
(click)="presentSettingsAlert()"
size="small"
color="dark"
>
<ion-icon name="settings"></ion-icon>
</ion-fab-button>
</ion-fab>
</ion-content>
} @else {
<ion-content [scrollEvents]="true" class="ion-padding" id="room">

4
application-client/openvidu-ionic/src/app/app.component.scss
View File

@ -2,14 +2,14 @@
font-weight: bold;
}
#join-dialog h2 {
.form h2 {
font-weight: bold;
text-align: center;
margin-bottom: 10px;
font-size: 2em;
}
#join-button {
.form-button {
margin-top: 20px;
}

91
application-client/openvidu-ionic/src/app/app.component.ts
View File

@ -2,13 +2,10 @@ import { HttpClient } from '@angular/common/http';
import { Component, OnDestroy, signal } from '@angular/core';
import { FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
import {
AlertController,
IonApp,
IonButton,
IonButtons,
IonContent,
IonFab,
IonFabButton,
IonFooter,
IonHeader,
IonIcon,
@ -39,7 +36,8 @@ type TrackInfo = {
};
// For local development launching app in web browser, leave these variables empty
// For production or when launching app in device, configure them with correct URLs
// For production or when launching app in a mobile device, configure them with correct URLs
// If you leave them empty when launching app in a mobile device, the user will be prompted to enter the URLs
var APPLICATION_SERVER_URL = '';
var LIVEKIT_URL = '';
@ -58,8 +56,6 @@ var LIVEKIT_URL = '';
IonTitle,
IonButtons,
IonButton,
IonFab,
IonFabButton,
IonIcon,
IonContent,
IonList,
@ -74,11 +70,18 @@ export class AppComponent implements OnDestroy {
participantName: new FormControl('Participant' + Math.floor(Math.random() * 100), Validators.required),
});
urlsForm = new FormGroup({
serverUrl: new FormControl('', Validators.required),
livekitUrl: new FormControl('', Validators.required),
});
room = signal<Room | undefined>(undefined);
localTrack = signal<LocalVideoTrack | undefined>(undefined);
remoteTracksMap = signal<Map<string, TrackInfo>>(new Map());
constructor(private httpClient: HttpClient, private platform: Platform, private alertController: AlertController) {
settingUrls = signal(false);
constructor(private httpClient: HttpClient, private platform: Platform) {
this.configureUrls();
addIcons({
logoGithub,
@ -88,28 +91,28 @@ export class AppComponent implements OnDestroy {
}
configureUrls() {
const deviceMode = this.platform.is('hybrid');
const mobileMode = this.platform.is('hybrid');
// If APPLICATION_SERVER_URL is not configured and app is not launched in device mode,
// use default value from local development
if (!APPLICATION_SERVER_URL) {
if (deviceMode) {
APPLICATION_SERVER_URL = 'https://{YOUR-LAN-IP}.openvidu-local.dev:6443/';
} else {
// If URLs are not configured and app is launched in a mobile device,
// prompt the user to configure them
if (mobileMode) {
if (!APPLICATION_SERVER_URL || !LIVEKIT_URL) {
this.settingUrls.set(true);
}
} else {
// If APPLICATION_SERVER_URL is not configured and app is not launched in a mobile device,
// use default value from local development
if (!APPLICATION_SERVER_URL) {
if (window.location.hostname === 'localhost') {
APPLICATION_SERVER_URL = 'http://localhost:6080/';
} else {
APPLICATION_SERVER_URL = 'https://' + window.location.hostname + ':6443/';
}
}
}
// If LIVEKIT_URL is not configured and app is not launched in device mode,
// use default value from local development
if (!LIVEKIT_URL) {
if (deviceMode) {
LIVEKIT_URL = 'wss://{YOUR-LAN-IP}.openvidu-local.dev:7443/';
} else {
// If LIVEKIT_URL is not configured and app is not launched in a mobile device,
// use default value from local development
if (!LIVEKIT_URL) {
if (window.location.hostname === 'localhost') {
LIVEKIT_URL = 'ws://localhost:7880/';
} else {
@ -119,48 +122,10 @@ export class AppComponent implements OnDestroy {
}
}
/**
* This method allows to change the LiveKit URL and the application server URL
* from the application itself. This is useful for development purposes.
*/
async presentSettingsAlert() {
const alert = await this.alertController.create({
header: 'Configure URLs',
inputs: [
{
name: 'serverUrl',
type: 'text',
value: APPLICATION_SERVER_URL,
placeholder: 'Application Server URL',
id: 'server-url-input',
},
{
name: 'livekitUrl',
type: 'text',
value: LIVEKIT_URL,
placeholder: 'LiveKit URL',
id: 'livekit-url-input',
},
],
buttons: [
{
text: 'Cancel',
role: 'cancel',
id: 'cancel-btn',
cssClass: 'secondary',
},
{
text: 'Ok',
id: 'ok-btn',
handler: (data) => {
APPLICATION_SERVER_URL = data.serverUrl;
LIVEKIT_URL = data.livekitUrl;
},
},
],
});
await alert.present();
saveUrls() {
APPLICATION_SERVER_URL = this.urlsForm.value.serverUrl!;
LIVEKIT_URL = this.urlsForm.value.livekitUrl!;
this.settingUrls.set(false);
}
async joinRoom() {