diff --git a/3.0.0-beta2/account/index.html b/3.0.0-beta2/account/index.html index fb8b7d2e..497f74b1 100644 --- a/3.0.0-beta2/account/index.html +++ b/3.0.0-beta2/account/index.html @@ -1,3487 +1,27 @@ - - - - + + - - - - - - - - - - - - - - - - - - - Account - openVidu - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- -
-
- - - -
- - - - - - - - - - - - - - - - - - - -
- - - - - -
- - - - -
- - - - - - - - - -
-
- - - - - - - - - - - - - - - -
-
- - - - - - - -

Account

- - -

- - -
-
-
- -
-
-
- - - - - - - - - - - - - - - - - - - - -
-
- - - - - -
- - - -
- - - - - - - - -
-
-
-
- - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file + window.location.replace( + removeFirstPathSectionFromUrl(window.location.href) + ); + + + + Redirecting to /... + + diff --git a/3.0.0-beta2/blog/index.html b/3.0.0-beta2/blog/index.html index 66630313..497f74b1 100644 --- a/3.0.0-beta2/blog/index.html +++ b/3.0.0-beta2/blog/index.html @@ -1,3434 +1,27 @@ - - - - + + - - - - - - - - - - - - - - - - - - - Blog - openVidu - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - Skip to content - - -
-
- - - -
- - - - - - - - - - - - - - - - - - - -
- - - - - -
- - - - - - -
- - - - - - - - - -
-
- - - -
-
-
- - - - - - - -
-
-
- - - -
-
-
- - - -
-
-
- - - -
-
-
-

Blog#

-
- - -
-
- - - - - -
- - - -
- - - - - - - - -
-
-
-
- - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file + window.location.replace( + removeFirstPathSectionFromUrl(window.location.href) + ); + + + + Redirecting to /... + + diff --git a/3.0.0-beta2/conditions/cookie-policy/index.html b/3.0.0-beta2/conditions/cookie-policy/index.html index d516c97e..497f74b1 100644 --- a/3.0.0-beta2/conditions/cookie-policy/index.html +++ b/3.0.0-beta2/conditions/cookie-policy/index.html @@ -1,3529 +1,27 @@ - - - - + + - - - - - - - - - - - - - - - - - - - Cookie Policy - openVidu - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - Skip to content - - -
-
- - - -
- - - - - - - - - - - - - - - - - - - -
- - - - - -
- - - - - - -
- - - - - - - - - -
-
- - - - - - - - - - - - - - - -
-
- - - - - - - -

Cookie Policy

- -

What are cookies?#

-

TIKAL TECHNOLOGIES SL web page uses cookies, which are small files that it exchanges with the visitor's web browser for different purposes. That is done in a totally "invisible" and harmless way for the visitor, so your visit to the page is more fluid and you are not interrupted by some functions. The following explains which is the usage of cookies in TIKAL TECHNOLOGIES SL website and how you can disable them if you don't agree.

-

What kind of information do we collect?#

-

TIKAL TECHNOLOGIES SL web page uses cookies for the following purposes

-
    -
  • Functional cookies: they are used to improve the visitor's navigation through the website, making it more user-friendly. It is important to understand that cookies do not contain any kind of specific personal information, and most of them are deleted from the hard disk at the end of the browser session.
    • -
  • Analytical Cookies: TIKAL TECHNOLOGIES SL website uses cookies from Google Analytics, to analyze how visitors use the page. This way, TIKAL TECHNOLOGIES SL can offer improvements in the usability of the webpage. Google Analytics only collects and processes anonymous data through the TIKAL TECHNOLOGIES SL website. There is further information about the management of Google Analytics' web analysis services at www.google.com/analytics.
    • -
-

How are users able to change the cookies configuration in their browsers?#

-

Any browser allows you to make adjustments on the actions to perform whenever a website asks you to store a cookie. You can:

-
    -
  • Allow web pages to deposit cookies in the browser.
    • -
  • Allow the cookies of the visited web pages only to remain in the browser as long as the page remains open.
    • -
  • Do not allow web pages to deposit cookies in the browser. Please note that in this case, some website functions will not be operational or the full page could even not work at all.
    • -
  • Allow one by one which web pages will be able to deposit cookies in the browser. Please note that in unauthorized pages some website functions will not be operational or the full page could even not work at all.
    • -
-

The modification of the cookies configuration can be done in the option "Configuration" of the browser, in the "Privacy" section.

- - - - - - - - - - - - - - - - - - - - -
-
- - - - - -
- - - -
- - - - - - - - -
-
-
-
- - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file + window.location.replace( + removeFirstPathSectionFromUrl(window.location.href) + ); + + + + Redirecting to /... + + diff --git a/3.0.0-beta2/conditions/privacy-policy/index.html b/3.0.0-beta2/conditions/privacy-policy/index.html index 10b40ff6..497f74b1 100644 --- a/3.0.0-beta2/conditions/privacy-policy/index.html +++ b/3.0.0-beta2/conditions/privacy-policy/index.html @@ -1,3473 +1,27 @@ - - - - + + - - - - - - - - - - - - - - - - - - - Privacy Policy - openVidu - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- -
-
- - - -
- - - - - - - - - - - - - - - - - - - -
- - - - - -
- - - - - - -
- - - - - - - - - -
-
- - - - - - - - - - - - - - - -
-
- - - - - - - -

Privacy Policy

- -

In accordance with the provisions of Regulation (EU) 2016/679 and the Organic Law 3/2018 of 5 December, on the protection of personal data and guarantee of digital rights, we inform you that the data you provide will be incorporated to the treatment system owned by TIKAL TECHNOLOGIES SL with CIF B85986669 and address at Calle Chile, Nº 10, 28290 - Las Rozas de Madrid (Madrid), for the purpose of ELECTRONIC COMMERCE, CUSTOMER MANAGEMENT, AND OTHER PURPOSES. Your data may be processed by third parties (they will be data processors recipients of your data for contractual purposes for example, our computer maintenance company) requiring the same level of established rights, obligations and responsibilities. Your details will be kept for the time only strictly necessary. They will be deleted when a period of time has elapsed without any use being made of it. You agree to notify us of any changes in the data. You will be able to exercise your access rights, rectification, limitation of treatment, deletion, portability and opposition to processing of your personal data by addressing your request to the management or to the e-mail info@naevatec.com. You can contact the appropriate supervisory authority to make any complaint you may consider necessary.

- - - - - - - - - - - - - - - - - - - - -
-
- - - - - -
- - - -
- - - - - - - - -
-
-
-
- - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file + window.location.replace( + removeFirstPathSectionFromUrl(window.location.href) + ); + + + + Redirecting to /... + + diff --git a/3.0.0-beta2/conditions/terms-of-service/index.html b/3.0.0-beta2/conditions/terms-of-service/index.html index 6cca33ff..497f74b1 100644 --- a/3.0.0-beta2/conditions/terms-of-service/index.html +++ b/3.0.0-beta2/conditions/terms-of-service/index.html @@ -1,3786 +1,27 @@ - - - - + + - - - - - - - - - - - - - - - - - - - Terms of Service - openVidu - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - Skip to content - - -
-
- - - -
- - - - - - - - - - - - - - - - - - - -
- - - - - -
- - - - - - -
- - - - - - - - - -
-
- - - - - - - - - - - - - - - -
-
- - - - - - - -

Terms of Service

- -

The purpose of the following terms and conditions is to explain our obligations as providers of the service, as well as your obligations as a client. Please read them carefully.

-

The aforementioned terms and conditions shall be applied from the moment TIKAL TECHNOLOGIES provides you with access to the service, thus it is understood that you have voluntarily accepted them as part of the contractual obligations between the parties involved, that is, between TIKAL TECHNOLOGIES (TIKAL form now on) and you as client. OpenVidu PRO is a service which will vary with time, so as to adapt to its clients and users´ new requirements, which in turn, will likely affect the terms and conditions so that they suit the changes and variations made to TIKAL.

-

TIKAL reserves the right to change the terms and conditions at any given moment, notwithstanding, it shall always endeavour to communicate these via e-mail or through the application itself; consequently, we strongly advise you to ensure that you have read and understood the terms and conditions whose most recent, updated version, is available on our website.

-

First. Definitions.#

-

For the legal purposes of this contract, the following definitions will apply:

-
    -
  1. Software application: a set of instructions which will be interpreted, utilized and executed by a computer system. Even when there may be many of them, the present contract may refer to them in singular, and likewise when pertaining to its backup files.
    2. -
  2. Telematics application: a software application within a server which is connected to the Internet such that it can be accessed remotely through electronic networks. The assignment of the license to use the telematics application OpenVidu PRO is the subject of the present contract.
    3. -
  3. Client of the telematics application: the natural or legal person who benefits from the licence to use the telematics application, thus assuming all obligations arising from the present contract.
    4. -
  4. User of the telematics application: the natural person authorized by the client to use the telematics application, who in turn assumes all obligations arising from the present contract and said utilization.
    5. -
  5. Parties: TIKAL and the client.
    6. -
  6. Exploitation rights over the telematics application: TIKAL TECHNOLOGIES SL
    7. -
  7. Third parties: any natural or legal person alien to the present contractual relation, who, for any reason, enters into a formal, legally binding agreement with either TIKAL or the client.
    8. -
  8. The service, all supporting infrastructure provided by TIKAL that allows the client to register, download, provision bill, and operate its instance of the telematics application
    9. -
  9. Hardware: electronic, mechanic or magnetic devices necessary for the telematics application, and its complementary parts, to work properly.
    10. -
  10. Personal data: any information regarding an identified or identifiable natural person.
    11. -
  11. Updates: new versions of the telematics application and/or its modules, which include new functionalities and improvements when compared to earlier versions.
    12. -
  12. Telematics application modules: parts of the telematics application which manage specific functionalities, and whose licence to use them, the client must acquire separately.
    13. -
-

Second. Purpose#

-
    -
  1. The purpose of the present contract is the licensing of the right to use the telematics application OpenVidu PRO by TIKAL TECHNOLOGIES SL. to the client, so that it may be use in the management of their business. Subject to the terms and conditions provided in this agreement, TIKAL hereby grants to the client a non-exclusive, non-sublicensable, non-transferable license to use the telematics application OpenVidu PRO (from now on “telematics application”). Under no circumstances however, does said licence grant the client sales rights over the telematics application whose ownership remains entirely with TIKAL TECHNOLOGIES SL.
    2. -
  2. The client´s rights to use the telematics application are subjected and limited by both the duration, and the terms and conditions established in the present contract.
    3. -
  3. Hereby the client agrees to use the telematics application in compliance with the law, the present contract, and the good and rational will inherently present in any civilized society.
    4. -
  4. The client acknowledges having examined that OpenVidu PRO features fulfil their needs, and that it has been appropriately informed by TIKAL about them.
    5. -
-

Third. Use limitations and duty of care.#

-
    -
  1. The client must protect and guard the telematics application; thus, it may not share any information whatsoever with third parties. It is specifically forbidden the use of the telematics application outside the business sphere for which it has been acquired, or outside any of the dispositions stipulated in this contract. The client may not sell, lease, transfer, or otherwise sublicense the telematics application or take part in any act which may result in the violation of their duty of care and protection. The client may not assign, transfer, pledge or make any other disposition of the rights acquired through this contract, of any part of the contract, or of any of the rights, claims or obligations under the contract.
    2. -
  2. The client is obligated to refrain from using the telematics application for illegal purposes or any other purposes contrary to what is established in the present contract, or any action that may be injurious to TIKAL´s rights and interests, to the owner of the telematics application, as well as to any third parties involved. Said actions include, but are not limited to, any deed that may harm, overload, disrupt, or otherwise render useless the telematics application, thus preventing other clients and users from making use of it.
    3. -
  3. Changes to the telematics application are strictly forbidden. These include, but are not limited to, such things as reverse engineering, decompiling, disassembling, reproducing, translating, modifying, commercializing, cloning, transforming or transmitting to any natural or legal person, partially or entirely, by any means, whether mechanic, magnetic, photocopies, etc… or to eliminate or block any proprietary notice or logos pertaining to the telematics application. The components and elements subject to the aforementioned restrictions include, but are not limited to, such things as the logical diagrams, source codes, object and/or data model; except prior, written authorization from TIKAL. These restrictions stand, even when said actions where needed for the interoperability with other computer programs or telematics applications.
    4. -
  4. The client or the user must protect and safeguard, both physically and intellectually, the telematics application, namely, its contents, logical procedures, and access protocols, by establishing the necessary means in order to guarantee the non-disclosure, cloning, reproduction, altering, translation, transformation, access by third parties, or any other action that shall imply a violation of the duty of care or of any intellectual and industrial property right.
    5. -
  5. The telematics application may only be used by the client or authorized user, for processing the client´s own data and their products, but under no circumstances shall it be used to process third parties ‘data.
    6. -
  6. TIKAL cannot guarantee uninterrupted access to the service throughout the entire validity period of this contract due to unforeseeable factors such as network issues, telecommunications service providers, breakdown in computers, as well as other contingencies such as repair and maintenance work, and software updates. Notwithstanding this, TIKAL reserves the right to adopt any necessary measures to limit the service, should it be considered that improper and/or irresponsible use of the telematics application is occurring, specially when said uses run counter to the terms and conditions provided in the present contract.
    7. -
  7. Should the client or user breach the terms of contract, in a continuous and sustained fashion, or acting in bad faith, TIKAL shall terminate the provision of the service, without reimbursing any amount, on the grounds of abusive and improper use.
    8. -
  8. Interpretation and scope. Any other right which has not been stated or directly mentioned in the present contract, remains reserved to TIKAL. Under no circumstances shall the terms and conditions of this contract be interpreted or applied in such a fashion that could be injurious to TIKAL or in any manner that runs counter to the regular exploitation framework of a telematics application.
    9. -
-

Fourth. Liability.#

-
    -
  1. TIKAL´s telematics application is access-ready in its current state and configuration. Should the application contain any deficiency attributable to TIKAL TECHNOLOGIES SL, the latter pledges to make use of all the resources available to them in order to solve the issue as promptly as possible. Nonetheless, it declines any liability and does not give any guarantee regarding violations perpetrated by third parties, marketability, satisfactory quality or suitability for a specific purpose.
    2. -
  2. TIKAL shall act with due diligence and professionalism by making use of all its resources available so as to ensure the quality, reliability, and security of the telematics application. In any case, TIKAL´s assumes no liability for any damages, direct or indirect, incidental or special, including, but not limited to, such things as damages or financial loss, work disruptions, failure, breakdown, or any losses, even when the possibility of such inconveniences occurring, which include third-party complaints, were previously notified to a member of TIKAL´s staff.
    3. -
  3. The client accepts, within reason, to tolerate specific, isolated disruptions in connectivity and hereby forfeits the right to claim any liability, contractual or otherwise, as well as damages owing to possible failures, slowness or access errors. TIKAL declines any liability concerning data loss, accidental or otherwise, resulting from the client´s actions or activities.
    4. -
  4. The client or user is solely responsible for the provision and payment of the costs necessary to ensure compatibility between the telematics application and their equipment, including all hardware, software, electronic components, and any other component required to access the telematics application, these include, but are not limited to, such things as telecommunication services, Internet access and connectivity, operating systems, or any other program, equipment or services, required to access and use the telematics application.
    5. -
  5. TIKAL declines any liability regarding any content that the client or user may host within the telematics application OpenVidu PRO, since at no moment, does TIKAL intervene in the internal processing of said content. Therefore, and in accordance with art.16 of LSSI-CE, TIKAL is not legally bound to remove any content from the server, provided there is no “actual knowledge” that the activity or information stored is illegal, libellous, or injurious to third-party rights or assets. In this regard, it shall be understood that “actual knowledge” exits, when there is a court or administrative decision, ordering to block or remove content and that the contractor (TIKAL) has been made aware of it. Notwithstanding, TIKAL reserves the right to remove this type of content out of its own volition, once it has been detected, whilst the client waives any right to claim or demand compensation. Should the application be in any way damaged due to the introduction of malign software or content (virus, trojan,…) TIKAL reserves the right to automatically terminate the contract without having to pay any compensation whatsoever. On the other hand, TIKAL hereby reserves the right to demand compensation from the client or user for any damages caused to the system.
    6. -
  6. The client or user shall burden all legal costs incurred when the cause is attributable to them, these include TIKAL lawyers’ fees, even when a final court decision has yet to be reached.
    7. -
  7. TIKAL uses information security protocols which are broadly accepted and observed by the industry such as firewalls, access-control procedures, and crypto mechanisms in order to avoid any unauthorized access to the data. For this purpose, the client hereby grants TIKAL access to data so that it can perform access-control authentication. The licensing process or any process which entails the introduction of personal data shall always conducted under a rigorous communication protocol so as to ensure no third parties have access to data transmitted electronically.
    8. -
-

Fifth. Intellectual and industrial property rights.#

-
    -
  1. The exploitation rights of the telematics application are owned by TIKAL and protected by Spanish Intellectual Property Laws applicable in any country where it is used. The structure, organization and coding of the telematics application constitute confidential and valuable industrial and commercial secrets which belong to TIKAL. Therefore, the client must treat the telematics application in the same fashion they would when utilizing any material protected by intellectual property rights, thus copying, duplicating, or cloning the application is strictly forbidden.
    2. -
  2. The present licence to use the telematics application does not imply, either explicitly or implicitly, the assignment of the intellectual and industrial rights over said application, the hardware, or the data model.
    3. -
  3. Brands must be utilized in accordance with the commercial uses of brands, including acknowledging the proprietor’s name of the brand. Brands may only be used in order identify those printouts produced by the telematics application. Said utilization does not imply or grant any property rights over the application.
    4. -
  4. The knowledge and expertise intrinsic to the telematics application, as well as the knowledge utilized to configure it, is confidential information which belongs to the owner of the telematics application TIKAL. The client acknowledges this and assumes all liability regarding fraudulent use, or illegal copy or duplication of said application, or complementary programs, or utilization of this information by third parties, being liable for any breach of the present contract, by them or by any person or persons depending or associated with the client, or when these individuals have been granted access, directly or indirectly, to the telematics application by the client.
    5. -
  5. Updates: For the entire validity period of the present contract, and in accordance with the terms and conditions stipulated in the next paragraph, the client is entitled to have access to the updates of the telematics application as they arise. The client assumes all legal liability for the updates, regarding limitations and duty of care, in the same fashion as with the original computer application. Updates to additional modules of the telematics application shall be given to those clients who have acquired from TIKAL the licence to use said modules.
    6. -
  6. Hereby the client gives TIKAL consent to incorporate them as such into their business portfolio, thus allowing TIKAL to use their brand and logo on its website as well as in documents which may be given to other potential clients, for the sole purpose of said portfolio, and provided that the client does not express opposition to them being used in such a fashion.
    7. -
-

Sixth. Right to amend.#

-

TIKAL reserves the right to update the telematics application to the latest version available on the market. Said updates may include, but are not limited to, such things as new functionalities, improvements, and modifications and legal updates to the telematics application, which may vary, at any moment such things as its features, performance, and configuration of the telematics application content.

-

TIKAL pledges to evaluate and take into consideration suggestions and requests made by clients and users of the telematics application so that they may be incorporated in the new versions of said application; however, it is TIKAL´s right, not the client´s to decide which modifications or improvements may be included in the aforementioned versions.

-

TIKAL reserves the right to modify, at any moment, the characteristics, features, and conditions of TIKAL for the benefit and development of the service. With this in mind, TIKAL may only have to observe the formality of having to notify the client via an on-line notice, or by modifying any clause in this contract. Notwithstanding the foregoing, TIKAL shall endeavour to promptly notify the client so that the latter may adapt them.

-

Seventh. Exclusion and termination of licensing.#

-
    -
  1. TIKAL reserves the right to exclude and/or terminate, temporarily or in a definite manner, the client´s right to use the telematics application, in case the following occurring:
      -
    • Breach of any of the terms and conditions of the present contract.
      • -
    • Breach of law and order and/or improper, illegal, or negligent professional behavior.
      • -
    • When a court, administrative, or official decision is made to do so.
      • -
    -
    2. -
  2. The exclusion clause, or termination of this contract, does not imply that TIKAL forfeits the right to take legal actions or file for financial compensation when the client has acted in bad faith to damage, directly or indirectly, the telematics application.
    3. -
-

Eighth. Communications.#

-
    -
  1. For the purposes of establishing a line of communication regarding the present contract both parties agree to use the place of residence which appears in it. The client pledges to keep the e-mail account provided in this licensing agreement, operational, activated and updated for the purposes of communications with TIKAL, which constitutes TIKAL´s preferred line of communication (albeit not the only one). In general terms, the client pledges to keep their personal details updated, and must communicate TIKAL, in a clear, unambiguous manner, of any changes.
    2. -
  2. Should the client fail to notify said changes, notifications or notices delivered to the address(es) given by the client in the licensing agreement, shall be considered valid.
    3. -
  3. The client consents that telephone conversations with TIKAL may be recorded with the intent to improve the quality and security of the service.
    4. -
-

Ninth. Duration.#

-
    -
  1. The contract shall be valid indefinitely from the moment the client requests it. The client can also put the end to the contract at any time he wishes, being obliged to pay the pending consumed service.
    2. -
  2. As long as the period contract holds it is understood that the validity of the contract published on TIKAL´s website and containing all updates, prevails.
    3. -
-

Tenth. Terms of payment.#

-
    -
  1. The price, payment method, billing and payment of the telematics application licensing, object of the present contract, is stipulated in the Current Official Rates Section published on TIKAL´s website (https://openvidu.io at the time of writing), which are considered part of a whole to all intents and purposes.
    2. -
  2. The price stipulated in the aforementioned Current Official Rates Section, do not include valued added tax (VAT), nor does it include any other taxes or fees established by law whose current rates shall be applied for the provision of the service when signing the present contract. Therefore, said amounts may be increased according to current tax rates.
    3. -
  3. Payment will be done monthly and will cover the whole amount of the service consumed during last month period according to the currently published rates from TIKAL.
    4. -
  4. Monthly payments include both the basic rate for the provision of the service, and the corresponding rate(s) for any optional or additional service hired.
    5. -
  5. Payments must be made effective by the credit or debit card that the client has agreed with TIKAL when first hiring the service. Visa and MasterCard shall be the accepted cards.
    6. -
  6. Total or partial delay in payment by the client for the amount(s) TIKAL has billed them shall grant TIKAL the right to cancel or terminate all contracted obligations in accordance with the present contract. Suspension of the service provision shall be realized within the next fifteen natural days after the contract has reached its expiry date, prior notice to the client. After said fifteen natural days from the day the service was suspended, and prior notification to the client, TIKAL may terminate the contract. If the client pays the full amount owed to TIKAL during said period, the latter shall re-establish the service as promptly as possible from the moment it is notified that the debt has been settled. Notwithstanding the foregoing, TIKAL reserves the right to ask for a two-month deposit as a guarantee before re-establishing the service. The client accepts all liability for any legal costs incurred due to claims made by TIKAL regarding breach of payment after the contract has reached its expiry date, including, but not limited to, such things as the return of invoices and late-payment interest. - When the client returns, for any cause alien to TIKAL, two or more direct-debit invoices, TIKAL shall be entitled to unilaterally opt for the annual hiring and billing of the service.
    7. -
  7. When the client has defaulted on a payment, either totally or partially, during three months, for the amount owed to TIKAL, the latter has the right to rescind the contract between the two parties, as well as the direct and definite termination and cancellation of the service hired by the client, including the database linked to the client´s services, without prior notice from TIKAL.
    8. -
  8. TIKAL shall apply upon its rates any current deals and offers existing at the time the client hires the service, provided they comply with the terms and conditions of said deals and offers so that they may benefit from them. The client acknowledges and accepts the fact they may obtain detailed information, at any given time, regarding said deals and offers on TIKAL´s website or through the habitual communication channels with which TIKAL provides its clients.
    9. -
-

Eleventh. Data Protection.#

-

The parties involved agree that they know, comply with, and are subject to, the Spanish and European laws and legislation regarding Personal Data Protection, thus they must give proper use and treatment to all data arising from any activity subjected to the terms and conditions of this contract.

-

Data Controller agreement between the client and TIKAL.#

-

In accordance with the Spanish Data Protection Laws, TIKAL´s access to the client´s personal files shall not be considered a violation of said laws, insofar as TIKAL is effectively the Data Controller and said access is necessary for the provision of the service which is the subject of this contract.

-

In this regard, and for the purposes of Data Protection regulation, TIKAL shall be regarded as the “Data Controller” of the client´s data. Notwithstanding the foregoing, TIKAL pledges that it shall treat said data in conformity with the client´s instructions provided in this contract, and that under no circumstances shall it utilise them for any other purposes outside of what the parties have agreed in this contract, nor shall it transfer or communicate them to a third party, not even for back-up or storage purposes. At the same time, the duration and validity of this agreement shall correspond to the type of service hired by the client.

-

Once the provision of said service terminates and the data shall no longer be necessary to perform the aforementioned Data Controller role, all personal data shall be either destroyed or returned to the person, persons or entity responsible for it, as well as any storage medium, documents or files containing personal data.

-

In order to provide the service and what said provision entails, TIKAL shall be granted access to the following information:

-
    -
  1. Contact details
    2. -
  2. Company profile data
    3. -
  3. Assets and billed services data
    4. -
  4. Tax identification data
    5. -
-

TIKAL´s obligations as Data Controller are described as follows:

-
    -
  1. Treat all data in accordance with the instructions received by the person, persons or entity in charge of its treatment and only for the purposes provided in this contract.
    2. -
  2. To not communicate or transfer any data to third parties, except prior consent by the body in charge of its treatment, or in cases provided for by the law.
    3. -
  3. TIKAL may not outsource, either totally or partially, the provision of the service(s) described in the present contract, except prior authorization from the client whom shall be informed with due notice about the outsourcing entity as well as the services being outsourced. In this case, TIKAL shall draft and execute a new contract with said outsourcing entity, always in accordance with the current Data Protection laws.
    4. -
  4. To not disclose any personal data to which TIKAL may have had access, even after the termination of this contract.
    5. -
  5. To guarantee that the staff managing personal data pledge to keep the confidentiality which said data entails and that they comply with the proper security protocols.
    6. -
  6. To assist the person or body responsible for data treatment regarding data protection.
    7. -
  7. To provide the person or body responsible for data protection with support and assistance when performing an impact assessment, or when consulting the regulatory authorities, if applicable. Additionally, to provide said person or body with the necessary information so that it may prove their compliance with the rules and regulations.
    8. -
  8. Notwithstanding the foregoing, said person or body has mechanisms in place so as to guarantee the confidentiality, integrity, and availability of the systems and services concerning data protection, as well as to restore the access and availability to data in case of system failure. Additionally, it is endowed with capabilities so as to regularly verify and assess the efficacy of the security protocol.
    9. -
-

Duties of the responsible for data treatment:

-
    -
  1. To guarantee, at all times, compliance with the Data Protection Laws.
    2. -
  2. Make all necessary enquiries beforehand.
    3. -
  3. To supervise that proper data treatment is occurring.
    4. -
  4. To provide the data controller with all necessary data for the provision of the service.
    5. -
-

TIKAL´s duties as Data Controller:

-
    -
  1. To guarantee, at all times, compliance with the Data Protection Laws.
    2. -
  2. Make all necessary enquiries beforehand.
    3. -
  3. To supervise that proper data treatment is occurring.
    4. -
  4. To provide the data controller with all necessary data for the provision of the service.
    5. -
-

Twelfth. Confidentiality.#

-
    -
  1. All data and information transmitted between the parties is strictly confidential and property of TIKAL and the client, and its protection is of the utmost importance. To this intent, both parties hereby contract the obligation to safeguard said data and information by adopting all appropriate measures to ensure that only authorized individuals shall have access to it; authorized individuals being understood as those employees which are needed by the parties involved so as to keep the provision of the service, which is the object of this contract, in good working order.
    2. -
  2. In this regard, the signatory parties are hereby subject to the following confidential agreement:
      -
    • Hereby TIKAL pledges to keep confidential all data and information supplied by, and concerning the client, as well as the output arisen from the service provided. In this regard, TIKAL possesses strict internal controls whose objective and end are to guarantee the integrity of the present confidential agreement.
      • -
    • The client therefore agrees to keep confidential all data and information arising from TIKAL´s internal processes, specially the existence, utilization, and functionalities of any process used in the provision of the service.
      • -
    • The present confidential agreement shall remain valid even after the termination of the present contractual relation and extends indefinitely to all members of staff that have been granted access to said confidential information.
      • -
    -
    3. -
-

Thirteenth. Termination. Rescission. Nullity.#

-
    -
  1. The present contract shall be considered void for infringement, committed by any of the parties involved, of the Spanish Civil Code, and in particular, of the Spanish Commercial Code, and the obligations arising from the following:
      -
    • Mutual consent of the parties involved.
      • -
    • When the present contract has reached its expiry date which is specified in clause tenth, or within the subsequent extensions thereof.
      • -
    • By unilateral rescission provided that the party wishing to rescind communicates this at least one month in advance.
      • -
    • When any of the parties has been officially put into administration, has filed for bankruptcy protection, is under bankruptcy or insolvency proceedings, or is under liquidation or dissolution.
      • -
    • Due to any other reason(s) provided for in law.
      • -
    • Should any of the parties involved breach the contracted obligations provided in the present contract, the other party may consider it as void. Said consideration warrants no prior notice or compensation of any kind, but for the need to communicate the decision to the other party; unless the unaccrued obligations owed by the party are performed within the next fifteen days, counting from the moment said party was notified that they are in breach of the contract . Notwithstanding the foregoing, the other party reserves the right to claim or file for damages caused by this infringement.
      • -
    -
    2. -
  2. TIKAL pledges to destroy all data provided by the client once the contractual relation is extinguished. Likewise, TIKAL shall destroy or return any document or storage medium containing any IT-related data arising from said contractual relation. Once said contractual relation terminates, the client may request TIKAL to supply them with a hard, back-up copy of all data pertaining to and arising from said relation, to any address the client wishes, prior to a written request to do so, which must be sent within the week after the end of the contract. The client shall burden the costs incurred arising from the handling and mailing of said request.
    3. -
  3. The client may cease or cancel the use of the telematics application whenever they wish to do so. Should the client or any authorized user by them request the cancellation of the service at TIKAL´s offices, it shall become effective on the same day said request was made. Therefore, it is advised to carefully observe said process to avoid any resources or data loss that the client or user may have in their TIKAL´s account. Should it not be possible for them to initiate said cancellation process at TIKAL´s offices, the client may request it by contacting TIKAL´s customer service via any of the channels provided in this contract. Said cancellation shall become effective on the day stipulated by the client, provided that the request has been made with enough time to be processed correctly.
    4. -
-

Fourteenth. Applicable legislation and jurisdiction.#

-

The present is a business contract regulated by Spanish laws. The parties involved agree that any discrepancy, legal or civil action, claim or complain arising from the interpretation and execution of the present contract, shall be, directly or indirectly, taken to the Court of Madrid, thus all parties involved hereby renounce to take any matters pertaining to this agreement to any other jurisdiction.

-

The present document constitutes the total agreement of the parties in relation to the matters covered in this agreement, thus substitutes all previous obligations, liabilities, and agreements, both written and verbal, existing prior to the signature and execution of this contract.

-

The following website (www.naevatec.com) belongs to:
-TIKAL TECHNOLOGIES SL TAX ID: B85986669 10 Chile Rd/St 28290 – Las Rozas de Madrid (Madrid City) Spain. Registered in the Madrid´s Trade Register, volume/tome 28043. Book 0 Section 8th of the Registry Book, Page 37, Sheet M-505315.

- - - - - - - - - - - - - - - - - - - - -
-
- - - - - -
- - - -
- - - - - - - - -
-
-
-
- - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file + window.location.replace( + removeFirstPathSectionFromUrl(window.location.href) + ); + + + + Redirecting to /... + + diff --git a/3.0.0-beta2/index.html b/3.0.0-beta2/index.html index 60e15ea9..497f74b1 100644 --- a/3.0.0-beta2/index.html +++ b/3.0.0-beta2/index.html @@ -1,3738 +1,27 @@ - - - - + + - - - - - - - - - - - - - - - - - - - - - openVidu - openVidu - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - Skip to content - - -
-
- - - -
- - - - - - - - - - - - - - - - - - - -
- - - - - -
- - - - - - -
- - - - - - - - - - - - -
-
- -
-

A powerful platform to develop WebRTC real-time applications.
Self-hosted. Performant. Fault Tolerant. Scalable. Observable.

-

- OpenVidu allows you to implement ultra-low latency video - and audio applications with ease: one-to-one calls, videoconference rooms of - any size, massive live streamings with thousands of viewers... It is built - on the best open source WebRTC stacks with all the - features you need: multi-platform, recording, broadcasting, screen sharing - and more. From an operations perspective we aim to make it easy to - self-host a performant, fault-tolerant, scalable and - observable cluster, reducing DevOps efforts. -

-
- - See more - - - Get started - -
-
- - -
-
- - - - - - - - - - - - - - - -
-
- - - - - - - -

Home#

-
-

- Create your real-time video and audio application with ease -

-
- -
-
-
    -
  • -

    Ready to use app

    -
    -

    You get OpenVidu Call with every OpenVidu installation.
    A fully-fledged videoconference application with all the features you expect: multiparty, device selection, screen share, chat, recording, virtual background and more!

    -
    • -
  • -

    All is customizable

    -
    -

    If you want to integrate OpenVidu into your own application, there are UI Components that are quickly to setup but also highly customizable. If you want total control, you can use SDKs to fine-tune the integration of OpenVidu in your app. Learn more at Developing your OpenVidu app.

    -
    • -
  • -

    Self-hosted

    -
    -

    OpenVidu is designed from the ground up to be self-hosted in your own servers. With OpenVidu you can easily deploy and manage a production-ready live-video solution in your own infrastructure, whether it is on premises or in your favorite cloud provider. Leverage your hardware and regain control of your users' data!

    -
    • -
  • -

    Professional support

    -
    -

    We are experts in WebRTC. We have been developing real time tools and supporting customers building their solutions for over a decade. Let's work together to make your project a success! Contact us now.

    -
    • -
-
-
-
- -
-

- Self-host a production-ready live-video platform with advanced capabilities typically reserved for SaaS solutions -

-
- -
-
-
    -
  • -

    Easy to deploy

    -
    -

    What could take a whole DevOps team days of work, with OpenVidu you can have it ready in minutes: an easy installation, configuration and administration experience to your self-hosted, production grade, real-time solution. Install now.

    -
    • -
  • -

    Cost effective

    -
    -

    OpenVidu COMMUNITY is open source, free and can handle a significant user load. With OpenVidu PRO you can handle more simultaneous Rooms in the same hardware thanks to mediasoup integration. This allows reducing the cost of each Room, making OpenVidu PRO truly cost-effective as a self-hosted solution. See Pricing.

    -
    • -
  • -

    Performant

    -
    -

    OpenVidu is built to be incredibly powerful. It is based on the best open source WebRTC stacks: LiveKit and mediasoup. By combining the best of both worlds, OpenVidu provides outstanding performance.

    -
    • -
  • -

    Scalable

    -
    -

    OpenVidu has been designed from the outset with scalability in mind. Host videoconference rooms and large live streams with hundreds of participants. Autoscale your cluster to adapt to the demand and optimize your resources.

    -
    • -
  • -

    Fault tolerant

    -
    -

    OpenVidu offers fault tolerance in all its components. Deploy a reliable cluster knowing that if one of your node goes down, others will be able to continue working with no downtime.

    -
    • -
  • -

    Observable

    -
    -

    OpenVidu brings everything necessary to monitor the status, health, load and history of your deployment. It automatically collects events, metrics and logs and provides OpenVidu Dashboard and a Grafana stack to navigate them.

    -
    • -
-
-
-
- -
-

- All the features you need to quickly build your perfect real-time application -

-
- -
-
-
    -
  • -

    WebRTC

    -
    -

    Achieve ultra-low latency in your videoconference or live streaming app thanks to WebRTC.

    -
    • -
- -
    -
  • -

    Security at all levels

    -
    -

    E2E encryption, fine-grained access control and highly secure deployments for the most demanding security requirements.

    -
    • -
  • -

    Multiplatform

    -
    -

    Chrome, Firefox, Safari, Android, iOS, Unity, Windows, MacOS, Linux... OpenVidu is compatible with all of them.

    -
    • -
  • -

    Up to 4K video and HQ audio

    -
    -

    HD up to 4K video resolution, and crisp audio quality with noise cancellation and echo suppression.

    -
    • -
  • -

    Recording

    -
    -

    Record your videocalls with complete freedom. You can use predefined layouts or easily build your own.

    -
    • -
  • -

    Broadcast to YouTube/Twitch

    -
    -

    OpenVidu allows you to easily broadcast your sessions to live-streaming platforms such as YouTube or Twitch.

    -
    • -
  • -

    Screen sharing

    -
    -

    Screen share from browsers or native applications with ease, always with the best quality.

    -
    • -
  • -

    Virtual Backgrounds

    -
    -

    Apply effects to your videos, blurring the background or replacing it with an image.

    -
    • -
  • -

    Server side processing

    -
    -

    For the most advanced use cases: you can add pipelines to process video and audio streams in real time in your servers.

    -
    • -
-
-
-
- -
-

Build, deploy on-premises and scale your videoconferencing or live streaming app with ease. Contact us if you need it : we are here to help!

-
- Talk to an expert -
-
- - - - - - - - - - - - - - - - - - - - -
-
- - - - - -
- - - -
- - - - - - - - -
-
-
-
- - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file + window.location.replace( + removeFirstPathSectionFromUrl(window.location.href) + ); + + + + Redirecting to /... + + diff --git a/3.0.0-beta2/pricing/index.html b/3.0.0-beta2/pricing/index.html index 96dd72cd..497f74b1 100644 --- a/3.0.0-beta2/pricing/index.html +++ b/3.0.0-beta2/pricing/index.html @@ -1,4000 +1,27 @@ - - - - + + - - - - - - - - - - - - - - - - - - - - - Pricing - openVidu - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - Skip to content - - -
-
- - - -
- - - - - - - - - - - - - - - - - - - -
- - - - - -
- - - - - - -
- - - - - - - - - -
-
- - - - - - - - - - - - - - - -
-
- - - - - - - - - -

Pricing#

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
OpenVidu COMMUNITYOpenVidu PRO
PriceFree
0.0006$ core/minute
Free while in beta! *
Type of deploymentOpenVidu Single NodeOpenVidu ElasticOpenVidu High Availability
SuitabilityFor applications with medium user loadFor applications with dynamic user load that require scalabilityFor applications where both scalability and fault tolerance are critical
FeaturesCustom LiveKit distribution with Redis, Egress, Ingress, S3 storage and observabilitySame benefits as OpenVidu Single Node plus 2x performance, scalability and advanced observabilitySame benefits as OpenVidu Single Node and OpenVidu Elastic plus fault tolerance
Number of servers1 Node1 Master Node +
N Media Nodes		 4 Master Nodes +
N Media Nodes
Installation instructionsInstallInstallInstall
- -
-
-

About OpenVidu Pro free beta period

-
    -
  • OpenVidu Pro is currently in beta and will remain completely free until GA.
    • -
  • All users running a beta version of OpenVidu Pro will be notified weeks before the free beta period ends, giving time to upgrade to the final GA version if desired.
    • -
  • Active OpenVidu Pro clusters in beta version will eventually shut down automatically after the free beta period ends.
    • -
-
-
-

How is OpenVidu Pro priced?#

-

OpenVidu Pro follows a simple pricing model based on the number of cores used by the OpenVidu Pro cluster:

-
-
$0.0006
-per core per minute available
-for your OpenVidu PRO cluster -
- -

Taking into account the following points:

-
    -
  • You only pay for your OpenVidu Pro cluster(s) for the time they are running. Usage will be registered the moment you start your cluster and will stop as soon as you shut your cluster down. When turned on, your cluster will be charged even in idle state (without active Rooms).
    • -
  • You pay for every available core at any given time: if you cluster grows for one hour, that hour you will pay more. If your cluster decreases the next hour, next hour will be cheaper. Master Nodes and Media Nodes have the same core per minute price.
    • -
  • Your OpenVidu Pro cluster(s) need to allow outbound traffic to domain accounts.openvidu.io port 443. If you are behind a very restrictive corporate firewall that doesn't allow this, please contact us through commercial@openvidu.io.
    • -
-
-

There is a 15-day free trial period waiting for you!

-
- Get an OpenVidu License -
-
- -
-

Why is OpenVidu Pro priced like this?#

-

There are deliberate reasons for this pricing model in OpenVidu Pro:

-
    -
  • We believe that a platform specifically designed to be self-hosted should have a pricing model that is as close to hardware as possible: that is the total number of cores available to the cluster over time.
    • -
  • This pricing model is simple, transparent and easy to predict: you pay only for the time the cluster is running and always according to its size.
    • -
  • The cost is directly proportional to the size of your cluster: larger clusters pay more, smaller clusters pay less.
    • -
  • Elasticity is encouraged: adjust the size of your cluster according to the load at any given time to minimize costs.
    • -
-

When and how are you charged?#

-

Users must create an OpenVidu account and get an OpenVidu License. This license will be required to deploy an OpenVidu Pro cluster (OpenVidu Elastic or OpenVidu High Availability).

-

When purchasing an OpenVidu License, you will have to indicate your billing address and a credit card. You will receive a 15-day free trial period during which you will not be charged at all.

-

After the free trial period, a monthly billing cycle will charge all your expenses to your credit card. Therefore, you will receive an invoice each month. You can review your upcoming expenses and your past invoices in your OpenVidu account page. And don't worry: we don't store any credit card data. The entire billing process is securely done via Stripe.

-

OpenVidu Pro clusters will automatically report their usage on a recurring basis. That's why they need outbound access to domain accounts.openvidu.io port 443. If you are behind a very restrictive corporate firewall that doesn't allow this, please contact us through commercial@openvidu.io.

-

Pricing examples#

-

As explained above, every minute of an OpenVidu Pro cluster is charged according to the number of cores available for the cluster. So let's see some actual examples, first noting the following points:

-
    -
  • The examples represent a continuous usage of the cluster, but remember that you can shut it down whenever you are not using it and that you can drop nodes to save resources.
    • -
  • Each example shows in a table the price for 8 hours, 1 day and 1 month of continuous usage, as well as the approximated amount of video Tracks and Rooms of 8 participants the cluster would support. This is done to provide a basic insight into the capacity of each cluster. These 8-to-8 Rooms assume 64 video Tracks (640x480) and 64 audio Tracks in them (2 tracks published and 14 tracks subscribed per Participant), with no Egress, Ingress or other additional features.
    • -
-
-
-

OpenVidu Elastic with 12 cores in total#

-

This OpenVidu Pro Elastic cluster has 1 Master Node of 4 cores and 2 Media Nodes of 4 cores each.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Number of video Tracks2000
Number of Rooms with 8 Participants250
8 hours$3.46
24 hours (1 day of uninterrupted use)$10.37
720 hours (1 month of uninterrupted use)$311.04
-
-
-
- -
-
-
-
-

OpenVidu Elastic with 20 cores in total#

-

This OpenVidu Pro Elastic cluster has 1 Master Node of 4 cores and 4 Media Nodes of 4 cores each.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Number of video Tracks4000
Number of Rooms with 8 Participants500
8 hours$5.76
24 hours (1 day of uninterrupted use)$17.28
720 hours (1 month of uninterrupted use)$518.40
-
-
-
- -
-
-
-
-

OpenVidu High Availability with 32 cores in total#

-

This OpenVidu Pro HA cluster has 4 Master Nodes of 4 cores each and 4 Media Nodes of 4 cores each. The number of simultaneous Rooms and Tracks will be the same as in the previous example, but this cluster will provide fault tolerance thanks to the replication of the Master Nodes.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Number of video Tracks4000
Number of Rooms with 8 Participants500
8 hours$9.21
24 hours (1 day of uninterrupted use)$27.65
720 hours (1 month of uninterrupted use)$829.44
-
-
-
- -
-
-
-
-

OpenVidu Elastic with a variable number of cores#

-

This OpenVidu Pro Elastic cluster takes advantage of the elasticity of the platform. It has a fixed Master Node of 4 cores, but a variable number of Media Nodes. Let's imagine a scenario where our days are divided in three phases according to the user load:

-
    -
  • First 8 hours of the day the demand is low. 1 Media Node of 4 cores is enough to handle it.
    • -
  • The next 8 hours of the day the user load increases significantly (this is very typical if our application is used more during working hours). We add another Media Node of 8 cores to handle this new demand.
    • -
  • The last 8 hours of the day the demand decreases, and we are able to remove the Media Node of 8 cores and keep only the Media Node of 4 cores.
    • -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
First 8 hours of the day with low demand
(8 cores in total)
Video Tracks1000
8x8 Rooms125
Price$2.30
Next 8 hours of the day with high demand
(16 cores in total)
Price$4.61
Video Tracks3000
8x8 Rooms375
Last 8 hours of the day with low demand
(8 cores in total)
Price$2.30
Video Tracks1000
8x8 Rooms125
Total for 1 day$9.21
Total for 1 month$276.30
-
-
-
- -
-
-
-
-
-

There is a 15-day free trial period waiting for you!

-
- Get an OpenVidu License -
-
- - - - - - - - - - - - - - - - - - - - -
-
- - - - - -
- - - -
- - - - - - - - -
-
-
-
- - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file + window.location.replace( + removeFirstPathSectionFromUrl(window.location.href) + ); + + + + Redirecting to /... + + diff --git a/3.0.0-beta2/support/index.html b/3.0.0-beta2/support/index.html index f49c2c84..497f74b1 100644 --- a/3.0.0-beta2/support/index.html +++ b/3.0.0-beta2/support/index.html @@ -1,3641 +1,27 @@ - - - - + + - - - - - - - - - - - - - - - - - - - - - - - Support - openVidu - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - Skip to content - - -
-
- - - -
- - - - - - - - - - - - - - - - - - - -
- - - - - -
- - - - - - -
- - - - - - - - - -
-
- - - - - - - - - - - - - - - -
-
- - - - - - - -

Support#

-
-

Self-hosting your own solutions can be challenging. We have built OpenVidu to make this task as easy as possible. But of course you may encounter difficulties in the process, or your particular use case may require customized assistance. The OpenVidu team specializes in customer support. Together we will make your project a success!

-
-

Commercial support#

-

Do not hesitate to contact us at commercial@openvidu.io. We provide consultancy, prioritizing bug fixes or new features, custom app development, etc.

-

Let's work together and build something great!

-
-

Info

-

Do you need help updating from OpenVidu 2 to OpenVidu 3? Write us to pro.support.v2apps@openvidu.io and we will be happy to guide you through the process.

-
-

Community support#

-

The public forum is the right place to ask any questions that do not involve private information, so that the whole community can benefit from the exchange of ideas.

- - - - - - - - - - - - - - - - - - - - -
-
- - - - - -
- - - -
- - - - - - - - -
-
-
-
- - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file + window.location.replace( + removeFirstPathSectionFromUrl(window.location.href) + ); + + + + Redirecting to /... + + diff --git a/index.html b/index.html index 41a13bb7..60e15ea9 100644 --- a/index.html +++ b/index.html @@ -1,18 +1,3738 @@ - - - - - Redirecting - - - - - Redirecting to latest/... - - + + + + + + + + + + + + + + + + + + + + + + + + + + openVidu - openVidu + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + Skip to content + + +
+
+ + + +
+ + + + + + + + + + + + + + + + + + + +
+ + + + + +
+ + + + + + +
+ + + + + + + + + + + + +
+
+ +
+

A powerful platform to develop WebRTC real-time applications.
Self-hosted. Performant. Fault Tolerant. Scalable. Observable.

+

+ OpenVidu allows you to implement ultra-low latency video + and audio applications with ease: one-to-one calls, videoconference rooms of + any size, massive live streamings with thousands of viewers... It is built + on the best open source WebRTC stacks with all the + features you need: multi-platform, recording, broadcasting, screen sharing + and more. From an operations perspective we aim to make it easy to + self-host a performant, fault-tolerant, scalable and + observable cluster, reducing DevOps efforts. +

+
+ + See more + + + Get started + +
+
+ + +
+
+ + + + + + + + + + + + + + + +
+
+ + + + + + + +

Home#

+
+

+ Create your real-time video and audio application with ease +

+
+ +
+
+
    +
  • +

    Ready to use app

    +
    +

    You get OpenVidu Call with every OpenVidu installation.
    A fully-fledged videoconference application with all the features you expect: multiparty, device selection, screen share, chat, recording, virtual background and more!

    +
    • +
  • +

    All is customizable

    +
    +

    If you want to integrate OpenVidu into your own application, there are UI Components that are quickly to setup but also highly customizable. If you want total control, you can use SDKs to fine-tune the integration of OpenVidu in your app. Learn more at Developing your OpenVidu app.

    +
    • +
  • +

    Self-hosted

    +
    +

    OpenVidu is designed from the ground up to be self-hosted in your own servers. With OpenVidu you can easily deploy and manage a production-ready live-video solution in your own infrastructure, whether it is on premises or in your favorite cloud provider. Leverage your hardware and regain control of your users' data!

    +
    • +
  • +

    Professional support

    +
    +

    We are experts in WebRTC. We have been developing real time tools and supporting customers building their solutions for over a decade. Let's work together to make your project a success! Contact us now.

    +
    • +
+
+
+
+ +
+

+ Self-host a production-ready live-video platform with advanced capabilities typically reserved for SaaS solutions +

+
+ +
+
+
    +
  • +

    Easy to deploy

    +
    +

    What could take a whole DevOps team days of work, with OpenVidu you can have it ready in minutes: an easy installation, configuration and administration experience to your self-hosted, production grade, real-time solution. Install now.

    +
    • +
  • +

    Cost effective

    +
    +

    OpenVidu COMMUNITY is open source, free and can handle a significant user load. With OpenVidu PRO you can handle more simultaneous Rooms in the same hardware thanks to mediasoup integration. This allows reducing the cost of each Room, making OpenVidu PRO truly cost-effective as a self-hosted solution. See Pricing.

    +
    • +
  • +

    Performant

    +
    +

    OpenVidu is built to be incredibly powerful. It is based on the best open source WebRTC stacks: LiveKit and mediasoup. By combining the best of both worlds, OpenVidu provides outstanding performance.

    +
    • +
  • +

    Scalable

    +
    +

    OpenVidu has been designed from the outset with scalability in mind. Host videoconference rooms and large live streams with hundreds of participants. Autoscale your cluster to adapt to the demand and optimize your resources.

    +
    • +
  • +

    Fault tolerant

    +
    +

    OpenVidu offers fault tolerance in all its components. Deploy a reliable cluster knowing that if one of your node goes down, others will be able to continue working with no downtime.

    +
    • +
  • +

    Observable

    +
    +

    OpenVidu brings everything necessary to monitor the status, health, load and history of your deployment. It automatically collects events, metrics and logs and provides OpenVidu Dashboard and a Grafana stack to navigate them.

    +
    • +
+
+
+
+ +
+

+ All the features you need to quickly build your perfect real-time application +

+
+ +
+
+
    +
  • +

    WebRTC

    +
    +

    Achieve ultra-low latency in your videoconference or live streaming app thanks to WebRTC.

    +
    • +
+ +
    +
  • +

    Security at all levels

    +
    +

    E2E encryption, fine-grained access control and highly secure deployments for the most demanding security requirements.

    +
    • +
  • +

    Multiplatform

    +
    +

    Chrome, Firefox, Safari, Android, iOS, Unity, Windows, MacOS, Linux... OpenVidu is compatible with all of them.

    +
    • +
  • +

    Up to 4K video and HQ audio

    +
    +

    HD up to 4K video resolution, and crisp audio quality with noise cancellation and echo suppression.

    +
    • +
  • +

    Recording

    +
    +

    Record your videocalls with complete freedom. You can use predefined layouts or easily build your own.

    +
    • +
  • +

    Broadcast to YouTube/Twitch

    +
    +

    OpenVidu allows you to easily broadcast your sessions to live-streaming platforms such as YouTube or Twitch.

    +
    • +
  • +

    Screen sharing

    +
    +

    Screen share from browsers or native applications with ease, always with the best quality.

    +
    • +
  • +

    Virtual Backgrounds

    +
    +

    Apply effects to your videos, blurring the background or replacing it with an image.

    +
    • +
  • +

    Server side processing

    +
    +

    For the most advanced use cases: you can add pipelines to process video and audio streams in real time in your servers.

    +
    • +
+
+
+
+ +
+

Build, deploy on-premises and scale your videoconferencing or live streaming app with ease. Contact us if you need it : we are here to help!

+
+ Talk to an expert +
+
+ + + + + + + + + + + + + + + + + + + + +
+
+ + + + + +
+ + + +
+ + + + + + + + +
+
+
+
+ + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/search/search_index.json b/search/search_index.json index 867cef87..d6d3226c 100644 --- a/search/search_index.json +++ b/search/search_index.json @@ -1 +1 @@ -{"config":{"lang":["en"],"separator":"[\\s\\-]+","pipeline":["stopWordFilter"]},"docs":[{"location":"","title":"Home","text":" Build, deploy on-premises and scale your videoconferencing or live streaming app with ease. Contact us if you need it : we are here to help! Talk to an expert"},{"location":"#get-started","title":"Create your real-time video and audio application with ease","text":""},{"location":"#get-started","title":"Self-host a production-ready live-video platform with advanced capabilities typically reserved for SaaS solutions","text":""},{"location":"#get-started","title":"All the features you need to quickly build your perfect real-time application","text":""},{"location":"account/","title":"Account","text":""},{"location":"pricing/","title":"Pricing","text":""},{"location":"pricing/#pricing","title":"Pricing","text":"OpenVidu COMMUNITY OpenVidu PRO Price Free 0.0006$ core/minuteFree while in beta! * Type of deployment OpenVidu Single Node OpenVidu Elastic OpenVidu High Availability Suitability For applications with medium user load For applications with dynamic user load that require scalability For applications where both scalability and fault tolerance are critical Features Custom LiveKit distribution with Redis, Egress, Ingress, S3 storage and observability Same benefits as OpenVidu Single Node plus 2x performance, scalability and advanced observability Same benefits as OpenVidu Single Node and OpenVidu Elastic plus fault tolerance Number of servers 1 Node 1 Master Node +N Media Nodes 4 Master Nodes +N Media Nodes Installation instructions Install Install Install

About OpenVidu Pro free beta period

"},{"location":"pricing/#how-is-openvidu-pro-priced","title":"How is OpenVidu Pro priced?There is a 15-day free trial period waiting for you!","text":"

OpenVidu Pro follows a simple pricing model based on the number of cores used by the OpenVidu Pro cluster:

$0.0006 per core per minute available for your OpenVidu PRO cluster

Taking into account the following points:

Get an OpenVidu License"},{"location":"pricing/#why-is-openvidu-pro-priced-like-this","title":"Why is OpenVidu Pro priced like this?","text":"

There are deliberate reasons for this pricing model in OpenVidu Pro:

"},{"location":"pricing/#when-and-how-are-you-charged","title":"When and how are you charged?","text":"

Users must create an OpenVidu account and get an OpenVidu License. This license will be required to deploy an OpenVidu Pro cluster (OpenVidu Elastic or OpenVidu High Availability).

When purchasing an OpenVidu License, you will have to indicate your billing address and a credit card. You will receive a 15-day free trial period during which you will not be charged at all.

After the free trial period, a monthly billing cycle will charge all your expenses to your credit card. Therefore, you will receive an invoice each month. You can review your upcoming expenses and your past invoices in your OpenVidu account page. And don't worry: we don't store any credit card data. The entire billing process is securely done via Stripe.

OpenVidu Pro clusters will automatically report their usage on a recurring basis. That's why they need outbound access to domain accounts.openvidu.io port 443. If you are behind a very restrictive corporate firewall that doesn't allow this, please contact us through commercial@openvidu.io.

"},{"location":"pricing/#pricing-examples","title":"Pricing examplesThere is a 15-day free trial period waiting for you!","text":"

As explained above, every minute of an OpenVidu Pro cluster is charged according to the number of cores available for the cluster. So let's see some actual examples, first noting the following points:

Get an OpenVidu License"},{"location":"pricing/#openvidu-elastic-with-12-cores-in-total","title":"OpenVidu Elastic with 12 cores in total","text":"

This OpenVidu Pro Elastic cluster has 1 Master Node of 4 cores and 2 Media Nodes of 4 cores each.

Number of video Tracks 2000 Number of Rooms with 8 Participants 250 8 hours $3.46 24 hours (1 day of uninterrupted use) $10.37 720 hours (1 month of uninterrupted use) $311.04"},{"location":"pricing/#openvidu-elastic-with-20-cores-in-total","title":"OpenVidu Elastic with 20 cores in total","text":"

This OpenVidu Pro Elastic cluster has 1 Master Node of 4 cores and 4 Media Nodes of 4 cores each.

Number of video Tracks 4000 Number of Rooms with 8 Participants 500 8 hours $5.76 24 hours (1 day of uninterrupted use) $17.28 720 hours (1 month of uninterrupted use) $518.40"},{"location":"pricing/#openvidu-high-availability-with-32-cores-in-total","title":"OpenVidu High Availability with 32 cores in total","text":"

This OpenVidu Pro HA cluster has 4 Master Nodes of 4 cores each and 4 Media Nodes of 4 cores each. The number of simultaneous Rooms and Tracks will be the same as in the previous example, but this cluster will provide fault tolerance thanks to the replication of the Master Nodes.

Number of video Tracks 4000 Number of Rooms with 8 Participants 500 8 hours $9.21 24 hours (1 day of uninterrupted use) $27.65 720 hours (1 month of uninterrupted use) $829.44"},{"location":"pricing/#openvidu-elastic-with-a-variable-number-of-cores","title":"OpenVidu Elastic with a variable number of cores","text":"

This OpenVidu Pro Elastic cluster takes advantage of the elasticity of the platform. It has a fixed Master Node of 4 cores, but a variable number of Media Nodes. Let's imagine a scenario where our days are divided in three phases according to the user load:

First 8 hours of the day with low demand(8 cores in total) Video Tracks1000 8x8 Rooms125Price$2.30 Next 8 hours of the day with high demand(16 cores in total) Price$4.61 Video Tracks3000 8x8 Rooms375 Last 8 hours of the day with low demand(8 cores in total) Price$2.30 Video Tracks1000 8x8 Rooms125 Total for 1 day $9.21 Total for 1 month $276.30"},{"location":"support/","title":"Support","text":"

Self-hosting your own solutions can be challenging. We have built OpenVidu to make this task as easy as possible. But of course you may encounter difficulties in the process, or your particular use case may require customized assistance. The OpenVidu team specializes in customer support. Together we will make your project a success!

"},{"location":"support/#commercial-support","title":"Commercial support","text":"

Do not hesitate to contact us at commercial@openvidu.io. We provide consultancy, prioritizing bug fixes or new features, custom app development, etc.

Let's work together and build something great!

Info

Do you need help updating from OpenVidu 2 to OpenVidu 3? Write us to pro.support.v2apps@openvidu.io and we will be happy to guide you through the process.

"},{"location":"support/#community-support","title":"Community support","text":"

The public forum is the right place to ask any questions that do not involve private information, so that the whole community can benefit from the exchange of ideas.

"},{"location":"blog/","title":"Blog","text":""},{"location":"conditions/cookie-policy/","title":"Cookie Policy","text":""},{"location":"conditions/cookie-policy/#what-are-cookies","title":"What are cookies?","text":"

TIKAL TECHNOLOGIES SL web page uses cookies, which are small files that it exchanges with the visitor's web browser for different purposes. That is done in a totally \"invisible\" and harmless way for the visitor, so your visit to the page is more fluid and you are not interrupted by some functions. The following explains which is the usage of cookies in TIKAL TECHNOLOGIES SL website and how you can disable them if you don't agree.

"},{"location":"conditions/cookie-policy/#what-kind-of-information-do-we-collect","title":"What kind of information do we collect?","text":"

TIKAL TECHNOLOGIES SL web page uses cookies for the following purposes

"},{"location":"conditions/cookie-policy/#how-are-users-able-to-change-the-cookies-configuration-in-their-browsers","title":"How are users able to change the cookies configuration in their browsers?","text":"

Any browser allows you to make adjustments on the actions to perform whenever a website asks you to store a cookie. You can:

The modification of the cookies configuration can be done in the option \"Configuration\" of the browser, in the \"Privacy\" section.

"},{"location":"conditions/privacy-policy/","title":"Privacy Policy","text":"

In accordance with the provisions of Regulation (EU) 2016/679 and the Organic Law 3/2018 of 5 December, on the protection of personal data and guarantee of digital rights, we inform you that the data you provide will be incorporated to the treatment system owned by TIKAL TECHNOLOGIES SL with CIF B85986669 and address at Calle Chile, N\u00ba 10, 28290 - Las Rozas de Madrid (Madrid), for the purpose of ELECTRONIC COMMERCE, CUSTOMER MANAGEMENT, AND OTHER PURPOSES. Your data may be processed by third parties (they will be data processors recipients of your data for contractual purposes for example, our computer maintenance company) requiring the same level of established rights, obligations and responsibilities. Your details will be kept for the time only strictly necessary. They will be deleted when a period of time has elapsed without any use being made of it. You agree to notify us of any changes in the data. You will be able to exercise your access rights, rectification, limitation of treatment, deletion, portability and opposition to processing of your personal data by addressing your request to the management or to the e-mail info@naevatec.com. You can contact the appropriate supervisory authority to make any complaint you may consider necessary.

"},{"location":"conditions/terms-of-service/","title":"Terms of Service","text":"

The purpose of the following terms and conditions is to explain our obligations as providers of the service, as well as your obligations as a client. Please read them carefully.

The aforementioned terms and conditions shall be applied from the moment TIKAL TECHNOLOGIES provides you with access to the service, thus it is understood that you have voluntarily accepted them as part of the contractual obligations between the parties involved, that is, between TIKAL TECHNOLOGIES (TIKAL form now on) and you as client. OpenVidu PRO is a service which will vary with time, so as to adapt to its clients and users\u00b4 new requirements, which in turn, will likely affect the terms and conditions so that they suit the changes and variations made to TIKAL.

TIKAL reserves the right to change the terms and conditions at any given moment, notwithstanding, it shall always endeavour to communicate these via e-mail or through the application itself; consequently, we strongly advise you to ensure that you have read and understood the terms and conditions whose most recent, updated version, is available on our website.

"},{"location":"conditions/terms-of-service/#first-definitions","title":"First. Definitions.","text":"

For the legal purposes of this contract, the following definitions will apply:

  1. Software application: a set of instructions which will be interpreted, utilized and executed by a computer system. Even when there may be many of them, the present contract may refer to them in singular, and likewise when pertaining to its backup files.
  2. Telematics application: a software application within a server which is connected to the Internet such that it can be accessed remotely through electronic networks. The assignment of the license to use the telematics application OpenVidu PRO is the subject of the present contract.
  3. Client of the telematics application: the natural or legal person who benefits from the licence to use the telematics application, thus assuming all obligations arising from the present contract.
  4. User of the telematics application: the natural person authorized by the client to use the telematics application, who in turn assumes all obligations arising from the present contract and said utilization.
  5. Parties: TIKAL and the client.
  6. Exploitation rights over the telematics application: TIKAL TECHNOLOGIES SL
  7. Third parties: any natural or legal person alien to the present contractual relation, who, for any reason, enters into a formal, legally binding agreement with either TIKAL or the client.
  8. The service, all supporting infrastructure provided by TIKAL that allows the client to register, download, provision bill, and operate its instance of the telematics application
  9. Hardware: electronic, mechanic or magnetic devices necessary for the telematics application, and its complementary parts, to work properly.
  10. Personal data: any information regarding an identified or identifiable natural person.
  11. Updates: new versions of the telematics application and/or its modules, which include new functionalities and improvements when compared to earlier versions.
  12. Telematics application modules: parts of the telematics application which manage specific functionalities, and whose licence to use them, the client must acquire separately.
"},{"location":"conditions/terms-of-service/#second-purpose","title":"Second. Purpose","text":"
  1. The purpose of the present contract is the licensing of the right to use the telematics application OpenVidu PRO by TIKAL TECHNOLOGIES SL. to the client, so that it may be use in the management of their business. Subject to the terms and conditions provided in this agreement, TIKAL hereby grants to the client a non-exclusive, non-sublicensable, non-transferable license to use the telematics application OpenVidu PRO (from now on \u201ctelematics application\u201d). Under no circumstances however, does said licence grant the client sales rights over the telematics application whose ownership remains entirely with TIKAL TECHNOLOGIES SL.
  2. The client\u00b4s rights to use the telematics application are subjected and limited by both the duration, and the terms and conditions established in the present contract.
  3. Hereby the client agrees to use the telematics application in compliance with the law, the present contract, and the good and rational will inherently present in any civilized society.
  4. The client acknowledges having examined that OpenVidu PRO features fulfil their needs, and that it has been appropriately informed by TIKAL about them.
"},{"location":"conditions/terms-of-service/#third-use-limitations-and-duty-of-care","title":"Third. Use limitations and duty of care.","text":"
  1. The client must protect and guard the telematics application; thus, it may not share any information whatsoever with third parties. It is specifically forbidden the use of the telematics application outside the business sphere for which it has been acquired, or outside any of the dispositions stipulated in this contract. The client may not sell, lease, transfer, or otherwise sublicense the telematics application or take part in any act which may result in the violation of their duty of care and protection. The client may not assign, transfer, pledge or make any other disposition of the rights acquired through this contract, of any part of the contract, or of any of the rights, claims or obligations under the contract.
  2. The client is obligated to refrain from using the telematics application for illegal purposes or any other purposes contrary to what is established in the present contract, or any action that may be injurious to TIKAL\u00b4s rights and interests, to the owner of the telematics application, as well as to any third parties involved. Said actions include, but are not limited to, any deed that may harm, overload, disrupt, or otherwise render useless the telematics application, thus preventing other clients and users from making use of it.
  3. Changes to the telematics application are strictly forbidden. These include, but are not limited to, such things as reverse engineering, decompiling, disassembling, reproducing, translating, modifying, commercializing, cloning, transforming or transmitting to any natural or legal person, partially or entirely, by any means, whether mechanic, magnetic, photocopies, etc\u2026 or to eliminate or block any proprietary notice or logos pertaining to the telematics application. The components and elements subject to the aforementioned restrictions include, but are not limited to, such things as the logical diagrams, source codes, object and/or data model; except prior, written authorization from TIKAL. These restrictions stand, even when said actions where needed for the interoperability with other computer programs or telematics applications.
  4. The client or the user must protect and safeguard, both physically and intellectually, the telematics application, namely, its contents, logical procedures, and access protocols, by establishing the necessary means in order to guarantee the non-disclosure, cloning, reproduction, altering, translation, transformation, access by third parties, or any other action that shall imply a violation of the duty of care or of any intellectual and industrial property right.
  5. The telematics application may only be used by the client or authorized user, for processing the client\u00b4s own data and their products, but under no circumstances shall it be used to process third parties \u2018data.
  6. TIKAL cannot guarantee uninterrupted access to the service throughout the entire validity period of this contract due to unforeseeable factors such as network issues, telecommunications service providers, breakdown in computers, as well as other contingencies such as repair and maintenance work, and software updates. Notwithstanding this, TIKAL reserves the right to adopt any necessary measures to limit the service, should it be considered that improper and/or irresponsible use of the telematics application is occurring, specially when said uses run counter to the terms and conditions provided in the present contract.
  7. Should the client or user breach the terms of contract, in a continuous and sustained fashion, or acting in bad faith, TIKAL shall terminate the provision of the service, without reimbursing any amount, on the grounds of abusive and improper use.
  8. Interpretation and scope. Any other right which has not been stated or directly mentioned in the present contract, remains reserved to TIKAL. Under no circumstances shall the terms and conditions of this contract be interpreted or applied in such a fashion that could be injurious to TIKAL or in any manner that runs counter to the regular exploitation framework of a telematics application.
"},{"location":"conditions/terms-of-service/#fourth-liability","title":"Fourth. Liability.","text":"
  1. TIKAL\u00b4s telematics application is access-ready in its current state and configuration. Should the application contain any deficiency attributable to TIKAL TECHNOLOGIES SL, the latter pledges to make use of all the resources available to them in order to solve the issue as promptly as possible. Nonetheless, it declines any liability and does not give any guarantee regarding violations perpetrated by third parties, marketability, satisfactory quality or suitability for a specific purpose.
  2. TIKAL shall act with due diligence and professionalism by making use of all its resources available so as to ensure the quality, reliability, and security of the telematics application. In any case, TIKAL\u00b4s assumes no liability for any damages, direct or indirect, incidental or special, including, but not limited to, such things as damages or financial loss, work disruptions, failure, breakdown, or any losses, even when the possibility of such inconveniences occurring, which include third-party complaints, were previously notified to a member of TIKAL\u00b4s staff.
  3. The client accepts, within reason, to tolerate specific, isolated disruptions in connectivity and hereby forfeits the right to claim any liability, contractual or otherwise, as well as damages owing to possible failures, slowness or access errors. TIKAL declines any liability concerning data loss, accidental or otherwise, resulting from the client\u00b4s actions or activities.
  4. The client or user is solely responsible for the provision and payment of the costs necessary to ensure compatibility between the telematics application and their equipment, including all hardware, software, electronic components, and any other component required to access the telematics application, these include, but are not limited to, such things as telecommunication services, Internet access and connectivity, operating systems, or any other program, equipment or services, required to access and use the telematics application.
  5. TIKAL declines any liability regarding any content that the client or user may host within the telematics application OpenVidu PRO, since at no moment, does TIKAL intervene in the internal processing of said content. Therefore, and in accordance with art.16 of LSSI-CE, TIKAL is not legally bound to remove any content from the server, provided there is no \u201cactual knowledge\u201d that the activity or information stored is illegal, libellous, or injurious to third-party rights or assets. In this regard, it shall be understood that \u201cactual knowledge\u201d exits, when there is a court or administrative decision, ordering to block or remove content and that the contractor (TIKAL) has been made aware of it. Notwithstanding, TIKAL reserves the right to remove this type of content out of its own volition, once it has been detected, whilst the client waives any right to claim or demand compensation. Should the application be in any way damaged due to the introduction of malign software or content (virus, trojan,\u2026) TIKAL reserves the right to automatically terminate the contract without having to pay any compensation whatsoever. On the other hand, TIKAL hereby reserves the right to demand compensation from the client or user for any damages caused to the system.
  6. The client or user shall burden all legal costs incurred when the cause is attributable to them, these include TIKAL lawyers\u2019 fees, even when a final court decision has yet to be reached.
  7. TIKAL uses information security protocols which are broadly accepted and observed by the industry such as firewalls, access-control procedures, and crypto mechanisms in order to avoid any unauthorized access to the data. For this purpose, the client hereby grants TIKAL access to data so that it can perform access-control authentication. The licensing process or any process which entails the introduction of personal data shall always conducted under a rigorous communication protocol so as to ensure no third parties have access to data transmitted electronically.
"},{"location":"conditions/terms-of-service/#fifth-intellectual-and-industrial-property-rights","title":"Fifth. Intellectual and industrial property rights.","text":"
  1. The exploitation rights of the telematics application are owned by TIKAL and protected by Spanish Intellectual Property Laws applicable in any country where it is used. The structure, organization and coding of the telematics application constitute confidential and valuable industrial and commercial secrets which belong to TIKAL. Therefore, the client must treat the telematics application in the same fashion they would when utilizing any material protected by intellectual property rights, thus copying, duplicating, or cloning the application is strictly forbidden.
  2. The present licence to use the telematics application does not imply, either explicitly or implicitly, the assignment of the intellectual and industrial rights over said application, the hardware, or the data model.
  3. Brands must be utilized in accordance with the commercial uses of brands, including acknowledging the proprietor\u2019s name of the brand. Brands may only be used in order identify those printouts produced by the telematics application. Said utilization does not imply or grant any property rights over the application.
  4. The knowledge and expertise intrinsic to the telematics application, as well as the knowledge utilized to configure it, is confidential information which belongs to the owner of the telematics application TIKAL. The client acknowledges this and assumes all liability regarding fraudulent use, or illegal copy or duplication of said application, or complementary programs, or utilization of this information by third parties, being liable for any breach of the present contract, by them or by any person or persons depending or associated with the client, or when these individuals have been granted access, directly or indirectly, to the telematics application by the client.
  5. Updates: For the entire validity period of the present contract, and in accordance with the terms and conditions stipulated in the next paragraph, the client is entitled to have access to the updates of the telematics application as they arise. The client assumes all legal liability for the updates, regarding limitations and duty of care, in the same fashion as with the original computer application. Updates to additional modules of the telematics application shall be given to those clients who have acquired from TIKAL the licence to use said modules.
  6. Hereby the client gives TIKAL consent to incorporate them as such into their business portfolio, thus allowing TIKAL to use their brand and logo on its website as well as in documents which may be given to other potential clients, for the sole purpose of said portfolio, and provided that the client does not express opposition to them being used in such a fashion.
"},{"location":"conditions/terms-of-service/#sixth-right-to-amend","title":"Sixth. Right to amend.","text":"

TIKAL reserves the right to update the telematics application to the latest version available on the market. Said updates may include, but are not limited to, such things as new functionalities, improvements, and modifications and legal updates to the telematics application, which may vary, at any moment such things as its features, performance, and configuration of the telematics application content.

TIKAL pledges to evaluate and take into consideration suggestions and requests made by clients and users of the telematics application so that they may be incorporated in the new versions of said application; however, it is TIKAL\u00b4s right, not the client\u00b4s to decide which modifications or improvements may be included in the aforementioned versions.

TIKAL reserves the right to modify, at any moment, the characteristics, features, and conditions of TIKAL for the benefit and development of the service. With this in mind, TIKAL may only have to observe the formality of having to notify the client via an on-line notice, or by modifying any clause in this contract. Notwithstanding the foregoing, TIKAL shall endeavour to promptly notify the client so that the latter may adapt them.

"},{"location":"conditions/terms-of-service/#seventh-exclusion-and-termination-of-licensing","title":"Seventh. Exclusion and termination of licensing.","text":"
  1. TIKAL reserves the right to exclude and/or terminate, temporarily or in a definite manner, the client\u00b4s right to use the telematics application, in case the following occurring:
  2. The exclusion clause, or termination of this contract, does not imply that TIKAL forfeits the right to take legal actions or file for financial compensation when the client has acted in bad faith to damage, directly or indirectly, the telematics application.
"},{"location":"conditions/terms-of-service/#eighth-communications","title":"Eighth. Communications.","text":"
  1. For the purposes of establishing a line of communication regarding the present contract both parties agree to use the place of residence which appears in it. The client pledges to keep the e-mail account provided in this licensing agreement, operational, activated and updated for the purposes of communications with TIKAL, which constitutes TIKAL\u00b4s preferred line of communication (albeit not the only one). In general terms, the client pledges to keep their personal details updated, and must communicate TIKAL, in a clear, unambiguous manner, of any changes.
  2. Should the client fail to notify said changes, notifications or notices delivered to the address(es) given by the client in the licensing agreement, shall be considered valid.
  3. The client consents that telephone conversations with TIKAL may be recorded with the intent to improve the quality and security of the service.
"},{"location":"conditions/terms-of-service/#ninth-duration","title":"Ninth. Duration.","text":"
  1. The contract shall be valid indefinitely from the moment the client requests it. The client can also put the end to the contract at any time he wishes, being obliged to pay the pending consumed service.
  2. As long as the period contract holds it is understood that the validity of the contract published on TIKAL\u00b4s website and containing all updates, prevails.
"},{"location":"conditions/terms-of-service/#tenth-terms-of-payment","title":"Tenth. Terms of payment.","text":"
  1. The price, payment method, billing and payment of the telematics application licensing, object of the present contract, is stipulated in the Current Official Rates Section published on TIKAL\u00b4s website (https://openvidu.io at the time of writing), which are considered part of a whole to all intents and purposes.
  2. The price stipulated in the aforementioned Current Official Rates Section, do not include valued added tax (VAT), nor does it include any other taxes or fees established by law whose current rates shall be applied for the provision of the service when signing the present contract. Therefore, said amounts may be increased according to current tax rates.
  3. Payment will be done monthly and will cover the whole amount of the service consumed during last month period according to the currently published rates from TIKAL.
  4. Monthly payments include both the basic rate for the provision of the service, and the corresponding rate(s) for any optional or additional service hired.
  5. Payments must be made effective by the credit or debit card that the client has agreed with TIKAL when first hiring the service. Visa and MasterCard shall be the accepted cards.
  6. Total or partial delay in payment by the client for the amount(s) TIKAL has billed them shall grant TIKAL the right to cancel or terminate all contracted obligations in accordance with the present contract. Suspension of the service provision shall be realized within the next fifteen natural days after the contract has reached its expiry date, prior notice to the client. After said fifteen natural days from the day the service was suspended, and prior notification to the client, TIKAL may terminate the contract. If the client pays the full amount owed to TIKAL during said period, the latter shall re-establish the service as promptly as possible from the moment it is notified that the debt has been settled. Notwithstanding the foregoing, TIKAL reserves the right to ask for a two-month deposit as a guarantee before re-establishing the service. The client accepts all liability for any legal costs incurred due to claims made by TIKAL regarding breach of payment after the contract has reached its expiry date, including, but not limited to, such things as the return of invoices and late-payment interest. When the client returns, for any cause alien to TIKAL, two or more direct-debit invoices, TIKAL shall be entitled to unilaterally opt for the annual hiring and billing of the service.
  7. When the client has defaulted on a payment, either totally or partially, during three months, for the amount owed to TIKAL, the latter has the right to rescind the contract between the two parties, as well as the direct and definite termination and cancellation of the service hired by the client, including the database linked to the client\u00b4s services, without prior notice from TIKAL.
  8. TIKAL shall apply upon its rates any current deals and offers existing at the time the client hires the service, provided they comply with the terms and conditions of said deals and offers so that they may benefit from them. The client acknowledges and accepts the fact they may obtain detailed information, at any given time, regarding said deals and offers on TIKAL\u00b4s website or through the habitual communication channels with which TIKAL provides its clients.
"},{"location":"conditions/terms-of-service/#eleventh-data-protection","title":"Eleventh. Data Protection.","text":"

The parties involved agree that they know, comply with, and are subject to, the Spanish and European laws and legislation regarding Personal Data Protection, thus they must give proper use and treatment to all data arising from any activity subjected to the terms and conditions of this contract.

"},{"location":"conditions/terms-of-service/#data-controller-agreement-between-the-client-and-tikal","title":"Data Controller agreement between the client and TIKAL.","text":"

In accordance with the Spanish Data Protection Laws, TIKAL\u00b4s access to the client\u00b4s personal files shall not be considered a violation of said laws, insofar as TIKAL is effectively the Data Controller and said access is necessary for the provision of the service which is the subject of this contract.

In this regard, and for the purposes of Data Protection regulation, TIKAL shall be regarded as the \u201cData Controller\u201d of the client\u00b4s data. Notwithstanding the foregoing, TIKAL pledges that it shall treat said data in conformity with the client\u00b4s instructions provided in this contract, and that under no circumstances shall it utilise them for any other purposes outside of what the parties have agreed in this contract, nor shall it transfer or communicate them to a third party, not even for back-up or storage purposes. At the same time, the duration and validity of this agreement shall correspond to the type of service hired by the client.

Once the provision of said service terminates and the data shall no longer be necessary to perform the aforementioned Data Controller role, all personal data shall be either destroyed or returned to the person, persons or entity responsible for it, as well as any storage medium, documents or files containing personal data.

In order to provide the service and what said provision entails, TIKAL shall be granted access to the following information:

  1. Contact details
  2. Company profile data
  3. Assets and billed services data
  4. Tax identification data

TIKAL\u00b4s obligations as Data Controller are described as follows:

  1. Treat all data in accordance with the instructions received by the person, persons or entity in charge of its treatment and only for the purposes provided in this contract.
  2. To not communicate or transfer any data to third parties, except prior consent by the body in charge of its treatment, or in cases provided for by the law.
  3. TIKAL may not outsource, either totally or partially, the provision of the service(s) described in the present contract, except prior authorization from the client whom shall be informed with due notice about the outsourcing entity as well as the services being outsourced. In this case, TIKAL shall draft and execute a new contract with said outsourcing entity, always in accordance with the current Data Protection laws.
  4. To not disclose any personal data to which TIKAL may have had access, even after the termination of this contract.
  5. To guarantee that the staff managing personal data pledge to keep the confidentiality which said data entails and that they comply with the proper security protocols.
  6. To assist the person or body responsible for data treatment regarding data protection.
  7. To provide the person or body responsible for data protection with support and assistance when performing an impact assessment, or when consulting the regulatory authorities, if applicable. Additionally, to provide said person or body with the necessary information so that it may prove their compliance with the rules and regulations.
  8. Notwithstanding the foregoing, said person or body has mechanisms in place so as to guarantee the confidentiality, integrity, and availability of the systems and services concerning data protection, as well as to restore the access and availability to data in case of system failure. Additionally, it is endowed with capabilities so as to regularly verify and assess the efficacy of the security protocol.

Duties of the responsible for data treatment:

  1. To guarantee, at all times, compliance with the Data Protection Laws.
  2. Make all necessary enquiries beforehand.
  3. To supervise that proper data treatment is occurring.
  4. To provide the data controller with all necessary data for the provision of the service.

TIKAL\u00b4s duties as Data Controller:

  1. To guarantee, at all times, compliance with the Data Protection Laws.
  2. Make all necessary enquiries beforehand.
  3. To supervise that proper data treatment is occurring.
  4. To provide the data controller with all necessary data for the provision of the service.
"},{"location":"conditions/terms-of-service/#twelfth-confidentiality","title":"Twelfth. Confidentiality.","text":"
  1. All data and information transmitted between the parties is strictly confidential and property of TIKAL and the client, and its protection is of the utmost importance. To this intent, both parties hereby contract the obligation to safeguard said data and information by adopting all appropriate measures to ensure that only authorized individuals shall have access to it; authorized individuals being understood as those employees which are needed by the parties involved so as to keep the provision of the service, which is the object of this contract, in good working order.
  2. In this regard, the signatory parties are hereby subject to the following confidential agreement:
"},{"location":"conditions/terms-of-service/#thirteenth-termination-rescission-nullity","title":"Thirteenth. Termination. Rescission. Nullity.","text":"
  1. The present contract shall be considered void for infringement, committed by any of the parties involved, of the Spanish Civil Code, and in particular, of the Spanish Commercial Code, and the obligations arising from the following:
  2. TIKAL pledges to destroy all data provided by the client once the contractual relation is extinguished. Likewise, TIKAL shall destroy or return any document or storage medium containing any IT-related data arising from said contractual relation. Once said contractual relation terminates, the client may request TIKAL to supply them with a hard, back-up copy of all data pertaining to and arising from said relation, to any address the client wishes, prior to a written request to do so, which must be sent within the week after the end of the contract. The client shall burden the costs incurred arising from the handling and mailing of said request.
  3. The client may cease or cancel the use of the telematics application whenever they wish to do so. Should the client or any authorized user by them request the cancellation of the service at TIKAL\u00b4s offices, it shall become effective on the same day said request was made. Therefore, it is advised to carefully observe said process to avoid any resources or data loss that the client or user may have in their TIKAL\u00b4s account. Should it not be possible for them to initiate said cancellation process at TIKAL\u00b4s offices, the client may request it by contacting TIKAL\u00b4s customer service via any of the channels provided in this contract. Said cancellation shall become effective on the day stipulated by the client, provided that the request has been made with enough time to be processed correctly.
"},{"location":"conditions/terms-of-service/#fourteenth-applicable-legislation-and-jurisdiction","title":"Fourteenth. Applicable legislation and jurisdiction.","text":"

The present is a business contract regulated by Spanish laws. The parties involved agree that any discrepancy, legal or civil action, claim or complain arising from the interpretation and execution of the present contract, shall be, directly or indirectly, taken to the Court of Madrid, thus all parties involved hereby renounce to take any matters pertaining to this agreement to any other jurisdiction.

The present document constitutes the total agreement of the parties in relation to the matters covered in this agreement, thus substitutes all previous obligations, liabilities, and agreements, both written and verbal, existing prior to the signature and execution of this contract.

The following website (www.naevatec.com) belongs to: TIKAL TECHNOLOGIES SL TAX ID: B85986669 10 Chile Rd/St 28290 \u2013 Las Rozas de Madrid (Madrid City) Spain. Registered in the Madrid\u00b4s Trade Register, volume/tome 28043. Book 0 Section 8th of the Registry Book, Page 37, Sheet M-505315.

"},{"location":"demos/basic-screenshare/","title":"Basic Screenshare","text":"

Try it now Source code

This is based in the Basic Videoconference demo but adding screen sharing capabilites. Users can freely connect to any videoconference room and share their screen with other participants. If a room does does not exist, a new one will be created.

"},{"location":"demos/basic-videoconference/","title":"Basic Videoconference","text":"

Try it now Source code

Users can freely connect to any videoconference session. If it does not exist, a new one will be created.

This demo is derived directly from the tutorials. If you want a deep understanding of the ins and outs you can check either of the following tutorials (whichever you feel most comfortable with):

"},{"location":"demos/basic-webinar/","title":"Basic Webinar","text":"

Try it now Source code

Users are identified via a login authentication system. This means users are given a certain role depending on their identity when connecting to a videoconference room. This demo wraps a simple frontend and a straightforward backend, making use of OpenVidu in a secure manner.

"},{"location":"demos/openvidu-call/","title":"OpenVidu Call","text":"

Try it now Source code

OpenVidu Call is a videoconference application that provides the features you can find in any other popular service. It allows you to join into multi-party videoconference calls, displayed in a nice and intelligent layout. Inside the calls you can mute/unmute and publish/unpublish your microphone and webcam, share your screen and chat with the rest of users. It also integrates advanced features such as recording, live broadcasting, virtual backgrounds and subtitles.

The front-end is implemented in Angular and the backend in Node.js with Express.

"},{"location":"demos/openvidu-classroom/","title":"OpenVidu Classroom","text":"

Try it now Source code

This is a fully functional application that makes use of OpenVidu to connect teachers and students in video rooms. It has a frontend built with Angular, a backend built with Spring Boot and a MySQL database. There are two types of roles: teachers and students. First ones can create/edit/remove lessons and invite students to them. Only when a teacher initialize a lesson authorized students can connect to it.

Checkout the source code TODO.

"},{"location":"demos/openvidu-getaroom/","title":"OpenVidu GetARoom","text":"

Try it now Source code

Users can create new videoconference rooms by clicking a button. Then they can share the link of the room to invite new participants.

"},{"location":"docs/comparing-openvidu/","title":"Comparing OpenVidu","text":"

This section compares OpenVidu to other videoconference/streaming solutions, to better understand what it is, what it is not, and what advantages and disadvantages it may have over them.

"},{"location":"docs/comparing-openvidu/#openvidu-vs-livekit","title":"OpenVidu vs LiveKit","text":"

First of all, and perhaps the most obvious question, how does OpenVidu differ from LiveKit, and what kind of relationship is there between them? This can be answer with four simple points:

OpenVidu is a custom fork of LiveKit, 100% compatible in terms of its API and SDKs, with the power of mediasoup at its core. This and other integrations provide improved performance, new features and facilitate the deployment and management of your cluster.

LiveKit comes in two flavors: LiveKit Open Source and LiveKit Cloud.

"},{"location":"docs/comparing-openvidu/#openvidu-community-vs-livekit-open-source","title":"OpenVidu COMMUNITY vs LiveKit Open Source","text":"

LiveKit Open Source is probably the most advanced and feature-rich open source WebRTC stack available today. It has a simple but very versatile API design, and has a large collection of SDKs to integrate into your application on both the frontend and backend. Regardless of your technology stack, there is sure to be a LiveKit Open Source SDK available for you! This is why OpenVidu is fully compatible with LiveKit protocols. You can use any LiveKit SDK to build your application, and it will work seamlessly with an OpenVidu deployment.

What does OpenVidu Community bring over LiveKit Open Source?

With OpenVidu Community you get a handful of features on top of LiveKit Open Source that will help with the development of your application:

"},{"location":"docs/comparing-openvidu/#openvidu-pro-vs-livekit-open-source","title":"OpenVidu PRO vs LiveKit Open Source","text":"

Deploying LiveKit Open Source in production requires devops/SRE experience to operate your own network of media servers, load balance between them, maintain high uptime and monitor the health of your deployment. OpenVidu Pro makes this an easy process, hiding most of the complexities of such an advanced deployment. With OpenVidu Pro you can self-host a fault-tolerant, scalable and observable cluster, while doubling the original LiveKit Open Source performance to handle twice as many media streams with the same hardware.

"},{"location":"docs/comparing-openvidu/#openvidu-pro-vs-livekit-cloud","title":"OpenVidu PRO vs LiveKit Cloud","text":"

LiveKit Cloud is the official SaaS solution for LiveKit. They manage the infrastructure, with a pricing model based on the total bandwidth consumed by your application. It offers certain advantages over LiveKit Open Source:

Where does OpenVidu Pro stand in relation to LiveKit Cloud? OpenVidu Pro aims to deliver the same advanced benefits as LiveKit Cloud, but as a self-hosted solution. We intend to provide a performant, fault tolerant, scalable and observable cluster that is easy to deploy, configure and administrate in your own infrastructure. For now, OpenVidu Pro brings:

"},{"location":"docs/comparing-openvidu/#openvidu-vs-saas-solutions","title":"OpenVidu vs SaaS solutions","text":"

This includes many services like Agora, GetStream, Daily, Vonage, Jitsi as a Service, Whereby, Zoom SDK, Dolby Millicast, Amazon Chime SDK.

The main difference between OpenVidu and these services is who owns the infrastructure, and where your users' data flows. All these SaaS solutions provide:

Using a SaaS provider is a great option for some use cases, but not all. OpenVidu is designed to be self-hosted. This allows you to have full control over your infrastructure and data, taking the most out of your own resources and complying with the most strict regulations. While having the best features provided by SaaS: scalability, fault tolerance, observability. See Production ready for more information.

"},{"location":"docs/comparing-openvidu/#openvidu-vs-sfus","title":"OpenVidu vs SFUs","text":"

This includes projects such as Kurento, mediasoup, Pion, Janus, Jitsi Videobridge or Medooze.

These are all media servers. More specifically, they fall under the umbrella of the so-called SFUs (Selective Forwarding Units): they are able to receive media streams from different clients and selectively forward them to other clients, usually without transcoding or mixing the media.

SFUs are generally low-level tools. Using them directly to implement real-time applications requires a deep understanding of signaling protocols, codecs, networking and other low-level concepts. OpenVidu is a higher-level abstraction compared to SFUs. It internally uses SFUs to rely the media streams (more specifically Pion and mediasoup), but hides all complexities to offer a simpler way to develop videoconferencing and live streaming applications.

"},{"location":"docs/comparing-openvidu/#openvidu-vs-mediasoup","title":"OpenVidu vs mediasoup","text":"

mediasoup is a WebRTC SFU. It is a minimalist media server with a super low level API that allows building custom real-time applications. Compared to other SFUs, mediasoup is well known for its outstanding performance.

OpenVidu uses mediasoup internally to transmit media streams. We have embedded mediasoup as the WebRTC engine right at the core of LiveKit Open Source, which allows OpenVidu to offer the fantastic APIs and SDKs of LiveKit while providing the cutting-edge performance of mediasoup. Learn more about mediasoup integration in section Performance.

"},{"location":"docs/comparing-openvidu/#openvidu-vs-microsoft-teams-google-meet-zoom","title":"OpenVidu vs Microsoft Teams, Google Meet, Zoom","text":"

All these well-known video conferencing tools are final applications that provide little to no customization at all. They are proprietary, closed-source apps designed to be used as-is, and they are not intended to be integrated into other systems.

OpenVidu is inherently different, as it provides a set of APIs and SDKs to integrate real-time video capabilities into your own application. In other words: with OpenVidu you can easily build your own custom Microsoft Teams, Google Meet or Zoom-like application. See Use cases for some examples of what you can build with OpenVidu.

"},{"location":"docs/getting-started/","title":"Getting started","text":""},{"location":"docs/getting-started/#what-is-openvidu","title":"What is OpenVidu?","text":"

OpenVidu is a platform that allows you to implement real-time applications. You can build your brand new OpenVidu app from scratch, but it is also very easy to integrate OpenVidu in your already existing application.

OpenVidu is based on WebRTC technology and allows developing any kind of use case you can imagine: one-to-one calls, video conference rooms, massive live streaming events, management and processing of drones and camera feeds...

OpenVidu is built on the best open source technologies: LiveKit, from which it inherits all its amazing SDKs to integrate it into your front-end and back-end applications, and mediasoup, from which it inherits the best performance and optimization for media routing.

OpenVidu is a custom fork of LiveKit, 100% compatible in terms of its API and SDKs, with the power of mediasoup at its core. This and other integrations provide improved performance, new features and facilitate the deployment and management of your self-hosted, production-grade cluster."},{"location":"docs/getting-started/#use-cases","title":"Use cases","text":"

OpenVidu is a super versatile platform that can be used to build just about any kind of real-time application you can think of. Most common use cases can be classified into one of the following categories:

"},{"location":"docs/getting-started/#video-conferencing","title":"Video conferencing","text":"

Video conferencing rooms are virtual spaces where two or more users can send video and audio and interact with each other in real-time. They can scale in size, from a simple 1-to-1 call to a massive video conference with thousands of participants. For example:

"},{"location":"docs/getting-started/#live-streaming","title":"Live streaming","text":"

Live streaming applications allow one publisher to broadcast video to many viewers. It can be a single video feed, multiple video feeds (webcam and screen share) or there could be even multiple publishers. The general rule is that the ratio of viewers to publishers is very high, in the order of thousands.

Ultra-low latency live streaming (below 300ms) allows for actual real-time interaction between the viewers and the publishers. This differs from traditional live streaming platforms where the latency is usually in the order of seconds. In this way you can build applications like:

"},{"location":"docs/getting-started/#robotics-and-embedded-systems","title":"Robotics and embedded systems","text":"

The future lies in the integration of cameras and sensors in all kinds of devices, everywhere: industry, homes, public spaces, emergency services... OpenVidu can be used to receive and process video and audio streams from these devices, and doing so in real-time. For example:

"},{"location":"docs/getting-started/#openvidu-application-architecture","title":"OpenVidu application architecture","text":"

Any OpenVidu application has 3 different parts:

"},{"location":"docs/getting-started/#basic-concepts","title":"Basic concepts","text":""},{"location":"docs/getting-started/#room","title":"Room","text":"

A Room is a virtual space where Participants can connect to send and receive media Tracks. Two Participants can only communicate if they are connected to the same Room.

"},{"location":"docs/getting-started/#participant","title":"Participant","text":"

A Participant is a user connected to a specific Room. Each Participant can publish as many video and audio Tracks as needed, and subscribe to any other Participant's Tracks, as long as they are connected to the same Room.

"},{"location":"docs/getting-started/#track","title":"Track","text":"

A Track is a data flow of audio or video. Participants create them from a local media source (a webcam, a microphone, a screen share) and publish them into a Room. Other Participants of the same Room can subscribe to them.

With these three concepts you can build any kind of real-time application you can think of. The figure below shows two simple examples.

Room \"Daily meeting\" has 2 Participants: \"Alice\" is publishing Track \"Webcam\" and \"Mic\" and is receiving Track \"Screen\" from \"Bob\". \"Bob\" is publishing Track \"Screen\" and receiving Tracks \"Webcam\" and \"Mic\" from \"Alice\".

Room \"Remote support\" has 3 Participants: Participant \"Dan\" is not publishing any Track, but receiving all Tracks in the Room. Participant \"Erin\" is only receiving Track \"Mic\" from Participant \"Carol\", but not Track \"Screen\"."},{"location":"docs/getting-started/#openvidu-editions","title":"OpenVidu Editions","text":"

OpenVidu is available in two editions:

Type of deployment OpenViduLocal (development) OpenViduSingle Node OpenViduElastic OpenViduHigh Availability OpenVidu Edition COMMUNITY PRO COMMUNITY PRO PRO Suitability For local development in your laptop For applications with medium user load For applications with dynamic user load that require scalability For applications where both scalability and fault tolerance are critical Features Friendly Docker Compose setup with Redis, Egress, Ingress, S3 storage and observability. With automatic certificate management to test across devices in your network Custom LiveKit distribution with Redis, Egress, Ingress, S3 storage and observability Same benefits as OpenVidu Single Node plus 2x performance, scalability and advanced observability Same benefits as OpenVidu Single Node and OpenVidu Elastic plus fault tolerance Number of servers Your laptop 1 Node 1 Master Node +N Media Nodes 4 Master Nodes +N Media Nodes Installation instructions Install Install Install Install"},{"location":"docs/releases/","title":"Releases","text":""},{"location":"docs/releases/#300-beta2","title":"3.0.0-beta2","text":" Version table Artifact Version Info Link livekit/livekit-server v1.6.0 mediasoup 3.12.16 livekit/egress v1.8.2 livekit/ingress v1.2.0 MinIO 2024.06.13 Caddy 2.7.6 MongoDB 7.0.11 Redis 7.2.5 Grafana 10.3.3 Prometheus 2.50.1 Promtail / Loki 2.8.9 Mimir 2.11.0"},{"location":"docs/releases/#300-beta1","title":"3.0.0-beta1","text":"Version table Artifact Version Info Link livekit/livekit-server v1.6.0 mediasoup 3.12.16 livekit/egress v1.8.2 livekit/ingress v1.2.0 MinIO 2024.06.13 Caddy 2.7.6 MongoDB 7.0.11 Redis 7.2.5 Grafana 10.3.3 Prometheus 2.50.1 Promtail / Loki 2.8.9 Mimir 2.11.0"},{"location":"docs/developing-your-openvidu-app/","title":"Developing your OpenVidu application","text":"

Here's a high-level overview of the steps involved in building an OpenVidu application:

  1. Launch an OpenVidu deployment
  2. Use LiveKit Server SDK in your application server
  3. Build the UI of your client application
  4. Deploy OpenVidu and your application
"},{"location":"docs/developing-your-openvidu-app/#1-launch-an-openvidu-deployment","title":"1. Launch an OpenVidu deployment","text":"

The quickest way is to use OpenVidu local deployment.

"},{"location":"docs/developing-your-openvidu-app/#2-use-livekit-server-sdk-in-your-application-server","title":"2. Use LiveKit Server SDK in your application server","text":"

OpenVidu is fully compatibly with LiveKit APIs. This means that any LiveKit Server SDK can be used in your application server.

The only mandatory task to perform in your application server is:

There are also other optional tasks that you can perform from your application server, depending on your requirements:

To get you started, here is a list of all available LiveKit Server SDKs and an application server tutorial using them. These tutorials are all set up to generate access tokens and receive webhook events, so they are perfect starting points for your application server.

Node Go Ruby Java Python Rust PHP .NET Server API

Node Tutorial

Reference Docs

Go Tutorial

Reference Docs

Ruby Tutorial

GitHub Repository

Java Tutorial

GitHub Repository

Python Tutorial

GitHub Repository

Rust Tutorial

Reference Docs

PHP Tutorial

GitHub Repository

.NET Tutorial

There is no .NET SDK for LiveKit available. Visit the tutorial to learn how to create tokens and receive Webhook events directly from your .NET application server.

If your backend technology does not have its own SDK, you have two different options:

  1. Consume the Server API directly: Reference Docs

  2. Use the livekit-cli: GitHub Repository

"},{"location":"docs/developing-your-openvidu-app/#3-build-the-ui-of-your-client-application","title":"3. Build the UI of your client application","text":"

There are two main strategies to build the UI of your client application:

The table below summarizes the key differences between these two strategies to help you make an informed decision:

UI Components Low-level client SDKs What is it? Frontend libraries offering videoconferencing components to build your own application. There are Angular Components or React Components Integrate OpenVidu from scratch in your web, mobile or desktop application using LiveKit Client SDKs Pros Cons Tutorials Angular Components tutorials Application client tutorials

Whatever strategy you choose to build the UI of your application, most common steps to perform are:

Of course, depending on the use case, this may not be necessary for all users, or other additional steps may need to be taken. For example, in a live streaming application, only presenters will publish Tracks, while all other viewers will only subscribe to them. Or it is possible that users may need exchange messages through a chat. Each specific application will need to refine its use of the UI Components or client SDKs to meet its requirements.

Here is the list of all LiveKit Client SDKs: LiveKit Client SDKs. Below is a list of application client tutorials, which are perfect starting points for your client application.

JavaScript

React

Angular

Vue

Electron

Ionic

"},{"location":"docs/developing-your-openvidu-app/#4-deploy-openvidu-and-your-application","title":"4. Deploy OpenVidu and your application","text":"

You have different options to deploy OpenVidu in a production-ready environment, depending on the level of scalability, fault tolerance and observability you need. See Deployment types for more information.

"},{"location":"docs/developing-your-openvidu-app/how-to/","title":"How to","text":"

This page is a collection of the most common operations you may want to perform in your application while integrating OpenVidu. Depending on the scope of the operation, these operations will be performed on the client side using a LiveKit Client SDK, or on the server side using a LiveKit Server SDK (or directly using the HTTP server API). Consider the architecture of an OpenVidu application:

You can use this page as a cheat sheet to know at a glance how to do something, and you have links to the LiveKit reference documentation of each operation for a more detailed explanation.

All client side operations are exemplified using the LiveKit JS Client SDK. For other client SDKs, refer to the corresponding LiveKit reference documentation.

"},{"location":"docs/developing-your-openvidu-app/how-to/#generate-access-tokens","title":"Generate access tokens","text":"

The application client needs an access token to connect to a Room. This token must be generated by the application server. Visit LiveKit reference documentation to learn how to generate access tokens:

Reference docs

"},{"location":"docs/developing-your-openvidu-app/how-to/#manage-rooms","title":"Manage Rooms","text":""},{"location":"docs/developing-your-openvidu-app/how-to/#connect-to-a-room","title":"Connect to a Room","text":"

To connect to a Room you need the URL of your OpenVidu deployment (which is a WebSocket URL) and the access token generated by your application server.

import { Room } from \"livekit-client\";\n\nconst room = new Room();\nawait room.connect(wsUrl, token);\n

Reference docs

"},{"location":"docs/developing-your-openvidu-app/how-to/#disconnect-from-a-room","title":"Disconnect from a Room","text":"
await room.disconnect();\n

Reference docs

"},{"location":"docs/developing-your-openvidu-app/how-to/#publish-a-track","title":"Publish a Track","text":"

You can directly publish the default camera and microphone of the device using methods setCameraEnabled and setMicrophoneEnabled of the LocalParticipant object:

// Publish a video track from the default camera\nawait room.localParticipant.setCameraEnabled(true);\n// Publish an audio track from the default microphone\nawait room.localParticipant.setMicrophoneEnabled(true);\n

It is also possible to publish both of them at the same time using method LocalParticipant.enableCameraAndMicrophone, which has the advantage of showing a single permission dialog to the user:

// Publish both default video and audio tracks triggering a single permission dialog\nawait room.localParticipant.enableCameraAndMicrophone();\n

To craft a custom Track, you can use the LocalParticipant.createTracks method and publish them with LocalParticipant.publishTrack:

var tracks = await room.localParticipant.createTracks({\n  audio: {\n    deviceId: \"default\",\n    autoGainControl: true,\n    echoCancellation: true,\n    noiseSuppression: true\n  },\n  video: {\n    deviceId: 'frontcamera';\n    facingMode: 'user'\n  },\n});\nawait Promise.all([\n    room.localParticipant.publishTrack(tracks[0]),\n    room.localParticipant.publishTrack(tracks[1]),\n]);\n

Reference docs

"},{"location":"docs/developing-your-openvidu-app/how-to/#muteunmute-a-track","title":"Mute/Unmute a Track","text":"

To mute the default camera and microphone Tracks:

await room.localParticipant.setCameraEnabled(false);\nawait room.localParticipant.setMicrophoneEnabled(false);\n

To mute/unmute a custom Track:

// Mute the track\nawait track.mute();\n\n// Unmute the track\nawait track.unmute();\n

Reference docs

"},{"location":"docs/developing-your-openvidu-app/how-to/#unpublish-a-track","title":"Unpublish a Track","text":"

To completely stop sending a Track to the Room, you must unpublish it:

await room.localParticipant.unpublishTrack(track, true);\n

The second boolean parameter indicates if the local Track should be stopped. This usually means freeing the device capturing it (switching off the camera LED, for example).

Reference docs

"},{"location":"docs/developing-your-openvidu-app/how-to/#send-messages","title":"Send messages","text":"

You can share information between Participants of a Room in different ways.

First of all, you can set Room metadata that will be available for all clients in the Room object. You do so in your application server when calling the CreateRoom API (available for all LiveKit Server SDKs and the HTTP Server API). The Room metadata will be available in the client side like this:

console.log(room.metadata);\n

You can update the Room metadata at any time from your application server with the UpdateRoomMetadata API (available for all LiveKit Server SDKs and the HTTP Server API). The client side will be notified of the change with the roomMetadataChanged event of the Room object:

room.on('roomMetadataChanged', (metadata) => {\n  console.log('New room metadata', metadata);\n});\n

Secondly, you can also set Participant metadata. You do so when creating an access token in your application server, setting metadata field of the JWT.

Participants can also update their own metadata from the client side, if their access token was created with grant canUpdateOwnMetadata.

room.localParticipant.setMetadata('new metadata');\n

The client side will be notified of the change with the participantMetadataChanged event of the Room and/or Participant object:

// To handle all metadata changes of all participants\nroom.on(RoomEvent.ParticipantMetadataChanged, (previousMetadata: string, participant) => {\n  console.log('New metadata for participant', participant.identity, participant.metadata);\n});\n\n// To handle only metadata changes of a specific participant\nparticipant.on(ParticipantEvent.ParticipantMetadataChanged, (previousMetadata) => {\n    console.log('New metadata for participant', participant.identity, participant.metadata);\n});\n

Finally, you can send messages to Participants in the Room using the LocalParticipant.publishData method:

const data: Uint8Array = new TextEncoder().encode(JSON.stringify(''));\nroom.localParticipant.publishData(data, { reliable: true, topic: 'chat', destinationIdentities: ['participant-identity'] });\n

The DataPublishOptions allow setting the reliability of the message (depending on the nature of the message it can be sent as a reliable or lossy message), a topic to easily filter messages, and the participants that will receive the message.

The client side will be notified of the message with the dataReceived event of the Room and/or Participant object:

// To receive all messages from the Room\nroom.on(RoomEvent.DataReceived, (payload: Uint8Array, participant: Participant, kind: DataPacket_Kind) => {\n  const strData = new TextDecoder().decode(payload);\n  console.log('Received data from', participant.identity, strData);\n});\n\n// To receive messages only from a specific participant\nparticipant.on(ParticipantEvent.DataReceived, (payload: Uint8Array, kind: DataPacket_Kind) => {\n  const strData = new TextDecoder().decode(payload);\n  console.log('Received data from', participant.identity, strData);\n});\n

Reference docs

"},{"location":"docs/developing-your-openvidu-app/how-to/#from-your-application-server","title":"From your application server","text":"

Except for the generation of access tokens, it is possible for all the logic of your application to be contained entirely on the client side. Nonetheless, some use cases may require the management of the Rooms from the server side.

These operations are only available in the server SDKs, and not in the client SDKs:

You have here the complete list of the server-side operations, documented for the HTTP Server API. All the LiveKit Server SDKs have the same operations.

"},{"location":"docs/developing-your-openvidu-app/how-to/#screen-sharing","title":"Screen Sharing","text":"

To quickly publish a screen sharing Track:

await room.localParticipant.setScreenShareEnabled(true);\n

You can also create custom screen tracks, for example capturing the audio of the screen and fine-tuning the video capture options (checkout the ScreenTrackOptions interface for detailed information):

const screenTracks = await room.localParticipant.createScreenTracks({\n    audio: true,\n    contentHint: \"detail\",\n    preferCurrentTab: true,\n    video: {\n        displaySurface: \"window\"\n    }\n});\nawait Promise.all([\n    room.localParticipant.publishTrack(screenTracks[0]),\n    room.localParticipant.publishTrack(screenTracks[1]),\n]);\n

Reference docs

"},{"location":"docs/developing-your-openvidu-app/how-to/#virtual-background","title":"Virtual Background","text":"

It is possible to apply a virtual background to video tracks. In this way you can blur the background or replace it with an image.

It is necessary to install an additional dependency to use this feature:

npm add @livekit/track-processors\n

To blur the background:

import { BackgroundBlur } from '@livekit/track-processors';\n\nconst videoTrack = await createLocalVideoTrack();\nconst blur = BackgroundBlur(10);\nawait videoTrack.setProcessor(blur);\n

To replace the background with an image:

import { VirtualBackground } from '@livekit/track-processors';\n\nconst videoTrack = await createLocalVideoTrack();\nconst image = VirtualBackground('https://picsum.photos/400');\nawait videoTrack.setProcessor(image);\n

GitHub Repository

"},{"location":"docs/developing-your-openvidu-app/how-to/#recording","title":"Recording","text":"

You can record your Rooms using the Egress module. Egress allows exporting media from a Room in different formats, including

Visit the LiveKit reference documentation for a detailed explanation of Egress:

Reference docs

"},{"location":"docs/developing-your-openvidu-app/how-to/#webhooks","title":"Webhooks","text":"

Your application server may receive webhooks coming from the OpenVidu deployment. These webhooks inform about events happening in the Rooms, including when a Room is created and finished, when a Participant joins and leaves a Room, when a Track is published and unpublished, and when Egress/Ingress operations take place in a Room.

Every application server tutorial here is ready to receive webhooks: Application Server Tutorials.

Visit the LiveKit reference documentation for a detailed explanation of each webhook event:

Reference docs

"},{"location":"docs/openvidu-call/","title":"Index","text":"OpenVidu Call The videoconference application built on top of OpenVidu Features

And much more... All the features you need to quickly build your perfect real-time application

Try it

Customize it

Install it

"},{"location":"docs/openvidu-call/docs/","title":"openvidu-call","text":"

Source code

Introducing OpenVidu Call, the premier videoconference application that showcases the full potential of the OpenVidu platform. OpenVidu Call is not just any videoconferencing tool; it\u2019s the default and flagship app built with the robust and versatile OpenVidu Components.

OpenVidu Call"},{"location":"docs/openvidu-call/docs/#run-openvidu-call","title":"Run OpenVidu Call","text":""},{"location":"docs/openvidu-call/docs/#1-run-openvidu-server","title":"1. Run OpenVidu Server","text":"Run OpenVidu locallyDeploy OpenVidu

  1. Download OpenVidu

    git clone https://github.com/OpenVidu/openvidu-local-deployment\n

  2. Configure the local deployment

    Windows macOS Linux 
    cd openvidu-local-deployment/community\n.\\configure_lan_private_ip_windows.bat\n
    cd openvidu-local-deployment/community\n./configure_lan_private_ip_macos.sh\n
    cd openvidu-local-deployment/community\n./configure_lan_private_ip_linux.sh\n

  3. Run OpenVidu

    docker compose up\n

To use a production-ready OpenVidu deployment, visit the official deployment guide.

Accessible via openvidu-local-deployment

A pre-built OpenVidu Call application is launched as part of the openvidu-local-deployment and it can be accessible by visiting http://localhost:7880/openvidu-call/.

If you want to explore and run the OpenVidu Call code locally, follow the instructions below.

"},{"location":"docs/openvidu-call/docs/#2-download-openvidu-call-code","title":"2. Download OpenVidu Call code","text":"
git clone https://github.com/OpenVidu/openvidu-call.git\n
"},{"location":"docs/openvidu-call/docs/#3-run-the-openvidu-call-backend","title":"3. Run the OpenVidu Call backend","text":"

  1. Navigate to the openvidu-call-back directory:

    cd openvidu-call/openvidu-call-back\n

  2. Install the dependencies:

    npm install\n

  3. Start the application:

    npm run dev:start\n
"},{"location":"docs/openvidu-call/docs/#4-run-the-openvidu-call-frontend","title":"4. Run the OpenVidu Call frontend","text":"

Launching another terminal, under the openvidu-call directory:

  1. Navigate to the openvidu-call-front directory:

    cd openvidu-call/openvidu-call-front\n

  2. Install the dependencies:

    npm install\n

  3. Start the application:

    npm run dev:start\n

The application will be available at http://localhost:5080.

"},{"location":"docs/openvidu-call/docs/#architecture","title":"Architecture","text":"

The OpenVidu Call architecture is divided into two main components:

OpenVidu Call Architecture OpenVidu Call frontend OpenVidu Call backend

The client-side application built with Angular that provides the user interface for the videoconference. It uses the OpenVidu Components library to create the videoconference layout with ease.

The project architecture is divided into the following directories:

Additionally, the project hosts the following files:

The server-side application built with Node.js and Express that manages the communication between the OpenVidu Server and the OpenVidu Call Frontend.

It uses the LiveKit Server SDK library to interact with the OpenVidu Server and handle the authentication, videoconference rooms, recordings, broadcasts, and other features.

The project architecture is divided into the following directories:

Additionally, the project hosts the following files:

"},{"location":"docs/openvidu-call/docs/#features","title":"Features","text":""},{"location":"docs/openvidu-call/docs/#authentication","title":"Authentication","text":"

OpenVidu Call provides user authentication to ensure that only authorized users can access the videoconference rooms. The authentication process is handled by the OpenVidu Call backend, which uses Basic Authentication to verify the user credentials.

"},{"location":"docs/openvidu-call/docs/#video-conferencing","title":"Video conferencing","text":""},{"location":"docs/openvidu-call/docs/#essential-features","title":"Essential Features","text":"

OpenVidu Call offers essential features that make video conferencing simple and intuitive for users. These features include:

"},{"location":"docs/openvidu-call/docs/#advanced-features","title":"Advanced Features","text":"

The advanced features of OpenVidu Call enhance the video conferencing experience by providing additional functionalities that improve collaboration and productivity.

"},{"location":"docs/openvidu-call/docs/#admin-dashboard","title":"Admin Dashboard","text":"

An admin dashboard is integrated into OpenVidu Call to provide additional functionalities for the admin user.

"},{"location":"docs/openvidu-call/docs/#build-and-deployment","title":"Build and Deployment","text":""},{"location":"docs/openvidu-call/docs/#docker-image","title":"Docker Image","text":"

The process to build a Docker image of OpenVidu call is really easy, you just need to run the following instructions:

  1. Build the Docker image:

    cd docker\n./create_image.sh openvidu-call\n

    This script will create a Docker image with the name openvidu-call.

  2. Run the Docker container:

    docker run -p 5000:5000 \\\n-e LIVEKIT_URL=wss://your-livekit-server-url \\\n-e LIVEKIT_API_KEY=your-livekit-api-key \\\n-e LIVEKIT_API_SECRET=your-livekit-api-secret \\\nopenvidu-call\n

    Once the container is running, you can access the OpenVidu Call application by visiting http://localhost:5000.

"},{"location":"docs/openvidu-call/docs/#package-bundle","title":"Package bundle","text":"

To build the OpenVidu Call application without using Docker, you can follow the instructions:

  1. Build the frontend application:

    cd openvidu-call-front\nnpm install\nnpm run prod:build\n

  2. Build the backend application:

    cd openvidu-call-back\nnpm install\nnpm run build\n

  3. Start the backend application:

    cd dist\nnode server.js\n
"},{"location":"docs/self-hosting/deployment-types/","title":"Deployment types","text":"

OpenVidu offers user-friendly installers that facilitate quick on-premises deployments, so you can self-host your real-time solution in your own infrastructure or any cloud provider.

There are different deployment options available, depending on your needs:

Type of deployment OpenViduLocal (development) OpenViduSingle Node OpenViduElastic OpenViduHigh Availability OpenVidu Edition COMMUNITY PRO COMMUNITY PRO PRO Suitability For local development in your laptop For applications with medium user load For applications with dynamic user load that require scalability For applications where both scalability and fault tolerance are critical Features Friendly Docker Compose setup with Redis, Egress, Ingress, S3 storage and observability. With automatic certificate management to test across devices in your network Custom LiveKit distribution with Redis, Egress, Ingress, S3 storage and observability Same benefits as OpenVidu Single Node plus 2x performance, scalability and advanced observability Same benefits as OpenVidu Single Node and OpenVidu Elastic plus fault tolerance Number of servers Your laptop 1 Node 1 Master Node +N Media Nodes 4 Master Nodes +N Media Nodes Installation instructions Install Install Install Install

"},{"location":"docs/self-hosting/deployment-types/#openvidu-local-development","title":"OpenVidu Local (development)","text":"

To run OpenVidu in your local machine, this is the quickest option. It is a Docker Compose setup that includes all the necessary services to run OpenVidu in your LAN, including automated SSL certificates that will be valid across all devices in your network.

OpenVidu Local (development)"},{"location":"docs/self-hosting/deployment-types/#openvidu-single-node","title":"OpenVidu Single Node","text":"

This is the simplest production-ready OpenVidu deployment available. It provides all the features you need, but lacks scalability and fault tolerance. But make no mistake about it: it is perfectly suitable for medium-scale production deployments. For most projects OpenVidu Single Node will be enough, at least until your user load gets serious. You can host hundreds of simultaneous participants in your rooms by running OpenVidu Community on a sufficiently powerful server!

It is composed of a single OpenVidu Node hosting all the necessary services in a monolithic setup.

OpenVidu Single Node"},{"location":"docs/self-hosting/deployment-types/#openvidu-elastic","title":"OpenVidu Elastic","text":"

This is the intermediate OpenVidu deployment. It provides scalability for your video rooms. Suitable for applications with dynamic load in the media plane that require scalability.

It is composed of two different types of nodes, one of them running on a cluster of multiple servers and the other running as a single monolithic server:

OpenVidu Elastic"},{"location":"docs/self-hosting/deployment-types/#openvidu-high-availability","title":"OpenVidu High Availability","text":"

This is the most complete OpenVidu deployment. It provides scalability for your video rooms and fault tolerance in all its services. Suitable for applications where both scalability and availability are critical.

It is composed of two different types of nodes running on two separate clusters:

OpenVidu High Availability cluster"},{"location":"docs/self-hosting/deployment-types/#node-services","title":"Node services","text":"

OpenVidu is composed of several services that work together to provide a complete videoconferencing solution. Every service runs as a Docker container, coordinated with Docker Compose.

"},{"location":"docs/self-hosting/deployment-types/#master-node-services","title":"Master Node services","text":"SERVICE DESCRIPTION OpenVidu Dashboard Web application interface for managing your cluster and visualizing your Rooms. Default Application (OpenVidu Call) A fully fledged videoconference web application ready to be used out-of-the-box. OpenVidu Operator Module that supervises the high availability services and updates the loadbalancing configuration dynamically. Redis Database used to share transient information between Media Nodes and coordinate them. In OpenVidu High Availability this is an instance of a Redis Cluster. MongoDB Database used to store analytics and monitoring persistent data. In OpenVidu High Availability this is an instance of a MongoDB Replica Set. Minio S3 bucket used to store recordings and common node configurations. In OpenVidu High Availability this is an instance of a Minio Multi-Node. Caddy Reverse proxy used as a loadbalancer to distribute client connections across your nodes and automatically manage your TLS certificate. Mimir (observability) Module used to store metrics from Prometheus. Promtail (observability) Module used to collect logs from all services and send them to Loki. Loki (observability) Module used to store logs. Grafana (observability) Module used to visualize logs and metrics in dashboards."},{"location":"docs/self-hosting/deployment-types/#media-node-services","title":"Media Node services","text":"SERVICE DESCRIPTION OpenVidu Server Media server used to stream real-time video, audio and data. Based on SFUs LiveKit and mediasoup. Egress Server Module used to export media from a Room (for example, recordings or RTMP broadcasting). See Egress. Ingress Server Module used to import media into a Room (for example, an MP4 video or an RTSP stream). See Ingress. Caddy Reverse proxy used as a loadbalancer to distribute the load generated by the Media Nodes over the Minio, Mimir and Loki cluster. Prometheus (observability) Module used to collect metrics from OpenVidu Server and send them to Loki. Promtail (observability) Module used to collect logs from all services and send them to Loki."},{"location":"docs/self-hosting/faq/","title":"Installation FAQs","text":""},{"location":"docs/self-hosting/faq/#common-issues","title":"Common issues","text":""},{"location":"docs/self-hosting/faq/#everything-looks-alright-but-i-cannot-see-any-remote-video","title":"Everything looks alright, but I cannot see any remote video.","text":""},{"location":"docs/self-hosting/faq/#my-local-video-is-not-showing-up-on-the-browser","title":"My local video is not showing up on the browser","text":""},{"location":"docs/self-hosting/faq/#any-tips-to-make-easier-the-development-of-my-webrtc-application","title":"Any tips to make easier the development of my WebRTC application?","text":""},{"location":"docs/self-hosting/faq/#test-applications-in-my-network-with-multiple-devices","title":"Test applications in my network with multiple devices.","text":""},{"location":"docs/self-hosting/faq/#does-my-app-need-a-server-side","title":"Does my app need a server-side?","text":""},{"location":"docs/self-hosting/faq/#caddy-certificates-are-not-working-what-can-i-do","title":"Caddy certificates are not working. What can I do?","text":""},{"location":"docs/self-hosting/faq/#my-commercial-certificate-is-not-working-what-can-i-do","title":"My commercial certificate is not working. What can I do?","text":""},{"location":"docs/self-hosting/faq/#how-can-i-customize-the-caddy-configuration","title":"How can I customize the Caddy configuration?","text":""},{"location":"docs/self-hosting/faq/#openvidu-does-not-work-for-clients-behind-restrictive-firewalls","title":"OpenVidu does not work for clients behind restrictive firewalls.","text":""},{"location":"docs/self-hosting/faq/#fundamentals-knowledge","title":"Fundamentals Knowledge","text":""},{"location":"docs/self-hosting/faq/#what-is-a-domain-name-and-how-can-i-get-one","title":"What is a domain name and how can I get one?","text":""},{"location":"docs/self-hosting/faq/#what-is-an-aws-elastic-ip-and-how-can-i-create-one","title":"What is an AWS Elastic IP and how can I create one?","text":""},{"location":"docs/self-hosting/faq/#what-is-a-vpc-and-a-subnet-in-aws","title":"What is a VPC and a subnet in AWS?","text":""},{"location":"docs/self-hosting/faq/#what-is-a-dns-record-and-how-can-i-create-one","title":"What is a DNS record and how can I create one?","text":""},{"location":"docs/self-hosting/faq/#what-means-each-type-of-certificate-in-openvidu","title":"What means each type of certificate in OpenVidu?","text":""},{"location":"docs/self-hosting/faq/#what-is-stun-and-turn-and-why-do-i-need-them","title":"What is STUN and TURN and why do I need them?","text":""},{"location":"docs/self-hosting/faq/#what-is-a-caddy-server-and-why-is-it-used-in-openvidu","title":"What is a Caddy server and why is it used in OpenVidu?","text":""},{"location":"docs/self-hosting/faq/#what-is-the-operator-service-in-openvidu","title":"What is the \"operator\" service in OpenVidu?","text":""},{"location":"docs/self-hosting/local/","title":"Local Installation (Development)","text":"

For development purposes, we provide an easy to install local deployment based on Docker Compose which will automatically configure all the necessary services for OpenVidu to develop and test your applications seamlessly.

"},{"location":"docs/self-hosting/local/#installation-instructions","title":"Installation instructions","text":"

First, make sure you have the following prerequisites:

Windows macOS Linux

The installation consists of cloning a repository and running a script to configure your local IP address in the deployment. Then, you can start, stop, and manage your deployment with Docker Compose.

To install OpenVidu locally, follow these steps:

OpenVidu COMMUNITYOpenVidu PRO

  1. Clone the following repository:

    git clone https://github.com/OpenVidu/openvidu-local-deployment\n

    Info

    To use a specific OpenVidu version, switch to the desired tag with git checkout <version>, e.g., git checkout 3.0.0. By default, the latest version is used.

  2. Configure the local deployment

    Windows macOS Linux 
    cd openvidu-local-deployment/community\n.\\configure_lan_private_ip_windows.bat\n
    cd openvidu-local-deployment/community\n./configure_lan_private_ip_macos.sh\n
    cd openvidu-local-deployment/community\n./configure_lan_private_ip_linux.sh\n

  3. Run OpenVidu

    docker compose up\n

  1. Clone the following repository:

    git clone https://github.com/OpenVidu/openvidu-local-deployment\n

    Info

    To use a specific OpenVidu version, switch to the desired tag with git checkout <version>, e.g., git checkout 3.0.0. By default, the latest version is used.

  2. Configure the local deployment

    Windows macOS Linux 
    cd openvidu-local-deployment/pro\n.\\configure_lan_private_ip_windows.bat\n
    cd openvidu-local-deployment/pro\n./configure_lan_private_ip_macos.sh\n
    cd openvidu-local-deployment/pro\n./configure_lan_private_ip_linux.sh\n

  3. Run OpenVidu

    docker compose up\n

Info

OpenVidu PRO runs locally in evaluation mode for free for development and testing purposes. Some limits apply:

For a production environment, you need to create an OpenVidu account to get a license key. There's a 15 day free trial waiting for you!

The deployment is ready when you see the following message:

 =========================================\n \ud83c\udf89 OpenVidu is ready! \ud83c\udf89\n =========================================\n\n OpenVidu Server && LiveKit Server URLs:\n\n     - From this machine:\n\n         - http://localhost:7880\n         - ws://localhost:7880\n\n     - From other devices in your LAN:\n\n         - https://xxx-yyy-zzz-www.openvidu-local.dev:7443\n         - wss://xxx-yyy-zzz-www.openvidu-local.dev:7443\n\n =========================================\n\n OpenVidu Developer UI (services and passwords):\n\n     - http://localhost:7880\n     - https://xxx-yyy-zzz-www.openvidu-local.dev:7443\n\n =========================================\n

By visiting http://localhost:7880 you have the OpenVidu Developer UI available with a summary of the services and passwords deployed. You can access the following services:

You just need to point your OpenVidu and LiveKit applications to http://localhost:7880 or ws://localhost:7880 and start developing. Check our tutorials if you want a step-by-step guide to develop your first application using OpenVidu.

"},{"location":"docs/self-hosting/local/#configure-your-application-to-use-the-local-deployment","title":"Configure your Application to use the Local Deployment","text":"

To point your applications to your local OpenVidu Local deployment, check the credentials at http://localhost:7880 or simply check the .env file. All access credentials of all services are defined in this file.

OpenVidu COMMUNITYOpenVidu PRO

Your authentication credentials and URLs to point your applications to are:

Your authentication credentials and URLs to point your applications to are:

If you want to use the OpenVidu Local deployment from other devices on your network, follow the instructions in the next section.

"},{"location":"docs/self-hosting/local/#accessing-your-local-deployment-from-other-devices-on-your-network","title":"Accessing your local deployment from other devices on your network","text":"

Testing WebRTC applications can be challenging because devices require a secure context (HTTPS) to access the camera and microphone. When using LiveKit Open Source, this isn't an issue if you access your app from the same computer where the LiveKit Server is running, as localhost is considered a secure context even over plain HTTP. Consider the following architecture:

The simplest way to test your application is:

  1. Run LiveKit Server on your computer.
  2. Connect your app to LiveKit Server through localhost.
  3. Serve both your application client and server from the same computer.
  4. Access your app from localhost in a browser on the same computer.

This setup is straightforward, but what if you need to test your app from multiple devices simultaneously, including real mobile devices? In this case, you must use a secure context (HTTPS), which introduces two challenges:

  1. LiveKit Server open source does not natively support HTTPS. You'll need a reverse proxy to serve LiveKit Server over HTTPS.
  2. Even with HTTPS, your SSL certificate might not be valid for local network addresses. You'll need to accept it in the browser for web apps, and install it on mobile devices.

OpenVidu Local Deployment addresses these issues by providing a magic domain name openvidu-local.dev that resolves to any IP specified as a subdomain and provides a valid wildcard certificate for HTTPS. This is similar to services like nip.io, traefik.me, or localtls.

When using OpenVidu Local Deployment, you can access OpenVidu Server (which is 100% LiveKit compatible) and your app from any device on your local network with a valid HTTPS certificate. The following table shows the URLs to access the deployment and your application locally and from other devices on your network:

Local access Access from devices in your local network Usage Access only from the development machine Access from any device connected to your local network. In the URLs below, replace xxx-yyy-zzz-www with the local IP address of the development machine, replacing the dots (.) with dashes (-). You can find the configured local IP in the .env file in the LAN_PRIVATE_IP variable Application Client (frontend) http://localhost:5080 https://xxx-yyy-zzz-www.openvidu-local.dev:5443 Application Server (backend) http://localhost:6080 https://xxx-yyy-zzz-www.openvidu-local.dev:6443 OpenVidu (LiveKit Compatible) URL http://localhost:7880 https://xxx-yyy-zzz-www.openvidu-local.dev:7443

Info

Warning

If the URL isn't working because the IP address is incorrect or the installation script couldn't detect it automatically, you can update the LAN_PRIVATE_IP value in the .env file and restart the deployment with docker compose up.

When developing web applications with this deployment, you can use the following code snippet to dynamically determine the appropriate URLs for the application server and the OpenVidu server based on the browser's current location. This approach allows you to seamlessly run your application on both your development machine and other devices within your local network without needing to manually adjust the URLs in your code.

if (window.location.hostname === \"localhost\") {\n  APPLICATION_SERVER_URL = \"http://localhost:6080\";\n  OPENVIDU_URL = \"ws://localhost:7880\";\n} else {\n  APPLICATION_SERVER_URL = \"https://\" + window.location.hostname + \":6443\";\n  OPENVIDU_URL = \"wss://\" + window.location.hostname + \":7443\";\n}\n
"},{"location":"docs/self-hosting/local/#about-openvidu-localdev-domain-and-ssl-certificates","title":"About openvidu-local.dev domain and SSL certificates","text":"

This setup simplifies the configuration of local OpenVidu deployments with SSL, making it easier to develop and test your applications securely on your local network by using the openvidu-local.dev domain and a wildcard SSL certificate valid for *.openvidu-local.dev. However, it\u2019s important to note that these certificates are publicly available and do not provide an SSL certificate for production use.

The HTTPS offered by openvidu-local.dev is intended for development or testing purposes with the only goal of making your local devices trust your application (which is mandatory in WebRTC applications). For any other use case, it should be treated with the same security considerations as plain HTTP.

For production, you should consider deploying a production-grade OpenVidu deployment.

"},{"location":"docs/self-hosting/elastic/","title":"OpenVidu Elastic installation","text":"

OpenVidu Elastic is part of the PRO edition of OpenVidu. You have the following deployment options:

Once your deployment is complete, refer to the following sections for configuration and management:

"},{"location":"docs/self-hosting/elastic/aws/admin/","title":"OpenVidu Elastic: AWS Configuration and Administration","text":"

The deployment of OpenVidu Elastic on AWS is automated using AWS CloudFormation, with Media Nodes managed within an Auto Scaling Group. This group dynamically adjusts the number of instances based on a target average CPU utilization. Internally, the AWS deployment mirrors the on-premises setup, allowing you to follow the same administration and configuration guidelines provided in the On Premises Elastic documentation. However, there are specific considerations unique to the AWS environment that are worth taking into account.

"},{"location":"docs/self-hosting/elastic/aws/admin/#cluster-shutdown-and-startup","title":"Cluster Shutdown and Startup","text":"

The Master Node is an EC2 instance, while the Media Nodes are part of an Auto Scaling Group. The process for starting and stopping these components differs. The following sections detail the procedures.

Shutdown the ClusterStartup the Cluster

To shut down the cluster, you need to stop the Media Nodes first and then stop the Master Node. This way, any ongoing session will not be interrupted.

  1. Navigate to the CloudFormation Dashboard on AWS.
  2. Select the CloudFormation Stack that you used to deploy OpenVidu Elastic.
  3. In the \"Resources\" tab, locate the resource with the logical ID: OpenViduMediaNodeASG, and click on it to go to the Auto Scaling Group Dashboard with the Auto Scaling Group of the Media Nodes selected.
  4. Click on \"Actions > Edit\".
  5. Set the \"Desired capacity\", \"Min desired capacity\", and \"Max desired capacity\" to 0, and click on \"Update\".

  6. Wait until the \"Instance Management\" tab shows that there are no instances in the Auto Scaling Group.

    Warning

    It may happen that some instances are still in the \"Terminating:Wait\" lifecycle state after setting the desired capacity to 0. This is because the Auto Scaling Group waits for the instances to finish processing any ongoing room, ingress, or egress operations before terminating them. This can take a few minutes. If you want to force the termination of the instances, you can manually terminate them from the EC2 Dashboard.

  7. After confirming that all Media Node instances are terminated, go back to the CloudFormation Stack and locate the resource with the logical ID: OpenViduMasterNode. Click on it to go to the EC2 Dashboard with the Master Node instance selected.

  8. Right-click on the instance and select \"Stop instance\".

To start the cluster, we recommend starting the Master Node first and then the Media Nodes.

  1. Navigate to the CloudFormation Dashboard on AWS.
  2. Select the CloudFormation Stack that you used to deploy OpenVidu Elastic.
  3. Locate the resource with the logical ID: OpenViduMasterNode. Click on it to go to the EC2 Dashboard with the Master Node instance selected.
  4. Right-click on the instance and select \"Start instance\".
  5. Wait until the instance is running.
  6. Go back to the CloudFormation Stack and locate the resource with the logical ID: OpenViduMediaNodeASG. Click on it to go to the Auto Scaling Group Dashboard with the Auto Scaling Group of the Media Nodes selected.
  7. Click on \"Actions > Edit\".
  8. Set the \"Desired capacity\", \"Min desired capacity\", and \"Max desired capacity\" to the desired number of Media Nodes, and click on \"Update\". In this example, we set the desired capacity to 2.
  9. Wait until the \"Instance Management\" tab shows that there are the desired number of instances in the Auto Scaling Group.
"},{"location":"docs/self-hosting/elastic/aws/admin/#change-the-instance-type","title":"Change the instance type","text":"

It is possible to change the instance type of both the Master Node and the Media Nodes. However, since the Media Nodes are part of an Auto Scaling Group, the process differs. The following section details the procedures.

Master NodesMedia Nodes

Warning

This procedure requires downtime, as it involves stopping the Master Node.

  1. Shutdown the cluster.

    Info

    You can stop only the Master Node instance to change its instance type, but it is recommended to stop the whole cluster to avoid any issues.

  2. Go to the CloudFormation Stack and locate the resource with the logical ID: OpenViduMasterNode. Click on it to go to the EC2 Dashboard with the Master Node instance selected.

  3. Right-click on the instance and select \"Instance Settings > Change Instance Type\".
  4. Select the new instance type and click on \"Apply\".
  5. Start the cluster.
  1. Go to the CloudFormation Dashboard on AWS.
  2. Select the CloudFormation Stack that you used to deploy OpenVidu Elastic.
  3. Locate the resource with the logical ID: OpenViduMediaNodeLaunchTemplate. Click on it to go to the Launch Template Dashboard with the Launch Template of the Media Nodes selected.
  4. Click on \"Actions > Modify template (Create new version)\".
  5. In the \"Instance type\" section, select the new instance type and click on \"Create template version\".
  6. Go to the CloudFormation Stack and locate the resource with the logical ID: OpenViduMediaNodeASG. Click on it to go to the Auto Scaling Group Dashboard with the Auto Scaling Group of the Media Nodes selected.
  7. Click on \"Actions > Edit\".

  8. In the Launch Template section, select the new version of the launch template we just created at step 5, which is the highest version number.

    Then, click on \"Update\".

    Info

    By configuring \"Latest\" as the launch template version, you no longer need to update the Auto Scaling Group every time you modify the launch template. The Auto Scaling Group will automatically use the latest version of the launch template.

  9. Terminate the old instances manually from the EC2 Dashboard if you want to force the termination of the instances. New instances will be launched with the new instance type.

    Info

    If you want to avoid downtime, you can wait until the Auto Scaling Group replaces the old instances with the new ones. But you will need to increase the desired capacity to force the replacement of the instances and then decrease it to the desired number of instances.

"},{"location":"docs/self-hosting/elastic/aws/admin/#media-nodes-autoscaling-configuration","title":"Media Nodes Autoscaling Configuration","text":"

To configure the Auto Scaling settings for the Media Nodes, follow the steps outlined below. This configuration allows you to set the parameters that control how the Auto Scaling Group will scale based on the target average CPU utilization.

Media Nodes Autoscaling Configuration
  1. Navigate to the CloudFormation Dashboard on AWS.
  2. Select the CloudFormation Stack that you used to deploy OpenVidu Elastic.
  3. In the \"Resources\" tab, locate the resource with the logical ID: OpenViduMediaNodeASG and click on it to go to the Auto Scaling Group Dashboard.
  4. Click on \"Actions > Edit\".
  5. To configure scaling policies, navigate to the \"Automatic scaling\" tab within the Auto Scaling Group Dashboard, select the unique \"Target tracking scaling\" autoscaling policy, and click on \"Actions > Edit\".

  6. It will open a panel where you can configure multiple parameters. In this example, we set the target average CPU utilization to 30%. Then, click on \"Update\".

    Info

    OpenVidu Elastic is by default configured with a \"Target tracking scaling\" policy that scales based on the target average CPU utilization, however, you can configure different autoscaling policies according to your needs. For more information on the various types of autoscaling policies and how to implement them, refer to the AWS Auto Scaling documentation.

"},{"location":"docs/self-hosting/elastic/aws/admin/#fixed-number-of-media-nodes","title":"Fixed Number of Media Nodes","text":"

If you need to maintain a fixed number of Media Nodes instead of allowing the Auto Scaling Group to dynamically adjust based on CPU utilization, you can configure the desired capacity settings accordingly. Follow the steps below to set a fixed number of Media Nodes:

Set Fixed Number of Media Nodes
  1. Navigate to the CloudFormation Dashboard on AWS.
  2. Select the CloudFormation Stack that you used to deploy OpenVidu Elastic.
  3. In the \"Resources\" tab, locate the resource with the logical ID: OpenViduMediaNodeASG and click on it to go to the Auto Scaling Group Dashboard.
  4. Click on \"Actions > Edit\".
  5. Set the \"Desired capacity\", \"Min desired capacity\", and \"Max desired capacity\" to the fixed number of Media Nodes you require, and click on \"Update\". In this example, we set the desired capacity to 2.
  6. Wait until the \"Instance Management\" tab shows that the Auto Scaling Group has the fixed number of instances running.
"},{"location":"docs/self-hosting/elastic/aws/admin/#configuration-management","title":"Configuration Management","text":"

This section explains how to manage and update the configuration settings for your OpenVidu Elastic deployment. It is divided into three parts:

  1. Configuring CloudFormation YAML for Node Services Configuration: Details how to pre-configure settings in the CloudFormation template to avoid manual interventions post-deployment.
  2. Global Configuration: Covers parameters that affect the entire cluster when the CloudFormation stack is already deployed.
  3. Node Services Configuration: Focuses on settings specific to Master and Media Nodes services when the CloudFormation stack is already deployed.
"},{"location":"docs/self-hosting/elastic/aws/admin/#configuring-cloudformation-yaml-for-node-services-configuration","title":"Configuring CloudFormation YAML for Node Services Configuration","text":"

To avoid manual intervention after deployment, you can pre-configure the node services configuration directly in the CloudFormation YAML template. This ensures that the necessary configurations are applied automatically upon deployment.

Master NodeMedia Nodes
  1. Get the CloudFormation YAML template used to deploy OpenVidu Elastic on AWS.

  2. Locate the section defining the Launch Template for the Master Node and update the UserData property with the required configuration parameters. The section looks like this:

    OpenViduMasterNode:\n    Type: AWS::EC2::Instance\n    Properties:\n        UserData:\n            Fn::Base64: !Sub |\n                #!/bin/bash\n                ...\n                ...\n                # Install OpenVidu\n                /usr/local/bin/install.sh || { echo \"[OpenVidu] error installing OpenVidu\"; exit 1; }\n\n                ######### APPLY CUSTOM CONFIGURATIONS #########\n                # If you want to apply any modification to the configuration files\n                # of the OpenVidu services at /opt/openvidu, you can do it here.\n                # Examples:\n                #\n                # - Change minio public port\n                # yq eval '.apps.http.servers.minio.listen[0] = \":9001\"' -i /opt/openvidu/config/caddy.yaml\n                #\n                # - Disable dashboard access\n                # yq eval 'del(.apps.http.servers.public.routes[] | \\\n                #  select(.handle[]?.handler == \"subroute\" and \\\n                #  .handle[].routes[].handle[].strip_path_prefix == \"/dashboard\"))' \\\n                #  -i /opt/openvidu/config/caddy.yaml\n\n\n\n                ######### END CUSTOM CONFIGURATIONS #########\n\n                # Start OpenVidu\n                systemctl start openvidu || { echo \"[OpenVidu] error starting OpenVidu\"; exit 1; }\n                ...\n                ...\n

    The area between APPLY CUSTOM CONFIGURATIONS and END CUSTOM CONFIGURATIONS is where you can add your custom configuration commands. You can use yq to modify the configuration files of the OpenVidu services. The example shows how to change the minio public port and how to disable dashboard access in the caddy.yaml configuration file.

  3. Save the YAML file and use it to deploy your CloudFormation stack. This will apply the Master Node configuration automatically during the deployment process.

  1. Get the CloudFormation YAML template used to deploy OpenVidu Elastic on AWS.

  2. Locate the section defining the Launch Template for the Media Nodes and update the UserData property with the required configuration parameters. The section looks like this:

    OpenViduMediaNodeLaunchTemplate:\n    Type: \"AWS::EC2::LaunchTemplate\"\n    Properties:\n    LaunchTemplateData:\n        UserData:\n            Fn::Base64: !Sub |\n                #!/bin/bash\n                ...\n                ...\n                # Install OpenVidu #\n                /usr/local/bin/install.sh || { echo \"[OpenVidu] error installing OpenVidu\"; /usr/local/bin/set_as_unhealthy.sh; exit 1; }\n\n                ######### APPLY CUSTOM CONFIGURATIONS #########\n                # If you want to apply any modification to the configuration files\n                # of the OpenVidu services at /opt/openvidu, you can do it in this section.\n                # Examples:\n                #\n                # - Announce specific IP address for the Media Node\n                # yq eval '.rtc.node_ip = 1.2.3.4' -i /opt/openvidu/config/livekit.yaml\n                #\n                # - Add webhooks to livekit\n                # yq eval '.webhook.urls += [\"http://new-endpoint.example.com/webhook\"]' -i /opt/openvidu/config/livekit.yaml\n\n\n\n                ######### END CUSTOM CONFIGURATIONS #########\n\n                # Start OpenVidu\n                systemctl start openvidu || { echo \"[OpenVidu] error starting OpenVidu\"; /usr/local/bin/set_as_unhealthy.sh; exit 1; }\n

    The area between APPLY CUSTOM CONFIGURATIONS and END CUSTOM CONFIGURATIONS is where you can add your custom configuration commands. You can use yq to modify the configuration files of the OpenVidu services. The example shows how to change the rtc.node_ip parameter and how to add a webhook to the livekit.yaml configuration file.

  3. Save the YAML file and use it to deploy your CloudFormation stack. This will apply the node services configuration automatically during the deployment process.

By pre-configuring the CloudFormation template, you streamline the deployment process and reduce the need for post-deployment manual configuration.

"},{"location":"docs/self-hosting/elastic/aws/admin/#global-configuration","title":"Global Configuration","text":"

The global configuration parameters for the OpenVidu Elastic deployment are stored in a secret resource deployed by the CloudFormation stack. These parameters can affect the configuration of all the nodes in the cluster. To update any of these parameters, follow the steps below:

Update Global Configuration Parameters
  1. Navigate to the CloudFormation Dashboard on AWS.
  2. Select the CloudFormation Stack that you used to deploy OpenVidu Elastic.
  3. In the \"Resources\" tab, locate the resource with the logical ID: OpenViduSharedInfo and click on it to view the secret in AWS Secrets Manager.
  4. Click on \"Retrieve secret value\" to view the parameters.
  5. Edit the desired parameters within the secret. For example, you can change the RTC_ENGINE parameter to pion or mediasoup depending on the WebRTC engine you want to use. Just click on \"Edit\", modify the value, and click on \"Save\".
  6. To apply the changes, stop the cluster and then start it again following the procedures outlined in the Cluster Shutdown and Startup section.
"},{"location":"docs/self-hosting/elastic/aws/admin/#node-services-configuration","title":"Node Services Configuration","text":"

The configuration for individual node services can be managed through different methods depending on the node type.

Master NodeMedia Node

The Master Node's configuration can be directly modified on the internal machine since it is an EC2 instance. To update the configuration:

  1. Connect to the Master Node EC2 instance using SSH.
  2. Edit the configuration files as necessary. Check the On Premises Elastic documentation related to the Master Node configuration.

Once the changes are made, restart the OpenVidu Server to apply the new configuration.

sudo systemctl restart openvidu\n

Warning

Take into account that some changes may require modifying the Master Nodes configuration as well. Check the On Premises Elastic Advanced Configuration for more information.

Media Node configurations require changes to be made in the Launch Template \"User Data\" section. To update the configuration:

  1. Navigate to the CloudFormation Dashboard on AWS.
  2. Select the CloudFormation Stack that you used to deploy OpenVidu Elastic.
  3. Locate the resource with the logical ID: OpenViduMediaNodeLaunchTemplate. Click on it to go to the Launch Template Dashboard with the Launch Template of the Media Nodes selected.
  4. Click on \"Actions > Modify template (Create new version)\".
  5. Go to the \"Advanced details\" section and modify the \"User data\" field with the new configuration. You can modify the configuration parameters of the services running on the Media Nodes following the same script structure as the one used in the Automatic installation and configuration of nodes for the Media Nodes. When you finish, click on \"Create template version\".
  6. Go to the CloudFormation Stack and locate the resource with the logical ID: OpenViduMediaNodeASG. Click on it to go to the Auto Scaling Group Dashboard with the Auto Scaling Group of the Media Nodes selected.
  7. Click on \"Actions > Edit\".

  8. In the Launch Template section, select the new version of the launch template we just created at step 5, which is the highest version number. Then, click on \"Update\".

    Info

    By configuring \"Latest\" as the launch template version, you no longer need to update the Auto Scaling Group every time you modify the launch template. The Auto Scaling Group will automatically use the latest version of the launch template.

  9. Terminate the old instances manually from the EC2 Dashboard if you want to force the termination of the instances. New instances will be launched with the new configuration.

    Warning

    This process requires downtime, as it involves terminating the old instances and launching new ones with the updated configuration.

"},{"location":"docs/self-hosting/elastic/aws/install/","title":"OpenVidu Elastic Installation: AWS","text":"

Info

OpenVidu Elastic is part of OpenVidu PRO. Before deploying, you need to create an OpenVidu account to get your license key. There's a 15-day free trial waiting for you!

This section contains the instructions to deploy a production-ready OpenVidu Elastic deployment in AWS. Deployed services are the same as the On Premises Elastic Installation but automate the process with AWS CloudFormation.

First of all, import the template in the AWS CloudFormation console. You can click the following button...

Deploy OpenVidu Elastic in

...or access your AWS CloudFormation console and manually set this S3 URL in the Specify template section:

https://s3.eu-west-1.amazonaws.com/get.openvidu.io/pro/elastic/latest/aws/cf-openvidu-elastic.yaml\n
Architecture overview

This is how the architecture of the deployment looks:

OpenVidu Elastic AWS Architecture

"},{"location":"docs/self-hosting/elastic/aws/install/#cloudformation-parameters","title":"CloudFormation Parameters","text":"

Depending on your needs, you need to fill in the following CloudFormation parameters:

"},{"location":"docs/self-hosting/elastic/aws/install/#domain-and-ssl-certificate-configuration","title":"Domain and SSL Certificate Configuration","text":"

These are the three possible scenarios you may have to configure in this section:

Let's Encrypt Certificate (recommended)Self-Signed CertificateCustom Certificates

For a production-ready setup, this scenario is ideal when you have an FQDN (Fully Qualified Domain Name) and an Elastic IP at your disposal. It leverages the services of Let's Encrypt to automatically generate valid certificates.

First, you need to have the FQDN pointing to the Elastic IP you are going to use.

Then, you need to fill in the following parameters:

As you can see, you need to specify the DomainName with your FQDN, the PublicElasticIP with the Elastic IP that the domain points to, and the LetsEncryptEmail with your email address for Let\u2019s Encrypt notifications. These parameters are mandatory.

This is the most straightforward option for deploying OpenVidu on AWS when you do not have a Fully Qualified Domain Name (FQDN). This method allows for the immediate use of OpenVidu in AWS using CloudFormation.

However, this convenience comes with the caveat that users will need to manually accept the certificate in their web browsers. Please be aware that this configuration is solely for developmental and testing purposes and is not suitable for a production environment.

These are the parameters needed in this section to use self-signed certificates:

You don\u2019t need to specify any parameters; just select the CertificateType as self-signed. The domain name used will be an AWS-generated one.

Opt for this method if you possess your own certificate for an existing FQDN. It enables you to deploy OpenVidu on AWS using your certificates.

You need to have a Fully Qualified Domain Name (FQDN) pointing to a previously created Elastic IP.

Also, you need a temporary HTTP server hosting your private and public certificate under a specific URL. These URLs are needed for the instance to be able to download and install your certificates.

The configured parameters would look like this:

You need to specify at OwnPublicCertificate and OwnPrivateCertificate the URLs where the public and private certificates are hosted, respectively. The DomainName and PublicElasticIP are mandatory parameters.

Certificates need to be in PEM format and the URLs must be accessible from the instance.

"},{"location":"docs/self-hosting/elastic/aws/install/#openvidu-elastic-configuration","title":"OpenVidu Elastic Configuration","text":"

In this section, you need to specify some properties needed for the OpenVidu Elastic deployment.

OpenVidu Elastic Configuration

The parameters in this section might appear as follows:

Make sure to provide the OpenViduLicense parameter with the license key. If you don't have one, you can request one here.

For the RTCEngine parameter, you can choose between Pion (the engine used by LiveKit) and Mediasoup (experimental).

Warning

mediasoup integration in OpenVidu is experimental, and should not be used in production environments. There are some limitations that are currently being worked on, expected to be ironed out in the near future.

"},{"location":"docs/self-hosting/elastic/aws/install/#ec2-instance-configuration","title":"EC2 Instance Configuration","text":"

You need to specify some properties for the EC2 instances that will be created.

EC2 Instance configuration

The parameters in this section may look like this:

Simply select the type of instance you want to deploy at MasterNodeInstanceType and MediaNodeInstanceType, the SSH key you want to use to access the machine at KeyName, and the Amazon Image ID (AMI) to use at AmiId.

By default, the parameter AmiId is configured to use the latest LTS Ubuntu AMI, so ideally you don\u2019t need to modify this.

"},{"location":"docs/self-hosting/elastic/aws/install/#media-nodes-autoscaling-group-configuration","title":"Media Nodes Autoscaling Group Configuration","text":"

The number of Media Nodes can scale up or down based on the system load. You can configure the minimum and maximum number of Media Nodes and a target CPU utilization to trigger the scaling up or down.

Media Nodes Autoscaling Group Configuration

The parameters in this section may look like this:

The InitialNumberOfMediaNodes parameter specifies the initial number of Media Nodes to deploy. The MinNumberOfMediaNodes and MaxNumberOfMediaNodes parameters specify the minimum and maximum number of Media Nodes that you want to be deployed.

The ScaleTargetCPU parameter specifies the target CPU utilization to trigger the scaling up or down. The goal is to keep the CPU utilization of the Media Nodes close to this value. The autoscaling policy is based on Target Tracking Scaling Policy.

"},{"location":"docs/self-hosting/elastic/aws/install/#vpc-configuration","title":"VPC Configuration","text":"

In this section, you need to specify the VPC and Subnet configuration for the deployment.

VPC Configuration

The parameters in this section may look like this:

The OpenViduVPC parameter specifies the VPC where the deployment will be created.

The OpenViduMasterNodeSubnet and OpenViduMediaNodeSubnet parameters specify the subnets where the Master and Media Nodes will be deployed. All of them must be in the previously specified OpenViduVPC.

Warning

You must use public subnets for the Master Nodes and Media Nodes and have enabled the auto-assign public IP option.

"},{"location":"docs/self-hosting/elastic/aws/install/#optional-turn-server-configuration-with-tls","title":"(Optional) TURN server configuration with TLS","text":"

This section is optional. It is useful when your users are behind a restrictive firewall that blocks UDP traffic. This parameter will only works if you are using letsencrypt or owncert as the CertificateType parameter.

TURN server configuration with TLS

The parameters in this section may look like this:

Set the TurnDomainName parameter to the domain name you intend to use for your TURN server. It should be pointing to the PublicElasticIP specified in the previous section.

If you are using letsencrypt as the CertificateType parameter, you can leave the TurnOwnPublicCertificate and TurnOwnPrivateCertificate parameters empty. If you are using owncert, you need to specify the URLs where the public and private certificates are hosted.

"},{"location":"docs/self-hosting/elastic/aws/install/#deploying-the-stack","title":"Deploying the Stack","text":"

When you are ready with your CloudFormation parameters, just click on \"Next\", specify in \"Stack failure options\" the option \"Preserve successfully provisioned resources\" to be able to troubleshoot the deployment in case of error, click on \"Next\" again, and finally \"Submit\".

When everything is ready, you will see the following links in the \"Outputs\" section of CloudFormation:

CloudFormation Outputs

"},{"location":"docs/self-hosting/elastic/aws/install/#configure-your-application-to-use-the-deployment","title":"Configure your Application to use the Deployment","text":"

The Output Key ServicesAndCredentials of the previous section points to an AWS Secret Manager secret that contains all URLs and credentials to access the services deployed. You can access the secret by clicking on the link in the Output Value column.

Then, click on Retrieve secret value to get the JSON with all the information.

To point your applications to your OpenVidu deployment, check the values of the JSON secret. All access credentials of all services are defined in this object.

Your authentication credentials and URL to point your applications would be:

"},{"location":"docs/self-hosting/elastic/aws/install/#troubleshooting-initial-cloudformation-stack-creation","title":"Troubleshooting Initial CloudFormation Stack Creation","text":"

If something goes wrong during the initial CloudFormation stack creation, your stack may reach the CREATE_FAILED status for multiple reasons. It could be due to a misconfiguration in the parameters, a lack of permissions, or a problem with the AWS services. When this happens, the following steps can help you troubleshoot the issue and identify what went wrong:

  1. While deploying the stack, make sure at \"Stack failure options\" you have selected the option \"Preserve successfully provisioned resources\" to be able to troubleshoot the deployment in case of an error.

    Disable Rollback on failure

  2. Check if the EC2 instance or instances are running. If they are not, check the CloudFormation events for any error messages.

  3. If the EC2 instance or instances are running, SSH into the instance and check the logs of the following files:

    These logs will give you more information about the CloudFormation stack creation process.

  4. If everything seems fine, check the status and the logs of the installed OpenVidu services in the Master Node and Media Nodes.

"},{"location":"docs/self-hosting/elastic/aws/install/#configuration-and-administration","title":"Configuration and administration","text":"

When your CloudFormation stack reaches the CREATE_COMPLETE status, your OpenVidu Elastic deployment is ready to use. You can check the Configuration and Administration section to learn how to manage your OpenVidu Elastic deployment.

"},{"location":"docs/self-hosting/elastic/on-premises/admin/","title":"OpenVidu Elastic: On-premises configuration and administration","text":"

The OpenVidu installer offers an easy way to deploy OpenVidu Elastic on-premises. However, once the deployment is complete, you may need to perform administrative tasks based on your specific requirements, such as changing passwords, specifying custom configurations, and starting or stopping services.

This section provides details on configuration parameters and common administrative tasks for on-premises OpenVidu Elastic deployments.

"},{"location":"docs/self-hosting/elastic/on-premises/admin/#openvidu-configuration","title":"OpenVidu configuration","text":""},{"location":"docs/self-hosting/elastic/on-premises/admin/#directory-structure","title":"Directory structure","text":"

OpenVidu Elastic is composed of two types of nodes: Master and Media nodes. The directory structure of OpenVidu Elastic is as follows for each type of node:

Master NodeMedia Node

The OpenVidu Elastic Master Node is installed at /opt/openvidu/ and has a systemd service located at /etc/systemd/system/openvidu.service.

The directory structure of the Master Node is as follows:

|-- /opt/openvidu\n    |-- config/\n    |-- custom-layout/\n    |-- data/\n    |-- deployment-info.yaml\n    |-- docker-compose.override.yml\n    |-- docker-compose.yml\n    |-- .env\n    |-- owncert/\n    `-- recordings/\n

The OpenVidu Elastic Media Node is installed at /opt/openvidu/ and has a systemd service located at /etc/systemd/system/openvidu.service.

The directory structure of the Media Node is as follows:

|-- /opt/openvidu\n    |-- config/\n    |-- data/\n    |-- deployment-info.yaml\n    |-- docker-compose.yml\n    `-- .env\n
"},{"location":"docs/self-hosting/elastic/on-premises/admin/#services-configuration","title":"Services Configuration","text":"

Some services deployed with OpenVidu have their own configuration files located in the /opt/openvidu/config/ directory, while others are configured in the .env file. Below are the services and their respective configuration files and parameters:

Info

The installer provides default configurations that work out of the box. However, you can modify these configurations to suit your specific requirements.

"},{"location":"docs/self-hosting/elastic/on-premises/admin/#configuration-files","title":"Configuration Files","text":"Master NodeMedia Node Service Description Configuration File Location Reference documentation Caddy Server Serves OpenVidu services and handles HTTPS. /opt/openvidu/config/caddy.yaml Caddy JSON Structure Loki Service Used for log aggregation. /opt/openvidu/config/loki.yaml Loki Config Promtail Service Collects logs and sends them to Loki. /opt/openvidu/config/promtail.yaml Promtail Config Mimir Service Service for long-term prometheus storage /opt/openvidu/config/mimir.yaml Mimir Config Grafana Service Used for visualizing monitoring data. /opt/openvidu/config/grafana_config/ Grafana Config Service Description Configuration File Location Reference documentation OpenVidu Server Manages video rooms. It is compatible with LiveKit configuration and includes its own OpenVidu configuration parameters /opt/openvidu/config/livekit.yaml LiveKit Config Ingress Service Imports video from other sources into OpenVidu rooms. /opt/openvidu/config/ingress.yaml LiveKit Ingress Config Egress Service Exports video from OpenVidu rooms for recording or streaming. /opt/openvidu/config/egress.yaml LiveKit Egress Config Prometheus Service Used for monitoring. /opt/openvidu/config/prometheus.yaml Prometheus Config Promtail Service Collects logs and sends them to Loki. /opt/openvidu/config/promtail.yaml Promtail Config"},{"location":"docs/self-hosting/elastic/on-premises/admin/#environment-variables","title":"Environment variables","text":"Master NodeMedia Node Service Description Environment Variables Grafana Service Used for visualizing monitoring data. OpenVidu Dashboard Used to visualize OpenVidu Server Rooms, Ingress, and Egress services. Default App (OpenVidu Call) Default ready-to-use video conferencing app. Redis Service Used as a shared memory database for OpenVidu and Ingress/Egress services. If you need to change the Redis password after the installation, check the advanced configuration section. MinIO Service Used for storing recordings. If you need to change the MinIO access key and secret key after the installation, check the advanced configuration section. MongoDB Service Used for storing analytics and monitoring data. If you need to change the MongoDB username and password after the installation, check the advanced configuration section. OpenVidu v2 compatibility Service Used to enable compatibility with OpenVidu v2. Check the OpenVidu v2 Compatibility Configuration Parameters to see all the available parameters.

Warning

Ensure that MASTER_NODE_PRIVATE_IP and MEDIA_NODE_PRIVATE_IP are static IP addresses. If these IP addresses change after the installation, you must update the .env file and the configuration files in the Media Node.

Service Description Environment Variables OpenVidu Server Manages video rooms. Ingress Service Imports video from other sources into OpenVidu rooms. Egress Service Exports video from OpenVidu rooms for recording or streaming. Prometheus Service Used for monitoring. Promtail Service Collects logs and sends them to Loki. "},{"location":"docs/self-hosting/elastic/on-premises/admin/#openvidu-configuration-parameters","title":"OpenVidu Configuration Parameters","text":"

OpenVidu Server is built on top of LiveKit and offers extra configuration options. You can find the configuration file at /opt/openvidu/config/livekit.yaml. Additional parameters for configuring OpenVidu Server are:

openvidu:\n    license: <YOUR_OPENVIDU_PRO_LICENSE> # (1)\n    cluster_id: <YOUR_DOMAIN_NAME> # (2)\n    analytics: # (3)\n        enabled: true # (4)\n        interval: 10s # (5)\n        expiration: 768h # (6)\n        mongo_url: <MONGO_URL> # (7)\n    rtc:\n        engine: pion # (8)\n    mediasoup:\n        debug: \"\" # (9)\n        log_level: error # (10)\n        log_tags: [info, ice, rtp, rtcp, message] # (11)\n
  1. Specify your OpenVidu Pro license key. If you don't have one, you can request one here.
  2. The cluster ID for the OpenVidu deployment. It is configured by default by OpenVidu Installer with the domain name of the deployment.
  3. The analytics configuration should be defined at the openvidu level in the livekit.yaml file.
  4. This must be set to true to send analytics data to MongoDB. If set to false, no analytics data will be sent.
  5. Time interval to send analytics data to MongoDB.
  6. Time to keep the analytics data in MongoDB. In this example, it is set to 32 days.
  7. MongoDB URL. This is the connection string to the MongoDB database where the analytics data will be stored.
  8. The rtc.engine parameter is set to pion by default. This is the WebRTC engine used by OpenVidu. Depending on your requirements, you can use:
  9. Global toggle to enable debugging logs from MediaSoup. In most debugging cases, using just an asterisk (\"*\") here is enough, but this can be fine-tuned for specific log levels. More info.
  10. Logging level for logs generated by MediaSoup. More info.
  11. Comma-separated list of log tag names, for debugging. More info.
"},{"location":"docs/self-hosting/elastic/on-premises/admin/#openvidu-v2-compatibility-configuration-parameters","title":"OpenVidu v2 Compatibility Configuration Parameters","text":"

If you are using in COMPOSE_PROFILES at the .env file the v2compatibility profile, you will need to set the following parameters in the .env file for the OpenVidu V2 Compatibility service:

Parameter Description Default Value V2COMPAT_OPENVIDU_SECRET OpenVidu secret used to authenticate the OpenVidu V2 Compatibility service. In the .env file, this value is defined with LIVEKIT_API_SECRET. The value of LIVEKIT_API_SECRET in the .env file. V2COMPAT_OPENVIDU_WEBHOOK true to enable OpenVidu Webhook service. false otherwise. Valid values are true or false. false V2COMPAT_OPENVIDU_WEBHOOK_ENDPOINT HTTP(S) endpoint to send OpenVidu V2 Webhook events. Must be a valid URL. Example: V2COMPAT_OPENVIDU_WEBHOOK_ENDPOINT=http://myserver.com/webhook - V2COMPAT_OPENVIDU_WEBHOOK_HEADERS JSON Array list of headers to send in the OpenVidu V2 Webhook events. Example: V2COMPAT_OPENVIDU_WEBHOOK_HEADERS=[\"Content-Type: application/json\"] [] V2COMPAT_OPENVIDU_WEBHOOK_EVENTS Comma-separated list of OpenVidu V2 Webhook events to send. Example: V2COMPAT_OPENVIDU_WEBHOOK_EVENTS=sessionCreated,sessionDestroyed sessionCreated, sessionDestroyed, participantJoined, participantLeft, webrtcConnectionCreated, webrtcConnectionDestroyed, recordingStatusChanged, signalSent (All available events) V2COMPAT_OPENVIDU_PRO_AWS_S3_BUCKET S3 Bucket where to store recording files. openvidu V2COMPAT_OPENVIDU_PRO_AWS_S3_SERVICE_ENDPOINT S3 Endpoint where to store recording files. http://localhost:9100 V2COMPAT_OPENVIDU_PRO_AWS_ACCESS_KEY S3 Access Key of the S3 Bucket where to store recording files. - V2COMPAT_OPENVIDU_PRO_AWS_SECRET_KEY S3 Secret Key of the S3 Bucket where to store recording files. - V2COMPAT_OPENVIDU_PRO_AWS_REGION S3 Region of the S3 Bucket where to store recording files. us-east-1 V2COMPAT_OPENVIDU_RECORDING_PATH OpenVidu Recording directory used to save the OpenVidu recording videos when V2COMPAT_OPENVIDU_PRO_RECORDING_STORAGE is set to true. Change it with the folder you want to use from your host. By default, it is bound in the container to /opt/openvidu/recordings /opt/openvidu/recordings V2COMPAT_OPENVIDU_PRO_RECORDING_STORAGE Where to store recording files. Can be 'local' (local storage) or 's3' (S3 compatible storage). local"},{"location":"docs/self-hosting/elastic/on-premises/admin/#starting-stopping-and-restarting-openvidu","title":"Starting, stopping, and restarting OpenVidu","text":"

For every OpenVidu node, a systemd service is created during the installation process. This service allows you to start, stop, and restart the OpenVidu services easily.

Start OpenVidu

sudo systemctl start openvidu\n

Stop OpenVidu

sudo systemctl stop openvidu\n

Restart OpenVidu

sudo systemctl restart openvidu\n
"},{"location":"docs/self-hosting/elastic/on-premises/admin/#checking-the-status-of-services","title":"Checking the status of services","text":"

You can check the status of the OpenVidu services using the following command:

cd /opt/openvidu/\ndocker compose ps\n

Depending on the node type, you will see different services running.

Master NodeMedia Node

The services are operating correctly if you see an output similar to the following and there are no restarts from any of the services:

NAME                       IMAGE                                              COMMAND                  SERVICE                    CREATED          STATUS\napp                        docker.io/openvidu/openvidu-call                   \"docker-entrypoint.s\u2026\"   app                        12 seconds ago   Up 10 seconds\ncaddy                      docker.io/openvidu/openvidu-pro-caddy              \"/bin/caddy run --co\u2026\"   caddy                      12 seconds ago   Up 10 seconds\ndashboard                  docker.io/openvidu/openvidu-pro-dashboard          \"./openvidu-dashboard\"   dashboard                  12 seconds ago   Up 10 seconds\ngrafana                    docker.io/grafana/grafana                          \"/run.sh\"                grafana                    11 seconds ago   Up 8 seconds\nloki                       docker.io/grafana/loki                             \"/usr/bin/loki -conf\u2026\"   loki                       11 seconds ago   Up 9 seconds\nmimir                      docker.io/grafana/mimir                            \"/bin/mimir -config.\u2026\"   mimir                      11 seconds ago   Up 9 seconds\nminio                      docker.io/bitnami/minio                            \"/opt/bitnami/script\u2026\"   minio                      11 seconds ago   Up 9 seconds\nmongo                      docker.io/mongo                                    \"docker-entrypoint.s\u2026\"   mongo                      11 seconds ago   Up 9 seconds\nopenvidu-v2compatibility   docker.io/openvidu/openvidu-v2compatibility        \"/bin/server\"            openvidu-v2compatibility   12 seconds ago   Up 10 seconds\noperator                   docker.io/openvidu/openvidu-operator               \"/bin/operator\"          operator                   12 seconds ago   Up 10 seconds\npromtail                   docker.io/grafana/promtail                         \"/usr/bin/promtail -\u2026\"   promtail                   11 seconds ago   Up 9 seconds\nredis                      docker.io/redis                                    \"docker-entrypoint.s\u2026\"   redis                      12 seconds ago   Up 10 seconds\n

The services are operating correctly if you see an output similar to the following and there are no restarts from any of the services:

NAME         IMAGE                                          COMMAND                  SERVICE      CREATED          STATUS\negress       docker.io/livekit/egress                       \"/entrypoint.sh\"         egress       53 seconds ago   Up 51 seconds\ningress      docker.io/livekit/ingress                      \"ingress\"                ingress      53 seconds ago   Up 52 seconds\nopenvidu     docker.io/openvidu/openvidu-server-pro         \"/livekit-server --c\u2026\"   openvidu     53 seconds ago   Up 52 seconds\nprometheus   docker.io/prom/prometheus                      \"/bin/prometheus --c\u2026\"   prometheus   53 seconds ago   Up 51 seconds\npromtail     docker.io/grafana/promtail                     \"/usr/bin/promtail -\u2026\"   promtail     53 seconds ago   Up 52 seconds\n
"},{"location":"docs/self-hosting/elastic/on-premises/admin/#checking-logs","title":"Checking logs","text":"

If any of the services are not working as expected, you can check the logs of the services using the following command:

cd /opt/openvidu/\ndocker compose logs <service-name>\n

Replace <service-name> with the name of the service you want to check. For example, to check the logs of the OpenVidu Server, use the following command:

cd /opt/openvidu/\ndocker compose logs openvidu\n

To check the logs of all services, use the following command:

cd /opt/openvidu/\ndocker compose logs\n

You can also review your logs using the Grafana dashboard provided with OpenVidu. To access it, go to https://<your-domain.com>/grafana and use the credentials located in /opt/openvidu/.env to log in. Once inside, navigate to the \"Home\" section, select \"Dashboard\", and then click on:

"},{"location":"docs/self-hosting/elastic/on-premises/admin/#adding-media-nodes","title":"Adding Media Nodes","text":"

To add a new Media Node, simply spin up a new VM and run the OpenVidu installer script to integrate it into the existing cluster. Run the installation command on the new Media Node.

Warning

This installation command should be the same as the one you used to install the first Media Node. Make sure to use the same parameters and values as the first Media Node. In case you've changed the .env file in the Master Node, you will need to update the .env file or update the installation command with the new values.

To automate the configuration of new nodes, check this section.

"},{"location":"docs/self-hosting/elastic/on-premises/admin/#removing-media-nodes-gracefully","title":"Removing Media Nodes Gracefully","text":"

To stop a Media Node gracefully, you need to stop the containers openvidu, ingress, and egress with a SIGINT signal. Here is a simple script that you can use to stop all these containers gracefully:

#!/bin/bash\n# Stop OpenVidu, Ingress, and Egress containers gracefully (1)\ndocker container kill --signal=SIGINT openvidu || true\ndocker container kill --signal=SIGINT ingress || true\ndocker container kill --signal=SIGINT egress || true\n\n# Wait for the containers to stop (2)\nwhile [ $(docker inspect -f '{{.State.Running}}' openvidu 2>/dev/null) == \"true\" ] || \\\n    [ $(docker inspect -f '{{.State.Running}}' ingress 2>/dev/null) == \"true\" ] || \\\n    [ $(docker inspect -f '{{.State.Running}}' egress 2>/dev/null) == \"true\" ]; do\n    echo \"Waiting for containers to stop...\"\n    sleep 5\ndone\n
  1. This script stops the OpenVidu, Ingress, and Egress containers gracefully. The true at the end of each command is to avoid the script from stopping if the container is not running.
  2. This script waits for the containers to stop before exiting.

When all the containers are stopped, you can then stop the systemd service and remove the VM:

sudo systemctl stop openvidu\n
"},{"location":"docs/self-hosting/elastic/on-premises/admin/#removing-media-nodes-forcefully","title":"Removing Media Nodes Forcefully","text":"

To remove a Media Node forcefully, without considering the rooms, ingress, and egress processes running in the node, you can simply stop the OpenVidu service in the Media Node and delete the VM.

sudo systemctl stop openvidu\n
"},{"location":"docs/self-hosting/elastic/on-premises/admin/#advanced-configuration","title":"Advanced Configuration","text":"

This section addresses advanced configuration scenarios for customizing your OpenVidu Elastic deployment. It includes automating the installation with personalized settings, enabling or disabling OpenVidu modules, and modifying global parameters such as the domain name, passwords, and API keys.

"},{"location":"docs/self-hosting/elastic/on-premises/admin/#automatic-installation-and-configuration-of-nodes","title":"Automatic installation and configuration of nodes","text":"

For environments like the cloud, where instances are frequently spun up and down, automating the application of custom configurations to Master Node and Media Nodes may be useful for you.

Master NodeMedia Node

If you need to apply custom configurations to the Master Node, you can use the following script template:

# 1. First install the Master Node (1)\nsh <(curl -fsSL http://get.openvidu.io/pro/elastic/latest/install_ov_master_node.sh) \\\n    --node-role='master-node' \\\n    ... # Add the rest of the arguments (2)\n\n# 2. Add custom configurations (3)\n######### APPLY CUSTOM CONFIGURATIONS #########\n# If you want to apply any modification to the configuration files\n# of the OpenVidu services at /opt/openvidu, you can do it in this section.\n\n# Example 1: Change Minio public port\nyq eval '.apps.http.servers.minio.listen[0] = \":9001\"' \\\n    -i /opt/openvidu/config/caddy.yaml\n\n# Example 2: Disable the /dashboard route in Caddy\nyq eval 'del(.apps.http.servers.public.routes[] | \\\n    select(.handle[]?.handler == \"subroute\" and \\\n    .handle[].routes[].handle[].strip_path_prefix == \"/dashboard\"))' \\\n    -i /opt/openvidu/config/caddy.yaml\n\n######### END CUSTOM CONFIGURATIONS #########\n\n# 3. Start OpenVidu (4)\nsystemctl start openvidu\n
  1. First, install the Master Node using the OpenVidu installer. Check the installation guide for more information.
  2. Add the parameters you need to install the Master Node. You can find all the available parameters in the installation guide.
  3. Add the custom configurations you need to apply to the Master Node services. You can use yq or other tools to modify the configuration files. You can find more information about yq here.
  4. Start the Master Node.

Note

In case you want to deploy a specific version, just replace latest with the desired version. For example: 3.0.0.

Just install the Master Node first with the installer and then run some extra commands to apply the custom configurations. This way, you can automate the process of installing the Master Node and applying custom configurations.

If you need to apply custom configurations to the Media Node, you can use the following script template:

# 1. First install the Media Node (1)\nsh <(curl -fsSL http://get.openvidu.io/pro/elastic/latest/install_ov_media_node.sh) \\\n    --node-role='media-node' \\\n    ... # Add the rest of the arguments (2)\n\n# 2. Add custom configurations (3)\n######### APPLY CUSTOM CONFIGURATIONS #########\n# If you want to apply any modification to the configuration files\n# of the OpenVidu services at /opt/openvidu, you can do it in this section.\n\n# Example 1: Change the public IP address announced by OpenVidu for WebRTC connections\nyq eval '.rtc.node_ip = 1.2.3.4' \\\n    -i /opt/openvidu/config/livekit.yaml\n\n# Example 2: Add a webhook to LiveKit\nyq eval '.webhook.urls += [\"http://new-endpoint.example.com/webhook\"]' \\\n    -i /opt/openvidu/config/livekit.yaml\n\n######### END CUSTOM CONFIGURATIONS #########\n\n# 3. Start OpenVidu (4)\nsystemctl start openvidu\n
  1. First, install the Media Node using the OpenVidu installer. Check the installation guide for more information.
  2. Add the parameters you need to install the Media Node. You can find all the available parameters in the installation guide.
  3. Add the custom configurations you need to apply to the Media Node services. You can use yq or other tools to modify the configuration files. You can find more information about yq here.
  4. Start the Media Node.

Note

In case you want to deploy a specific version, just replace latest with the desired version. For example: 3.0.0.

Just install the Media Node first with the installer and then run some extra commands to apply the custom configurations. This way, you can automate the process of installing the Media Node and applying custom configurations.

"},{"location":"docs/self-hosting/elastic/on-premises/admin/#enabling-and-disabling-openvidu-modules","title":"Enabling and Disabling OpenVidu Modules","text":"

The COMPOSE_PROFILES parameter in the .env file in Master and Media Nodes allows you to enable or disable specific modules in OpenVidu. The following modules can be enabled or disabled:

Observability moduleV2 Compatibility module (Default App)App module

In case you have installed OpenVidu with the observability module, you just need to enable the observability module in the .env file in all nodes.

Otherwise, you can follow these steps to enable the observability module:

  1. Stop the Master Node, all Media Nodes, and backup the deployment

    sudo systemctl stop openvidu\nsudo cp -r /opt/openvidu/ /opt/openvidu_backup/\n

  2. In the Master Node, update the .env with the following changes:

    Add to the COMPOSE_PROFILES the observability module. Also, make sure to set up the GRAFANA_ADMIN_USERNAME and GRAFANA_ADMIN_PASSWORD parameters.

    If you have only the observability module enabled, your .env file should have the following environment variables:

    GRAFANA_ADMIN_USERNAME=\"<GRAFANA_ADMIN_USERNAME>\"\nGRAFANA_ADMIN_PASSWORD=\"<GRAFANA_ADMIN_PASSWORD>\"\n\nCOMPOSE_PROFILES=\"observability\"\n

  3. In the Media Nodes, enable the observability module:

    Add to the COMPOSE_PROFILES the observability module in the .env file. If you have only the observability module enabled, your .env file should have the following environment variable:

    COMPOSE_PROFILES=\"observability\"\n

    Then, add the following parameter in the config/livekit.yaml file:

    prometheus_port: 6789\n

  4. Start all Master Nodes and Media Nodes

    sudo systemctl start openvidu\n

Disabling the observability module

If you have the observability module enabled and you want to disable it, just remove the observability module from the COMPOSE_PROFILES parameter in the .env file of all nodes.

In case you have installed OpenVidu with the app module, you just need to enable the app module in the .env file in all nodes.

Otherwise, you can follow these steps to enable the app module:

  1. Stop the Master Node, all Media Nodes, and backup the deployment

    sudo systemctl stop openvidu\nsudo cp -r /opt/openvidu/ /opt/openvidu_backup/\n

  2. In the Master Node, update the .env with the following changes:

    Add to the COMPOSE_PROFILES the v2compatibility module.

    If you have only the v2compatibility module enabled, your .env file should have the following environment variable:

    COMPOSE_PROFILES=\"v2compatibility\"\n

  3. In the Media Nodes, update the LiveKit configuration to send webhooks to the V2 Compatibility service

    Just add the following parameter in the config/livekit.yaml file:

    webhook:\n    api_key: \"<LIVEKIT_API_KEY>\"\n    urls:\n        - http://master-node:4443/livekit/webhook\n

    Where <LIVEKIT_API_KEY> is the LIVEKIT_API_KEY parameter in the .env file.

  4. Start all Master Nodes and Media Nodes

    sudo systemctl start openvidu\n

Disabling the app module

If you have the app module enabled and you want to disable it, just remove the app module from the COMPOSE_PROFILES parameter in the .env file of all nodes.

In case you have installed OpenVidu without the app module, you just need to enable the app module in the .env file in all nodes.

Otherwise, you can follow these steps to enable the app module:

  1. Stop the Master Node, all Media Nodes, and backup the deployment

    sudo systemctl stop openvidu\nsudo cp -r /opt/openvidu/ /opt/openvidu_backup/\n

  2. In the Master Node, update the .env with the following changes:

    Add to the COMPOSE_PROFILES the app module.

    If you have only the app module enabled, your .env file should have the following environment variable:

    COMPOSE_PROFILES=\"app\"\n

  3. In the Media Nodes, update the LiveKit configuration to send webhooks to the Default App

    Just add the following parameter in the config/livekit.yaml file:

    webhook:\n    api_key: \"<LIVEKIT_API_KEY>\"\n    urls:\n        - http://master-node:6080/api/webhook\n

    Where <LIVEKIT_API_KEY> is the LIVEKIT_API_KEY parameter in the .env file.

  4. Start all Master Nodes and Media Nodes

    sudo systemctl start openvidu\n

Disabling the app module

If you have the app module enabled and you want to disable it, just remove the app module from the COMPOSE_PROFILES parameter in the .env file of all nodes.

"},{"location":"docs/self-hosting/elastic/on-premises/admin/#global-configuration-changes","title":"Global configuration changes","text":"

Some configuration parameters may require modifying multiple configuration files. Below are some examples of advanced configurations and how to apply them:

Info

Usually, this is not needed because the installer takes care of generating all of this parameters. However, it is necessary if any password, credential, or domain change is needed.

Danger

Advanced configurations should be performed with caution. Incorrect configurations can lead to service failures or unexpected behavior.

Before making any changes, make sure to back up your installation by creating a snapshot of your server or by copying the /opt/openvidu/ directory to a safe location. For example:

sudo cp -r /opt/openvidu/ /opt/openvidu_backup/\n
Changing DOMAIN_OR_PUBLIC_IPChanging REDIS_PASSWORDChanging LIVEKIT_API_KEY and LIVEKIT_API_SECRETChanging MINIO_ACCESS_KEY and MINIO_SECRET_KEYChanging MONGO_ADMIN_USERNAME and MONGO_ADMIN_PASSWORD

To change all occurrences of the domain or public IP address in the configuration files, follow these steps:

  1. Stop OpenVidu in the Master Node and all Media Nodes and back up the deployment

    sudo systemctl stop openvidu\nsudo cp -r /opt/openvidu/ /opt/openvidu_backup/\n

  2. Find the current locations of DOMAIN_OR_PUBLIC_IP in your Master Node

    With the following commands, you can find all occurrences of the current domain or public IP address in the configuration files:

    sudo su\ncd /opt/openvidu/\nCURRENT_DOMAIN_OR_PUBLIC_IP=\"$(grep '^DOMAIN_OR_PUBLIC_IP' /opt/openvidu/.env | cut -d '=' -f 2)\"\ngrep --exclude-dir=data -IHnr \"$CURRENT_DOMAIN_OR_PUBLIC_IP\" .\n

    Warning

    Keep the value of CURRENT_DOMAIN_OR_PUBLIC_IP as you will need it to update the configuration files in the Media Nodes.

    Example output

    The output should look similar to the following:

    ./.env:DOMAIN_OR_PUBLIC_IP=<CURRENT_DOMAIN_OR_PUBLIC_IP>\n./config/caddy.yaml:        - certificate: /owncert/<CURRENT_DOMAIN_OR_PUBLIC_IP>.cert\n./config/caddy.yaml:          key: /owncert/<CURRENT_DOMAIN_OR_PUBLIC_IP>.key\n./config/caddy.yaml:            - <CURRENT_DOMAIN_OR_PUBLIC_IP>\n./config/caddy.yaml:                    - <CURRENT_DOMAIN_OR_PUBLIC_IP>\n./config/caddy.yaml:                        - <CURRENT_DOMAIN_OR_PUBLIC_IP>\n./config/caddy.yaml:                    - <CURRENT_DOMAIN_OR_PUBLIC_IP>\n./config/caddy.yaml:                        - <CURRENT_DOMAIN_OR_PUBLIC_IP>\n./config/caddy.yaml:                  - <CURRENT_DOMAIN_OR_PUBLIC_IP>\n./config/promtail.yaml:          cluster_id: <CURRENT_DOMAIN_OR_PUBLIC_IP>\n

    Note

    Don't worry if some values are different in your output. It varies depending on the parameters you've used to install OpenVidu.

  3. Update the Following Files in your Master Node

    Based on the output from the previous step, update the following files with the new domain or public IP address:

  4. Verify the changes in your Master Node

    These commands will list all occurrences of the new DOMAIN_OR_PUBLIC_IP in the configuration files. The output should match the locations found in the initial search but with the new domain or public IP address.

    sudo su\ncd /opt/openvidu/\nNEW_DOMAIN_OR_PUBLIC_IP=\"<NEW_DOMAIN_OR_PUBLIC_IP>\"\ngrep --exclude-dir=data -IHnr \"$NEW_DOMAIN_OR_PUBLIC_IP\" .\n

  5. Find the current locations of CURRENT_DOMAIN_OR_PUBLIC_IP in your Media Nodes

    With the CURRENT_DOMAIN_OR_PUBLIC_IP value obtained in step 2, you can find all occurrences of the current domain or public IP address in the configuration files of the Media Nodes. To do this, connect to each Media Node and run the following command:

    sudo su\ncd /opt/openvidu/\nCURRENT_DOMAIN_OR_PUBLIC_IP=\"<CURRENT_DOMAIN_OR_PUBLIC_IP>\"\ngrep --exclude-dir=data -IHnr \"$CURRENT_DOMAIN_OR_PUBLIC_IP\" .\n
    Example output

    The output should look similar to the following:

    ./config/promtail.yaml:          cluster_id: <CURRENT_DOMAIN_OR_PUBLIC_IP>\n./config/livekit.yaml:    cluster_id: <CURRENT_DOMAIN_OR_PUBLIC_IP>\n./config/livekit.yaml:    rtmp_base_url: rtmps://<CURRENT_DOMAIN_OR_PUBLIC_IP>:1935/rtmp\n./config/livekit.yaml:    whip_base_url: https://<CURRENT_DOMAIN_OR_PUBLIC_IP>/whip\n

  6. Update the Following Files in your Media Nodes

    Based on the output from the previous step, update the following files with the new domain or public IP address:

  7. Verify the changes in your Media Nodes

    These commands will list all occurrences of the new DOMAIN_OR_PUBLIC_IP in the configuration files of the Media Nodes. The output should match the locations found in the initial search but with the new domain or public IP address.

    sudo su\ncd /opt/openvidu/\nNEW_DOMAIN_OR_PUBLIC_IP=\"<NEW_DOMAIN_OR_PUBLIC_IP>\"\ngrep --exclude-dir=data -IHnr \"$NEW_DOMAIN_OR_PUBLIC_IP\" .\n

  8. Ensure to follow from step 5 to 7 for all your Media Nodes

  9. Start all Master Nodes and Media Nodes

    sudo systemctl start openvidu\n

Some notes on changing the DOMAIN_OR_PUBLIC_IP parameter:

To change the REDIS_PASSWORD parameter, follow these steps:

  1. Stop OpenVidu in the Master Node and all Media Nodes and back up the deployment

    sudo systemctl stop openvidu\nsudo cp -r /opt/openvidu/ /opt/openvidu_backup/\n

  2. Replace at the Master Node the REDIS_PASSWORD in the .env file with your new value

    Warning

    Keep the previous value of REDIS_PASSWORD as you will need it to update the configuration files in the Media Nodes. We will refer to this value as <CURRENT_REDIS_PASSWORD>.

  3. Find the current locations of REDIS_PASSWORD in your Media Nodes

    With the CURRENT_REDIS_PASSWORD value obtained in step 2, you can find all occurrences of the current Redis password in the configuration files of the Media Nodes. To do this, connect to each Media Node and run the following command:

    sudo su\ncd /opt/openvidu/\nCURRENT_REDIS_PASSWORD=\"<CURRENT_REDIS_PASSWORD>\"\ngrep --exclude-dir=data -IHnr \"$CURRENT_REDIS_PASSWORD\" .\n
    Example output

    The output should look similar to the following:

    ./config/egress.yaml:    password: <CURRENT_REDIS_PASSWORD>\n./config/ingress.yaml:    password: <CURRENT_REDIS_PASSWORD>\n./config/livekit.yaml:    password: <CURRENT_REDIS_PASSWORD>\n

  4. Update the Following Files in your Media Nodes

    Based on the output from the previous step, update the following files with the new Redis password:

  5. Verify the changes in your Media Nodes

    These commands will list all occurrences of the new REDIS_PASSWORD in the configuration files of the Media Nodes. The output should match the locations found in the initial search but with the new Redis password.

    sudo su\ncd /opt/openvidu/\nNEW_REDIS_PASSWORD=\"<NEW_REDIS_PASSWORD>\"\ngrep --exclude-dir=data -IHnr \"$NEW_REDIS_PASSWORD\" .\n

  6. Ensure to follow from step 3 to 5 for all your Media Nodes

  7. Start all Master Nodes and Media Nodes

    sudo systemctl start openvidu\n

To change the LIVEKIT_API_KEY and LIVEKIT_API_SECRET parameters, follow these steps:

  1. Stop OpenVidu in the Master Node and all Media Nodes and back up the deployment

    sudo systemctl stop openvidu\nsudo cp -r /opt/openvidu/ /opt/openvidu_backup/\n

  2. Replace at the Master Node the LIVEKIT_API_KEY and LIVEKIT_API_SECRET in the .env file with your new values

    Warning

    Keep the previous values of LIVEKIT_API_KEY and LIVEKIT_API_SECRET as you will need them to update the configuration files in the Media Nodes. We will refer to these values as <CURRENT_LIVEKIT_API_KEY> and <CURRENT_LIVEKIT_API_SECRET>.

  3. Find the current locations of LIVEKIT_API_KEY and LIVEKIT_API_SECRET in your Media Nodes

    With the CURRENT_LIVEKIT_API_KEY and CURRENT_LIVEKIT_API_SECRET values obtained in step 2, you can find all occurrences of the current LiveKit API key and secret in the configuration files of the Media Nodes. To do this, connect to each Media Node and run the following command:

    sudo su\ncd /opt/openvidu/\nCURRENT_LIVEKIT_API_KEY=\"<CURRENT_LIVEKIT_API_KEY>\"\nCURRENT_LIVEKIT_API_SECRET=\"<CURRENT_LIVEKIT_API_SECRET>\"\ngrep --exclude-dir=data -IHnr \"$CURRENT_LIVEKIT_API_KEY\" .\ngrep --exclude-dir=data -IHnr \"$CURRENT_LIVEKIT_API_SECRET\" .\n
    Example output

    The output should look similar to the following for LIVEKIT_API_KEY:

    ./config/egress.yaml:api_key: <CURRENT_LIVEKIT_API_KEY>\n./config/ingress.yaml:api_key: <CURRENT_LIVEKIT_API_KEY>\n./config/livekit.yaml:    <CURRENT_LIVEKIT_API_KEY>: <CURRENT_LIVEKIT_API_SECRET>\n./config/livekit.yaml:    api_key: <CURRENT_LIVEKIT_API_KEY>\n

    And for LIVEKIT_API_SECRET:

    ./config/egress.yaml:8:api_secret: <CURRENT_LIVEKIT_API_SECRET>\n./config/ingress.yaml:8:api_secret: <CURRENT_LIVEKIT_API_SECRET>\n./config/livekit.yaml:48:    <CURRENT_LIVEKIT_API_KEY>: <CURRENT_LIVEKIT_API_SECRET>\n

  4. Update the Following Files in your Media Nodes

    Based on the output from the previous step, update the following files with the new values:

  5. Verify the changes in your Media Nodes

    These commands will list all occurrences of the new LIVEKIT_API_KEY and LIVEKIT_API_SECRET in the configuration files of the Media Nodes. The output should match the locations found in the initial search but with the new values.

    sudo su\ncd /opt/openvidu/\nNEW_LIVEKIT_API_KEY=\"<NEW_LIVEKIT_API_KEY>\"\nNEW_LIVEKIT_API_SECRET=\"<NEW_LIVEKIT_API_SECRET>\"\ngrep --exclude-dir=data -IHnr \"$NEW_LIVEKIT_API_KEY\" .\ngrep --exclude-dir=data -IHnr \"$NEW_LIVEKIT_API_SECRET\" .\n

  6. Ensure to follow from step 3 to 5 for all your Media Nodes

  7. Start all Master Nodes and Media Nodes

    sudo systemctl start openvidu\n

To change the MINIO_ACCESS_KEY and MINIO_SECRET_KEY parameters, follow these steps:

  1. Stop OpenVidu in the Master Node and all Media Nodes and back up the deployment

    sudo systemctl stop openvidu\nsudo cp -r /opt/openvidu/ /opt/openvidu_backup/\n

  2. Replace at the Master Node the MINIO_ACCESS_KEY and MINIO_SECRET_KEY in the .env file with your new values

    Take into account that if you are using the v2compatibility module in COMPOSE_PROFILES, you will need to change the V2COMPAT_OPENVIDU_PRO_AWS_ACCESS_KEY and V2COMPAT_OPENVIDU_PRO_AWS_SECRET_KEY parameters in the .env file.

    Warning

    Keep the previous values of MINIO_ACCESS_KEY and MINIO_SECRET_KEY as you will need them to update the configuration files in the Media Nodes. We will refer to these values as <CURRENT_MINIO_ACCESS_KEY> and <CURRENT_MINIO_SECRET_KEY>.

  3. Find the current locations of MINIO_ACCESS_KEY and MINIO_SECRET_KEY in your Media Nodes

    With the CURRENT_MINIO_ACCESS_KEY and CURRENT_MINIO_SECRET_KEY values obtained in step 2, you can find all occurrences of the current MinIO access key and secret in the configuration files of the Media Nodes. To do this, connect to each Media Node and run the following command:

    sudo su\ncd /opt/openvidu/\nCURRENT_MINIO_ACCESS_KEY=\"<CURRENT_MINIO_ACCESS_KEY>\"\nCURRENT_MINIO_SECRET_KEY=\"<CURRENT_MINIO_SECRET_KEY>\"\ngrep --exclude-dir=data -IHnr \"$CURRENT_MINIO_ACCESS_KEY\" .\ngrep --exclude-dir=data -IHnr \"$CURRENT_MINIO_SECRET_KEY\" .\n
    Example output

    The output should look similar to the following for MINIO_ACCESS_KEY:

    ./config/egress.yaml:    access_key: <CURRENT_MINIO_ACCESS_KEY>\n

    And for MINIO_SECRET_KEY:

    ./config/egress.yaml:    secret: <CURRENT_MINIO_SECRET_KEY>\n

  4. Update the Following Files in your Media Nodes

    Based on the output from the previous step, update the following files with the new values:

  5. Verify the changes in your Media Nodes

    These commands will list all occurrences of the new MINIO_ACCESS_KEY and MINIO_SECRET_KEY in the configuration files of the Media Nodes. The output should match the locations found in the initial search but with the new values.

    sudo su\ncd /opt/openvidu/\nNEW_MINIO_ACCESS_KEY=\"<NEW_MINIO_ACCESS_KEY>\"\nNEW_MINIO_SECRET_KEY=\"<NEW_MINIO_SECRET_KEY>\"\ngrep --exclude-dir=data -IHnr \"$NEW_MINIO_ACCESS_KEY\" .\ngrep --exclude-dir=data -IHnr \"$NEW_MINIO_SECRET_KEY\" .\n

  6. Ensure to follow from step 3 to 5 for all your Media Nodes

  7. Start all Master Nodes and Media Nodes

    sudo systemctl start openvidu\n

To change the MONGO_ADMIN_USERNAME and MONGO_ADMIN_PASSWORD parameters, follow these steps:

  1. Stop OpenVidu in the Master Node and all Media Nodes and back up the deployment

    sudo systemctl stop openvidu\nsudo cp -r /opt/openvidu/ /opt/openvidu_backup/\n

  2. Replace at the Master Node the MONGO_ADMIN_USERNAME and MONGO_ADMIN_PASSWORD in the .env file with your new values

    Warning

    Keep the previous values of MONGO_ADMIN_USERNAME and MONGO_ADMIN_PASSWORD as you will need them to update the configuration files in the Media Nodes. We will refer to these values as <CURRENT_MONGO_ADMIN_USERNAME> and <CURRENT_MONGO_ADMIN_PASSWORD>.

  3. Find the current locations of MONGO_ADMIN_USERNAME and MONGO_ADMIN_PASSWORD in your Media Nodes

    With the CURRENT_MONGO_ADMIN_USERNAME and CURRENT_MONGO_ADMIN_PASSWORD values obtained in step 2, you can find all occurrences of the current MongoDB admin username and password in the configuration files of the Media Nodes. To do this, connect to each Media Node and run the following command:

    sudo su\ncd /opt/openvidu/\nCURRENT_MONGO_ADMIN_USERNAME=\"<CURRENT_MONGO_ADMIN_USERNAME>\"\nCURRENT_MONGO_ADMIN_PASSWORD=\"<CURRENT_MONGO_ADMIN_PASSWORD>\"\ngrep --exclude-dir=data -IHnr \"$CURRENT_MONGO_ADMIN_USERNAME\" .\ngrep --exclude-dir=data -IHnr \"$CURRENT_MONGO_ADMIN_PASSWORD\" .\n
    Example output

    The output should look similar to the following for MONGO_ADMIN_USERNAME:

    ./config/livekit.yaml:        mongo_url: mongodb://<CURRENT_MONGO_ADMIN_USERNAME>:<CURRENT_MONGO_ADMIN_PASSWORD>@master-node:20000\n

    And for MONGO_ADMIN_PASSWORD:

    ./config/livekit.yaml:        mongo_url: mongodb://<CURRENT_MONGO_ADMIN_USERNAME>:<CURRENT_MONGO_ADMIN_PASSWORD>@master-node:20000\n

  4. Update the Following Files in your Media Nodes

    Based on the output from the previous step, update the following files with the new values:

  5. Verify the changes in your Media Nodes

    These commands will list all occurrences of the new MONGO_ADMIN_USERNAME and MONGO_ADMIN_PASSWORD in the configuration files of the Media Nodes. The output should match the locations found in the initial search but with the new values.

    sudo su\ncd /opt/openvidu/\nNEW_MONGO_ADMIN_USERNAME=\"<NEW_MONGO_ADMIN_USERNAME>\"\nNEW_MONGO_ADMIN_PASSWORD=\"<NEW_MONGO_ADMIN_PASSWORD>\"\ngrep --exclude-dir=data -IHnr \"$NEW_MONGO_ADMIN_USERNAME\" .\ngrep --exclude-dir=data -IHnr \"$NEW_MONGO_ADMIN_PASSWORD\" .\n

  6. Ensure to follow from step 3 to 5 for all your Media Nodes

  7. Start all Master Nodes and Media Nodes

    sudo systemctl start openvidu\n
"},{"location":"docs/self-hosting/elastic/on-premises/admin/#uninstalling-openvidu","title":"Uninstalling OpenVidu","text":"

To uninstall any OpenVidu Node, just execute the following commands:

sudo su\nsystemctl stop openvidu\nrm -rf /opt/openvidu/\nrm /etc/systemd/system/openvidu.service\n
"},{"location":"docs/self-hosting/elastic/on-premises/install/","title":"OpenVidu Elastic Installation: On-premises","text":"

Info

OpenVidu Elastic is part of OpenVidu PRO. Before deploying, you need to create an OpenVidu account to get your license key. There's a 15-day free trial waiting for you!

This section contains the instructions to deploy a production-ready OpenVidu Elastic deployment on-premises. The deployment requires one Master Node and any number of Media Nodes. Media Nodes are elastic and can be scaled up and down according to the workload.

Architecture overview

This is how the architecture of the deployment looks like:

OpenVidu Elastic On Premises

For the Master Node, the following services are configured:

For the Media Nodes, the following services are configured:

"},{"location":"docs/self-hosting/elastic/on-premises/install/#prerequisites","title":"Prerequisites","text":""},{"location":"docs/self-hosting/elastic/on-premises/install/#port-rules-master-node","title":"Port rules (Master Node)","text":"

Ensure all these rules are configured in your firewall, security group, or any kind of network configuration that you have in your Master Node.

Inbound port rules:

Protocol Ports Source Description TCP 80 0.0.0.0/0, ::/0 Redirect HTTP traffic to HTTPS and Let's Encrypt validation. TCP 443 0.0.0.0/0, ::/0 Allows access to the following: TCP 1935 0.0.0.0/0, ::/0 (Optional), only needed if you want to ingest RTMP streams using Ingress service. TCP 9000 0.0.0.0/0, ::/0 (Optional), only needed if you want to expose MinIO publicly. TCP 4443 Media Nodes (Optional. Only needed when 'OpenVidu v2 Compatibility' module is used) Media Nodes need access to this port to reach OpenVidu V2 compatibility service TCP 6080 Media Nodes (Optional. Only needed when 'Default App' module is used) Media Nodes need access to this port to reach OpenVidu Call (Default Application). TCP 3100 Media Nodes (Optional. Only needed when 'Observability' module is used) Media Nodes need access to this port to reach Loki. TCP 9009 Media Nodes (Optional. Only needed when 'Observability' module is used) Media Nodes need access to this port to reach Mimir. TCP 7000 Media Nodes Media Nodes need access to this port to reach Redis Service. TCP 9100 Media Nodes Media Nodes need access to this port to reach MinIO. TCP 20000 Media Nodes Media Nodes need access to this port to reach MongoDB.

Outbound port rules:

Typically, all outbound traffic is allowed.

"},{"location":"docs/self-hosting/elastic/on-premises/install/#port-rules-media-nodes","title":"Port rules (Media Nodes)","text":"

Ensure all these rules are configured in your firewall, security group, or any kind of network configuration that you have in your Media Nodes:

Inbound port rules:

Protocol Ports Source Description UDP 443 0.0.0.0/0, ::/0 STUN/TURN over UDP. TCP 7881 0.0.0.0/0, ::/0 (Optional). Only needed if you want to allow WebRTC over TCP. UDP 7885 0.0.0.0/0, ::/0 (Optional). Only needed if you want to ingest WebRTC using WHIP. UDP 50000-60000 0.0.0.0/0, ::/0 WebRTC Media traffic. TCP 1935 Master Node (Optional). Only needed if you want to ingest RTMP streams using Ingress service. Master Node needs access to this port to reach Ingress RTMP service and expose it using TLS (RTMPS). TCP 5349 Master Node (Optional). Only needed if you want to expose TURN service with TLS. Master Node needs access to this port to reach TURN service and expose it using TLS (TURNS). TCP 7880 Master Node LiveKit API. Master Node needs access to load balance LiveKit API and expose it through HTTPS. TCP 8080 Master Node (Optional). Only needed if you want to ingest WebRTC streams using WHIP. Master Node needs access to this port to reach WHIP HTTP service."},{"location":"docs/self-hosting/elastic/on-premises/install/#guided-installation","title":"Guided Installation","text":"

Before the installation, ensure that all your machines meet the prerequisites and the port rules for the Master Node and Media Nodes are correctly configured.

To install OpenVidu Elastic, begin by generating the commands required for setting up all nodes in the cluster. This is a simple and straightforward process; simply run the following command on any machine that has Docker installed:

docker run -it openvidu/openvidu-installer:latest \\\n    --deployment-type=elastic\n

Note

In case you want to deploy a specific version, just replace latest with the desired version. For example: 3.0.0.

A wizard will guide you through the installation process. You will be asked for the following information:

Info

If you don't have a license key for OpenVidu PRO, you can get a 15-day free trial license key by creating an OpenVidu account.

The rest of the parameters are secrets, usernames, and passwords. If empty, the wizard will generate random values for them.

This command will output the following instructions, which you should follow:

  1. Firewall Configuration for 'Master Node': These rules are the same as those specified in the instructions. Depending on the modules you have selected, some rules defined at Port rules (Master Node) may not appear (Optional ports). Double-check and modify it if you see something that can be enabled/disabled in your current port rules.

  2. Installation Commands for 'Master Node': This is the command needed to install your Master Node. It should look like this:

    sh <(curl -fsSL http://get.openvidu.io/pro/elastic/latest/install_ov_master_node.sh) \\\n    --no-tty --install \\\n    --deployment-type='elastic' \\\n    --node-role='master-node' \\\n...\n

    Note

    In case you want to deploy a specific version, just replace latest with the desired version. For example: 3.0.0.

    Execute that command in your Master Node to install it. When the installation process finishes, you will see the following output:

    > - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - <\n>                                                                             <\n>  \ud83c\udf89 OpenVidu Elastic 'Master Node' Installation Finished Successfully! \ud83c\udf89   <\n>                                                                             <\n> - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - <\n

    The Master Node will be installed at /opt/openvidu and configured as a systemd service. You can start the service with the following command:

    systemctl start openvidu\n

  3. Firewall Configuration for 'Media Nodes': These rules are the same as those defined previously as with the Master Node. Double-check the Port rules (Media Nodes) and modify them if you see something that can be enabled/disabled in your current port rules.

  4. Installation Commands for 'Media Nodes': This is the command needed to install your Media Nodes. It should look like this:

    sh <(curl -fsSL http://get.openvidu.io/pro/elastic/latest/install_ov_media_node.sh) \\\n    --no-tty --install \\\n    --deployment-type='elastic' \\\n    --node-role='media-node' \\\n...\n

    Note

    In case you want to deploy a specific version, just replace latest with the desired version. For example: 3.0.0.

    Execute that command on your Media Nodes to install them. When the installation process finishes, you will see the following output:

    > - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - <\n>                                                                             <\n>  \ud83c\udf89 OpenVidu Elastic 'Media Node' Installation Finished Successfully! \ud83c\udf89    <\n>                                                                             <\n> - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - <\n

    The Media Node in each machine will be installed at /opt/openvidu and configured as a systemd service. You can start the service with the following command:

    systemctl start openvidu\n

If everything goes well, all containers will be up and running without restarts, and you will be able to access any of the following services:

OpenVidu Server PRO URL (LiveKit compatible) will be available also in:

"},{"location":"docs/self-hosting/elastic/on-premises/install/#configure-your-application-to-use-the-deployment","title":"Configure your Application to use the Deployment","text":"

To point your applications to your OpenVidu deployment, check the file at /opt/openvidu/.env. All access credentials for all services are defined in this file.

Your authentication credentials and URL to point your applications would be:

"},{"location":"docs/self-hosting/elastic/on-premises/install/#non-interactive-installation","title":"Non-interactive installation","text":"

To automate the installation process, you just need to execute the specified command in the Guided Installation section and execute the generated commands.

Each installation command for each type of node looks like this:

Master NodeMedia Node

The Master Node can be configured with multiple kinds of certificates. Here are the examples for each type of certificate:

Let's Encrypt certificatesSelf-signed certificatesCustom certificates

Example using Let's Encrypt certificates:

sh <(curl -fsSL http://get.openvidu.io/pro/elastic/latest/install_ov_master_node.sh) \\\n    --node-role='master-node' \\\n    --openvidu-pro-license='xxxxx' \\\n    --domain-name-or-ip='openvidu.example.io' \\\n    --enabled-modules='observability,v2compatibility,app' \\\n    --turn-domain-name='turn.example.io' \\\n    --livekit-api-key='xxxxx' \\\n    --livekit-api-secret='xxxxx' \\\n    --dashboard-admin-user='xxxxx' \\\n    --dashboard-admin-password='xxxxx' \\\n    --redis-password='xxxxx' \\\n    --minio-access-key='xxxxx' \\\n    --minio-secret-key='xxxxx' \\\n    --mongo-admin-user='xxxxx' \\\n    --mongo-admin-password='xxxxx' \\\n    --grafana-admin-user='xxxxx' \\\n    --grafana-admin-password='xxxxx' \\\n    --default-app-user='xxxxx' \\\n    --default-app-password='xxxxx' \\\n    --default-app-admin-user='xxxxx' \\\n    --default-app-admin-password='xxxxx' \\\n    --private-ip='1.2.3.4' \\\n    --certificate-type='letsencrypt' \\\n    --letsencrypt-email='example@example.io'\n

Note

In case you want to deploy a specific version, just replace latest with the desired version. For example: 3.0.0.

Notes:

Example using self-signed certificates:

sh <(curl -fsSL http://get.openvidu.io/pro/elastic/latest/install_ov_master_node.sh) \\\n    --node-role='master-node' \\\n    --openvidu-pro-license='xxxxx' \\\n    --domain-name-or-ip='openvidu.example.io' \\\n    --enabled-modules='observability,v2compatibility,app' \\\n    --turn-domain-name='turn.example.io' \\\n    --livekit-api-key='xxxxx' \\\n    --livekit-api-secret='xxxxx' \\\n    --dashboard-admin-user='xxxxx' \\\n    --dashboard-admin-password='xxxxx' \\\n    --redis-password='xxxxx' \\\n    --minio-access-key='xxxxx' \\\n    --minio-secret-key='xxxxx' \\\n    --mongo-admin-user='xxxxx' \\\n    --mongo-admin-password='xxxxx' \\\n    --grafana-admin-user='xxxxx' \\\n    --grafana-admin-password='xxxxx' \\\n    --default-app-user='xxxxx' \\\n    --default-app-password='xxxxx' \\\n    --default-app-admin-user='xxxxx' \\\n    --default-app-admin-password='xxxxx' \\\n    --private-ip='1.2.3.4' \\\n    --certificate-type='selfsigned'\n

Note

In case you want to deploy a specific version, just replace latest with the desired version. For example: 3.0.0.

Example using custom certificates:

CERT_PRIVATE_KEY=$(cat privkey.pem | base64 -w 0)\nCERT_PUBLIC_KEY=$(cat fullchain.pem | base64 -w 0)\n\n# Optional, only if you want to enable TURN with TLS\nCERT_TURN_PRIVATE_KEY=$(cat turn-privkey.pem | base64 -w 0)\nCERT_TURN_PUBLIC_KEY=$(cat turn-fullchain.pem | base64 -w 0)\n\nsh <(curl -fsSL http://get.openvidu.io/pro/elastic/latest/install_ov_master_node.sh) \\\n    --node-role='master-node' \\\n    --openvidu-pro-license='xxxxx' \\\n    --domain-name-or-ip='openvidu.example.io' \\\n    --enabled-modules='observability,v2compatibility,app' \\\n    --turn-domain-name='turn.example.io' \\\n    --livekit-api-key='xxxxx' \\\n    --livekit-api-secret='xxxxx' \\\n    --dashboard-admin-user='xxxxx' \\\n    --dashboard-admin-password='xxxxx' \\\n    --redis-password='xxxxx' \\\n    --minio-access-key='xxxxx' \\\n    --minio-secret-key='xxxxx' \\\n    --mongo-admin-user='xxxxx' \\\n    --mongo-admin-password='xxxxx' \\\n    --grafana-admin-user='xxxxx' \\\n    --grafana-admin-password='xxxxx' \\\n    --default-app-user='xxxxx' \\\n    --default-app-password='xxxxx' \\\n    --default-app-admin-user='xxxxx' \\\n    --default-app-admin-password='xxxxx' \\\n    --private-ip='1.2.3.4' \\\n    --certificate-type='owncert' \\\n    --owncert-private-key=\"$CERT_PRIVATE_KEY\" \\\n    --owncert-public-key=\"$CERT_PUBLIC_KEY\" \\\n    --turn-owncert-private-key=\"$CERT_TURN_PRIVATE_KEY\" \\\n    --turn-owncert-public-key=\"$CERT_TURN_PUBLIC_KEY\"\n

Note

In case you want to deploy a specific version, just replace latest with the desired version. For example: 3.0.0.

To install a Media Node, you can use the following command:

sh <(curl -fsSL http://get.openvidu.io/pro/elastic/latest/install_ov_media_node.sh) \\\n    --node-role='media-node' \\\n    --openvidu-pro-license='xxxxx' \\\n    --domain-name-or-ip='openvidu.example.io' \\\n    --rtc-engine='pion' \\\n    --enabled-modules='observability,v2compatibility,app' \\\n    --turn-domain-name='turn.example.io' \\\n    --livekit-api-key='xxxxx' \\\n    --livekit-api-secret='xxxxx' \\\n    --master-node-private-ip='1.2.3.4' \\\n    --redis-password='xxxxx' \\\n    --minio-access-key='xxxxx' \\\n    --minio-secret-key='xxxxx' \\\n    --mongo-admin-user='xxxxx' \\\n    --mongo-admin-password='xxxxx'\n

Note

In case you want to deploy a specific version, just replace latest with the desired version. For example: 3.0.0.

You can run these commands in a CI/CD pipeline or in a script to automate the installation process.

Some notes about all commands:

To start each node, remember to execute the following command in each node:

systemctl start openvidu\n
"},{"location":"docs/self-hosting/elastic/on-premises/install/#configuration-and-administration","title":"Configuration and administration","text":"

Once you have OpenVidu deployed, you can check the Configuration and Administration section to learn how to manage your OpenVidu Elastic deployment.

"},{"location":"docs/self-hosting/ha/","title":"OpenVidu High Availability Installation","text":"

OpenVidu High Availability is part of the PRO edition of OpenVidu. You have the following deployment options:

Once your deployment is complete, refer to the following sections for configuration and management:

"},{"location":"docs/self-hosting/ha/aws/admin/","title":"OpenVidu High Availability: AWS Configuration and Administration","text":"

The deployment of OpenVidu High Availability on AWS is automated using AWS CloudFormation, with Master and Media Nodes managed within an Auto Scaling Group. The Auto Scaling Group of Master Nodes is fixed to 4 instances while the Auto Scaling Group of Media Nodes is configured to scale based on the target average CPU utilization.

Internally, the AWS deployment mirrors the on-premises setup, allowing you to follow the same administration and configuration guidelines provided in the On Premises High Availability documentation. However, there are specific considerations unique to the AWS environment that are worth taking into account.

"},{"location":"docs/self-hosting/ha/aws/admin/#cluster-shutdown-and-startup","title":"Cluster Shutdown and Startup","text":"

You can start and stop the OpenVidu High Availability cluster at any time. The following sections detail the procedures.

Shutdown the ClusterStartup the Cluster

To shut down the cluster, you need to stop the Media Nodes first and then stop the Master Nodes; this way, any ongoing session will not be interrupted.

  1. Navigate to the CloudFormation Dashboard on AWS.
  2. Select the CloudFormation Stack that you used to deploy OpenVidu High Availability.
  3. In the \"Resources\" tab, locate the resource with the logical ID: OpenViduMediaNodeASG, and click on it to go to the Auto Scaling Group Dashboard with the Auto Scaling Group of the Media Nodes selected.
  4. Click on \"Actions > Edit\".
  5. Set the \"Desired capacity\", \"Min desired capacity\", and \"Max desired capacity\" to 0, and click on \"Update\".

  6. Wait until the \"Instance Management\" tab shows that there are no instances in the Auto Scaling Group.

    Warning

    It may happen that some instances are still in the \"Terminating:Wait\" lifecycle state after setting the desired capacity to 0. This is because the Auto Scaling Group waits for the instances to finish processing any ongoing room, ingress, or egress operations before terminating them. This can take a few minutes. If you want to force the termination of the instances, you can manually terminate them from the EC2 Dashboard.

  7. After confirming that all Media Node instances are terminated, go back to the CloudFormation Stack and locate the resource with the logical ID: OpenViduMasterNodeASG. Click on it to go to the Auto Scaling Group Dashboard with the Auto Scaling Group of the Master Nodes selected.

  8. Click on \"Actions > Edit\".
  9. Set the \"Desired capacity\", \"Min desired capacity\", and \"Max desired capacity\" to 0, and click on \"Update\".
  10. Wait until the \"Instance Management\" tab shows that there are no instances in the Auto Scaling Group.

To start the cluster, we recommend starting the Master Node first and then the Media Nodes.

  1. Navigate to the CloudFormation Dashboard on AWS.
  2. Select the CloudFormation Stack that you used to deploy OpenVidu High Availability.
  3. Locate the resource with the logical ID: OpenViduMasterNodeASG. Click on it to go to the Auto Scaling Group Dashboard with the Auto Scaling Group of the Master Nodes selected.
  4. Click on \"Actions > Edit\".
  5. Set the \"Desired capacity\", \"Min desired capacity\", and \"Max desired capacity\" to the desired number of Media Nodes, and click on \"Update\". For the Master Nodes auto scaling group, the number of instances must be 4.
  6. Wait until the \"Instance Management\" tab shows that there are the desired number of instances in the Auto Scaling Group.
  7. Go back to the CloudFormation Stack and locate the resource with the logical ID: OpenViduMediaNodeASG. Click on it to go to the Auto Scaling Group Dashboard with the Auto Scaling Group of the Media Nodes selected.
  8. Click on \"Actions > Edit\".
  9. Set the \"Desired capacity\", \"Min desired capacity\", and \"Max desired capacity\" to the desired number of Media Nodes, and click on \"Update\". In this example, we set the desired capacity to 2.
  10. Wait until the \"Instance Management\" tab shows that there are the desired number of instances in the Auto Scaling Group.
"},{"location":"docs/self-hosting/ha/aws/admin/#change-the-instance-type","title":"Change the instance type","text":"

It is possible to change the instance type of both the Master Node and the Media Nodes. The following section details the procedures.

Master NodesMedia Nodes

Warning

This procedure requires downtime, as it involves stopping all the Master Nodes and starting them again with the new instance type.

  1. Go to the CloudFormation Dashboard on AWS.
  2. Select the CloudFormation Stack that you used to deploy OpenVidu High Availability.
  3. Locate the resource with the logical ID: OpenViduMasterLaunchTemplate. Click on it to go to the Launch Template Dashboard with the Launch Template of the Master Nodes selected.
  4. Click on \"Actions > Modify template (Create new version)\".
  5. In the \"Instance type\" section, select the new instance type and click on \"Create template version\".
  6. Go to the CloudFormation Stack and locate the resource with the logical ID: OpenViduMasterNodeASG. Click on it to go to the Auto Scaling Group Dashboard with the Auto Scaling Group of the Master Nodes selected.
  7. Click on \"Actions > Edit\".

  8. In the Launch Template section, select the new version of the launch template we just created at step 5 which is the highest version number.

    Then, click on \"Update\".

    Info

    By configuring \"Latest\" as the launch template version, you no longer need to update the Auto Scaling Group every time you modify the launch template. The Auto Scaling Group will automatically use the latest version of the launch template.

  9. Terminate the old instances manually from the EC2 Dashboard if you want to force the termination of the instances. New instances will be launched with the new instance type.

    Info

    The information at /opt/openvidu is persisted as AWS Elastic Block Store (EBS) volumes. When you terminate an instance, the EBS volume is detached and preserved. When the Auto Scaling Group launches a new instance, the EC2 instance is attached to the EBS volume, and the data is retained. This means that the data stored in the /opt/openvidu directory is not lost when you terminate an instance.

  1. Go to the CloudFormation Dashboard on AWS.
  2. Select the CloudFormation Stack that you used to deploy OpenVidu High Availability.
  3. Locate the resource with the logical ID: OpenViduMediaNodeLaunchTemplate. Click on it to go to the Launch Template Dashboard with the Launch Template of the Media Nodes selected.
  4. Click on \"Actions > Modify template (Create new version)\".
  5. In the \"Instance type\" section, select the new instance type and click on \"Create template version\".
  6. Go to the CloudFormation Stack and locate the resource with the logical ID: OpenViduMediaNodeASG. Click on it to go to the Auto Scaling Group Dashboard with the Auto Scaling Group of the Media Nodes selected.
  7. Click on \"Actions > Edit\".

  8. In the Launch Template section, select the new version of the launch template we just created at step 5 which is the highest version number.

    Then, click on \"Update\".

    Info

    By configuring \"Latest\" as the launch template version, you no longer need to update the Auto Scaling Group every time you modify the launch template. The Auto Scaling Group will automatically use the latest version of the launch template.

  9. Terminate the old instances manually from the EC2 Dashboard if you want to force the termination of the instances. New instances will be launched with the new instance type.

    Info

    If you want to avoid downtime, you can wait until the Auto Scaling Group replaces the old instances with the new ones. But you will need to increase the desired capacity to force the replacement of the instances and then decrease it to the desired number of instances.

"},{"location":"docs/self-hosting/ha/aws/admin/#media-nodes-autoscaling-configuration","title":"Media Nodes Autoscaling Configuration","text":"

To configure the Auto Scaling settings for the Media Nodes, follow the steps outlined below. This configuration allows you to set the parameters that control how the Auto Scaling Group will scale based on the target average CPU utilization.

Media Nodes Autoscaling Configuration
  1. Navigate to the CloudFormation Dashboard on AWS.
  2. Select the CloudFormation Stack that you used to deploy OpenVidu High Availability.
  3. In the \"Resources\" tab, locate the resource with the logical ID: OpenViduMediaNodeASG and click on it to go to the Auto Scaling Group Dashboard.
  4. Click on \"Actions > Edit\".
  5. To configure scaling policies, navigate to the \"Automatic scaling\" tab within the Auto Scaling Group Dashboard, select the unique \"Target tracking scaling\" autoscaling policy, and click on \"Actions > Edit\".

  6. It will open a panel where you can configure multiple parameters. In this example, we set the target average CPU utilization to 30%. Then, click on \"Update\".

    Info

    OpenVidu High Availability is by default configured with a \"Target tracking scaling\" policy that scales based on the target average CPU utilization, however, you can configure different autoscaling policies according to your needs. For more information on the various types of autoscaling policies and how to implement them, refer to the AWS Auto Scaling documentation.

"},{"location":"docs/self-hosting/ha/aws/admin/#fixed-number-of-media-nodes","title":"Fixed Number of Media Nodes","text":"

If you need to maintain a fixed number of Media Nodes instead of allowing the Auto Scaling Group to dynamically adjust based on CPU utilization, you can configure the desired capacity settings accordingly. Follow the steps below to set a fixed number of Media Nodes:

Set Fixed Number of Media Nodes
  1. Navigate to the CloudFormation Dashboard on AWS.
  2. Select the CloudFormation Stack that you used to deploy OpenVidu High Availability.
  3. In the \"Resources\" tab, locate the resource with the logical ID: OpenViduMediaNodeASG and click on it to go to the Auto Scaling Group Dashboard.
  4. Click on \"Actions > Edit\".
  5. Set the \"Desired capacity\", \"Min desired capacity\", and \"Max desired capacity\" to the fixed number of Media Nodes you require, and click on \"Update\". In this example, we set the desired capacity to 2.
  6. Wait until the \"Instance Management\" tab shows that the Auto Scaling Group has the fixed number of instances running.
"},{"location":"docs/self-hosting/ha/aws/admin/#configuration-management","title":"Configuration Management","text":"

This section explains how to manage and update the configuration settings for your OpenVidu High Availability deployment. It is divided into three parts:

  1. Configuring CloudFormation YAML for Node Services Configuration: Details how to pre-configure settings in the CloudFormation template to avoid manual interventions post-deployment.
  2. Global Configuration: Covers parameters that affect the entire cluster when the CloudFormation stack is already deployed.
  3. Node Services Configuration: Focuses on settings specific to Master and Media Nodes services when the CloudFormation stack is already deployed.
"},{"location":"docs/self-hosting/ha/aws/admin/#configuring-cloudformation-yaml-for-node-services-configuration","title":"Configuring CloudFormation YAML for Node Services Configuration","text":"

To avoid manual intervention after deployment, you can pre-configure the node services configuration directly in the CloudFormation YAML template. This ensures that the necessary configurations are applied automatically upon deployment.

Master NodeMedia Nodes
  1. Get the CloudFormation YAML template used to deploy OpenVidu High Availability on AWS.

  2. Locate the section defining the Launch Template for the Master Node and update the UserData property with the required configuration parameters. The section looks like this:

    OpenViduMasterLaunchTemplate:\n    Type: AWS::EC2::LaunchTemplate\n    Properties:\n        LaunchTemplateData:\n            UserData:\n                Fn::Base64: !Sub |\n                    #!/bin/bash\n                    ...\n                    ...\n                    # Install OpenVidu\n                    /usr/local/bin/install.sh || { /usr/local/bin/set-as-unhealthy.sh; exit 1; }\n\n                    ######### APPLY CUSTOM CONFIGURATIONS #########\n                    # If you want to apply any modification to the configuration files\n                    # of the OpenVidu services at /opt/openvidu, you can do it here.\n                    # Examples:\n                    #\n                    # - Change minio public port\n                    # yq eval '.apps.http.servers.minio.listen[0] = \":9001\"' -i /opt/openvidu/caddy.yaml\n                    #\n                    # - Disable dashboard access\n                    # yq eval 'del(.apps.http.servers.public.routes[] | \\\n                    #  select(.handle[]?.handler == \"subroute\" and \\\n                    #  .handle[].routes[].handle[].strip_path_prefix == \"/dashboard\"))' \\\n                    #  -i /opt/openvidu/caddy.yaml\n\n\n\n                    ######### END CUSTOM CONFIGURATIONS #########\n\n                    # Start OpenVidu\n                    systemctl start openvidu || { /usr/local/bin/set-as-unhealthy.sh; exit 1; }\n                    ...\n                    ...\n

    The area between APPLY CUSTOM CONFIGURATIONS and END CUSTOM CONFIGURATIONS is where you can add your custom configuration commands. You can use yq to modify the configuration files of the OpenVidu services. The example shows how to change the minio public port and how to disable dashboard access in the caddy.yaml configuration file.

  3. Save the YAML file and use it to deploy your CloudFormation stack. This will apply the Master Node configuration automatically during the deployment process.

  1. Get the CloudFormation YAML template used to deploy OpenVidu High Availability on AWS.

  2. Locate the section defining the Launch Template for the Media Nodes and update the UserData property with the required configuration parameters. The section looks like this:

    OpenViduMediaNodeLaunchTemplate:\n    Type: \"AWS::EC2::LaunchTemplate\"\n    Properties:\n        LaunchTemplateData:\n            UserData:\n                Fn::Base64: !Sub |\n                    #!/bin/bash\n                    ...\n                    ...\n                    # Install OpenVidu\n                    /usr/local/bin/install.sh || { echo \"[OpenVidu] error installing OpenVidu\"; /usr/local/bin/set_as_unhealthy.sh; exit 1; }\n\n                    ######### APPLY CUSTOM CONFIGURATIONS #########\n                    # If you want to apply any modification to the configuration files\n                    # of the OpenVidu services at /opt/openvidu, you can do it in this section.\n                    # Examples:\n                    #\n                    # - Announce specific IP address for the media node\n                    # yq eval '.rtc.node_ip = 1.2.3.4' -i /opt/openvidu/livekit.yaml\n                    #\n                    # - Add webhooks to livekit\n                    # yq eval '.webhook.urls += [\"http://new-endpoint.example.com/webhook\"]' -i /opt/openvidu/livekit.yaml\n\n\n\n                    ######### END CUSTOM CONFIGURATIONS #########\n\n                    # Start OpenVidu\n                    systemctl start openvidu || { echo \"[OpenVidu] error starting OpenVidu\"; /usr/local/bin/set_as_unhealthy.sh; exit 1; }\n

    The area between APPLY CUSTOM CONFIGURATIONS and END CUSTOM CONFIGURATIONS is where you can add your custom configuration commands. You can use yq to modify the configuration files of the OpenVidu services. The example shows how to change the rtc.node_ip parameter and how to add a webhook to the livekit.yaml configuration file.

  3. Save the YAML file and use it to deploy your CloudFormation stack. This will apply the node services configuration automatically during the deployment process.

By pre-configuring the CloudFormation template, you streamline the deployment process and reduce the need for post-deployment manual configuration.

"},{"location":"docs/self-hosting/ha/aws/admin/#global-configuration","title":"Global Configuration","text":"

The global configuration parameters for the OpenVidu High Availability deployment are stored in a secret resource deployed by the CloudFormation stack. These parameters can affect the configuration of all the nodes in the cluster. To update any of these parameters, follow the steps below:

Update Global Configuration Parameters
  1. Navigate to the CloudFormation Dashboard on AWS.
  2. Select the CloudFormation Stack that you used to deploy OpenVidu High Availability.
  3. In the \"Resources\" tab, locate the resource with the logical ID: OpenViduSharedInfo and click on it to view the secret in AWS Secrets Manager.
  4. Click on \"Retrieve secret value\" to view the parameters.
  5. Edit the desired parameters within the secret. For example, you can change the RTC_ENGINE parameter to pion or mediasoup depending on the WebRTC engine you want to use. Just click on \"Edit\", modify the value, and click on \"Save\".
  6. To apply the changes, stop the cluster and then start it again following the procedures outlined in the Cluster Shutdown and Startup section.
"},{"location":"docs/self-hosting/ha/aws/admin/#node-services-configuration","title":"Node Services Configuration","text":"

The node services configuration parameters for the OpenVidu High Availability deployment are stored in the configuration files of the services running on the Master and Media Nodes. These parameters can affect the configuration of the individual nodes in the cluster. To update any of these configuration files, follow the steps below:

Master NodeMedia Node

Master Node configurations require changes to be made in the Launch Template \"User Data\" section. To update the configuration:

  1. Navigate to the CloudFormation Dashboard on AWS.
  2. Select the CloudFormation Stack that you used to deploy OpenVidu High Availability.
  3. Locate the resource with the logical ID: OpenViduMasterLaunchTemplate. Click on it to go to the Launch Template Dashboard with the Launch Template of the Master Node selected.
  4. Click on \"Actions > Modify template (Create new version)\".
  5. Go to the \"Advanced details\" section and modify the \"User data\" field with the new configuration. You can modify the configuration parameters of the services running on the Master Node following the same script structure as the one used in the Automatic installation and configuration of nodes, for the Master Node. When you finish, click on \"Create template version\".
  6. Go to the CloudFormation Stack and locate the resource with the logical ID: OpenViduMasterNodeASG. Click on it to go to the EC2 Dashboard with the Master Node instance selected.
  7. Click on \"Actions > Edit\".

  8. In the Launch Template section, select the new version of the launch template we just created at step 5 which is the highest version number. Then, click on \"Update\".

    Info

    By configuring \"Latest\" as the launch template version, you no longer need to update the Auto Scaling Group every time you modify the launch template. The Auto Scaling Group will automatically use the latest version of the launch template.

  9. Terminate the old instances manually from the EC2 Dashboard. New instances will be launched with the new configuration.

    Warning

    This process requires downtime, as it involves terminating the old instances and launching new ones with the updated configuration.

Media Node configurations require changes to be made in the Launch Template \"User Data\" section. To update the configuration:

  1. Navigate to the CloudFormation Dashboard on AWS.
  2. Select the CloudFormation Stack that you used to deploy OpenVidu High Availability.
  3. Locate the resource with the logical ID: OpenViduMediaNodeLaunchTemplate. Click on it to go to the Launch Template Dashboard with the Launch Template of the Media Nodes selected.
  4. Click on \"Actions > Modify template (Create new version)\".
  5. Go to the \"Advanced details\" section and modify the \"User data\" field with the new configuration. You can modify the configuration parameters of the services running on the Media Nodes following the same script structure as the one used in the Automatic installation and configuration of nodes, for the Media Nodes. When you finish, click on \"Create template version\".
  6. Go to the CloudFormation Stack and locate the resource with the logical ID: OpenViduMediaNodeASG. Click on it to go to the Auto Scaling Group Dashboard with the Auto Scaling Group of the Media Nodes selected.
  7. Click on \"Actions > Edit\".

  8. In the Launch Template section, select the new version of the launch template we just created at step 5 which is the highest version number. Then, click on \"Update\".

    Info

    By configuring \"Latest\" as the launch template version, you no longer need to update the Auto Scaling Group every time you modify the launch template. The Auto Scaling Group will automatically use the latest version of the launch template.

  9. Terminate the old instances manually from the EC2 Dashboard if you want to force the termination of the instances. New instances will be launched with the new configuration.

    Warning

    This process requires downtime, as it involves terminating the old instances and launching new ones with the updated configuration.

"},{"location":"docs/self-hosting/ha/aws/install/","title":"OpenVidu High Availability Installation: AWS","text":"

Info

OpenVidu High Availability is part of OpenVidu PRO. Before deploying, you need to create an OpenVidu account to get your license key. There's a 15-day free trial waiting for you!

This section contains the instructions to deploy a production-ready OpenVidu High Availability deployment in AWS. Deployed services are the same as the On Premises High Availability Installation but automate the process with AWS CloudFormation.

First of all, import the template in the AWS CloudFormation console. You can click the following button...

Deploy OpenVidu High Availability in

...or access your AWS CloudFormation console and manually set this S3 URL in the Specify template section:

https://s3.eu-west-1.amazonaws.com/get.openvidu.io/pro/ha/latest/aws/cf-openvidu-ha.yaml\n

This is how the architecture of the deployment looks like.

Architecture overviewArchitecture overview with TURN over TLS

OpenVidu High Availability AWS Architecture

OpenVidu High Availability AWS Architecture with TURN over TLS

"},{"location":"docs/self-hosting/ha/aws/install/#cloudformation-parameters","title":"CloudFormation Parameters","text":"

Depending on your needs, you need to fill the following CloudFormation parameters:

"},{"location":"docs/self-hosting/ha/aws/install/#domain-and-load-balancer-configuration","title":"Domain and Load Balancer configuration","text":"

In this section, you need to specify the domain name and the SSL certificate to use from AWS Certificate Manager.

Domain and Load Balancer configuration

The parameters in this section might look like this:

Set the DomainName parameter to the domain name you intend to use for your OpenVidu deployment. Ensure this domain is not currently pointing to any other service; you can temporarily point it elsewhere.

For the OpenViduCertificateARN parameter, specify the ARN of the SSL certificate you wish to use. This certificate should be created in the AWS Certificate Manager and configured for the domain specified in DomainName.

"},{"location":"docs/self-hosting/ha/aws/install/#openvidu-ha-configuration","title":"OpenVidu HA Configuration","text":"

In this section, you need to specify some properties needed for the OpenVidu HA deployment.

OpenVidu Elastic Configuration

The parameters in this section might appear as follows:

Make sure to provide the OpenViduLicense parameter with the license key. If you don't have one, you can request one here.

For the RTCEngine parameter, you can choose between Pion (the engine used by LiveKit) and Mediasoup (experimental).

Warning

mediasoup integration in OpenVidu is experimental, and should not be used in production environments. There are some limitations that are currently being worked on, expected to be ironed out in the near future.

"},{"location":"docs/self-hosting/ha/aws/install/#ec2-instance-configuration","title":"EC2 Instance Configuration","text":"

You need to specify some properties for the EC2 instances that will be created.

EC2 Instance configuration

The parameters in this section may look like this:

Simply select the type of instance you want to deploy at MasterNodeInstanceType and MediaNodeInstanceType, the SSH key you want to use to access the machine at KeyName, and the Amazon Image ID (AMI) to use at AmiId.

By default, the parameter AmiId is configured to use the latest Amazon Linux AMI, so ideally you don\u2019t need to modify this.

"},{"location":"docs/self-hosting/ha/aws/install/#media-nodes-autoscaling-group-configuration","title":"Media Nodes Autoscaling Group Configuration","text":"

The number of Media Nodes can scale up or down based on the system load. You can configure the minimum and maximum number of Media Nodes and a target CPU utilization to trigger the scaling up or down.

Media Nodes Autoscaling Group Configuration

The parameters in this section may look like this:

The InitialNumberOfMediaNodes parameter specifies the initial number of Media Nodes to deploy. The MinNumberOfMediaNodes and MaxNumberOfMediaNodes parameters specify the minimum and maximum number of Media Nodes that you want to be deployed.

The ScaleTargetCPU parameter specifies the target CPU utilization to trigger the scaling up or down. The goal is to keep the CPU utilization of the Media Nodes close to this value. The autoscaling policy is based on Target Tracking Scaling Policy.

"},{"location":"docs/self-hosting/ha/aws/install/#vpc-configuration","title":"VPC Configuration","text":"

In this section, you need to specify the VPC and Subnet configuration for the deployment.

VPC Configuration

The parameters in this section may look like this:

The OpenViduVPC parameter specifies the VPC where the deployment will be created.

The OpenViduMasterNodeSubnets specifies the subnets where the Master Nodes will be deployed. You can specify a maximum of 4 subnets.

The OpenViduMediaNodeSubnets specifies the subnets where the Media Nodes will be deployed. There is no limit on the number of subnets you can specify.

Warning

"},{"location":"docs/self-hosting/ha/aws/install/#optional-turn-server-configuration-with-tls","title":"(Optional) TURN server configuration with TLS","text":"

This section is optional. It is useful when your users are behind a restrictive firewall that blocks UDP traffic.

TURN server configuration with TLS

The parameters in this section may look like this:

Set the TurnDomainName parameter to the domain name you intend to use for your TURN server. Ensure this domain is not currently pointing to any other service; you can temporarily point it elsewhere.

For the TurnCertificateARN parameter, specify the ARN of the SSL certificate you wish to use. This certificate should be created in the AWS Certificate Manager and configured for the domain specified in TurnDomainName.

"},{"location":"docs/self-hosting/ha/aws/install/#volumes-configuration","title":"Volumes Configuration","text":"

In this section, you need to specify the configuration for the EBS volumes that will be created for the Master Nodes. Master Nodes will host all the recordings and metrics data replicated across all of them. The disk size of the EBS volumes is the same for all Master Nodes.

Volumes Configuration

The parameters in this section may look like this:

The RetainVolumes parameter specifies whether the EBS volumes should be retained when the stack is deleted. If you set this parameter to true, the EBS volumes will not be deleted when the stack is deleted. This is useful if you want to keep the recordings and metrics data after deleting the stack. If you set this parameter to false, the EBS volumes will be deleted when the stack is deleted. In any case, it is recommended to create a snapshot backup policy.

The DiskSize parameter specifies the size of the EBS volumes in GB.

"},{"location":"docs/self-hosting/ha/aws/install/#deploying-the-stack","title":"Deploying the Stack","text":"

When you are ready with your CloudFormation parameters, just click on \"Next\", specify in \"Stack failure options\" the option \"Preserve successfully provisioned resources\" to be able to troubleshoot the deployment in case of error, click on \"Next\" again, and finally \"Submit\".

When everything is ready, you will see the following links in the \"Outputs\" section of CloudFormation:

CloudFormation Outputs

"},{"location":"docs/self-hosting/ha/aws/install/#configure-your-application-to-use-the-deployment","title":"Configure your Application to use the Deployment","text":"

The Output Key ServicesAndCredentials of the previous section points to an AWS Secret Manager secret that contains all URLs and credentials to access the services deployed. You can access the secret by clicking on the link in the Output Value column.

Then, click on Retrieve secret value to get the JSON with all the information.

To point your applications to your OpenVidu deployment, check the values of the JSON secret. All access credentials of all services are defined in this object.

Your authentication credentials and URL to point your applications would be:

"},{"location":"docs/self-hosting/ha/aws/install/#troubleshooting-initial-cloudformation-stack-creation","title":"Troubleshooting Initial CloudFormation Stack Creation","text":"

If something goes wrong during the initial CloudFormation stack creation, your stack may reach the CREATE_FAILED status for multiple reasons. It could be due to a misconfiguration in the parameters, a lack of permissions, or a problem with the AWS services. When this happens, the following steps can help you troubleshoot the issue and identify what went wrong:

  1. While deploying the stack, make sure at \"Stack failure options\" you have selected the option \"Preserve successfully provisioned resources\" to be able to troubleshoot the deployment in case of an error.

    Disable Rollback on failure

  2. Check if the EC2 instance or instances are running. If they are not, check the CloudFormation events for any error messages.

  3. If the EC2 instance or instances are running, SSH into the instance and check the logs of the following files:

    These logs will give you more information about the CloudFormation stack creation process.

  4. If everything seems fine, check the status and the logs of the installed OpenVidu services in all the Master Nodes and Media Nodes.

"},{"location":"docs/self-hosting/ha/aws/install/#configuration-and-administration","title":"Configuration and administration","text":"

When your CloudFormation stack reaches the CREATE_COMPLETE status, your OpenVidu High Availability deployment is ready to use. You can check the Configuration and Administration section to learn how to manage your deployment.

"},{"location":"docs/self-hosting/ha/on-premises/admin/","title":"OpenVidu High Availability: On-premises configuration and administration","text":"

The OpenVidu installer offers an easy way to deploy OpenVidu High Availability on-premises. However, once the deployment is complete, you may need to perform administrative tasks based on your specific requirements, such as changing passwords, specifying custom configurations, and starting or stopping services.

This section provides details on configuration parameters and common administrative tasks for on-premises OpenVidu High Availability deployments.

"},{"location":"docs/self-hosting/ha/on-premises/admin/#openvidu-configuration","title":"OpenVidu configuration","text":""},{"location":"docs/self-hosting/ha/on-premises/admin/#directory-structure","title":"Directory structure","text":"

OpenVidu High Availability is composed of two types of nodes, Master Nodes and Media Nodes. The directory structure is as follows for each type of node:

Master NodesMedia Node

In each Master Node, the services are installed at /opt/openvidu/ and have a systemd service located at /etc/systemd/system/openvidu.service.

The directory structure of each Master Node is as follows:

|-- /opt/openvidu\n    |-- config/\n    |-- data/\n    |-- deployment-info.yaml\n    |-- docker-compose.override.yml\n    |-- docker-compose.yml\n    |-- .env\n    `-- owncert/\n

In each Media Node, the services are installed at /opt/openvidu/ and have a systemd service located at /etc/systemd/system/openvidu.service.

The directory structure of the Media Node is as follows:

|-- /opt/openvidu\n    |-- config/\n    |-- data/\n    |-- deployment-info.yaml\n    |-- docker-compose.yml\n    `-- .env\n
"},{"location":"docs/self-hosting/ha/on-premises/admin/#services-configuration","title":"Services Configuration","text":"

Some services deployed with OpenVidu have their own configuration files located in the /opt/openvidu/config/ directory, while others are configured in the .env file. Below are the services and their respective configuration files and parameters:

Info

The installer provides default configurations that work out of the box. However, you can modify these configurations to suit your specific requirements.

"},{"location":"docs/self-hosting/ha/on-premises/admin/#configuration-files","title":"Configuration Files","text":"Master NodeMedia Node Service Description Configuration File Location Reference documentation Caddy Server Serves OpenVidu services and handles HTTPS. /opt/openvidu/config/caddy.yaml Caddy JSON Structure Loki Service Used for log aggregation. /opt/openvidu/config/loki.yaml Loki Config Promtail Service Collects logs and sends them to Loki. /opt/openvidu/config/promtail.yaml Promtail Config Mimir Service Service for long-term prometheus storage /opt/openvidu/config/mimir.yaml Mimir Config Grafana Service Used for visualizing monitoring data. /opt/openvidu/config/grafana_config/ Grafana Config Service Description Configuration File Location Reference documentation OpenVidu Server Manages video rooms. It is compatible with LiveKit configuration and includes its own OpenVidu configuration parameters /opt/openvidu/config/livekit.yaml LiveKit Config Ingress Service Imports video from other sources into OpenVidu rooms. /opt/openvidu/config/ingress.yaml LiveKit Ingress Config Egress Service Exports video from OpenVidu rooms for recording or streaming. /opt/openvidu/config/egress.yaml LiveKit Egress Config Prometheus Service Used for monitoring. /opt/openvidu/config/prometheus.yaml Prometheus Config Promtail Service Collects logs and sends them to Loki. /opt/openvidu/config/promtail.yaml Promtail Config Caddy Service Allows Media Nodes to reach Master Node services in a balanced and high-available way. /opt/openvidu/config/caddy.yaml Caddy JSON Structure"},{"location":"docs/self-hosting/ha/on-premises/admin/#environment-variables","title":"Environment variables","text":"Master NodeMedia Node

Warning

Service Description Environment Variables Grafana Service Used for visualizing monitoring data. OpenVidu Dashboard Used to visualize OpenVidu Server Rooms, Ingress, and Egress services. Default App (OpenVidu Call) Default ready-to-use video conferencing app. Redis Service Used as a shared memory database for OpenVidu and Ingress/Egress services. If you need to change the Redis password after the installation, check the advanced configuration section. MinIO Service Used for storing recordings. If you need to change the MinIO access key and secret key after the installation, check the advanced configuration section. MongoDB Service Used for storing analytics and monitoring data. If you need to change the MongoDB username and password after the installation, check the advanced configuration section. OpenVidu v2 compatibility Service Used to enable compatibility with OpenVidu v2. Check the OpenVidu v2 Compatibility Configuration Parameters to see all the available parameters.

Warning

Service Description Environment Variables OpenVidu Server Manages video rooms. Ingress Service Imports video from other sources into OpenVidu rooms. Egress Service Exports video from OpenVidu rooms for recording or streaming. Prometheus Service Used for monitoring. Promtail Service Collects logs and sends them to Loki. "},{"location":"docs/self-hosting/ha/on-premises/admin/#openvidu-configuration-parameters","title":"OpenVidu Configuration Parameters","text":"

OpenVidu Server is built on top of LiveKit and offers extra configuration options. You can find the configuration file at /opt/openvidu/config/livekit.yaml. Additional parameters for configuring OpenVidu Server are:

openvidu:\n    license: <YOUR_OPENVIDU_PRO_LICENSE> # (1)\n    cluster_id: <YOUR_DOMAIN_NAME> # (2)\n    analytics: # (3)\n        enabled: true # (4)\n        interval: 10s # (5)\n        expiration: 768h # (6)\n        mongo_url: <MONGO_URL> # (7)\n    rtc:\n        engine: pion # (8)\n    mediasoup:\n        debug: \"\" # (9)\n        log_level: error # (10)\n        log_tags: [info, ice, rtp, rtcp, message] # (11)\n
  1. Specify your OpenVidu Pro license key. If you don't have one, you can request one here.
  2. The cluster ID for the OpenVidu deployment. It is configured by default by OpenVidu Installer with the domain name of the deployment.
  3. The analytics configuration should be defined at the openvidu level in the livekit.yaml file.
  4. This must be set to true to send analytics data to MongoDB. If set to false, no analytics data will be sent.
  5. Time interval to send analytics data to MongoDB.
  6. Time to keep the analytics data in MongoDB. In this example, it is set to 32 days.
  7. MongoDB URL. This is the connection string to the MongoDB database where the analytics data will be stored.
  8. The rtc.engine parameter is set to pion by default. This is the WebRTC engine used by OpenVidu. Depending on your requirements, you can use:
  9. Global toggle to enable debugging logs from MediaSoup. In most debugging cases, using just an asterisk (\"*\") here is enough, but this can be fine-tuned for specific log levels. More info.
  10. Logging level for logs generated by MediaSoup. More info.
  11. Comma-separated list of log tag names, for debugging. More info.
"},{"location":"docs/self-hosting/ha/on-premises/admin/#openvidu-v2-compatibility-configuration-parameters","title":"OpenVidu v2 Compatibility Configuration Parameters","text":"

If you are using in COMPOSE_PROFILES at the .env file the v2compatibility profile, you will need to set the following parameters in the .env file for the OpenVidu V2 Compatibility service:

Parameter Description Default Value V2COMPAT_OPENVIDU_SECRET OpenVidu secret used to authenticate the OpenVidu V2 Compatibility service. In the .env file, this value is defined with LIVEKIT_API_SECRET. The value of LIVEKIT_API_SECRET in the .env file. V2COMPAT_OPENVIDU_WEBHOOK true to enable OpenVidu Webhook service. false otherwise. Valid values are true or false. false V2COMPAT_OPENVIDU_WEBHOOK_ENDPOINT HTTP(S) endpoint to send OpenVidu V2 Webhook events. Must be a valid URL. Example: V2COMPAT_OPENVIDU_WEBHOOK_ENDPOINT=http://myserver.com/webhook - V2COMPAT_OPENVIDU_WEBHOOK_HEADERS JSON Array list of headers to send in the OpenVidu V2 Webhook events. Example: V2COMPAT_OPENVIDU_WEBHOOK_HEADERS=[\"Content-Type: application/json\"] [] V2COMPAT_OPENVIDU_WEBHOOK_EVENTS Comma-separated list of OpenVidu V2 Webhook events to send. Example: V2COMPAT_OPENVIDU_WEBHOOK_EVENTS=sessionCreated,sessionDestroyed sessionCreated, sessionDestroyed, participantJoined, participantLeft, webrtcConnectionCreated, webrtcConnectionDestroyed, recordingStatusChanged, signalSent (All available events) V2COMPAT_OPENVIDU_PRO_AWS_S3_BUCKET S3 Bucket where to store recording files. openvidu V2COMPAT_OPENVIDU_PRO_AWS_S3_SERVICE_ENDPOINT S3 Endpoint where to store recording files. http://localhost:9100 V2COMPAT_OPENVIDU_PRO_AWS_ACCESS_KEY S3 Access Key of the S3 Bucket where to store recording files. - V2COMPAT_OPENVIDU_PRO_AWS_SECRET_KEY S3 Secret Key of the S3 Bucket where to store recording files. - V2COMPAT_OPENVIDU_PRO_AWS_REGION S3 Region of the S3 Bucket where to store recording files. us-east-1"},{"location":"docs/self-hosting/ha/on-premises/admin/#starting-stopping-and-restarting-openvidu","title":"Starting, stopping, and restarting OpenVidu","text":"

For every OpenVidu node, a systemd service is created during the installation process. This service allows you to start, stop, and restart the OpenVidu services easily.

Start OpenVidu

sudo systemctl start openvidu\n

Stop OpenVidu

sudo systemctl stop openvidu\n

Restart OpenVidu

sudo systemctl restart openvidu\n
"},{"location":"docs/self-hosting/ha/on-premises/admin/#checking-the-status-of-services","title":"Checking the status of services","text":"

You can check the status of the OpenVidu services using the following command:

cd /opt/openvidu/\ndocker compose ps\n

Depending on the node type, you will see different services running.

Master NodeMedia Node

The services are operating correctly if you see an output similar to the following and there are no restarts from any of the services:

NAME                       IMAGE                                              COMMAND                  SERVICE                    CREATED          STATUS\napp                        docker.io/openvidu/openvidu-call                   \"docker-entrypoint.s\u2026\"   app                        12 seconds ago   Up 10 seconds\ncaddy                      docker.io/openvidu/openvidu-pro-caddy              \"/bin/caddy run --co\u2026\"   caddy                      12 seconds ago   Up 10 seconds\ndashboard                  docker.io/openvidu/openvidu-pro-dashboard          \"./openvidu-dashboard\"   dashboard                  12 seconds ago   Up 10 seconds\ngrafana                    docker.io/grafana/grafana                          \"/run.sh\"                grafana                    11 seconds ago   Up 8 seconds\nloki                       docker.io/grafana/loki                             \"/usr/bin/loki -conf\u2026\"   loki                       11 seconds ago   Up 9 seconds\nmimir                      docker.io/grafana/mimir                            \"/bin/mimir -config.\u2026\"   mimir                      11 seconds ago   Up 9 seconds\nminio                      docker.io/bitnami/minio                            \"/opt/bitnami/script\u2026\"   minio                      11 seconds ago   Up 9 seconds\nmongo                      docker.io/mongo                                    \"docker-entrypoint.s\u2026\"   mongo                      11 seconds ago   Up 9 seconds\nopenvidu-v2compatibility   docker.io/openvidu/openvidu-v2compatibility        \"/bin/server\"            openvidu-v2compatibility   12 seconds ago   Up 10 seconds\noperator                   docker.io/openvidu/openvidu-operator               \"/bin/operator\"          operator                   12 seconds ago   Up 10 seconds\npromtail                   docker.io/grafana/promtail                         \"/usr/bin/promtail -\u2026\"   promtail                   11 seconds ago   Up 9 seconds\nredis-sentinel             docker.io/redis                                    \"docker-entrypoint.s\u2026\"   redis-sentinel             10 seconds ago   Up 10 seconds\nredis-server               docker.io/redis                                    \"docker-entrypoint.s\u2026\"   redis-server               10 seconds ago   Up 10 seconds\n

The services are operating correctly if you see an output similar to the following and there are no restarts from any of the services:

NAME         IMAGE                                          COMMAND                  SERVICE      CREATED          STATUS\ncaddy        docker.io/openvidu/openvidu-caddy:main         \"/bin/caddy run --co\u2026\"   caddy        53 seconds ago   Up 53 seconds\negress       docker.io/livekit/egress                       \"/entrypoint.sh\"         egress       53 seconds ago   Up 51 seconds\ningress      docker.io/livekit/ingress                      \"ingress\"                ingress      53 seconds ago   Up 52 seconds\nopenvidu     docker.io/openvidu/openvidu-server-pro         \"/livekit-server --c\u2026\"   openvidu     53 seconds ago   Up 52 seconds\nprometheus   docker.io/prom/prometheus                      \"/bin/prometheus --c\u2026\"   prometheus   53 seconds ago   Up 51 seconds\npromtail     docker.io/grafana/promtail                     \"/usr/bin/promtail -\u2026\"   promtail     53 seconds ago   Up 52 seconds\n
"},{"location":"docs/self-hosting/ha/on-premises/admin/#checking-logs","title":"Checking logs","text":"

If any of the services are not working as expected, you can check the logs of the services using the following command:

cd /opt/openvidu/\ndocker compose logs <service-name>\n

Replace <service-name> with the name of the service you want to check. For example, to check the logs of the OpenVidu Server, use the following command:

cd /opt/openvidu/\ndocker compose logs openvidu\n

To check the logs of all services, use the following command:

cd /opt/openvidu/\ndocker compose logs\n

You can also review your logs using the Grafana dashboard provided with OpenVidu. To access it, go to https://<your-domain.com>/grafana and use the credentials located in /opt/openvidu/.env to log in. Once inside, navigate to the \"Home\" section, select \"Dashboard\", and then click on:

"},{"location":"docs/self-hosting/ha/on-premises/admin/#adding-and-removing-media-nodes","title":"Adding and Removing Media Nodes","text":"

Adding and removing Media Nodes is straightforward. You can add new Media Nodes to the cluster to increase the capacity of your OpenVidu deployment. Similarly, you can remove Media Nodes to reduce the capacity of your deployment.

"},{"location":"docs/self-hosting/ha/on-premises/admin/#adding-media-nodes","title":"Adding Media Nodes","text":"

To add a new Media Node, simply spin up a new VM and run the OpenVidu installer script to integrate it into the existing cluster. Run the installation command on the new Media Node.

Warning

This installation command should be the same as the one you used to install the first Media Node. Make sure to use the same parameters and values as the first Media Node. In case you've changed the .env file in the Master Nodes, you will need to update the .env file or update the installation command with the new values.

To automate the configuration of new nodes, check this section.

"},{"location":"docs/self-hosting/ha/on-premises/admin/#removing-media-nodes-gracefully","title":"Removing Media Nodes Gracefully","text":"

To stop a Media Node gracefully, you need to stop the containers openvidu, ingress, and egress with a SIGINT signal. Here is a simple script that you can use to stop all these containers gracefully:

#!/bin/bash\n# Stop OpenVidu, Ingress, and Egress containers gracefully (1)\ndocker container kill --signal=SIGINT openvidu || true\ndocker container kill --signal=SIGINT ingress || true\ndocker container kill --signal=SIGINT egress || true\n\n# Wait for the containers to stop (2)\nwhile [ $(docker inspect -f '{{.State.Running}}' openvidu 2>/dev/null) == \"true\" ] || \\\n    [ $(docker inspect -f '{{.State.Running}}' ingress 2>/dev/null) == \"true\" ] || \\\n    [ $(docker inspect -f '{{.State.Running}}' egress 2>/dev/null) == \"true\" ]; do\n    echo \"Waiting for containers to stop...\"\n    sleep 5\ndone\n
  1. This script stops the OpenVidu, Ingress, and Egress containers gracefully. The true at the end of each command is to avoid the script from stopping if the container is not running.
  2. This script waits for the containers to stop before exiting.

When all the containers are stopped, you can then stop the systemd service and remove the VM:

sudo systemctl stop openvidu\n
"},{"location":"docs/self-hosting/ha/on-premises/admin/#removing-media-nodes-forcefully","title":"Removing Media Nodes Forcefully","text":"

To remove a Media Node forcefully, without considering the rooms, ingress, and egress processes running in the node, you can simply stop the OpenVidu service in the Media Node and delete the VM.

sudo systemctl stop openvidu\n
"},{"location":"docs/self-hosting/ha/on-premises/admin/#advanced-configuration","title":"Advanced Configuration","text":"

This section addresses advanced configuration scenarios for customizing your OpenVidu High Availability deployment. It includes automating the installation with personalized settings, enabling or disabling OpenVidu modules, and modifying global parameters such as the domain name, passwords, and API keys.

"},{"location":"docs/self-hosting/ha/on-premises/admin/#automatic-installation-and-configuration-of-nodes","title":"Automatic installation and configuration of nodes","text":"

For environments like the cloud, where instances are frequently spun up and down, automating the application of custom configurations to Master Nodes and Media Nodes may be useful for you.

Master NodeMedia Node

If you need to apply custom configurations to your Master Nodes, you can use the following script template:

# 1. First install the Master Node (1)\nsh <(curl -fsSL http://get.openvidu.io/pro/ha/latest/install_ov_master_node.sh) \\\n    --node-role='master-node' \\\n    ... # Add the rest of the arguments (2)\n\n# 2. Add custom configurations (3)\n######### APPLY CUSTOM CONFIGURATIONS #########\n# If you want to apply any modification to the configuration files\n# of the OpenVidu services at /opt/openvidu, you can do it here.\n\n# Example 1: Change Minio public port\nyq eval '.apps.http.servers.minio.listen[0] = \":9001\"' -i /opt/openvidu/config/caddy.yaml\n\n# Example 2: Disable the /dashboard route in Caddy\nyq eval 'del(.apps.http.servers.public.routes[] | \\\n  select(.handle[]?.handler == \"subroute\" and \\\n  .handle[].routes[].handle[].strip_path_prefix == \"/dashboard\"))' \\\n  -i /opt/openvidu/config/caddy.yaml\n\n######### END CUSTOM CONFIGURATIONS #########\n\n# 3. Start OpenVidu (4)\nsystemctl start openvidu\n
  1. First, install the Master Node using the OpenVidu installer. Check the installation guide for more information.
  2. Add the parameters you need to install the Master Node. You can find all the available parameters in the installation guide.
  3. Add the custom configurations you need to apply to the Master Node services. You can use yq or other tools to modify the configuration files. You can find more information about yq here.
  4. Start the Master Node.

Note

In case you want to deploy a specific version, just replace latest with the desired version. For example: 3.0.0.

Just install the Master Node first with the installer and then run some extra commands to apply the custom configurations. This way, you can automate the process of installing the Master Node and applying custom configurations.

If you need to apply custom configurations to the Media Node, you can use the following script template:

# 1. First install the Media Node (1)\nsh <(curl -fsSL http://get.openvidu.io/pro/ha/latest/install_ov_media_node.sh) \\\n    --node-role='media-node' \\\n    ... # Add the rest of the arguments (2)\n\n# 2. Add custom configurations (3)\n######### APPLY CUSTOM CONFIGURATIONS #########\n# If you want to apply any modification to the configuration files\n# of the OpenVidu services at /opt/openvidu, you can do it in this section.\n\n# Example 1: Change public IP address announced by OpenVidu for WebRTC connections\nyq eval '.rtc.node_ip = 1.2.3.4' \\\n    -i /opt/openvidu/config/livekit.yaml\n\n# Example 2: Add a webhook to LiveKit\nyq eval '.webhook.urls += [\"http://new-endpoint.example.com/webhook\"]' \\\n    -i /opt/openvidu/config/livekit.yaml\n\n######### END CUSTOM CONFIGURATIONS #########\n\n# 3. Start OpenVidu (4)\nsystemctl start openvidu\n
  1. First, install the Media Node using the OpenVidu installer. Check the installation guide for more information.
  2. Add the parameters you need to install the Media Node. You can find all the available parameters in the installation guide.
  3. Add the custom configurations you need to apply to the Media Node services. You can use yq or other tools to modify the configuration files. You can find more information about yq here.
  4. Start the Media Node.

Note

In case you want to deploy a specific version, just replace latest with the desired version. For example: 3.0.0.

Just install the Media Node first with the installer and then run some extra commands to apply the custom configurations. This way, you can automate the process of installing the Media Node and applying custom configurations.

"},{"location":"docs/self-hosting/ha/on-premises/admin/#enabling-and-disabling-openvidu-modules","title":"Enabling and Disabling OpenVidu Modules","text":"

The COMPOSE_PROFILES parameter in the .env file in Master and Media Nodes allows you to enable or disable specific modules in OpenVidu. The following modules can be enabled or disabled:

Observability moduleV2 Compatibility moduleApp module (Default App)

In case you have installed OpenVidu with the observability module, you just need to enable the observability module in the .env file in all nodes.

Otherwise, you can follow these steps to enable the observability module:

  1. Stop all Master Nodes and all Media Nodes, and backup the deployment

    sudo systemctl stop openvidu\nsudo cp -r /opt/openvidu/ /opt/openvidu_backup/\n

  2. In the Master Nodes, update the .env with the following changes:

    Add to the COMPOSE_PROFILES the observability module. Also, make sure to set up the GRAFANA_ADMIN_USERNAME and GRAFANA_ADMIN_PASSWORD parameters.

    If you have only the observability module enabled, your .env file should have the following environment variables:

    GRAFANA_ADMIN_USERNAME=\"<GRAFANA_ADMIN_USERNAME>\"\nGRAFANA_ADMIN_PASSWORD=\"<GRAFANA_ADMIN_PASSWORD>\"\n\nCOMPOSE_PROFILES=\"observability\"\n

  3. In the Media Nodes, enable the observability module:

    Add to the COMPOSE_PROFILES the observability module in the .env file. If you have only the observability module enabled, your .env file should have the following environment variable:

    COMPOSE_PROFILES=\"observability\"\n

    Then, add the following parameter in the config/livekit.yaml file:

    prometheus_port: 6789\n

  4. Start all Master Nodes and Media Nodes

    sudo systemctl start openvidu\n

Disabling the observability module

If you have the observability module enabled, and you want to disable it, just remove the observability module from the COMPOSE_PROFILES parameter in the .env file of all nodes.

In case you have installed OpenVidu with the v2compatibility module, you just need to enable the v2compatibility module in the .env file in all nodes.

Otherwise, you can follow these steps to enable the v2compatibility module:

  1. Stop all Master Nodes, all Media Nodes, and backup the deployment

    sudo systemctl stop openvidu\nsudo cp -r /opt/openvidu/ /opt/openvidu_backup/\n

  2. In the Master Nodes, update the .env with the following changes:

    Add to the COMPOSE_PROFILES the v2compatibility module.

    If you have only the v2compatibility module enabled, your .env file should have the following environment variable:

    COMPOSE_PROFILES=\"v2compatibility\"\n

  3. In the Media Nodes, update the LiveKit configuration to send webhooks to the V2 Compatibility service

    Just add the following parameter in the config/livekit.yaml file:

    webhook:\n    api_key: \"<LIVEKIT_API_KEY>\"\n    urls:\n        - http://localhost:4443/livekit/webhook\n

    Where <LIVEKIT_API_KEY> is the LIVEKIT_API_KEY parameter in the .env file.

    Note that the URL is http://localhost:4443 because an internal caddy proxy will balance the requests to all the V2 Compatibility services running in the Master Nodes.

  4. Start all Master Nodes and Media Nodes

    sudo systemctl start openvidu\n

Disabling the v2compatibility module

If you have the v2compatibility module enabled, and you want to disable it, just remove the v2compatibility module from the COMPOSE_PROFILES parameter in the .env file of all nodes.

In case you have installed OpenVidu without the app module, you just need to enable the app module in the .env file in all nodes.

Otherwise, you can follow these steps to enable the app module:

  1. Stop all Master Nodes, all Media Nodes, and backup the deployment

    sudo systemctl stop openvidu\nsudo cp -r /opt/openvidu/ /opt/openvidu_backup/\n

  2. In all Master Nodes, update the .env with the following changes:

    Add to the COMPOSE_PROFILES the app module.

    If you have only the app module enabled, your .env file should have the following environment variable:

    COMPOSE_PROFILES=\"app\"\n

  3. In the Media Nodes, update the LiveKit configuration to send webhooks to the Default App

    Just add the following parameter in the config/livekit.yaml file:

    webhook:\n    api_key: \"<LIVEKIT_API_KEY>\"\n    urls:\n        - http://localhost:6080/api/webhook\n

    Where <LIVEKIT_API_KEY> is the LIVEKIT_API_KEY parameter in the .env file.

    Note that the URL is http://localhost:6080 because an internal caddy proxy will balance the requests to all the Default App services running in the Master Nodes.

  4. Start all Master Nodes and Media Nodes

    sudo systemctl start openvidu\n

Disabling the app module

If you have the app module enabled, and you want to disable it, just remove the app module from the COMPOSE_PROFILES parameter in the .env file of all nodes.

"},{"location":"docs/self-hosting/ha/on-premises/admin/#global-configuration-changes","title":"Global configuration changes","text":"

Some configuration parameters may require modifying multiple configuration files. Below are some examples of advanced configurations and how to apply them:

Info

Usually, this is not needed because the installer takes care of generating all of this parameters. However, it is necessary if any password, credential, or domain change is needed.

Danger

Advanced configurations should be performed with caution. Incorrect configurations can lead to service failures or unexpected behavior.

Before making any changes, make sure to back up your installation by creating a snapshot of your server or by copying the /opt/openvidu/ directory to a safe location. For example:

sudo cp -r /opt/openvidu/ /opt/openvidu_backup/\n
Changing DOMAIN_OR_PUBLIC_IPChanging REDIS_PASSWORDChanging LIVEKIT_API_KEY and LIVEKIT_API_SECRETChanging MINIO_ACCESS_KEY and MINIO_SECRET_KEYChanging MONGO_ADMIN_USERNAME and MONGO_ADMIN_PASSWORD

To change all occurrences of the domain or public IP address in the configuration files, follow these steps:

  1. Stop OpenVidu in all Master Nodes and all Media Nodes and backup the deployment

    sudo systemctl stop openvidu\nsudo cp -r /opt/openvidu/ /opt/openvidu_backup/\n

  2. Find the current locations of DOMAIN_OR_PUBLIC_IP in your Master Nodes

    With the following commands, you can find all occurrences of the current domain or public IP address in the configuration files:

    sudo su\ncd /opt/openvidu/\nCURRENT_DOMAIN_OR_PUBLIC_IP=\"$(grep '^DOMAIN_OR_PUBLIC_IP' /opt/openvidu/.env | cut -d '=' -f 2)\"\ngrep --exclude-dir=data -IHnr \"$CURRENT_DOMAIN_OR_PUBLIC_IP\" .\n

    Warning

    Keep the value of CURRENT_DOMAIN_OR_PUBLIC_IP as you will need it to update the configuration files in the Media Nodes.

    Example output

    The output should look similar to the following:

    ./.env:DOMAIN_OR_PUBLIC_IP=<CURRENT_DOMAIN_OR_PUBLIC_IP>\n./config/caddy.yaml:        - certificate: /owncert/<CURRENT_DOMAIN_OR_PUBLIC_IP>.cert\n./config/caddy.yaml:          key: /owncert/<CURRENT_DOMAIN_OR_PUBLIC_IP>.key\n./config/caddy.yaml:            - <CURRENT_DOMAIN_OR_PUBLIC_IP>\n./config/caddy.yaml:                    - <CURRENT_DOMAIN_OR_PUBLIC_IP>\n./config/caddy.yaml:                        - <CURRENT_DOMAIN_OR_PUBLIC_IP>\n./config/caddy.yaml:                    - <CURRENT_DOMAIN_OR_PUBLIC_IP>\n./config/caddy.yaml:                        - <CURRENT_DOMAIN_OR_PUBLIC_IP>\n./config/caddy.yaml:                  - <CURRENT_DOMAIN_OR_PUBLIC_IP>\n./config/promtail.yaml:          cluster_id: <CURRENT_DOMAIN_OR_PUBLIC_IP>\n

    Note

    Don't worry if some values are different in your output. It varies depending on the parameters you've used to install OpenVidu.

  3. Update the Following Files in all your Master Nodes

    Based on the output from the previous step, update the following files with the new domain or public IP address:

  4. Verify the changes in all your Master Nodes

    These commands will list all occurrences of the new DOMAIN_OR_PUBLIC_IP in the configuration files. The output should match the locations found in the initial search but with the new domain or public IP address.

    sudo su\ncd /opt/openvidu/\nNEW_DOMAIN_OR_PUBLIC_IP=\"<NEW_DOMAIN_OR_PUBLIC_IP>\"\ngrep --exclude-dir=data -IHnr \"$NEW_DOMAIN_OR_PUBLIC_IP\" .\n

  5. Ensure to follow from step 2 to 4 for all your Master Nodes

  6. Find the current locations of CURRENT_DOMAIN_OR_PUBLIC_IP in your Media Nodes

    With the CURRENT_DOMAIN_OR_PUBLIC_IP value obtained in step 2, you can find all occurrences of the current domain or public IP address in the configuration files of the Media Nodes. To do this, connect to each Media Node and run the following command:

    sudo su\ncd /opt/openvidu/\nCURRENT_DOMAIN_OR_PUBLIC_IP=\"<CURRENT_DOMAIN_OR_PUBLIC_IP>\"\ngrep --exclude-dir=data -IHnr \"$CURRENT_DOMAIN_OR_PUBLIC_IP\" .\n
    Example output

    The output should look similar to the following:

    ./config/promtail.yaml:          cluster_id: <CURRENT_DOMAIN_OR_PUBLIC_IP>\n./config/livekit.yaml:    cluster_id: <CURRENT_DOMAIN_OR_PUBLIC_IP>\n./config/livekit.yaml:    rtmp_base_url: rtmps://<CURRENT_DOMAIN_OR_PUBLIC_IP>:1935/rtmp\n./config/livekit.yaml:    whip_base_url: https://<CURRENT_DOMAIN_OR_PUBLIC_IP>/whip\n

  7. Update the Following Files in your Media Nodes

    Based on the output from the previous step, update the following files with the new domain or public IP address:

  8. Verify the changes in your Media Nodes

    These commands will list all occurrences of the new DOMAIN_OR_PUBLIC_IP in the configuration files of the Media Nodes. The output should match the locations found in the initial search but with the new domain or public IP address.

    sudo su\ncd /opt/openvidu/\nNEW_DOMAIN_OR_PUBLIC_IP=\"<NEW_DOMAIN_OR_PUBLIC_IP>\"\ngrep --exclude-dir=data -IHnr \"$NEW_DOMAIN_OR_PUBLIC_IP\" .\n

  9. Ensure to follow from step 5 to 7 for all your Media Nodes

  10. Start all Master Nodes and Media Nodes

    sudo systemctl start openvidu\n

Some notes on changing the DOMAIN_OR_PUBLIC_IP parameter:

To change the REDIS_PASSWORD parameter, follow these steps:

  1. Stop OpenVidu in all the Master Nodes and all Media Nodes and backup the deployment

    sudo systemctl stop openvidu\nsudo cp -r /opt/openvidu/ /opt/openvidu_backup/\n

  2. Replace in all Master Nodes the REDIS_PASSWORD in the .env file with your new value

    Warning

    Keep the previous value of REDIS_PASSWORD as you will need it to update the configuration files in the Media Nodes. We will refer to this value as <CURRENT_REDIS_PASSWORD>.

  3. Ensure to replace the REDIS_PASSWORD in the .env file of all your Master Nodes

  4. Find the current locations of REDIS_PASSWORD in your Media Nodes

    With the CURRENT_REDIS_PASSWORD value obtained in step 2, you can find all occurrences of the current Redis password in the configuration files of the Media Nodes. To do this, connect to each Media Node and run the following command:

    sudo su\ncd /opt/openvidu/\nCURRENT_REDIS_PASSWORD=\"<CURRENT_REDIS_PASSWORD>\"\ngrep --exclude-dir=data -IHnr \"$CURRENT_REDIS_PASSWORD\" .\n
    Example output

    The output should look similar to the following:

    ./config/egress.yaml:    password: <CURRENT_REDIS_PASSWORD>\n./config/ingress.yaml:    password: <CURRENT_REDIS_PASSWORD>\n./config/livekit.yaml:    password: <CURRENT_REDIS_PASSWORD>\n

  5. Update the Following Files in your Media Nodes

    Based on the output from the previous step, update the following files with the new Redis password:

  6. Verify the changes in your Media Nodes

    These commands will list all occurrences of the new REDIS_PASSWORD in the configuration files of the Media Nodes. The output should match the locations found in the initial search but with the new Redis password.

    sudo su\ncd /opt/openvidu/\nNEW_REDIS_PASSWORD=\"<NEW_REDIS_PASSWORD>\"\ngrep --exclude-dir=data -IHnr \"$NEW_REDIS_PASSWORD\" .\n

  7. Ensure to follow from step 3 to 5 for all your Media Nodes

  8. Start all Master Nodes and Media Nodes

    sudo systemctl start openvidu\n

To change the LIVEKIT_API_KEY and LIVEKIT_API_SECRET parameters, follow these steps:

  1. Stop OpenVidu in all Master Nodes and all Media Nodes and backup the deployment

    sudo systemctl stop openvidu\nsudo cp -r /opt/openvidu/ /opt/openvidu_backup/\n

  2. Replace at the Master Nodes the LIVEKIT_API_KEY and LIVEKIT_API_SECRET in the .env file with your new values

    Warning

    Keep the previous values of LIVEKIT_API_KEY and LIVEKIT_API_SECRET as you will need them to update the configuration files in the Media Nodes. We will refer to these values as <CURRENT_LIVEKIT_API_KEY> and <CURRENT_LIVEKIT_API_SECRET>.

  3. Ensure to replace the LIVEKIT_API_KEY and LIVEKIT_API_SECRET in the .env file of all your Master Nodes

  4. Find the current locations of LIVEKIT_API_KEY and LIVEKIT_API_SECRET in your Media Nodes

    With the CURRENT_LIVEKIT_API_KEY and CURRENT_LIVEKIT_API_SECRET values obtained in step 2, you can find all occurrences of the current LiveKit API key and secret in the configuration files of the Media Nodes. To do this, connect to each Media Node and run the following command:

    sudo su\ncd /opt/openvidu/\nCURRENT_LIVEKIT_API_KEY=\"<CURRENT_LIVEKIT_API_KEY>\"\nCURRENT_LIVEKIT_API_SECRET=\"<CURRENT_LIVEKIT_API_SECRET>\"\ngrep --exclude-dir=data -IHnr \"$CURRENT_LIVEKIT_API_KEY\" .\ngrep --exclude-dir=data -IHnr \"$CURRENT_LIVEKIT_API_SECRET\" .\n
    Example output

    The output should look similar to the following for LIVEKIT_API_KEY:

    ./config/egress.yaml:api_key: <CURRENT_LIVEKIT_API_KEY>\n./config/ingress.yaml:api_key: <CURRENT_LIVEKIT_API_KEY>\n./config/livekit.yaml:    <CURRENT_LIVEKIT_API_KEY>: <CURRENT_LIVEKIT_API_SECRET>\n./config/livekit.yaml:    api_key: <CURRENT_LIVEKIT_API_KEY>\n

    And for LIVEKIT_API_SECRET:

    ./config/egress.yaml:api_secret: <CURRENT_LIVEKIT_API_SECRET>\n./config/ingress.yaml:api_secret: <CURRENT_LIVEKIT_API_SECRET>\n./config/livekit.yaml:    <CURRENT_LIVEKIT_API_KEY>: <CURRENT_LIVEKIT_API_SECRET>\n

  5. Update the Following Files in your Media Nodes

    Based on the output from the previous step, update the following files with the new values:

  6. Verify the changes in your Media Nodes

    These commands will list all occurrences of the new LIVEKIT_API_KEY and LIVEKIT_API_SECRET in the configuration files of the Media Nodes. The output should match the locations found in the initial search but with the new values.

    sudo su\ncd /opt/openvidu/\nNEW_LIVEKIT_API_KEY=\"<NEW_LIVEKIT_API_KEY>\"\nNEW_LIVEKIT_API_SECRET=\"<NEW_LIVEKIT_API_SECRET>\"\ngrep --exclude-dir=data -IHnr \"$NEW_LIVEKIT_API_KEY\" .\ngrep --exclude-dir=data -IHnr \"$NEW_LIVEKIT_API_SECRET\" .\n

  7. Ensure to follow from step 3 to 5 for all your Media Nodes

  8. Start all Master Nodes and Media Nodes

    sudo systemctl start openvidu\n

To change the MINIO_ACCESS_KEY and MINIO_SECRET_KEY parameters, follow these steps:

  1. Stop OpenVidu in all the Master Nodes and all Media Nodes and backup the deployment

    sudo systemctl stop openvidu\nsudo cp -r /opt/openvidu/ /opt/openvidu_backup/\n

  2. Replace in all the Master Nodes the MINIO_ACCESS_KEY and MINIO_SECRET_KEY in the .env file with your new values

    Take into account that if you are using the v2compatibility module in COMPOSE_PROFILES, you will need to change the V2COMPAT_OPENVIDU_PRO_AWS_ACCESS_KEY and V2COMPAT_OPENVIDU_PRO_AWS_SECRET_KEY parameters in the .env file.

    Warning

    Keep the previous values of MINIO_ACCESS_KEY and MINIO_SECRET_KEY as you will need them to update the configuration files in the Media Nodes. We will refer to these values as <CURRENT_MINIO_ACCESS_KEY> and <CURRENT_MINIO_SECRET_KEY>.

  3. Ensure to apply the changes in the .env file of all your Master Nodes

  4. Find the current locations of MINIO_ACCESS_KEY and MINIO_SECRET_KEY in your Media Nodes

    With the CURRENT_MINIO_ACCESS_KEY and CURRENT_MINIO_SECRET_KEY values obtained in step 2, you can find all occurrences of the current MinIO access key and secret in the configuration files of the Media Nodes. To do this, connect to each Media Node and run the following command:

    sudo su\ncd /opt/openvidu/\nCURRENT_MINIO_ACCESS_KEY=\"<CURRENT_MINIO_ACCESS_KEY>\"\nCURRENT_MINIO_SECRET_KEY=\"<CURRENT_MINIO_SECRET_KEY>\"\ngrep --exclude-dir=data -IHnr \"$CURRENT_MINIO_ACCESS_KEY\" .\ngrep --exclude-dir=data -IHnr \"$CURRENT_MINIO_SECRET_KEY\" .\n
    Example output

    The output should look similar to the following for MINIO_ACCESS_KEY:

    ./config/egress.yaml:access_key: <CURRENT_MINIO_ACCESS_KEY>\n

    And for MINIO_SECRET_KEY:

    ./config/egress.yaml:secret: <CURRENT_MINIO_SECRET_KEY>\n

  5. Update the Following Files in your Media Nodes

    Based on the output from the previous step, update the following files with the new values:

  6. Verify the changes in your Media Nodes

    These commands will list all occurrences of the new MINIO_ACCESS_KEY and MINIO_SECRET_KEY in the configuration files of the Media Nodes. The output should match the locations found in the initial search but with the new values.

    sudo su\ncd /opt/openvidu/\nNEW_MINIO_ACCESS_KEY=\"<NEW_MINIO_ACCESS_KEY>\"\nNEW_MINIO_SECRET_KEY=\"<NEW_MINIO_SECRET_KEY>\"\ngrep --exclude-dir=data -IHnr \"$NEW_MINIO_ACCESS_KEY\" .\ngrep --exclude-dir=data -IHnr \"$NEW_MINIO_SECRET_KEY\" .\n

  7. Ensure to follow from step 3 to 5 for all your Media Nodes

  8. Start all the Master Nodes and all the Media Nodes

    sudo systemctl start openvidu\n

To change the MONGO_ADMIN_USERNAME and MONGO_ADMIN_PASSWORD parameters, follow these steps:

  1. Stop OpenVidu in all the Master Nodes and all the Media Nodes and backup the deployment

    sudo systemctl stop openvidu\nsudo cp -r /opt/openvidu/ /opt/openvidu_backup/\n

  2. Replace in all the Master Nodes the MONGO_ADMIN_USERNAME and MONGO_ADMIN_PASSWORD in the .env file with your new values

    Warning

    Keep the previous values of MONGO_ADMIN_USERNAME and MONGO_ADMIN_PASSWORD as you will need them to update the configuration files in the Media Nodes. We will refer to these values as <CURRENT_MONGO_ADMIN_USERNAME> and <CURRENT_MONGO_ADMIN_PASSWORD>.

  3. Ensure to replace the MONGO_ADMIN_USERNAME and MONGO_ADMIN_PASSWORD in the .env file of all your Master Nodes

  4. Find the current locations of MONGO_ADMIN_USERNAME and MONGO_ADMIN_PASSWORD in your Media Nodes

    With the CURRENT_MONGO_ADMIN_USERNAME and CURRENT_MONGO_ADMIN_PASSWORD values obtained in step 2, you can find all occurrences of the current MongoDB admin username and password in the configuration files of the Media Nodes. To do this, connect to each Media Node and run the following command:

    sudo su\ncd /opt/openvidu/\nCURRENT_MONGO_ADMIN_USERNAME=\"<CURRENT_MONGO_ADMIN_USERNAME>\"\nCURRENT_MONGO_ADMIN_PASSWORD=\"<CURRENT_MONGO_ADMIN_PASSWORD>\"\ngrep --exclude-dir=data -IHnr \"$CURRENT_MONGO_ADMIN_USERNAME\" .\ngrep --exclude-dir=data -IHnr \"$CURRENT_MONGO_ADMIN_PASSWORD\" .\n
    Example output

    The output should look similar to the following for MONGO_ADMIN_USERNAME:

    ./config/livekit.yaml:mongo_url: <MONGO_URL>\n

    And for MONGO_ADMIN_PASSWORD:

    ./config/livekit.yaml:mongo_url: <MONGO_URL>\n

  5. Update the Following Files in your Media Nodes

    Based on the output from the previous step, update the following files with the new values:

  6. Verify the changes in your Media Nodes

    These commands will list all occurrences of the new MONGO_ADMIN_USERNAME and MONGO_ADMIN_PASSWORD in the configuration files of the Media Nodes. The output should match the locations found in the initial search but with the new values.

    sudo su\ncd /opt/openvidu/\nNEW_MONGO_ADMIN_USERNAME=\"<NEW_MONGO_ADMIN_USERNAME>\"\nNEW_MONGO_ADMIN_PASSWORD=\"<NEW_MONGO_ADMIN_PASSWORD>\"\ngrep --exclude-dir=data -IHnr \"$NEW_MONGO_ADMIN_USERNAME\" .\ngrep --exclude-dir=data -IHnr \"$NEW_MONGO_ADMIN_PASSWORD\" .\n

  7. Ensure to follow from step 3 to 5 for all your Media Nodes

  8. Start all the Master Nodes and all the Media Nodes

    sudo systemctl start openvidu\n
"},{"location":"docs/self-hosting/ha/on-premises/admin/#uninstalling-openvidu","title":"Uninstalling OpenVidu","text":"

To uninstall any OpenVidu Node, just execute the following commands:

sudo su\nsystemctl stop openvidu\nrm -rf /opt/openvidu/\nrm /etc/systemd/system/openvidu.service\n
"},{"location":"docs/self-hosting/ha/on-premises/install-dlb/","title":"OpenVidu High Availability Installation: On-premises with DNS Load Balancing","text":"

Info

OpenVidu High Availability is part of OpenVidu PRO. Before deploying, you need to create an OpenVidu account to get your license key. There's a 15-day free trial waiting for you!

This section provides instructions for deploying a production-ready OpenVidu High Availability setup on-premises, utilizing DNS for load balancing traffic. DNS allows multiple records, even of the same kind, to be registered, enabling the listing of multiple hosts under the same domain name. Such a mechanism allows for the distribution of traffic among the Master Nodes, offering an alternative to Network Load Balancers.

Advantages of DNS Load Balancing:

Disadvantages of DNS Load Balancing:

Architecture overview

This is how the architecture of the deployment looks like:

OpenVidu High Availability Architecture with DNS Load Balancing

For the Master Node, the following services are configured:

For the Media Nodes, the following services are configured:

"},{"location":"docs/self-hosting/ha/on-premises/install-dlb/#prerequisites","title":"Prerequisites","text":""},{"location":"docs/self-hosting/ha/on-premises/install-dlb/#port-rules-master-nodes","title":"Port rules (Master Nodes)","text":"

Ensure all these rules are configured in your firewall, security group, or any kind of network configuration that you have in your Master Nodes:

Inbound port rules:

Protocol Ports Source Description TCP 80 0.0.0.0/0, ::/0 Redirect HTTP to HTTPS and Let's Encrypt validation. TCP 443 0.0.0.0/0, ::/0 Allows access to the following: TCP 1935 0.0.0.0/0, ::/0 (Optional) For ingesting RTMP streams using Ingress service. TCP 9000 0.0.0.0/0, ::/0 (Optional) To expose MinIO publicly. TCP 3000 Master Nodes (Optional) For load balancing requests to Grafana (Observability module). TCP 8080 Master Nodes For load balancing requests to OpenVidu Dashboard. TCP 9101 Master Nodes For load balancing requests to MinIO Console. TCP 7946-7947 Master Nodes (Optional) For Mimir and Loki cluster communication (Observability module). TCP 9095-9096 Master Nodes (Optional) For Mimir and Loki cluster communication (Observability module). TCP 3100 Media Nodes (Optional) For Loki (Observability module). TCP 9009 Media Nodes (Optional) For Mimir (Observability module). TCP 4443 Master Nodes, Media Nodes (Optional) For OpenVidu V2 compatibility service. TCP 6080 Master Nodes, Media Nodes (Optional) For OpenVidu Call (Default Application). TCP 7000-7001 Master Nodes, Media Nodes For internal Redis communication TCP 9100 Master Nodes, Media Nodes For internal MinIO communication TCP 20000 Master Nodes, Media Nodes For internal Mongo communication

Outbound port rules:

Typically, all outbound traffic is allowed.

"},{"location":"docs/self-hosting/ha/on-premises/install-dlb/#port-rules-media-nodes","title":"Port rules (Media Nodes)","text":"

Ensure all these rules are configured in your firewall, security group, or any kind of network configuration that you have in your Media Nodes:

Inbound port rules:

Protocol Ports Source Description UDP 443 0.0.0.0/0, ::/0 STUN/TURN over UDP. TCP 7881 0.0.0.0/0, ::/0 (Optional), only needed if you want to allow WebRTC over TCP. UDP 7885 0.0.0.0/0, ::/0 (Optional). Only needed if you want to ingest WebRTC using WHIP. UDP 50000-60000 0.0.0.0/0, ::/0 WebRTC Media traffic. TCP 1935 Master Nodes (Optional). Only needed if you want to ingest RTMP streams using Ingress service. Master Nodes need access to this port to reach Ingress RTMP service and expose it using TLS (RTMPS). TCP 5349 Master Nodes (Optional). Only needed if you want to expose TURN service with TLS. Master Nodes need access to this port to reach TURN service and expose it using TLS (TURNS). TCP 7880 Master Nodes LiveKit API. Master Nodes need access to load balance LiveKit API and expose it through HTTPS. TCP 8080 Master Nodes (Optional). Only needed if you want to ingest WebRTC streams using WHIP. Master Nodes need access to this port to reach WHIP HTTP service."},{"location":"docs/self-hosting/ha/on-premises/install-dlb/#guided-installation","title":"Guided Installation","text":"

Before the installation, ensure that all your machines meet the prerequisites and the port rules for the Master Nodes and Media Nodes are correctly configured.

To install OpenVidu High Availability, begin by generating the commands required for setting up all nodes in the cluster. This is a simple and straightforward process; simply run the following command on any machine that has Docker installed:

docker run -it openvidu/openvidu-installer:latest \\\n    --deployment-type=ha\n

Note

In case you want to deploy a specific version, just replace latest with the desired version. For example: 3.0.0.

A wizard will guide you through the installation process. You will be asked for the following information:

Info

If you don't have a license key for OpenVidu PRO, you can get a 15-day free trial license key by creating an OpenVidu account.

The rest of the parameters are secrets, usernames, and passwords. If empty, the wizard will generate random values for them.

This command will output the following instructions, which you should follow:

  1. Firewall Configuration for 'Master Nodes': These rules are the same as the ones specified in the instructions. Depending on the modules you have selected, some rules defined at Port rules (Master Nodes) may not appear (Optional ports). Double-check them and modify them if you see something that can be enabled/disabled in your current port rules.

  2. Installation Commands for 'Master Nodes': This is the command needed to install your Master Node. It should look like this:

    sh <(curl -fsSL http://get.openvidu.io/pro/ha/latest/install_ov_master_node.sh) \\\n    --no-tty --install \\\n    --deployment-type='ha' \\\n    --node-role='master-node' \\\n...\n

    Note

    In case you want to deploy a specific version, just replace latest with the desired version. For example: 3.0.0.

    Execute that command on all your Master Nodes to install them. When the installation process finishes, you will see the following output:

    > - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - <\n>                                                                             <\n>  \ud83c\udf89\ud83c\udf89 OpenVidu HA 'Master Node' Installation Finished Successfully! \ud83c\udf89\ud83c\udf89    <\n>                                                                             <\n> - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - <\n

    The Master Node will be installed in /opt/openvidu and configured as a systemd service. To start the service, use the following command:

    systemctl start openvidu\n

    Your Master Nodes will be ready once all of them have been started.

  3. Firewall Configuration for 'Media Nodes': These rules are the same as the ones defined previously as with Master Nodes. Double-check the Port rules (Media Nodes) and modify them if you see something that can be enabled/disabled in your current port rules.

  4. Installation Commands for 'Media Nodes': This is the command needed to install your Media Nodes. It should look like this:

    sh <(curl -fsSL http://get.openvidu.io/pro/ha/latest/install_ov_media_node.sh) \\\n    --no-tty --install \\\n    --deployment-type='ha' \\\n    --node-role='media-node' \\\n...\n

    Note

    In case you want to deploy a specific version, just replace latest with the desired version. For example: 3.0.0.

    Execute that command on your Media Nodes to install them. When the installation process finishes, you will see the following output:

    > - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - <\n>                                                                             <\n>  \ud83c\udf89 OpenVidu HA 'Media Node' Installation Finished Successfully! \ud83c\udf89         <\n>                                                                             <\n> - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - <\n

    The Media Node on each machine will be installed at /opt/openvidu and configured as a systemd service. You can start the service with the following command:

    systemctl start openvidu\n

If everything goes well, all containers will be up and running without restarts, and you will be able to access any of the following services:

OpenVidu Server PRO URL (LiveKit compatible) will be available also in:

"},{"location":"docs/self-hosting/ha/on-premises/install-dlb/#configure-your-application-to-use-the-deployment","title":"Configure your Application to use the Deployment","text":"

To point your applications to your OpenVidu deployment, check the file at /opt/openvidu/.env of any Master Node. All access credentials of all services are defined in this file.

Your authentication credentials and URL to point your applications would be:

"},{"location":"docs/self-hosting/ha/on-premises/install-dlb/#non-interactive-installation","title":"Non-interactive installation","text":"

To automate the installation process, you just need to execute the specified command in the Guided Installation section and execute the generated commands.

Each installation command for each type of node looks like this:

Master NodeMedia Node

The Master Node can be configured with multiple kinds of certificates. Here are the examples for each type of certificate:

Let's Encrypt certificatesSelf-signed certificatesCustom certificates

Example using Let's Encrypt certificates:

sh <(curl -fsSL http://get.openvidu.io/pro/ha/latest/install_ov_master_node.sh) \\\n    --node-role='master-node' \\\n    --master-node-private-ip-list='10.5.0.1,10.5.0.2,10.5.0.3,10.5.0.4' \\\n    --openvidu-pro-license='xxxxx' \\\n    --domain-name-or-ip='openvidu.example.io' \\\n    --enabled-modules='observability,v2compatibility,app' \\\n    --turn-domain-name='turn.example.io' \\\n    --livekit-api-key='xxxxx' \\\n    --livekit-api-secret='xxxxx' \\\n    --dashboard-admin-user='xxxxx' \\\n    --dashboard-admin-password='xxxxx' \\\n    --redis-password='xxxxx' \\\n    --minio-access-key='xxxxx' \\\n    --minio-secret-key='xxxxx' \\\n    --mongo-admin-user='xxxxx' \\\n    --mongo-admin-password='xxxxx' \\\n    --mongo-replica-set-key='xxxxx' \\\n    --grafana-admin-user='xxxxx' \\\n    --grafana-admin-password='xxxxx' \\\n    --default-app-user='xxxxx' \\\n    --default-app-password='xxxxx' \\\n    --default-app-admin-user='xxxxx' \\\n    --default-app-admin-password='xxxxx' \\\n    --certificate-type='letsencrypt' \\\n    --letsencrypt-email='example@example.io'\n

Note

In case you want to deploy a specific version, just replace latest with the desired version. For example: 3.0.0.

Notes:

Example using self-signed certificates:

sh <(curl -fsSL http://get.openvidu.io/pro/ha/latest/install_ov_master_node.sh) \\\n    --node-role='master-node' \\\n    --master-node-private-ip-list='10.5.0.1,10.5.0.2,10.5.0.3,10.5.0.4' \\\n    --openvidu-pro-license='xxxxx' \\\n    --domain-name-or-ip='openvidu.example.io' \\\n    --enabled-modules='observability,v2compatibility,app' \\\n    --turn-domain-name='turn.example.io' \\\n    --livekit-api-key='xxxxx' \\\n    --livekit-api-secret='xxxxx' \\\n    --dashboard-admin-user='xxxxx' \\\n    --dashboard-admin-password='xxxxx' \\\n    --redis-password='xxxxx' \\\n    --minio-access-key='xxxxx' \\\n    --minio-secret-key='xxxxx' \\\n    --mongo-admin-user='xxxxx' \\\n    --mongo-admin-password='xxxxx' \\\n    --mongo-replica-set-key='xxxxx' \\\n    --grafana-admin-user='xxxxx' \\\n    --grafana-admin-password='xxxxx' \\\n    --default-app-user='xxxxx' \\\n    --default-app-password='xxxxx' \\\n    --default-app-admin-user='xxxxx' \\\n    --default-app-admin-password='xxxxx' \\\n    --certificate-type='selfsigned'\n

Note

In case you want to deploy a specific version, just replace latest with the desired version. For example: 3.0.0.

Example using custom certificates:

CERT_PRIVATE_KEY=$(cat privkey.pem | base64 -w 0)\nCERT_PUBLIC_KEY=$(cat fullchain.pem | base64 -w 0)\n\n# Optional, only if you want to enable TURN with TLS\nCERT_TURN_PRIVATE_KEY=$(cat turn-privkey.pem | base64 -w 0)\nCERT_TURN_PUBLIC_KEY=$(cat turn-fullchain.pem | base64 -w 0)\n\nsh <(curl -fsSL http://get.openvidu.io/pro/ha/latest/install_ov_master_node.sh) \\\n    --node-role='master-node' \\\n    --master-node-private-ip-list='10.5.0.1,10.5.0.2,10.5.0.3,10.5.0.4' \\\n    --openvidu-pro-license='xxxxx' \\\n    --domain-name-or-ip='openvidu.example.io' \\\n    --enabled-modules='observability,v2compatibility,app' \\\n    --turn-domain-name='turn.example.io' \\\n    --livekit-api-key='xxxxx' \\\n    --livekit-api-secret='xxxxx' \\\n    --dashboard-admin-user='xxxxx' \\\n    --dashboard-admin-password='xxxxx' \\\n    --redis-password='xxxxx' \\\n    --minio-access-key='xxxxx' \\\n    --minio-secret-key='xxxxx' \\\n    --mongo-admin-user='xxxxx' \\\n    --mongo-admin-password='xxxxx' \\\n    --mongo-replica-set-key='xxxxx' \\\n    --grafana-admin-user='xxxxx' \\\n    --grafana-admin-password='xxxxx' \\\n    --default-app-user='xxxxx' \\\n    --default-app-password='xxxxx' \\\n    --default-app-admin-user='xxxxx' \\\n    --default-app-admin-password='xxxxx' \\\n    --certificate-type='owncert' \\\n    --owncert-private-key=\"$CERT_PRIVATE_KEY\" \\\n    --owncert-public-key=\"$CERT_PUBLIC_KEY\" \\\n    --turn-owncert-private-key=\"$CERT_TURN_PRIVATE_KEY\" \\\n    --turn-owncert-public-key=\"$CERT_TURN_PUBLIC_KEY\"\n

Note

In case you want to deploy a specific version, just replace latest with the desired version. For example: 3.0.0.

To install a Media Node, you can use the following command:

sh <(curl -fsSL http://get.openvidu.io/pro/ha/latest/install_ov_media_node.sh) \\\n    --node-role='media-node' \\\n    --domain-name-or-ip='openvidu.example.io' \\\n    --master-node-private-ip-list='10.5.0.1,10.5.0.2,10.5.0.3,10.5.0.4' \\\n    --openvidu-pro-license='xxxxx' \\\n    --rtc-engine='pion' \\\n    --enabled-modules='observability,v2compatibility,app' \\\n    --turn-domain-name='openvidu.example.io' \\\n    --livekit-api-key='xxxxx' \\\n    --livekit-api-secret='xxxxx' \\\n    --redis-password='xxxxx' \\\n    --minio-access-key='xxxxx' \\\n    --minio-secret-key='xxxxx' \\\n    --mongo-admin-user='xxxxx' \\\n    --mongo-admin-password='xxxxx'\n

Note

In case you want to deploy a specific version, just replace latest with the desired version. For example: 3.0.0.

You can run these commands in a CI/CD pipeline or in a script to automate the installation process.

Some general notes about all commands:

To start each node, remember to execute the following command in each node:

systemctl start openvidu\n
"},{"location":"docs/self-hosting/ha/on-premises/install-dlb/#configuration-and-administration","title":"Configuration and administration","text":"

Once you have OpenVidu deployed, you can check the Configuration and Administration section to learn how to manage your OpenVidu High Availability deployment.

"},{"location":"docs/self-hosting/ha/on-premises/install-nlb/","title":"OpenVidu High Availability Installation: On-premises with Network Load Balancer","text":"

Info

OpenVidu High Availability is part of OpenVidu PRO. Before deploying, you need to create an OpenVidu account to get your license key. There's a 15-day free trial waiting for you!

This section provides instructions for deploying a production-ready OpenVidu High Availability setup on-premises, utilizing a Network Load Balancer in front of the cluster. Network Load Balancing is a method of distributing incoming network traffic across multiple servers. It is a highly available, scalable, and fault-tolerant solution that ensures your OpenVidu deployment is always up and running. Compared to DNS Load Balancing, Network Load Balancing is more reliable for health checks and ensures that traffic is evenly distributed across all nodes.

Advantages of Network Load Balancing:

Disadvantages of Network Load Balancing:

Architecture overview

This is how the architecture of the deployment looks:

OpenVidu High Availability Architecture with Network Load Balancer

For the Master Node, the following services are configured:

For the Media Nodes, the following services are configured:

"},{"location":"docs/self-hosting/ha/on-premises/install-nlb/#prerequisites","title":"Prerequisites","text":""},{"location":"docs/self-hosting/ha/on-premises/install-nlb/#port-rules-master-nodes","title":"Port rules (Master Nodes)","text":"

Ensure all these rules are configured in your firewall, security group, or any kind of network configuration that you have in your Master Nodes:

Inbound port rules:

Protocol Ports Source Description TCP 7880 Load Balancer Allows access to the following to the Load Balancer: TCP 7946-7947 Master Nodes (Optional) For Mimir and Loki cluster communication (Observability module). TCP 9095-9096 Master Nodes (Optional) For Mimir and Loki cluster communication (Observability module). TCP 3100 Media Nodes (Optional) For Loki (Observability module). TCP 9009 Media Nodes (Optional) For Mimir (Observability module). TCP 4443 Media Nodes (Optional) For OpenVidu V2 compatibility service. TCP 6080 Media Nodes (Optional) For OpenVidu Call (Default Application). TCP 7000-7001 Master Nodes, Media Nodes For internal Redis communication TCP 9100 Master Nodes, Media Nodes For internal Minio communication TCP 20000 Master Nodes, Media Nodes For internal Mongo communication

Outbound port rules:

Typically, all outbound traffic is allowed.

"},{"location":"docs/self-hosting/ha/on-premises/install-nlb/#port-rules-media-nodes","title":"Port rules (Media Nodes)","text":"

Ensure all these rules are configured in your firewall, security group, or any kind of network configuration that you have in your Media Nodes:

Inbound port rules:

Protocol Ports Source Description UDP 443 0.0.0.0/0, ::/0 STUN/TURN over UDP. TCP 7881 0.0.0.0/0, ::/0 (Optional), only needed if you want to allow WebRTC over TCP. UDP 7885 0.0.0.0/0, ::/0 (Optional). Only needed if you want to ingest WebRTC using WHIP. UDP 50000-60000 0.0.0.0/0, ::/0 WebRTC Media traffic. TCP 1935 Load Balancer (Optional). Only needed if you want to ingest RTMP streams using Ingress service. Master Nodes need access to this port to reach Ingress RTMP service and expose it using TLS (RTMPS). TCP 5349 Load Balancer (Optional). Only needed if you want to expose TURN service with TLS. Master Nodes need access to this port to reach TURN service and expose it using TLS (TURNS). TCP 7880 Master Nodes LiveKit API. Master Nodes need access to load balance LiveKit API and expose it through HTTPS. TCP 8080 Master Nodes (Optional). Only needed if you want to ingest WebRTC streams using WHIP. Master Nodes need access to this port to reach WHIP HTTP service."},{"location":"docs/self-hosting/ha/on-premises/install-nlb/#guided-installation","title":"Guided Installation","text":"

Before the installation, ensure that all your machines meet the prerequisites and the port rules for the Master Nodes and Media Nodes are correctly configured.

To install OpenVidu High Availability, begin by generating the commands required for setting up all nodes in the cluster. This is a simple and straightforward process; simply run the following command on any machine that has Docker installed:

docker run -it openvidu/openvidu-installer:latest \\\n    --deployment-type=ha\n

Note

In case you want to deploy a specific version, just replace latest with the desired version. For example: 3.0.0.

A wizard will guide you through the installation process. You will be asked for the following information:

Info

If you don't have a license key for OpenVidu PRO, you can get a 15-day free trial license key by creating an OpenVidu account.

The rest of the parameters are secrets, usernames, and passwords. If empty, the wizard will generate random values for them.

This command will output the following instructions, which you should follow:

  1. Firewall Configuration for 'Master Nodes': These rules are the same as the ones specified in the instructions. Depending on the modules you have selected, some rules defined at Port rules (Master Nodes) may not appear (Optional ports). Double-check and modify them if you see something that can be enabled/disabled in your current port rules.

  2. Installation Commands for 'Master Nodes': This is the command needed to install your Master Node. It should look like this:

    sh <(curl -fsSL http://get.openvidu.io/pro/ha/latest/install_ov_master_node.sh) \\\n    --no-tty --install \\\n    --deployment-type='ha' \\\n    --node-role='master-node' \\\n...\n

    Note

    In case you want to deploy a specific version, just replace latest with the desired version. For example: 3.0.0.

    Execute that command on all your Master Nodes to install them. When the installation process finishes, you will see the following output:

    > - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - <\n>                                                                             <\n>  \ud83c\udf89\ud83c\udf89 OpenVidu HA 'Master Node' Installation Finished Successfully! \ud83c\udf89\ud83c\udf89    <\n>                                                                             <\n> - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - <\n

    The Master Node will be installed in /opt/openvidu and configured as a systemd service. To start the service, use the following command:

    systemctl start openvidu\n

    Your Master Nodes will be ready once all of them have been started.

  3. Firewall Configuration for 'Media Nodes': These rules are the same as the ones defined previously as with Master Nodes. Double-check the Port rules (Media Nodes) and modify them if you see something that can be enabled/disabled in your current port rules.

  4. Installation Commands for 'Media Nodes': This is the command needed to install your Media Nodes. It should look like this:

    sh <(curl -fsSL http://get.openvidu.io/pro/ha/latest/install_ov_media_node.sh) \\\n    --no-tty --install \\\n    --deployment-type='ha' \\\n    --node-role='media-node' \\\n...\n

    Note

    In case you want to deploy a specific version, just replace latest with the desired version. For example: 3.0.0.

    Execute that command on your Media Nodes to install them. When the installation process finishes, you will see the following output:

    > - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - <\n>                                                                             <\n>  \ud83c\udf89 OpenVidu HA 'Media Node' Installation Finished Successfully! \ud83c\udf89         <\n>                                                                             <\n> - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - <\n

    The Media Node in each machine will be installed at /opt/openvidu and configured as a systemd service. You can start the service with the following command:

    systemctl start openvidu\n

If everything goes well, all containers will be up and running without restarts, and you will be able to access any of the following services:

OpenVidu Server PRO URL (LiveKit compatible) will be available also in:

"},{"location":"docs/self-hosting/ha/on-premises/install-nlb/#load-balancer-configuration","title":"Load Balancer Configuration","text":"

To configure the Load Balancer, you must create a new TCP listener for each port that the Master Nodes use. The Load Balancer should be set up to distribute traffic evenly across all Master Nodes, targeting their private IP addresses. Additionally, optional features like RTMP and TURN with TLS should be directed to use the private IP addresses of the Media Nodes. This ensures that traffic for these services is properly routed to the Media Nodes.

Below is an example using NGINX as a Load Balancer:

NGINX Load Balancer ConfigurationNGINX Load Balancer Configuration (With TLS for TURN)

Example configuration for NGINX Load Balancer:

events {\n    worker_connections 10240;\n}\n\nstream {\n\n    upstream openvidu_master_nodes {\n        server <MASTER_NODE_IP_1>:7880;\n        server <MASTER_NODE_IP_2>:7880;\n        server <MASTER_NODE_IP_3>:7880;\n        server <MASTER_NODE_IP_4>:7880;\n    }\n\n    # Optional: Only if you want to ingest RTMP\n    upstream openvidu_media_nodes_rtmp {\n        server <MEDIA_NODE_IP_1>:1935;\n        server <MEDIA_NODE_IP_2>:1935;\n        # Add more media nodes if needed\n    }\n\n    server {\n        listen 443 ssl;\n        server_name openvidu.example.com;\n        ssl_protocols       TLSv1.2 TLSv1.3;\n        ssl_certificate     /etc/nginx/ssl/openvidu-cert.pem;\n        ssl_certificate_key /etc/nginx/ssl/openvidu-key.pem;\n\n        proxy_connect_timeout 10s;\n        proxy_timeout 30s;\n\n        proxy_pass openvidu_master_nodes;\n    }\n\n    # Optional: Only if you want to ingest RTMP\n    server {\n        listen 1935 ssl;\n        server_name openvidu.example.com;\n        ssl_protocols       TLSv1.2 TLSv1.3;\n        ssl_certificate     /etc/nginx/ssl/openvidu-cert.pem;\n        ssl_certificate_key /etc/nginx/ssl/openvidu-key.pem;\n\n        proxy_connect_timeout 10s;\n        proxy_timeout 30s;\n\n        proxy_pass openvidu_media_nodes_rtmp;\n    }\n\n}\n

Example configuration for NGINX Load Balancer:

events {\n    worker_connections 10240;\n}\n\nstream {\n\n    upstream openvidu_master_nodes {\n        server <MASTER_NODE_IP_1>:7880;\n        server <MASTER_NODE_IP_2>:7880;\n        server <MASTER_NODE_IP_3>:7880;\n        server <MASTER_NODE_IP_4>:7880;\n    }\n\n    # Optional: Only if you want to ingest RTMP\n    upstream openvidu_media_nodes_rtmp {\n        server <MEDIA_NODE_IP_1>:1935;\n        server <MEDIA_NODE_IP_2>:1935;\n        # Add more media nodes if needed\n    }\n\n    upstream turn_tls {\n        server <MEDIA_NODE_IP_1>:5349;\n        server <MEDIA_NODE_IP_2>:5349;\n        # Add more media nodes if needed\n    }\n\n    map $ssl_server_name $targetBackend {\n        openvidu.example.com openvidu_master_nodes;\n        turn.example.com turn_tls;\n    }\n\n    map $ssl_server_name $targetCert {\n        openvidu.example.com /etc/nginx/ssl/openvidu-cert.pem;\n        turn.example.com /etc/nginx/ssl/turn-cert.pem;\n    }\n\n    map $ssl_server_name $targetCertKey {\n        openvidu.example.com /etc/nginx/ssl/openvidu-key.pem;\n        turn.example.com /etc/nginx/ssl/turn-key.pem;\n    }\n\n    server {\n        listen 443 ssl;\n        ssl_protocols       TLSv1.2 TLSv1.3;\n        ssl_certificate     $targetCert;\n        ssl_certificate_key $targetCertKey;\n\n        proxy_connect_timeout 10s;\n        proxy_timeout 30s;\n\n        proxy_pass $targetBackend;\n    }\n\n    # Optional: Only if you want to ingest RTMP\n    server {\n        listen 1935 ssl;\n        ssl_protocols       TLSv1.2 TLSv1.3;\n        ssl_certificate     $targetCert;\n        ssl_certificate_key $targetCertKey;\n\n        proxy_connect_timeout 10s;\n        proxy_timeout 30s;\n\n        proxy_pass openvidu_media_nodes_rtmp;\n    }\n\n}\n
"},{"location":"docs/self-hosting/ha/on-premises/install-nlb/#configure-your-application-to-use-the-deployment","title":"Configure your Application to use the Deployment","text":"

To point your applications to your OpenVidu deployment, check the file at /opt/openvidu/.env of any Master Node. All access credentials of all services are defined in this file.

Your authentication credentials and URL to point your applications would be:

"},{"location":"docs/self-hosting/ha/on-premises/install-nlb/#non-interactive-installation","title":"Non-interactive installation","text":"

To automate the installation process, you just need to execute the specified command in the Guided Installation section and execute the generated commands.

Each installation command for each type of node looks like this:

Master NodeMedia Node

To install a Master Node, you can use the following command:

sh <(curl -fsSL http://get.openvidu.io/pro/ha/latest/install_ov_master_node.sh) \\\n    --node-role='master-node' \\\n    --master-node-private-ip-list='10.5.0.1,10.5.0.2,10.5.0.3,10.5.0.4' \\\n    --openvidu-pro-license='xxxxx' \\\n    --domain-name-or-ip='openvidu.example.io' \\\n    --enabled-modules='observability,v2compatibility,app' \\\n    --turn-domain-name='turn.example.io' \\\n    --livekit-api-key='xxxxx' \\\n    --livekit-api-secret='xxxxx' \\\n    --dashboard-admin-user='xxxxx' \\\n    --dashboard-admin-password='xxxxx' \\\n    --redis-password='xxxxx' \\\n    --minio-access-key='xxxxx' \\\n    --minio-secret-key='xxxxx' \\\n    --mongo-admin-user='xxxxx' \\\n    --mongo-admin-password='xxxxx' \\\n    --mongo-replica-set-key='xxxxx' \\\n    --grafana-admin-user='xxxxx' \\\n    --grafana-admin-password='xxxxx' \\\n    --default-app-user='xxxxx' \\\n    --default-app-password='xxxxx' \\\n    --default-app-admin-user='xxxxx' \\\n    --default-app-admin-password='xxxxx' \\\n    --external-load-balancer\n

Note

In case you want to deploy a specific version, just replace latest with the desired version. For example: 3.0.0.

Notes:

To install a Media Node, you can use the following command:

sh <(curl -fsSL http://get.openvidu.io/pro/ha/latest/install_ov_media_node.sh) \\\n    --node-role='media-node' \\\n    --domain-name-or-ip='openvidu.example.io' \\\n    --master-node-private-ip-list='10.5.0.1,10.5.0.2,10.5.0.3,10.5.0.4' \\\n    --openvidu-pro-license='xxxxx' \\\n    --rtc-engine='pion' \\\n    --enabled-modules='observability,v2compatibility,app' \\\n    --turn-domain-name='openvidu.example.io' \\\n    --livekit-api-key='xxxxx' \\\n    --livekit-api-secret='xxxxx' \\\n    --redis-password='xxxxx' \\\n    --minio-access-key='xxxxx' \\\n    --minio-secret-key='xxxxx' \\\n    --mongo-admin-user='xxxxx' \\\n    --mongo-admin-password='xxxxx'\n

Note

In case you want to deploy a specific version, just replace latest with the desired version. For example: 3.0.0.

You can run these commands in a CI/CD pipeline or in a script to automate the installation process.

Some general notes about all commands:

To start each node, remember to execute the following command in each node:

systemctl start openvidu\n
"},{"location":"docs/self-hosting/ha/on-premises/install-nlb/#configuration-and-administration","title":"Configuration and administration","text":"

Once you have OpenVidu deployed, you can check the Configuration and Administration section to learn how to manage your OpenVidu High Availability deployment.

"},{"location":"docs/self-hosting/production-ready/","title":"Production ready","text":"

OpenVidu is designed to be self-hosted, whether it is on premises or in a cloud provider. It brings to your own managed service advanced capabilities usually reserved only for SaaS solutions. There are two main reasons why you may need to self-host the real-time solution yourself:

It is important to mention that when we talk about self-hosting OpenVidu, we don't just mean installing it in bare-metal servers or private VPCs. OpenVidu also supports deployments in the most popular cloud providers, using their native services when possible. AWS is now supported, and others are coming soon. You can learn more about the different options to deploy OpenVidu in the deployment types section.

One of OpenVidu's main goals is offering a self-hosted, production-ready live-video platform with all the advanced capabilities typically reserved for SaaS solutions. This includes outstanding performance, scalability, fault tolerance and observability:

"},{"location":"docs/self-hosting/production-ready/fault-tolerance/","title":"Fault Tolerance","text":"

Real-time media is particularly sensitive to downtime events, as they directly affect the user experience in a very disruptive way. OpenVidu is designed from the ground up to be fault tolerant in all its services in case of node downtime, especially in its High Availability deployment.

The extent of fault tolerance depends on the OpenVidu deployment type:

"},{"location":"docs/self-hosting/production-ready/fault-tolerance/#fault-tolerance-in-openvidu-elastic","title":"Fault tolerance in OpenVidu Elastic","text":""},{"location":"docs/self-hosting/production-ready/fault-tolerance/#master-node","title":"Master Node","text":"

An OpenVidu Elastic deployment has a single Master Node, so a failure on this node is fatal and any ongoing video Rooms will be interrupted. The service won't be restored until the Master Node is recovered.

"},{"location":"docs/self-hosting/production-ready/fault-tolerance/#media-nodes","title":"Media Nodes","text":"

You can have any number of Media Nodes in an OpenVidu Elastic deployment. Media Nodes are stateless, meaning that they do not store critical information about the Rooms, Egress or Ingress processes they are handling. This means that they can be easily replicated in any other Media Node in case of a failure.

In the event of a Media Node failure, there are 3 services affected with the following behaviors:

"},{"location":"docs/self-hosting/production-ready/fault-tolerance/#fault-tolerance-in-openvidu-high-availability","title":"Fault tolerance in OpenVidu High Availability","text":"

OpenVidu High Availability delivers the highest possible degree of fault tolerance. This is achieved by running all of the services in the Master Nodes and the Media Nodes in their High Availability flavour.

An OpenVidu High Availability deployment runs Master Nodes and Media Nodes in separated groups. Let's see the extent of fault tolerance for each node group:

"},{"location":"docs/self-hosting/production-ready/fault-tolerance/#master-nodes","title":"Master Nodes","text":"

The number of Master Nodes in an OpenVidu High Availability deployment is 4. This minimum number of nodes ensures that every service running in the Master Nodes is fault tolerant.

If one Master Node fails, the service won't be affected. Some users may trigger event Reconnecting closely followed by Reconnected, but the service will remain fully operational.

When two or more Master Nodes fail simultaneously, there can be some degradation of the service:

In the event of Master Node failures, the service will be automatically restored as soon as the failed node(s) are recovered.

"},{"location":"docs/self-hosting/production-ready/fault-tolerance/#media-nodes_1","title":"Media Nodes","text":"

Fault tolerance of Media Nodes in OpenVidu Elastic behaves the same as in OpenVidu High Availability.

"},{"location":"docs/self-hosting/production-ready/fault-tolerance/#recovering-egress-from-node-failures","title":"Recovering Egress from node failures","text":"

Egress processes can be affected by the crash of a Master Node or a Media Node. To recover Egress from...

"},{"location":"docs/self-hosting/production-ready/fault-tolerance/#from-master-node-failures","title":"From Master Node failures","text":"

This only applies to OpenVidu High Availability

If 2 Master Nodes crash, the Egress process won't be able to use the Minio storage. This has different consequences depending on the configured outputs for your Egress process:

In both cases, files are not lost and can be recovered. They will be available in the Egress backup path of the Media Node hosting the Egress process (by default /opt/openvidu/egress_data/home/egress/backup_storage).

"},{"location":"docs/self-hosting/production-ready/fault-tolerance/#from-a-media-node-failure","title":"From a Media Node failure","text":"

This applies to both OpenVidu High Availability and OpenVidu Elastic

If the Media Node hosting an ongoing Egress process crashes, then the Egress process will be immediately interrupted. But as long as the disk of the crashed Media Node is still accessible, you may recover the output files. They will be available in the Media Node at path /opt/openvidu/egress_data/home/egress/tmp.

It is possible that if the crashed Egress had MP4 as configured output (which is an option available for Room Composite and Track Composite) the recovered file may not be directly playable and it may require a repair process.

"},{"location":"docs/self-hosting/production-ready/performance/","title":"Performance","text":"

Warning

mediasoup integration in OpenVidu is experimental, and should not be used in production environments. There are some limitations that are currently being worked on, expected to be ironed out in the near future.

OpenVidu is able to handle up to 2x the load in a single server, doubling the amount of media Tracks that can be transmitted compared to base LiveKit. By not only building upon the giant Open-Source shoulders of LiveKit, but also pushing the bar further, OpenVidu uses the best-in-class technologies to bring considerable performance improvements to the table.

The key element of any WebRTC server solution is the ability to exchange media between participants of a room, in the so-called WebRTC SFU. LiveKit implements its own SFU, and that's where OpenVidu makes a different choice by using mediasoup.

The key points of how this works are:

"},{"location":"docs/self-hosting/production-ready/performance/#about-mediasoup-integration","title":"About mediasoup integration","text":""},{"location":"docs/self-hosting/production-ready/performance/#architecture","title":"Architecture","text":"

LiveKit created its own WebRTC SFU, based on the Pion library to route media between participants:

OpenVidu is built by a team of expert WebRTC developers who know all the ins and outs of low-level WebRTC development, so it was possible to replace LiveKit's own implementation with an alternative, and mediasoup was the clear best choice given its fantastic performance characteristics:

This means that applications built on top of LiveKit will continue to work exactly the same, while the internal WebRTC engine inside the server can be swapped at will and applications can benefit from that change, without having to be rebuilt.

In terms of the signaling protocol, API and SDKs, OpenVidu maintains the original LiveKit implementation. LiveKit's API is very well designed, with a simple but powerful set of concepts, and the amount of SDKs available is very large.

"},{"location":"docs/self-hosting/production-ready/performance/#choice-of-technology","title":"Choice of technology","text":"

Both LiveKit and Pion are written in the Go programming language, and this has some implications for speed and efficiency. While Go is popular for its simplicity, readability, and approach to concurrency, when it comes to performance other alternatives rank higher in common benchmarks.

First and foremost, the two most defining limitations of Go is that it requires a quite heavy runtime that is able to handle all of the low-level features of the language, such as goroutines and memory allocations. Also, speaking of memory management, Go requires a Garbage Collector, which knowledgeable readers will recognize as a hindrance for performance-critical applications.

mediasoup, on the other hand, focuses all of its efforts on maximum efficiency. It is written in C++, and it is ultra-optimized for the specific task of routing media packets. C++ is a language that provides fully manual management of all resources, and direct access to the hardware, with the benefit of software that is as fast as it can be on any machine.

We believe that by combining the best of the LiveKit stack with a top-notch WebRTC engine like mediasoup, OpenVidu is the best option for those who need a self-hosted and high-performance real-time solution.

"},{"location":"docs/self-hosting/production-ready/performance/#limitations","title":"Limitations","text":"

OpenVidu developers are hard at work with integrating mediasoup as a WebRTC engine within LiveKit, aiming to provide feature parity with the original Pion engine.

There are, for now, some limitations that are expected to be ironed out over time:

"},{"location":"docs/self-hosting/production-ready/performance/#benchmarking","title":"Benchmarking","text":"

Numerous load tests have been performed to determine the true capabilities of OpenVidu on different hardware. To do so we have developed the tool Openvidu LoadTest: an in development project that aims to improve the precision of load and performance tests in WebRTC systems.

We have compared OpenVidu using the original Pion WebRTC engine (this is the default LiveKit Open Source implementation) and using mediasoup as WebRTC engine. We tested the performance for both cases in the scenario below.

"},{"location":"docs/self-hosting/production-ready/performance/#results-conference-rooms","title":"Results: Conference rooms","text":"

This tests increasingly adds Rooms of 8 Participants each, every one sending 1 video Track and 1 audio Track, and subscribing to all remote Tracks.

The following plot shows the number of Participants that can be added to a Room in OpenVidu using Pion and using mediasoup as WebRTC engines:

The conclusion is that for multiple Rooms, mediasoup performs much better than Pion, almost doubling the total number of Participants (and Tracks) that fit in the server.

Below there is the deatiled connection progression for each Participant in each test.

The X axis reflects the point of time in seconds. For each Participant there is a bar indicating its connection status:

CPU load of the server is also shown with a black marked plot (from 0 to 1, representing 0% to 100% CPU load).

Progression of the connection of each Participant through the test execution. Benchmark test for Rooms with 8 Participants using OpenVidu with Pion

Progression of the connection of each Participant through the test execution. Benchmark test for Rooms with 8 Participants using OpenVidu with mediasoup"},{"location":"docs/self-hosting/production-ready/performance/#benchmarking-technical-details","title":"Benchmarking technical details","text":""},{"location":"docs/self-hosting/production-ready/performance/#benchmarking-methodology","title":"Benchmarking methodology","text":"

Each test begins with no participants on the media server. First, the test controller creates EC2 instances to host the browsers. The controller then sends a request to create a number of participants (this number is known as the batch size). After each browser sends confirmation to the controller that it is connected, the controller sends another request to add more participants (as many participants as the batch size specifies). A participant is considered connected to the room if:

The test stops when it determines that no more users can be added to a room. This happens when a user has 5 failed connections. A connection is considered to have failed when it terminates with a fatal error (in LiveKit this is captured when a Disconnected event occurs) or when the connection times out. A failure in connection can occur when trying to join a room (ending usually in timeout) or during the connection (a Disconnected event is thrown). Each time a failure is communicated to the controller, it will kill that browser and restart it again, effectively restarting the connection (up to 5 times, as mentioned before).

"},{"location":"docs/self-hosting/production-ready/performance/#about-openvidu-loadtest","title":"About OpenVidu LoadTest","text":"

Tools like livekit-cli simulate participants directly using WebRTC SDKs, but we found out that browsers add significant more load that these kind of systems. This makes Openvidu LoadTest give results that are closer to real-world scenarios, as it uses real browsers. Using real browsers also allows for the collection of useful data related to connections, events and WebRTC statistics. On the other hand, tests performed with Openvidu LoadTest are more expensive, as they require real instances to host the browsers.

"},{"location":"docs/self-hosting/production-ready/scalability/","title":"Scalability","text":"

Scalability is a very broad term with implications on many levels. In the case of real-time applications, it usually refers to the number of simultaneous Rooms you can host and the maximum number of participants in each Room, or more accurately, the number of media tracks sent and received in each Room.

OpenVidu offers scalability out-of-the-box for typical videoconferencing use cases, but also for large low-latency live streams with hundreds of viewers. With OpenVidu Elastic and OpenVidu High Availability you can easily scale your deployment to host many simultaneous videoconferences and live streams. And it is also possible to scale automatically with our autoscaling feature, so you can truly adapt your resources to the demand.

"},{"location":"docs/self-hosting/production-ready/scalability/#scalability-depending-on-the-use-case","title":"Scalability depending on the use case","text":""},{"location":"docs/self-hosting/production-ready/scalability/#small-and-medium-videoconferences","title":"Small and medium videoconferences","text":"

OpenVidu allows you to host multiple small and medium videoconferences (up to 10 participants). The number of simultaneous rooms depends on the deployment used and the power of machines.

"},{"location":"docs/self-hosting/production-ready/scalability/#big-live-streams","title":"Big live streams","text":"

Live streaming is different from a video conference. In a videoconference, usually all participants can publish audio and video. Instead, in a live stream, only one participant can publish audio and video (known as the publisher) and others can view it (known as viewers).

OpenVidu is able to manage live streams with up to XXX viewers (1 publisher and XXX subscribers) in a single Room hosted in a server with 4 CPUs. To manage more than one live stream simultaneously, an Elastic or High Availability deployment is needed with several media servers.

"},{"location":"docs/self-hosting/production-ready/scalability/#big-videoconferences-and-massive-live-streams-working-on-it","title":"Big videoconferences and massive live streams (Working on it! )","text":"

For big videoconferences with many participants (in the order of 100- or even 1000-) and massive live streams with few publishers and thousands of viewers, OpenVidu will offer in the near future two distinct strategies:

"},{"location":"docs/self-hosting/production-ready/scalability/#autoscaling","title":"Autoscaling","text":"

OpenVidu Elastic and OpenVidu High Availability have multiple Media Nodes to handle the load.

When deploying on AWS, OpenVidu will automatically add and remove Media Nodes according to load, thanks to Auto Scaling Groups. When deploying On Premises you are responsible of monitoring the load of your Media Nodes and triggering the addition of new Media Nodes or removal of existing Media Nodes.

"},{"location":"docs/self-hosting/production-ready/observability/","title":"Observability","text":"

Any production software needs to be observable. But in real-time applications this becomes an absolute priority. You must be able to:

OpenVidu brings everything you need to fulfill these requirements. We collect events, metrics and logs from your deployment and provide OpenVidu Dashboard and a Grafana stack to navigate them.

"},{"location":"docs/self-hosting/production-ready/observability/grafana-stack/","title":"Grafana stack","text":""},{"location":"docs/self-hosting/production-ready/observability/grafana-stack/#grafana-stack","title":"Grafana Stack","text":"

OpenVidu also provides different Grafana dashboards to monitor metrics from OpenVidu Server and logs from your cluster.

Grafana is available at https://your.domain/grafana/ and can be accessed using your Grafana admin credentials.

Dashboards can be found in the OpenVidu folder at https://your.domain/grafana/dashboards/f/openvidu-dashboards/openvidu.

"},{"location":"docs/self-hosting/production-ready/observability/grafana-stack/#services","title":"Services","text":"

The Grafana stack that comes with OpenVidu is composed of the following services:

"},{"location":"docs/self-hosting/production-ready/observability/grafana-stack/#dashboards","title":"Dashboards","text":""},{"location":"docs/self-hosting/production-ready/observability/grafana-stack/#openvidu-server-metrics","title":"OpenVidu Server Metrics","text":"

This dashboard provides metrics about OpenVidu Server. It includes charts about active rooms, active participants, published tracks, subscribed tracks, send/receive bytes, packet loss percentage and quality score.

In case you are using OpenVidu PRO and you have more than one Media Node deployed, you will see all metrics from all nodes combined in the same chart.

"},{"location":"docs/self-hosting/production-ready/observability/grafana-stack/#openvidu-media-nodes-server-metrics","title":"OpenVidu Media Nodes Server Metrics","text":"

This dashboard is part of OpenVidu PRO edition.

This dashboard provides the same metrics as the OpenVidu Server Metrics dashboard, but grouped by Media Node.

You can select the Media Node you want to see metrics from in the media_node dropdown. You will see different charts in the same panel according to the selected Media Nodes.

Info

If you add new Media Nodes to your OpenVidu deployment, you will have to refresh the page in order to see the new Media Nodes in the dropdown.

"},{"location":"docs/self-hosting/production-ready/observability/grafana-stack/#openvidu-logs","title":"OpenVidu Logs","text":"

In case you are using OpenVidu COMMUNITY, this dashboard provides different visualizations for logs from your OpenVidu Single Node deployment.

There is a panel showing all containers logs,

another panel to filter logs by room_id and participant_id,

and one row for each selected service, containing all logs, warnings and errors from that service.

You can also filter logs containing a specific text by using the filter search box.

"},{"location":"docs/self-hosting/production-ready/observability/grafana-stack/#openvidu-cluster-nodes-logs","title":"OpenVidu Cluster Nodes Logs","text":"

This dashboard is part of OpenVidu PRO edition.

In case you are using OpenVidu PRO, this dashboard provides different visualizations for logs from your OpenVidu Elastic or OpenVidu High Availability cluster, grouped by node.

First of all, there is a panel showing all containers logs from all nodes.

Then, there is a row for each selected node, containing all logs, warnings and errors from that node. Besides, each row contains a panel for each selected container, showing all its logs.

Info

Note that some panels have no data. This is because some containers are running in Master Nodes and others in Media Nodes.

You can also filter logs containing a specific text by using the filter search box.

"},{"location":"docs/self-hosting/production-ready/observability/grafana-stack/#openvidu-cluster-services-logs","title":"OpenVidu Cluster Services Logs","text":"

This dashboard is part of OpenVidu PRO edition.

In case you are using OpenVidu PRO, this dashboard provides different visualizations for logs from your OpenVidu Elastic or OpenVidu High Availability cluster, grouped by service.

First of all, there is a panel to filter logs by room_id and participant_id.

Then, there is a row for each selected service, containing all logs, warnings and errors from that service.

"},{"location":"docs/self-hosting/production-ready/observability/grafana-stack/#limitations","title":"Limitations","text":"

For now, in OpenVidu High Availability deployments, we have decided to not implement Grafana in High Availability (HA) mode. This decision is based on the fact that Grafana needs a configured HA MySQL or PostgreSQL database to work in HA mode, and we want to keep the deployment as simple as possible.

There are 4 instances of Grafana in an OpenVidu High Availability deployment, one for each Master Node, but they are not synchronized between them. Therefore, if you make any change (change your admin password, create a new dashboard...) in one Grafana instance and the Master Node suddenly goes down, you will be redirected to another Grafana instance where the changes will not be reflected. That is the reason why we disable user signups and saving dashboard or datasource modifications in Grafana.

However, all metrics and logs from all nodes are available in all Grafana instances, so you can monitor your OpenVidu cluster without any problem.

"},{"location":"docs/self-hosting/production-ready/observability/openvidu-dashboard/","title":"OpenVidu Dashboard","text":"

It is a web application designed to provide OpenVidu administrators with a comprehensive view of usage statistics and real-time monitoring of video Rooms. OpenVidu Dashboard is included by default in any OpenVidu deployment.

To access OpenVidu Dashboard, go to https://your.domain/dashboard/ and log in using your admin credentials.

"},{"location":"docs/self-hosting/production-ready/observability/openvidu-dashboard/#views","title":"Views","text":""},{"location":"docs/self-hosting/production-ready/observability/openvidu-dashboard/#analytics","title":"Analytics","text":"

Display graphical analytics for client SDKs, connection types, bandwidth usage, unique participants, rooms and egresses created over different time periods (last 24 hours, last 7 days, last 28 days or current month).

"},{"location":"docs/self-hosting/production-ready/observability/openvidu-dashboard/#rooms","title":"Rooms","text":"

Review the total count of active rooms and active participants, along with a roster of currently active rooms and a history of closed rooms within the last 28 days. Detailed information on each room is accessible by clicking on the respective row.

"},{"location":"docs/self-hosting/production-ready/observability/openvidu-dashboard/#room-details","title":"Room Details","text":"

This view is part of OpenVidu PRO edition.

Retrieve in-depth information about a specific room, including its duration, bandwidth consumption, participants and related events. A chart illustrating the active participants count over time is also provided.

"},{"location":"docs/self-hosting/production-ready/observability/openvidu-dashboard/#participant-details","title":"Participant Details","text":"

This view is part of OpenVidu PRO edition.

Obtain detailed insights into each participant, covering their duration, bandwidth usage, average audio and video quality score, information about the client they are connecting with, connection stats, published tracks and related events.

A participant may connect and disconnect from a room multiple times while it remains open. Each instance of connection using the same participant identity is referred to as a participant session. If multiple sessions occur, we will aggregate all participant sessions together and organize them into a timeline at the top of the participant details view. You can easily switch between participant sessions by clicking on each corresponding row:

"},{"location":"docs/self-hosting/production-ready/observability/openvidu-dashboard/#egress-ingress","title":"Egress-Ingress","text":"

Review an overview of all egresses and ingresses, including their duration and status. Detailed information for each egress or ingress can be accessed by clicking on the respective row.

"},{"location":"docs/self-hosting/production-ready/observability/openvidu-dashboard/#egress-details","title":"Egress Details","text":"

This view is part of OpenVidu PRO edition.

Access comprehensive details about a specific egress, including its duration, current status, type, associated room, destinations, status timeline and request information.

"},{"location":"docs/self-hosting/production-ready/observability/openvidu-dashboard/#ingress-details","title":"Ingress Details","text":"

This view is part of OpenVidu PRO edition.

Explore detailed information about a specific ingress, including its total duration, status and a list of all associated rooms.

"},{"location":"docs/self-hosting/shared/aws-ssl-domain/","title":"Aws ssl domain","text":""},{"location":"docs/self-hosting/shared/aws-ssl-domain/#domain-and-ssl-certificate-configuration","title":"Domain and SSL Certificate Configuration","text":"

These are the three possible scenarios you may have to configure in this section:

Let's Encrypt Certificate (recommended)Self-Signed CertificateCustom Certificates

For a production-ready setup, this scenario is ideal when you have an FQDN (Fully Qualified Domain Name) and an Elastic IP at your disposal. It leverages the services of Let's Encrypt to automatically generate valid certificates.

First, you need to have the FQDN pointing to the Elastic IP you are going to use.

Then, you need to fill in the following parameters:

As you can see, you need to specify the DomainName with your FQDN, the PublicElasticIP with the Elastic IP that the domain points to, and the LetsEncryptEmail with your email address for Let\u2019s Encrypt notifications. These parameters are mandatory.

This is the most straightforward option for deploying OpenVidu on AWS when you do not have a Fully Qualified Domain Name (FQDN). This method allows for the immediate use of OpenVidu in AWS using CloudFormation.

However, this convenience comes with the caveat that users will need to manually accept the certificate in their web browsers. Please be aware that this configuration is solely for developmental and testing purposes and is not suitable for a production environment.

These are the parameters needed in this section to use self-signed certificates:

You don\u2019t need to specify any parameters; just select the CertificateType as self-signed. The domain name used will be an AWS-generated one.

Opt for this method if you possess your own certificate for an existing FQDN. It enables you to deploy OpenVidu on AWS using your certificates.

You need to have a Fully Qualified Domain Name (FQDN) pointing to a previously created Elastic IP.

Also, you need a temporary HTTP server hosting your private and public certificate under a specific URL. These URLs are needed for the instance to be able to download and install your certificates.

The configured parameters would look like this:

You need to specify at OwnPublicCertificate and OwnPrivateCertificate the URLs where the public and private certificates are hosted, respectively. The DomainName and PublicElasticIP are mandatory parameters.

Certificates need to be in PEM format and the URLs must be accessible from the instance.

"},{"location":"docs/self-hosting/shared/aws-troubleshooting/","title":"Aws troubleshooting","text":"

If something goes wrong during the initial CloudFormation stack creation, your stack may reach the CREATE_FAILED status for multiple reasons. It could be due to a misconfiguration in the parameters, a lack of permissions, or a problem with the AWS services. When this happens, the following steps can help you troubleshoot the issue and identify what went wrong:

  1. While deploying the stack, make sure at \"Stack failure options\" you have selected the option \"Preserve successfully provisioned resources\" to be able to troubleshoot the deployment in case of an error.

    Disable Rollback on failure

  2. Check if the EC2 instance or instances are running. If they are not, check the CloudFormation events for any error messages.

  3. If the EC2 instance or instances are running, SSH into the instance and check the logs of the following files:

    These logs will give you more information about the CloudFormation stack creation process.

"},{"location":"docs/self-hosting/shared/aws-turn-domain/","title":"Aws turn domain","text":""},{"location":"docs/self-hosting/shared/aws-turn-domain/#optional-turn-server-configuration-with-tls","title":"(Optional) TURN server configuration with TLS","text":"

This section is optional. It is useful when your users are behind a restrictive firewall that blocks UDP traffic. This parameter will only works if you are using letsencrypt or owncert as the CertificateType parameter.

TURN server configuration with TLS

The parameters in this section may look like this:

Set the TurnDomainName parameter to the domain name you intend to use for your TURN server. It should be pointing to the PublicElasticIP specified in the previous section.

If you are using letsencrypt as the CertificateType parameter, you can leave the TurnOwnPublicCertificate and TurnOwnPrivateCertificate parameters empty. If you are using owncert, you need to specify the URLs where the public and private certificates are hosted.

"},{"location":"docs/self-hosting/shared/install-version/","title":"Install version","text":"

Note

In case you want to deploy a specific version, just replace latest with the desired version. For example: 3.0.0.

"},{"location":"docs/self-hosting/shared/mediasoup-warning/","title":"Mediasoup warning","text":"

Warning

mediasoup integration in OpenVidu is experimental, and should not be used in production environments. There are some limitations that are currently being worked on, expected to be ironed out in the near future.

"},{"location":"docs/self-hosting/shared/openvidu-pro-checking-logs/","title":"Openvidu pro checking logs","text":""},{"location":"docs/self-hosting/shared/openvidu-pro-checking-logs/#checking-logs","title":"Checking logs","text":"

If any of the services are not working as expected, you can check the logs of the services using the following command:

cd /opt/openvidu/\ndocker compose logs <service-name>\n

Replace <service-name> with the name of the service you want to check. For example, to check the logs of the OpenVidu Server, use the following command:

cd /opt/openvidu/\ndocker compose logs openvidu\n

To check the logs of all services, use the following command:

cd /opt/openvidu/\ndocker compose logs\n

You can also review your logs using the Grafana dashboard provided with OpenVidu. To access it, go to https://<your-domain.com>/grafana and use the credentials located in /opt/openvidu/.env to log in. Once inside, navigate to the \"Home\" section, select \"Dashboard\", and then click on:

"},{"location":"docs/self-hosting/shared/openvidu-pro-configuration-parameters/","title":"Openvidu pro configuration parameters","text":""},{"location":"docs/self-hosting/shared/openvidu-pro-configuration-parameters/#openvidu-configuration-parameters","title":"OpenVidu Configuration Parameters","text":"

OpenVidu Server is built on top of LiveKit and offers extra configuration options. You can find the configuration file at /opt/openvidu/config/livekit.yaml. Additional parameters for configuring OpenVidu Server are:

openvidu:\n    license: <YOUR_OPENVIDU_PRO_LICENSE> # (1)\n    cluster_id: <YOUR_DOMAIN_NAME> # (2)\n    analytics: # (3)\n        enabled: true # (4)\n        interval: 10s # (5)\n        expiration: 768h # (6)\n        mongo_url: <MONGO_URL> # (7)\n    rtc:\n        engine: pion # (8)\n    mediasoup:\n        debug: \"\" # (9)\n        log_level: error # (10)\n        log_tags: [info, ice, rtp, rtcp, message] # (11)\n
  1. Specify your OpenVidu Pro license key. If you don't have one, you can request one here.
  2. The cluster ID for the OpenVidu deployment. It is configured by default by OpenVidu Installer with the domain name of the deployment.
  3. The analytics configuration should be defined at the openvidu level in the livekit.yaml file.
  4. This must be set to true to send analytics data to MongoDB. If set to false, no analytics data will be sent.
  5. Time interval to send analytics data to MongoDB.
  6. Time to keep the analytics data in MongoDB. In this example, it is set to 32 days.
  7. MongoDB URL. This is the connection string to the MongoDB database where the analytics data will be stored.
  8. The rtc.engine parameter is set to pion by default. This is the WebRTC engine used by OpenVidu. Depending on your requirements, you can use:
  9. Global toggle to enable debugging logs from MediaSoup. In most debugging cases, using just an asterisk (\"*\") here is enough, but this can be fine-tuned for specific log levels. More info.
  10. Logging level for logs generated by MediaSoup. More info.
  11. Comma-separated list of log tag names, for debugging. More info.
"},{"location":"docs/self-hosting/shared/openvidu-pro-removing-media-nodes/","title":"Openvidu pro removing media nodes","text":""},{"location":"docs/self-hosting/shared/openvidu-pro-removing-media-nodes/#removing-media-nodes-gracefully","title":"Removing Media Nodes Gracefully","text":"

To stop a Media Node gracefully, you need to stop the containers openvidu, ingress, and egress with a SIGINT signal. Here is a simple script that you can use to stop all these containers gracefully:

#!/bin/bash\n# Stop OpenVidu, Ingress, and Egress containers gracefully (1)\ndocker container kill --signal=SIGINT openvidu || true\ndocker container kill --signal=SIGINT ingress || true\ndocker container kill --signal=SIGINT egress || true\n\n# Wait for the containers to stop (2)\nwhile [ $(docker inspect -f '{{.State.Running}}' openvidu 2>/dev/null) == \"true\" ] || \\\n    [ $(docker inspect -f '{{.State.Running}}' ingress 2>/dev/null) == \"true\" ] || \\\n    [ $(docker inspect -f '{{.State.Running}}' egress 2>/dev/null) == \"true\" ]; do\n    echo \"Waiting for containers to stop...\"\n    sleep 5\ndone\n
  1. This script stops the OpenVidu, Ingress, and Egress containers gracefully. The true at the end of each command is to avoid the script from stopping if the container is not running.
  2. This script waits for the containers to stop before exiting.

When all the containers are stopped, you can then stop the systemd service and remove the VM:

sudo systemctl stop openvidu\n
"},{"location":"docs/self-hosting/shared/openvidu-pro-removing-media-nodes/#removing-media-nodes-forcefully","title":"Removing Media Nodes Forcefully","text":"

To remove a Media Node forcefully, without considering the rooms, ingress, and egress processes running in the node, you can simply stop the OpenVidu service in the Media Node and delete the VM.

sudo systemctl stop openvidu\n
"},{"location":"docs/self-hosting/shared/openvidu-pro-start-stop-restart/","title":"Openvidu pro start stop restart","text":""},{"location":"docs/self-hosting/shared/openvidu-pro-start-stop-restart/#starting-stopping-and-restarting-openvidu","title":"Starting, stopping, and restarting OpenVidu","text":"

For every OpenVidu node, a systemd service is created during the installation process. This service allows you to start, stop, and restart the OpenVidu services easily.

Start OpenVidu

sudo systemctl start openvidu\n

Stop OpenVidu

sudo systemctl stop openvidu\n

Restart OpenVidu

sudo systemctl restart openvidu\n
"},{"location":"docs/self-hosting/shared/openvidu-pro-uninstall/","title":"Openvidu pro uninstall","text":""},{"location":"docs/self-hosting/shared/openvidu-pro-uninstall/#uninstalling-openvidu","title":"Uninstalling OpenVidu","text":"

To uninstall any OpenVidu Node, just execute the following commands:

sudo su\nsystemctl stop openvidu\nrm -rf /opt/openvidu/\nrm /etc/systemd/system/openvidu.service\n
"},{"location":"docs/self-hosting/shared/openvidu-pro-v2-compatibility-common/","title":"Openvidu pro v2 compatibility common","text":"

If you are using in COMPOSE_PROFILES at the .env file the v2compatibility profile, you will need to set the following parameters in the .env file for the OpenVidu V2 Compatibility service:

Parameter Description Default Value V2COMPAT_OPENVIDU_SECRET OpenVidu secret used to authenticate the OpenVidu V2 Compatibility service. In the .env file, this value is defined with LIVEKIT_API_SECRET. The value of LIVEKIT_API_SECRET in the .env file. V2COMPAT_OPENVIDU_WEBHOOK true to enable OpenVidu Webhook service. false otherwise. Valid values are true or false. false V2COMPAT_OPENVIDU_WEBHOOK_ENDPOINT HTTP(S) endpoint to send OpenVidu V2 Webhook events. Must be a valid URL. Example: V2COMPAT_OPENVIDU_WEBHOOK_ENDPOINT=http://myserver.com/webhook - V2COMPAT_OPENVIDU_WEBHOOK_HEADERS JSON Array list of headers to send in the OpenVidu V2 Webhook events. Example: V2COMPAT_OPENVIDU_WEBHOOK_HEADERS=[\"Content-Type: application/json\"] [] V2COMPAT_OPENVIDU_WEBHOOK_EVENTS Comma-separated list of OpenVidu V2 Webhook events to send. Example: V2COMPAT_OPENVIDU_WEBHOOK_EVENTS=sessionCreated,sessionDestroyed sessionCreated, sessionDestroyed, participantJoined, participantLeft, webrtcConnectionCreated, webrtcConnectionDestroyed, recordingStatusChanged, signalSent (All available events) V2COMPAT_OPENVIDU_PRO_AWS_S3_BUCKET S3 Bucket where to store recording files. openvidu V2COMPAT_OPENVIDU_PRO_AWS_S3_SERVICE_ENDPOINT S3 Endpoint where to store recording files. http://localhost:9100 V2COMPAT_OPENVIDU_PRO_AWS_ACCESS_KEY S3 Access Key of the S3 Bucket where to store recording files. - V2COMPAT_OPENVIDU_PRO_AWS_SECRET_KEY S3 Secret Key of the S3 Bucket where to store recording files. - V2COMPAT_OPENVIDU_PRO_AWS_REGION S3 Region of the S3 Bucket where to store recording files. us-east-1"},{"location":"docs/self-hosting/single-node/","title":"OpenVidu Single Node installation.","text":"

OpenVidu Single Node is part of the COMMUNITY edition of OpenVidu. You have the following deployment options:

Once your deployment is complete, refer to the following sections for configuration and management:

"},{"location":"docs/self-hosting/single-node/aws/admin/","title":"OpenVidu Single Node: AWS configuration and administration","text":"

AWS deployment of OpenVidu Single Node is internally identical to the on-premises deployment, so you can follow the same instructions from the On Premises Single Node for administration and configuration. The only difference is that the deployment is automated with AWS CloudFormation.

However, there are certain things worth mentioning:

"},{"location":"docs/self-hosting/single-node/aws/admin/#start-and-stop-openvidu-through-aws-console","title":"Start and stop OpenVidu through AWS Console","text":"

You can start and stop all services as explained in the On Premises Single Node section. But you can also start and stop the EC2 instance directly from the AWS Console. This will stop all services running in the instance and reduce AWS costs.

Stop OpenVidu Single NodeStart OpenVidu Single Node
  1. Go to the EC2 Dashboard of AWS.
  2. Right-click on the instance you want to start and select \"Stop instance\".

  1. Go to the EC2 Dashboard of AWS.
  2. Right-click on the instance you want to start and select \"Start instance\".

"},{"location":"docs/self-hosting/single-node/aws/admin/#change-the-instance-type","title":"Change the instance type","text":"

You can change the instance type of the OpenVidu Single Node instance to adapt it to your needs. To do this, follow these steps:

  1. Stop the instance.

  2. Right-click on the instance and select \"Instance Settings > Change Instance Type\".

    Change instance type

  3. Select the new instance type and click on \"Apply\".

"},{"location":"docs/self-hosting/single-node/aws/install/","title":"OpenVidu Single Node Installation: AWS","text":"

Regarding OpenVidu v2 compatibility

OpenVidu Single Node is not compatible with OpenVidu v2 API. For having compatibility with OpenVidu v2 applications, you must use OpenVidu Elastic or OpenVidu High Availability.

This section contains the instructions to deploy a production-ready OpenVidu Single Node deployment in AWS. Deployed services are the same as the On Premises Single Node Installation but automate the process with AWS CloudFormation.

First of all, import the template in the AWS CloudFormation console. You can click the following button...

Deploy OpenVidu Single Node in

...or access your AWS CloudFormation console and manually set this S3 URL in the Specify template section:

https://s3.eu-west-1.amazonaws.com/get.openvidu.io/community/singlenode/latest/aws/cf-openvidu-singlenode.yaml\n
Architecture overview

This is how the architecture of the deployment looks like:

OpenVidu Single Node AWS Architecture

"},{"location":"docs/self-hosting/single-node/aws/install/#cloudformation-parameters","title":"CloudFormation Parameters","text":"

Depending on your needs, you need to fill the following CloudFormation parameters:

"},{"location":"docs/self-hosting/single-node/aws/install/#domain-and-ssl-certificate-configuration","title":"Domain and SSL Certificate Configuration","text":"

These are the three possible scenarios you may have to configure in this section:

Let's Encrypt Certificate (recommended)Self-Signed CertificateCustom Certificates

For a production-ready setup, this scenario is ideal when you have an FQDN (Fully Qualified Domain Name) and an Elastic IP at your disposal. It leverages the services of Let's Encrypt to automatically generate valid certificates.

First, you need to have the FQDN pointing to the Elastic IP you are going to use.

Then, you need to fill in the following parameters:

As you can see, you need to specify the DomainName with your FQDN, the PublicElasticIP with the Elastic IP that the domain points to, and the LetsEncryptEmail with your email address for Let\u2019s Encrypt notifications. These parameters are mandatory.

This is the most straightforward option for deploying OpenVidu on AWS when you do not have a Fully Qualified Domain Name (FQDN). This method allows for the immediate use of OpenVidu in AWS using CloudFormation.

However, this convenience comes with the caveat that users will need to manually accept the certificate in their web browsers. Please be aware that this configuration is solely for developmental and testing purposes and is not suitable for a production environment.

These are the parameters needed in this section to use self-signed certificates:

You don\u2019t need to specify any parameters; just select the CertificateType as self-signed. The domain name used will be an AWS-generated one.

Opt for this method if you possess your own certificate for an existing FQDN. It enables you to deploy OpenVidu on AWS using your certificates.

You need to have a Fully Qualified Domain Name (FQDN) pointing to a previously created Elastic IP.

Also, you need a temporary HTTP server hosting your private and public certificate under a specific URL. These URLs are needed for the instance to be able to download and install your certificates.

The configured parameters would look like this:

You need to specify at OwnPublicCertificate and OwnPrivateCertificate the URLs where the public and private certificates are hosted, respectively. The DomainName and PublicElasticIP are mandatory parameters.

Certificates need to be in PEM format and the URLs must be accessible from the instance.

"},{"location":"docs/self-hosting/single-node/aws/install/#ec2-instance-configuration","title":"EC2 Instance Configuration","text":"

You need to specify some properties for the EC2 instance that will be created.

EC2 Instance configuration

The parameters in this section may look like this:

Simply select the type of instance you want to deploy at InstanceType, the SSH key you want to use to access the machine at KeyName, and the Amazon Image ID (AMI) to use at AmiId.

By default, the parameter AmiId is configured to use the latest LTS Ubuntu AMI, so ideally you don\u2019t need to modify this.

"},{"location":"docs/self-hosting/single-node/aws/install/#optional-turn-server-configuration-with-tls","title":"(Optional) TURN server configuration with TLS","text":"

This section is optional. It is useful when your users are behind a restrictive firewall that blocks UDP traffic. This parameter will only works if you are using letsencrypt or owncert as the CertificateType parameter.

TURN server configuration with TLS

The parameters in this section may look like this:

Set the TurnDomainName parameter to the domain name you intend to use for your TURN server. It should be pointing to the PublicElasticIP specified in the previous section.

If you are using letsencrypt as the CertificateType parameter, you can leave the TurnOwnPublicCertificate and TurnOwnPrivateCertificate parameters empty. If you are using owncert, you need to specify the URLs where the public and private certificates are hosted.

"},{"location":"docs/self-hosting/single-node/aws/install/#deploying-the-stack","title":"Deploying the Stack","text":"

When you are ready with your CloudFormation parameters, just click on \"Next\", specify in \"Stack failure options\" the option \"Preserve successfully provisioned resources\" to be able to troubleshoot the deployment in case of error, click on \"Next\" again, and finally \"Submit\".

When everything is ready, you will see the following links in the \"Outputs\" section of CloudFormation with all deployed services.

CloudFormation Outputs

"},{"location":"docs/self-hosting/single-node/aws/install/#configure-your-application-to-use-the-deployment","title":"Configure your Application to use the Deployment","text":"

To point your applications to your OpenVidu deployment, check the file of the EC2 instance /opt/openvidu/.env. All access credentials of all services are defined in this file.

Your authentication credentials and URLs to point your applications to are:

"},{"location":"docs/self-hosting/single-node/aws/install/#troubleshooting-initial-cloudformation-stack-creation","title":"Troubleshooting Initial CloudFormation Stack Creation","text":"

If something goes wrong during the initial CloudFormation stack creation, your stack may reach the CREATE_FAILED status for multiple reasons. It could be due to a misconfiguration in the parameters, a lack of permissions, or a problem with the AWS services. When this happens, the following steps can help you troubleshoot the issue and identify what went wrong:

  1. While deploying the stack, make sure at \"Stack failure options\" you have selected the option \"Preserve successfully provisioned resources\" to be able to troubleshoot the deployment in case of an error.

    Disable Rollback on failure

  2. Check if the EC2 instance or instances are running. If they are not, check the CloudFormation events for any error messages.

  3. If the EC2 instance or instances are running, SSH into the instance and check the logs of the following files:

    These logs will give you more information about the CloudFormation stack creation process.

  4. If everything seems fine, check the status and the logs of the installed OpenVidu services.

"},{"location":"docs/self-hosting/single-node/aws/install/#configuration-and-administration","title":"Configuration and administration","text":"

When your CloudFormation stack reaches the CREATE_COMPLETE status, your OpenVidu Single Node deployment is ready to use. You can check the Configuration and Administration section to learn how to manage your deployment.

"},{"location":"docs/self-hosting/single-node/on-premises/admin/","title":"OpenVidu Single Node: On-premises configuration and administration","text":"

The OpenVidu installer offers an easy way to deploy OpenVidu Single Node on-premises. However, once the deployment is complete, you may need to perform administrative tasks based on your specific requirements, such as changing passwords, specifying custom configurations, and starting or stopping services.

This section provides details on configuration parameters and common administrative tasks for on-premises OpenVidu Single Node deployments.

"},{"location":"docs/self-hosting/single-node/on-premises/admin/#openvidu-configuration","title":"OpenVidu configuration","text":""},{"location":"docs/self-hosting/single-node/on-premises/admin/#directory-structure","title":"Directory structure","text":"

OpenVidu is installed at /opt/openvidu/ and has a systemd service located at /etc/systemd/system/openvidu.service.

The directory structure of OpenVidu is as follows:

|-- /opt/openvidu\n    |-- config/\n    |-- custom-layout/\n    |-- data/\n    |-- deployment-info.yaml\n    |-- docker-compose.override.yml\n    |-- docker-compose.yml\n    |-- .env\n    `-- owncert/\n
"},{"location":"docs/self-hosting/single-node/on-premises/admin/#services-configuration","title":"Services Configuration","text":"

Some services deployed with OpenVidu have their own configuration files located in the /opt/openvidu/config/ directory, while others are configured in the .env file. Below are the services and their respective configuration files and parameters:

Info

The installer provides default configurations that work out of the box. However, you can modify these configurations to suit your specific requirements.

"},{"location":"docs/self-hosting/single-node/on-premises/admin/#configuration-files","title":"Configuration Files","text":"Service Description Configuration File Location Reference documentation OpenVidu Server Manages video rooms. It is compatible with LiveKit configuration and includes its own OpenVidu configuration parameters /opt/openvidu/config/livekit.yaml LiveKit Config Ingress Service Imports video from other sources into OpenVidu rooms. /opt/openvidu/config/ingress.yaml LiveKit Ingress Config Egress Service Exports video from OpenVidu rooms for recording or streaming. /opt/openvidu/config/egress.yaml LiveKit Egress Config Caddy Server Serves OpenVidu services and handles HTTPS. /opt/openvidu/config/caddy.yaml Caddy JSON Structure Prometheus Service Used for monitoring. /opt/openvidu/config/prometheus.yaml Prometheus Config Loki Service Used for log aggregation. /opt/openvidu/config/loki.yaml Loki Config Promtail Service Collects logs and sends them to Loki. /opt/openvidu/config/promtail.yaml Promtail Config Grafana Service Used for visualizing monitoring data. /opt/openvidu/config/grafana_config/ Grafana Config"},{"location":"docs/self-hosting/single-node/on-premises/admin/#environment-variables","title":"Environment Variables","text":"Service Description Environment Variables OpenVidu Server Manages video rooms. If you need to change the LiveKit API key and secret after the installation, check the advanced configuration section. Grafana Service Used for visualizing monitoring data. OpenVidu Dashboard Used to visualize OpenVidu Server Rooms, Ingress, and Egress services. Default App (OpenVidu Call) Default ready-to-use video conferencing app. Redis Service Used as a shared memory database for OpenVidu and Ingress/Egress services. If you need to change the Redis password after the installation, check the advanced configuration section. MinIO Service Used for storing recordings. If you need to change the MinIO access key and secret key after the installation, check the advanced configuration section. MongoDB Service Used for storing analytics and monitoring data. If you need to change the MongoDB username and password after the installation, check the advanced configuration section."},{"location":"docs/self-hosting/single-node/on-premises/admin/#openvidu-configuration-parameters","title":"OpenVidu Configuration Parameters","text":"

OpenVidu Server is built on top of LiveKit and offers extra configuration options. You can find the configuration file at /opt/openvidu/config/livekit.yaml. The additional parameters for configuring the OpenVidu Server are:

openvidu:\n    analytics: # (1)\n        enabled: true # (2)\n        mongo_url: mongodb://<MONGO_ADMIN_USERNAME>:<MONGO_ADMIN_PASSWORD>@localhost:20000/ # (3)\n        interval: 10s # (4)\n        expiration: 768h # (5)\n
  1. The analytics configuration should be defined at the openvidu level in the livekit.yaml file.
  2. This must be set to true to send analytics data to MongoDB. If set to false, no analytics data will be sent.
  3. MongoDB connection string. In OpenVidu Single Node, the MongoDB service is running on the same machine, so you can use localhost as the hostname. The default port in OpenVidu for MongoDB is 20000. MONGO_ADMIN_USERNAME and MONGO_ADMIN_PASSWORD are the credentials to access the MongoDB database.
  4. Time interval to send analytics data to MongoDB.
  5. Time to keep the analytics data in MongoDB. In this example, it is set to 32 days.
"},{"location":"docs/self-hosting/single-node/on-premises/admin/#starting-stopping-and-restarting-openvidu","title":"Starting, stopping, and restarting OpenVidu","text":"

You can start, stop, and restart the OpenVidu services using the following commands:

Start OpenVidu

sudo systemctl start openvidu\n

Stop OpenVidu

sudo systemctl stop openvidu\n

Restart OpenVidu

sudo systemctl restart openvidu\n
"},{"location":"docs/self-hosting/single-node/on-premises/admin/#checking-the-status-of-services","title":"Checking the status of services","text":"

You can check the status of the OpenVidu services using the following command:

cd /opt/openvidu/\ndocker compose ps\n

The services are operating correctly if you see an output similar to the following and there are no restarts from any of the services:

NAME         IMAGE                                        COMMAND                  SERVICE      CREATED          STATUS\napp          docker.io/openvidu/openvidu-call             \"docker-entrypoint.s\u2026\"   app          19 seconds ago   Up 16 seconds\ncaddy        docker.io/openvidu/openvidu-caddy            \"/bin/caddy run --co\u2026\"   caddy        19 seconds ago   Up 16 seconds\ndashboard    docker.io/openvidu/openvidu-dashboard        \"./openvidu-dashboard\"   dashboard    19 seconds ago   Up 16 seconds\negress       docker.io/livekit/egress                     \"/entrypoint.sh\"         egress       18 seconds ago   Up 14 seconds\ngrafana      docker.io/grafana/grafana                    \"/run.sh\"                grafana      18 seconds ago   Up 13 seconds\ningress      docker.io/livekit/ingress                    \"ingress\"                ingress      19 seconds ago   Up 14 seconds\nloki         docker.io/grafana/loki                       \"/usr/bin/loki -conf\u2026\"   loki         18 seconds ago   Up 14 seconds\nminio        docker.io/bitnami/minio                      \"/opt/bitnami/script\u2026\"   minio        18 seconds ago   Up 14 seconds\nmongo        docker.io/mongo                              \"docker-entrypoint.s\u2026\"   mongo        18 seconds ago   Up 15 seconds\nopenvidu     docker.io/openvidu/openvidu-server           \"/livekit-server --c\u2026\"   openvidu     19 seconds ago   Up 14 seconds\nprometheus   docker.io/prom/prometheus                    \"/bin/prometheus --c\u2026\"   prometheus   18 seconds ago   Up 14 seconds\npromtail     docker.io/grafana/promtail                   \"/usr/bin/promtail -\u2026\"   promtail     18 seconds ago   Up 14 seconds\nredis        docker.io/redis                              \"docker-entrypoint.s\u2026\"   redis        19 seconds ago   Up 15 seconds\n
"},{"location":"docs/self-hosting/single-node/on-premises/admin/#checking-logs","title":"Checking logs","text":"

If any of the services are not working as expected, you can check the logs of the services using the following command:

cd /opt/openvidu/\ndocker compose logs <service-name>\n

Replace <service-name> with the name of the service you want to check. For example, to check the logs of the OpenVidu Server, use the following command:

cd /opt/openvidu/\ndocker compose logs openvidu\n

To check the logs of all services, use the following command:

cd /opt/openvidu/\ndocker compose logs\n

You can also review your logs using the Grafana dashboard provided with OpenVidu. To access it, go to https://<your-domain.com>/grafana and use the credentials located in /opt/openvidu/.env to log in. Once inside, navigate to the \"Home\" section, select \"Dashboard\", and then click on \"OpenVidu > OpenVidu Logs\". All the logs will be displayed there.

"},{"location":"docs/self-hosting/single-node/on-premises/admin/#advanced-configuration","title":"Advanced Configuration","text":"

This section addresses advanced configuration scenarios for customizing your OpenVidu Single Node deployment. It includes automating the installation with personalized settings, enabling or disabling OpenVidu modules, and modifying global parameters such as the domain name, passwords, and API keys.

"},{"location":"docs/self-hosting/single-node/on-premises/admin/#automatic-installation-and-configuration","title":"Automatic installation and configuration","text":"

For environments like the cloud, where instances are frequently spun up and down, automating the application of custom configurations to OpenVidu may be useful for you.

If you need to automate these configuration changes, you can use the following script template as an example:

# 1. First install OpenVidu (1)\nsh <(curl -fsSL http://get.openvidu.io/community/singlenode/latest/install.sh) \\\n    --domain-name-or-ip='openvidu.example.io' \\\n    ... # Add the rest of the arguments\n\n# 2. Add custom configurations (2)\n######### APPLY CUSTOM CONFIGURATIONS #########\n# If you want to apply any modification to the configuration files\n# of the OpenVidu services at /opt/openvidu, you can do it in this section.\n\n# Example 1: Change public IP address announced by OpenVidu for WebRTC connections\nyq eval '.rtc.node_ip = 1.2.3.4' \\\n    -i /opt/openvidu/config/livekit.yaml\n\n# Example 2: Add a webhook to LiveKit\nyq eval '.webhook.urls += [\"http://new-endpoint.example.com/webhook\"]' \\\n    -i /opt/openvidu/config/livekit.yaml\n\n######### END CUSTOM CONFIGURATIONS #########\n\n# 3. Start OpenVidu # (3)\nsystemctl start openvidu\n
  1. First, install OpenVidu using the OpenVidu installer. Check the installation guide for more information.
  2. Add the custom configurations you need to apply to the OpenVidu services. You can use yq or other tools to modify the configuration files. You can find more information about yq here.
  3. Start OpenVidu to apply the changes.

Note

In case you want to deploy a specific version, just replace latest with the desired version. For example: 3.0.0.

Just install OpenVidu first with the installer and then run some extra commands to apply the custom configurations. This way, you can automate the process of installing OpenVidu and applying custom configurations.

"},{"location":"docs/self-hosting/single-node/on-premises/admin/#enabling-and-disabling-openvidu-modules","title":"Enabling and disabling OpenVidu modules","text":"

The COMPOSE_PROFILES parameter in the .env file allows you to enable or disable specific modules in OpenVidu. The following modules can be enabled or disabled:

Observability moduleApp module (Default App)

Enabling the observability module

In case you have installed OpenVidu with the observability module, you just need to enable the observability module in the .env file.

Otherwise, you can follow these steps to enable the observability module:

  1. Stop OpenVidu and backup the deployment

    sudo systemctl stop openvidu\nsudo cp -r /opt/openvidu/ /opt/openvidu_backup/\n

  2. Update the .env file

    Add to the COMPOSE_PROFILES the observability module. Also make sure to set up the GRAFANA_ADMIN_USERNAME and GRAFANA_ADMIN_PASSWORD parameters.

    If you have only the observability module enabled, your .env file should have the following environment variables:

    GRAFANA_ADMIN_USERNAME=\"<GRAFANA_ADMIN_USERNAME>\"\nGRAFANA_ADMIN_PASSWORD=\"<GRAFANA_ADMIN_PASSWORD>\"\n\nCOMPOSE_PROFILES=\"observability\"\n

  3. Enable Prometheus port in LiveKit

    Just add the following parameter in the config/livekit.yaml file:

    prometheus_port: 6789\n

Disabling the observability module

If you have the observability module enabled, and you want to disable it, just remove the observability module from the COMPOSE_PROFILES parameter in the .env file.

Enabling the app module

In case you have installed OpenVidu with the app module, you just need to enable the app module in the .env file.

Otherwise, you can follow these steps to enable the app module:

  1. Stop OpenVidu and backup the deployment

    sudo systemctl stop openvidu\nsudo cp -r /opt/openvidu/ /opt/openvidu_backup/\n

  2. Update the .env file

    Add to the COMPOSE_PROFILES the app module.

    If you have only the app module enabled, your .env file should have the following environment variable:

    COMPOSE_PROFILES=\"app\"\n

  3. Enable LiveKit webhooks for the Default App

    Just add the following parameter in the config/livekit.yaml file:

    webhook:\n    api_key: \"<LIVEKIT_API_KEY>\"\n    urls:\n        - http://localhost:6080/api/webhook\n

    Where <LIVEKIT_API_KEY> is the LIVEKIT_API_KEY parameter in the .env file.

Disabling the app module

If you have the app module enabled, and you want to disable it, just remove the app module from the COMPOSE_PROFILES parameter in the .env file.

"},{"location":"docs/self-hosting/single-node/on-premises/admin/#global-configuration-changes","title":"Global configuration changes","text":"

Some configuration parameters may require modifying multiple configuration files. Below are some examples of advanced configurations and how to apply them:

Info

Usually, this is not needed because the installer takes care of generating all of this parameters. However, it is necessary if any password, credential, or domain change is needed.

Danger

Advanced configurations should be performed with caution. Incorrect configurations can lead to service failures or unexpected behavior.

Before making any changes, make sure to back up your installation by creating a snapshot of your server or by copying the /opt/openvidu/ directory to a safe location. For example:

sudo cp -r /opt/openvidu/ /opt/openvidu_backup/\n
Changing DOMAIN_OR_PUBLIC_IPChanging REDIS_PASSWORDChanging LIVEKIT_API_KEY and LIVEKIT_API_SECRETChanging MINIO_ACCESS_KEY and MINIO_SECRET_KEYChanging MONGO_ADMIN_USERNAME and MONGO_ADMIN_PASSWORD

To change all occurrences of the domain or public IP address in the configuration files, follow these steps:

  1. Stop OpenVidu and back up the deployment

    sudo systemctl stop openvidu\nsudo cp -r /opt/openvidu/ /opt/openvidu_backup/\n

  2. Find the current locations of DOMAIN_OR_PUBLIC_IP

    With the following commands, you can find all occurrences of the current domain or public IP address in the configuration files:

    sudo su\ncd /opt/openvidu/\nCURRENT_DOMAIN_OR_PUBLIC_IP=\"$(grep '^DOMAIN_OR_PUBLIC_IP' /opt/openvidu/.env | cut -d '=' -f 2)\"\ngrep --exclude-dir=data -IHnr \"$CURRENT_DOMAIN_OR_PUBLIC_IP\" .\n
    Example output

    The output should look similar to the following:

    ./.env:DOMAIN_OR_PUBLIC_IP=<CURRENT_DOMAIN_OR_PUBLIC_IP>\n./config/caddy.yaml:        - certificate: /owncert/<CURRENT_DOMAIN_OR_PUBLIC_IP>.cert\n./config/caddy.yaml:          key: /owncert/<CURRENT_DOMAIN_OR_PUBLIC_IP>.key\n./config/caddy.yaml:            - <CURRENT_DOMAIN_OR_PUBLIC_IP>\n./config/caddy.yaml:                    - <CURRENT_DOMAIN_OR_PUBLIC_IP>\n./config/caddy.yaml:                        - <CURRENT_DOMAIN_OR_PUBLIC_IP>\n./config/caddy.yaml:                    - <CURRENT_DOMAIN_OR_PUBLIC_IP>\n./config/caddy.yaml:                        - <CURRENT_DOMAIN_OR_PUBLIC_IP>\n./config/caddy.yaml:                  - <CURRENT_DOMAIN_OR_PUBLIC_IP>\n./config/promtail.yaml:          cluster_id: <CURRENT_DOMAIN_OR_PUBLIC_IP>\n./config/livekit.yaml:    rtmp_base_url: rtmps://<CURRENT_DOMAIN_OR_PUBLIC_IP>:1935/rtmp\n./config/livekit.yaml:    whip_base_url: https://<CURRENT_DOMAIN_OR_PUBLIC_IP>/whip\n

    Note

    Don't worry if some values are different in your output. It may vary depending on the parameters you've used to install OpenVidu.

  3. Update the Following Files:

    Based on the output from the previous step, update the following files with the new domain or public IP address:

  4. Verify the changes

    These commands will list all occurrences of the new DOMAIN_OR_PUBLIC_IP in the configuration files. The output should match the locations found in the initial search but with the new domain or public IP address.

    sudo su\ncd /opt/openvidu/\nNEW_DOMAIN_OR_PUBLIC_IP=\"<NEW_DOMAIN_OR_PUBLIC_IP>\"\ngrep --exclude-dir=data -IHnr \"$NEW_DOMAIN_OR_PUBLIC_IP\" .\n

  5. Start OpenVidu

    sudo systemctl start openvidu\n

Some notes on changing the DOMAIN_OR_PUBLIC_IP parameter:

To change the REDIS_PASSWORD parameter, follow these steps:

  1. Stop OpenVidu and back up the deployment

    sudo systemctl stop openvidu\nsudo cp -r /opt/openvidu/ /opt/openvidu_backup/\n

  2. Find the current locations of REDIS_PASSWORD

    With the following command, you can find all occurrences of the current REDIS_PASSWORD in the configuration files:

    sudo su\ncd /opt/openvidu/\nCURRENT_REDIS_PASSWORD=\"$(grep REDIS_PASSWORD /opt/openvidu/.env | cut -d '=' -f 2)\"\ngrep --exclude-dir=data -IHnr \"$CURRENT_REDIS_PASSWORD\" .\n
    Example output

    The output should look similar to the following:

    ./.env:REDIS_PASSWORD=<CURRENT_REDIS_PASSWORD>\n./config/egress.yaml:    password: <CURRENT_REDIS_PASSWORD>\n./config/ingress.yaml:    password: <CURRENT_REDIS_PASSWORD>\n./config/livekit.yaml:    password: <CURRENT_REDIS_PASSWORD>\n

  3. Update the Following Files:

    Based on the output from the previous step, update the following files with the new value:

  4. Verify the changes

    These commands will list all occurrences of the new REDIS_PASSWORD in the configuration files. The output should match the locations found in the initial search but with the new value.

    sudo su\ncd /opt/openvidu/\nNEW_REDIS_PASSWORD=\"<NEW_REDIS_PASSWORD>\"\ngrep --exclude-dir=data -IHnr \"$NEW_REDIS_PASSWORD\" .\n

  5. Start OpenVidu

    sudo systemctl start openvidu\n

To change the LIVEKIT_API_KEY and LIVEKIT_API_SECRET parameters, follow these steps:

  1. Stop OpenVidu and back up the deployment

    sudo systemctl stop openvidu\nsudo cp -r /opt/openvidu/ /opt/openvidu_backup/\n

  2. Find the current locations of LIVEKIT_API_KEY and LIVEKIT_API_SECRET

    With the following commands, you can find all occurrences of the current LIVEKIT_API_KEY and LIVEKIT_API_SECRET in the configuration files:

    sudo su\ncd /opt/openvidu/\nCURRENT_LIVEKIT_API_KEY=\"$(grep LIVEKIT_API_KEY /opt/openvidu/.env | cut -d '=' -f 2)\"\nCURRENT_LIVEKIT_API_SECRET=\"$(grep LIVEKIT_API_SECRET /opt/openvidu/.env | cut -d '=' -f 2)\"\ngrep --exclude-dir=data -IHnr \"$CURRENT_LIVEKIT_API_KEY\" .\ngrep --exclude-dir=data -IHnr \"$CURRENT_LIVEKIT_API_SECRET\" .\n
    Example output

    The output should look similar to the following for LIVEKIT_API_KEY:

    ./.env:LIVEKIT_API_KEY=<CURRENT_LIVEKIT_API_KEY>\n./config/egress.yaml:api_key: <CURRENT_LIVEKIT_API_KEY>\n./config/ingress.yaml:api_key:<CURRENT_LIVEKIT_API_KEY>\n./config/livekit.yaml:    <CURRENT_LIVEKIT_API_KEY>: <CURRENT_LIVEKIT_API_SECRET>\n./config/livekit.yaml:    api_key: <CURRENT_LIVEKIT_API_KEY>\n

    And for LIVEKIT_API_SECRET:

    ./.env:LIVEKIT_API_SECRET=<CURRENT_LIVEKIT_API_SECRET>\n./config/egress.yaml:api_secret: <CURRENT_LIVEKIT_API_SECRET>\n./config/ingress.yaml:api_secret: <CURRENT_LIVEKIT_API_SECRET>\n./config/livekit.yaml:    <CURRENT_LIVEKIT_API_KEY>: <CURRENT_LIVEKIT_API_SECRET>\n

  3. Update the Following Files:

    Based on the output from the previous step, update the following files with the new values:

  4. Verify the changes

    These commands will list all occurrences of the new LIVEKIT_API_KEY and LIVEKIT_API_SECRET in the configuration files. The output should match the locations found in the initial search but with the new values.

    sudo su\ncd /opt/openvidu/\nNEW_LIVEKIT_API_KEY=\"<NEW_LIVEKIT_API_KEY>\"\nNEW_LIVEKIT_API_SECRET=\"<NEW_LIVEKIT_API_SECRET>\"\ngrep --exclude-dir=data -IHnr \"$NEW_LIVEKIT_API_KEY\" .\ngrep --exclude-dir=data -IHnr \"$NEW_LIVEKIT_API_SECRET\" .\n

  5. Start OpenVidu

    sudo systemctl start openvidu\n

To change the MINIO_ACCESS_KEY and MINIO_SECRET_KEY parameters, follow these steps:

  1. Stop OpenVidu and back up the deployment

    sudo systemctl stop openvidu\nsudo cp -r /opt/openvidu/ /opt/openvidu_backup/\n

  2. Find the current locations of MINIO_ACCESS_KEY and MINIO_SECRET_KEY

    With the following commands, you can find all occurrences of the current MINIO_ACCESS_KEY and MINIO_SECRET_KEY in the configuration files:

    sudo su\ncd /opt/openvidu/\nCURRENT_MINIO_ACCESS_KEY=\"$(grep MINIO_ACCESS_KEY /opt/openvidu/.env | cut -d '=' -f 2)\"\nCURRENT_MINIO_SECRET_KEY=\"$(grep MINIO_SECRET_KEY /opt/openvidu/.env | cut -d '=' -f 2)\"\ngrep --exclude-dir=data -IHnr \"$CURRENT_MINIO_ACCESS_KEY\" .\ngrep --exclude-dir=data -IHnr \"$CURRENT_MINIO_SECRET_KEY\" .\n
    Example output

    The output should look similar to the following for MINIO_ACCESS_KEY:

    ./.env:MINIO_ACCESS_KEY=<CURRENT_MINIO_ACCESS_KEY>\n./config/egress.yaml:    access_key: <CURRENT_MINIO_ACCESS_KEY>\n

    And for MINIO_SECRET_KEY:

    ./.env:MINIO_SECRET_KEY=<CURRENT_MINIO_SECRET_KEY>\n./config/egress.yaml:    secret: <CURRENT_MINIO_SECRET_KEY>\n

  3. Update the Following Files:

    Based on the output from the previous step, update the following files with the new values:

  4. Verify the changes

    These commands will list all occurrences of the new MINIO_ACCESS_KEY and MINIO_SECRET_KEY in the configuration files. The output should match the locations found in the initial search but with the new values.

    sudo su\ncd /opt/openvidu/\nNEW_MINIO_ACCESS_KEY=\"<NEW_MINIO_ACCESS_KEY>\"\nNEW_MINIO_SECRET_KEY=\"<NEW_MINIO_SECRET_KEY>\"\ngrep --exclude-dir=data -IHnr \"$NEW_MINIO_ACCESS_KEY\" .\ngrep --exclude-dir=data -IHnr \"$NEW_MINIO_SECRET_KEY\" .\n

  5. Start OpenVidu

    sudo systemctl start openvidu\n

To change the MONGO_ADMIN_USERNAME and MONGO_ADMIN_PASSWORD parameters, follow these steps:

  1. Stop OpenVidu and back up the deployment

    sudo systemctl stop openvidu\nsudo cp -r /opt/openvidu/ /opt/openvidu_backup/\n

  2. Change the password through the MongoDB shell

    With OpenVidu running, change the password with the following commands:

    sudo su\ncd /opt/openvidu/\nCURRENT_MONGO_ADMIN_USERNAME=\"$(grep MONGO_ADMIN_USERNAME /opt/openvidu/.env | cut -d '=' -f 2)\"\nCURRENT_MONGO_ADMIN_PASSWORD=\"$(grep MONGO_ADMIN_PASSWORD /opt/openvidu/.env | cut -d '=' -f 2)\"\nNEW_MONGO_ADMIN_USERNAME=\"<NEW_MONGO_ADMIN_USERNAME>\"\nNEW_MONGO_ADMIN_PASSWORD=\"<NEW_MONGO_ADMIN_PASSWORD>\"\n\n# Change username\ndocker exec -it mongo \\\n    mongosh admin \\\n    --port 20000 \\\n    --username \"$CURRENT_MONGO_ADMIN_USERNAME\" \\\n    --password \"$CURRENT_MONGO_ADMIN_PASSWORD\" \\\n    --eval \"db.system.users.updateOne({user: '$CURRENT_MONGO_ADMIN_USERNAME'}, {\\$set: {user: '$NEW_MONGO_ADMIN_USERNAME'}})\"\n\n# Change password\ndocker exec -it mongo \\\n    mongosh admin \\\n    --port 20000 \\\n    --username \"$NEW_MONGO_ADMIN_USERNAME\" \\\n    --password \"$CURRENT_MONGO_ADMIN_PASSWORD\" \\\n    --eval \"db.changeUserPassword('$NEW_MONGO_ADMIN_USERNAME', '$NEW_MONGO_ADMIN_PASSWORD')\"\n

    After running these commands, the new username and password will be updated in the MongoDB database, but you still need to change the configuration files.

  3. Stop OpenVidu

    sudo systemctl stop openvidu\n

  4. Find the current locations of MONGO_ADMIN_USERNAME and MONGO_ADMIN_PASSWORD

    With the following commands, you can find all occurrences of the current MONGO_ADMIN_USERNAME and MONGO_ADMIN_PASSWORD in the configuration files:

    sudo su\ncd /opt/openvidu/\nCURRENT_MONGO_ADMIN_USERNAME=\"$(grep MONGO_ADMIN_USERNAME /opt/openvidu/.env | cut -d '=' -f 2)\"\nCURRENT_MONGO_ADMIN_PASSWORD=\"$(grep MONGO_ADMIN_PASSWORD /opt/openvidu/.env | cut -d '=' -f 2)\"\ngrep --exclude-dir=data -IHnr \"$CURRENT_MONGO_ADMIN_USERNAME\" .\ngrep --exclude-dir=data -IHnr \"$CURRENT_MONGO_ADMIN_PASSWORD\" .\n
    Example output

    The output should look similar to the following for MONGO_ADMIN_USERNAME:

    ./.env:MONGO_ADMIN_USERNAME=<CURRENT_MONGO_ADMIN_USERNAME>\n./config/livekit.yaml:        mongo_url: mongodb://<CURRENT_MONGO_ADMIN_USERNAME>:<CURRENT_MONGO_ADMIN_PASSWORD>@127.0.0.1:20000\n

    And for MONGO_ADMIN_PASSWORD:

    ./.env:MONGO_ADMIN_PASSWORD=<CURRENT_MONGO_ADMIN_PASSWORD>\n./config/livekit.yaml:        mongo_url: mongodb://<CURRENT_MONGO_ADMIN_USERNAME>:<CURRENT_MONGO_ADMIN_PASSWORD>@127.0.0.1:20000\n

  5. Update the Following Files:

    Based on the output from the previous step, update the following files with the new values:

  6. Verify the changes

    These commands will list all occurrences of the new MONGO_ADMIN_USERNAME and MONGO_ADMIN_PASSWORD in the configuration files. The output should match the locations found in the initial search but with the new values.

    sudo su\ncd /opt/openvidu/\nNEW_MONGO_ADMIN_USERNAME=\"<NEW_MONGO_ADMIN_USERNAME>\"\nNEW_MONGO_ADMIN_PASSWORD=\"<NEW_MONGO_ADMIN_PASSWORD>\"\ngrep --exclude-dir=data -IHnr \"$NEW_MONGO_ADMIN_USERNAME\" .\ngrep --exclude-dir=data -IHnr \"$NEW_MONGO_ADMIN_PASSWORD\" .\n

  7. Start OpenVidu

    sudo systemctl start openvidu\n
"},{"location":"docs/self-hosting/single-node/on-premises/admin/#uninstalling-openvidu","title":"Uninstalling OpenVidu","text":"

To uninstall OpenVidu, just execute the following commands:

sudo su\nsystemctl stop openvidu\nrm -rf /opt/openvidu/\nrm /etc/systemd/system/openvidu.service\n
"},{"location":"docs/self-hosting/single-node/on-premises/install/","title":"OpenVidu Single Node Installation: On-premises","text":"

Regarding OpenVidu v2 compatibility

OpenVidu Single Node is not compatible with OpenVidu v2 API. For having compatibility with OpenVidu v2 applications, you must use OpenVidu Elastic or OpenVidu High Availability.

This section contains the instructions to deploy a production-ready OpenVidu Single Node deployment on-premises. It is a deployment based on Docker and Docker Compose, which will automatically configure all the necessary services for OpenVidu to work properly.

Architecture overview

This is how the architecture of the deployment looks like:

OpenVidu Single Node On Premises Architecture

All services are deployed on a single machine, which includes:

"},{"location":"docs/self-hosting/single-node/on-premises/install/#prerequisites","title":"Prerequisites","text":"

Before starting the installation process, make sure you have the following prerequisites:

"},{"location":"docs/self-hosting/single-node/on-premises/install/#port-rules","title":"Port rules","text":"

Ensure all these rules are configured in your firewall, security group, or any kind of network configuration that you have in your machine.

Inbound port rules:

Protocol Ports Source Description TCP 80 0.0.0.0/0, ::/0 Redirect HTTP traffic to HTTPS and Let's Encrypt validation. TCP 443 0.0.0.0/0, ::/0 Allows access to the following: UDP 443 0.0.0.0/0, ::/0 STUN/TURN server over UDP. TCP 1935 0.0.0.0/0, ::/0 (Optional), only needed if you want to ingest RTMP streams using Ingress service. TCP 7881 0.0.0.0/0, ::/0 (Optional), only needed if you want to allow WebRTC over TCP. UDP 7885 0.0.0.0/0, ::/0 (Optional), only needed if you want to ingest WebRTC using WHIP protocol. TCP 9000 0.0.0.0/0, ::/0 (Optional), only needed if you want to expose MinIO publicly. UDP 50000 - 60000 0.0.0.0/0, ::/0 WebRTC Media traffic.

Outbound port rules:

Typically, all outbound traffic is allowed.

"},{"location":"docs/self-hosting/single-node/on-premises/install/#guided-installation","title":"Guided Installation","text":"

Before the installation, ensure that your machine meets the prerequisites and the port rules. Then, execute the following command on the machine where you want to deploy OpenVidu:

sh <(curl -fsSL http://get.openvidu.io/community/singlenode/latest/install.sh)\n

Note

In case you want to deploy a specific version, just replace latest with the desired version. For example: 3.0.0.

A wizard will guide you through the installation process. You will be asked for the following information:

The rest of the parameters are secrets, usernames, and passwords. If empty, the wizard will generate random values for them.

When the installation process finishes, you will see the following message:

> - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - <\n>                                                                             <\n>  \ud83c\udf89 OpenVidu Community Installation Finished Successfully! \ud83c\udf89               <\n>                                                                             <\n> - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - <\n

OpenVidu will be installed at /opt/openvidu and configured as a systemd service. You can start the service with the following command:

systemctl start openvidu\n

If everything goes well, all containers will be up and running without restarts, and you will be able to access any of the following services:

"},{"location":"docs/self-hosting/single-node/on-premises/install/#configure-your-application-to-use-the-deployment","title":"Configure your Application to use the Deployment","text":"

To point your applications to your OpenVidu deployment, check the file at /opt/openvidu/.env. All access credentials of all services are defined in this file.

Your authentication credentials and URLs to point your applications to are:

"},{"location":"docs/self-hosting/single-node/on-premises/install/#non-interactive-installation","title":"Non-interactive installation","text":"

If you want to automate the installation process, you can generate a command with all the parameters needed to install OpenVidu by answering the wizard questions. You can do this by running the following command:

docker run -it openvidu/openvidu-installer:latest \\\n    --deployment-type=single_node\n

Note

In case you want to deploy a specific version, just replace latest with the desired version. For example: 3.0.0.

This is going to generate a command like this, but it may vary depending on the answers you provide. Here are three examples of the command you can run depending on the certificate type you choose:

Let's Encrypt certificatesSelf-signed certificatesCustom certificates

Example using Let's Encrypt certificates:

sh <(curl -fsSL http://get.openvidu.io/community/singlenode/latest/install.sh) \\\n    --domain-name-or-ip='openvidu.example.io' \\\n    --enabled-modules='observability,app' \\\n    --turn-domain-name='turn.example.io' \\\n    --livekit-api-key='xxxxx' \\\n    --livekit-api-secret='xxxxx' \\\n    --dashboard-admin-user='xxxxx' \\\n    --dashboard-admin-password='xxxxx' \\\n    --redis-password='xxxxx' \\\n    --minio-access-key='xxxxx' \\\n    --minio-secret-key='xxxxx' \\\n    --mongo-admin-user='xxxxx' \\\n    --mongo-admin-password='xxxxx' \\\n    --grafana-admin-user='xxxxx' \\\n    --grafana-admin-password='xxxxx' \\\n    --default-app-user='xxxxx' \\\n    --default-app-password='xxxxx' \\\n    --default-app-admin-user='xxxxx' \\\n    --default-app-admin-password='xxxxx' \\\n    --certificate-type='letsencrypt' \\\n    --letsencrypt-email='example@example.io'\n

Note

In case you want to deploy a specific version, just replace latest with the desired version. For example: 3.0.0.

Example using self-signed certificates:

sh <(curl -fsSL http://get.openvidu.io/community/singlenode/latest/install.sh) \\\n    --domain-name-or-ip='openvidu.example.io' \\\n    --enabled-modules='observability,app' \\\n    --turn-domain-name='turn.example.io' \\\n    --livekit-api-key='xxxxx' \\\n    --livekit-api-secret='xxxxx' \\\n    --dashboard-admin-user='xxxxx' \\\n    --dashboard-admin-password='xxxxx' \\\n    --redis-password='xxxxx' \\\n    --minio-access-key='xxxxx' \\\n    --minio-secret-key='xxxxx' \\\n    --mongo-admin-user='xxxxx' \\\n    --mongo-admin-password='xxxxx' \\\n    --grafana-admin-user='xxxxx' \\\n    --grafana-admin-password='xxxxx' \\\n    --default-app-user='xxxxx' \\\n    --default-app-password='xxxxx' \\\n    --default-app-admin-user='xxxxx' \\\n    --default-app-admin-password='xxxxx' \\\n    --certificate-type='selfsigned' \\\n    --letsencrypt-email='example@example.io'\n

Note

In case you want to deploy a specific version, just replace latest with the desired version. For example: 3.0.0.

Example using custom certificates:

CERT_PRIVATE_KEY=$(cat privkey.pem | base64 -w 0)\nCERT_PUBLIC_KEY=$(cat fullchain.pem | base64 -w 0)\n\n# Optional, only if you want to enable TURN with TLS\nCERT_TURN_PRIVATE_KEY=$(cat turn-privkey.pem | base64 -w 0)\nCERT_TURN_PUBLIC_KEY=$(cat turn-fullchain.pem | base64 -w 0)\n\nsh <(curl -fsSL http://get.openvidu.io/community/singlenode/latest/install.sh) \\\n    --domain-name-or-ip='openvidu.example.io' \\\n    --enabled-modules='observability,app' \\\n    --turn-domain-name='turn.example.io' \\\n    --livekit-api-key='xxxxx' \\\n    --livekit-api-secret='xxxxx' \\\n    --dashboard-admin-user='xxxxx' \\\n    --dashboard-admin-password='xxxxx' \\\n    --redis-password='xxxxx' \\\n    --minio-access-key='xxxxx' \\\n    --minio-secret-key='xxxxx' \\\n    --mongo-admin-user='xxxxx' \\\n    --mongo-admin-password='xxxxx' \\\n    --grafana-admin-user='xxxxx' \\\n    --grafana-admin-password='xxxxx' \\\n    --default-app-user='xxxxx' \\\n    --default-app-password='xxxxx' \\\n    --default-app-admin-user='xxxxx' \\\n    --default-app-admin-password='xxxxx' \\\n    --certificate-type='owncert' \\\n    --owncert-private-key=\"$CERT_PRIVATE_KEY\" \\\n    --owncert-public-key=\"$CERT_PUBLIC_KEY\" \\\n    --turn-owncert-private-key=\"$CERT_TURN_PRIVATE_KEY\" \\\n    --turn-owncert-public-key=\"$CERT_TURN_PUBLIC_KEY\"\n

Note

In case you want to deploy a specific version, just replace latest with the desired version. For example: 3.0.0.

You can run that command in a CI/CD pipeline or in a script to automate the installation process.

Some notes about the command:

To start OpenVidu, remember to run:

systemctl start openvidu\n
"},{"location":"docs/self-hosting/single-node/on-premises/install/#configuration-and-administration","title":"Configuration and administration","text":"

Once you have OpenVidu deployed, you can check the Configuration and Administration section to learn how to manage your OpenVidu Single Node deployment.

"},{"location":"docs/self-hosting/single-node/shared/v2compat-warning/","title":"V2compat warning","text":"

Regarding OpenVidu v2 compatibility

OpenVidu Single Node is not compatible with OpenVidu v2 API. For having compatibility with OpenVidu v2 applications, you must use OpenVidu Elastic or OpenVidu High Availability.

"},{"location":"docs/tutorials/angular-components/","title":"Angular Components tutorials","text":"Angular Components

In the following tutorials you can learn how to use each one of the available Angular Components to build your application UI tailored to your needs:

"},{"location":"docs/tutorials/angular-components/openvidu-additional-panels/","title":"openvidu-additional-panels","text":"

Source code

The openvidu-additional-panels tutorial demonstrates how to add new panels to the videoconference, providing a more tailored user experience.

Adding new videoconference panels is made simple with the AdditionalPanelsDirective, which offers a straightforward way to replace and adapt the PanelComponent to your needs.

OpenVidu Components - Additional Panel

This tutorial combines the use of the ToolbarAdditionalPanelButtonsDirective and the AdditionalPanelsDirective to add new buttons to the toolbar and new panels to the videoconference. If you want to learn how to add new buttons to the toolbar, you can check the openvidu-toolbar-panel-buttons tutorial.

"},{"location":"docs/tutorials/angular-components/openvidu-additional-panels/#running-this-tutorial","title":"Running this tutorial","text":""},{"location":"docs/tutorials/angular-components/openvidu-additional-panels/#1-run-openvidu-server","title":"1. Run OpenVidu Server","text":"Run OpenVidu locallyDeploy OpenVidu

  1. Download OpenVidu

    git clone https://github.com/OpenVidu/openvidu-local-deployment\n

  2. Configure the local deployment

    Windows macOS Linux 
    cd openvidu-local-deployment/community\n.\\configure_lan_private_ip_windows.bat\n
    cd openvidu-local-deployment/community\n./configure_lan_private_ip_macos.sh\n
    cd openvidu-local-deployment/community\n./configure_lan_private_ip_linux.sh\n

  3. Run OpenVidu

    docker compose up\n

To use a production-ready OpenVidu deployment, visit the official deployment guide.

"},{"location":"docs/tutorials/angular-components/openvidu-additional-panels/#2-download-the-tutorial-code","title":"2. Download the tutorial code","text":"
git clone https://github.com/OpenVidu/openvidu-livekit-tutorials.git\ngit clone https://github.com/OpenVidu/openvidu-tutorials.git\n
"},{"location":"docs/tutorials/angular-components/openvidu-additional-panels/#3-run-the-server-application","title":"3. Run the server application","text":"Node Go Ruby Java Python Rust PHP .NET

To run this server application, you need Node installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/node\n
  2. Install dependencies 
    npm install\n
  3. Run the application 
    npm start\n

To run this server application, you need Go installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/go\n
  2. Run the application 
    go run main.go\n

To run this server application, you need Ruby installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/ruby\n
  2. Install dependencies 
    bundle install\n
  3. Run the application 
    ruby app.rb\n

To run this server application, you need Java and Maven installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/java\n
  2. Run the application 
    mvn spring-boot:run\n

To run this server application, you need Python 3 installed on your device.

  1. Navigate into the server directory

    cd openvidu-livekit-tutorials/application-server/python\n

  2. Create a python virtual environment

    python -m venv venv\n

  3. Activate the virtual environment

    Windows macOS Linux 
    .\\venv\\Scripts\\activate\n
    . ./venv/bin/activate\n
    . ./venv/bin/activate\n

  4. Install dependencies

    pip install -r requirements.txt\n

  5. Run the application

    python app.py\n

To run this server application, you need Rust installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/rust\n
  2. Run the application 
    cargo run\n

To run this server application, you need PHP and Composer installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/php\n
  2. Install dependencies 
    composer install\n
  3. Run the application 
    composer start\n

To run this server application, you need .NET installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/dotnet\n
  2. Run the application 
    dotnet run\n

Warning

This .NET server application needs the LIVEKIT_API_SECRET env variable to be at least 32 characters long. Make sure to update it here and in your OpenVidu Server.

"},{"location":"docs/tutorials/angular-components/openvidu-additional-panels/#4-run-the-openvidu-additional-panels-tutorial","title":"4. Run the openvidu-additional-panels tutorial","text":"

To run the client application tutorial, you need Node installed on your development computer.

  1. Navigate into the application client directory:

      cd openvidu-tutorials/openvidu-components/openvidu-additional-panels\n

  2. Install the required dependencies:

      npm install\n

  3. Serve the application:

      npm start\n

Once the server is up and running, you can test the application by visiting http://localhost:5080.

Accessing your application client from other devices in your local network

One advantage of running OpenVidu locally is that you can test your application client with other devices in your local network very easily without worrying about SSL certificates.

Access your application client through https://xxx-yyy-zzz-www.openvidu-local.dev:5443, where xxx-yyy-zzz-www part of the domain is your LAN private IP address with dashes (-) instead of dots (.). For more information, see section Accessing your app from other devices in your network.

"},{"location":"docs/tutorials/angular-components/openvidu-additional-panels/#understanding-the-code","title":"Understanding the code","text":"

This tutorial is an Angular project generated with Angular CLI tool. Therefore, you will see many configuration files and other components that are not the primary focus of this tutorial. We will concentrate on the following files in the src directory:

To use OpenVidu Components Angular in your application, you need to install the library and import the OpenViduComponentsModule in your Angular module. Let's see how to do this:

  1. Create an Angular Project (version 17 or higher)

    To begin, you will need to create a new Angular project if you haven't already. Ensure you have Node.js and the Angular CLI installed. Then, run the following command to create a new Angular project:

    ng new your-project-name\n

    Replace your-project-name with the desired name for your project.

  2. Add Angular Material to your project

    OpenVidu Components Angular needs Angular Material, which provides a range of UI components. To add Angular Material to your project, navigate to your project directory and run:

    ng add @angular/material\n

  3. Install OpenVidu Components Angular

    With your Angular project set up, it's time to add videoconferencing capabilities with OpenVidu Components Angular. Install the library using npm:

    npm install openvidu-components-angular\n

  4. Import and use OpenVidu Components Angular

    To use OpenVidu Components Angular in your application, you need to:

    1. Import the OpenViduComponentsModule in your Angular application.
    2. Configure the module with the OpenViduComponentsConfig object.
    3. Add the component to your template file.
    4. Assign the OpenVidu token and LiveKit URL to the component.
    5. Customize the appearance of the components using CSS variables.
main.tsapp.component.tsstyles.scss

In your main.ts application file, import the it and configure it as follows:

// Other imports ...\n\nimport { OpenViduComponentsModule, OpenViduComponentsConfig } from 'openvidu-components-angular';\n\nconst config: OpenViduComponentsConfig = {\n    production: true,\n};\n\nbootstrapApplication(AppComponent, {\n    providers: [\n        importProvidersFrom(\n            OpenViduComponentsModule.forRoot(config)\n            // Other imports ...\n        ),\n        provideAnimations(),\n    ],\n}).catch((err) => console.error(err));\n

Use the ov-videoconference component to create a videoconference. This component requires a token to connect to the OpenVidu Room. The AppComponent class is responsible for requesting the token and passing it to the ov-videoconference component.

import { OpenViduComponentsModule } from 'openvidu-components-angular';\n\n@Component({\n  selector: 'app-root',\n  template:`\n    <!-- OpenVidu Video Conference Component -->\n    <ov-videoconference\n      [token]=\"token\"\n      [livekitUrl]=\"LIVEKIT_URL\"\n      (onTokenRequested)=\"onTokenRequested($event)\"\n    >\n      <!-- Additional Toolbar Buttons -->\n      <div *ovToolbarAdditionalPanelButtons style=\"text-align: center;\">\n        <button mat-icon-button (click)=\"toggleMyPanel('my-panel1')\">\n          <mat-icon>360</mat-icon>\n        </button>\n        <button mat-icon-button (click)=\"toggleMyPanel('my-panel2')\">\n          <mat-icon>star</mat-icon>\n        </button>\n      </div>\n\n      <!-- Additional Panels -->\n      <div *ovAdditionalPanels id=\"my-panels\">\n        @if (showExternalPanel) {\n        <div id=\"my-panel1\">\n          <h2>NEW PANEL 1</h2>\n          <p>This is my new additional panel</p>\n        </div>\n        } @if (showExternalPanel2) {\n        <div id=\"my-panel2\">\n          <h2>NEW PANEL 2</h2>\n          <p>This is another new panel</p>\n        </div>\n        }\n      </div>\n    </ov-videoconference>\n  `,\n  styles: [''],\n  standalone: true,\n  imports: [OpenViduComponentsModule, MatIconButton, MatIcon],\n})\nexport class AppComponent {\n  // For local development, leave these variables empty\n  // For production, configure them with correct URLs depending on your deployment\n\n  APPLICATION_SERVER_URL = '';  // (1)!\n  LIVEKIT_URL = ''; // (2)!\n\n  // The name of the room to join.\n  roomName = 'openvidu-additional-panels';  // (3)!\n\n  // The token used to join the room.\n  token!: string; // (4)!\n\n  // Flags to control the visibility of external panels\n  showExternalPanel: boolean = false; // (5)!\n  showExternalPanel2: boolean = false; // (6)!\n\n  constructor(private httpClient: HttpClient) {\n    this.configureUrls();\n  }\n\n  private configureUrls() {\n    // If APPLICATION_SERVER_URL is not configured, use default value from local development\n    if (!this.APPLICATION_SERVER_URL) {\n      if (window.location.hostname === 'localhost') {\n        this.APPLICATION_SERVER_URL = 'http://localhost:6080/';\n      } else {\n        this.APPLICATION_SERVER_URL =\n          'https://' + window.location.hostname + ':6443/';\n      }\n    }\n\n    // If LIVEKIT_URL is not configured, use default value from local development\n    if (!this.LIVEKIT_URL) {\n      if (window.location.hostname === 'localhost') {\n        this.LIVEKIT_URL = 'ws://localhost:7880/';\n      } else {\n        this.LIVEKIT_URL = 'wss://' + window.location.hostname + ':7443/';\n      }\n    }\n  }\n\n  ngOnInit() {\n    this.subscribeToPanelToggling(); // (7)!\n  }\n\n  // Requests a token to join the room with the given participant name.\n  async onTokenRequested(participantName: string) { // (8)!\n    const { token } = await this.getToken(this.roomName, participantName);\n    this.token = token;\n  }\n\n  // Subscribe to panel toggling events\n  subscribeToPanelToggling() {\n    this.panelService.panelStatusObs.subscribe((ev: PanelStatusInfo) => { // (9)!\n      this.showExternalPanel = ev.isOpened && ev.panelType === 'my-panel1';\n      this.showExternalPanel2 = ev.isOpened && ev.panelType === 'my-panel2';\n    });\n  }\n\n  // Toggle the visibility of external panels\n  toggleMyPanel(type: string) { // (10)!\n    this.panelService.togglePanel(type);\n  }\n\n  // Retrieves a token to join the room with the given name and participant name.\n  getToken(roomName: string, participantName: string): Promise<any> { // (11)!\n    // Requesting token to the server application\n  }\n}\n
  1. APPLICATION_SERVER_URL: URL to communicate the client application with the server application to request OpenVidu tokens.
  2. LIVEKIT_URL: URL to communicate the client application with the LiveKit server.
  3. roomName: OpenVidu Room identifier. This is the room where the VideoconferenceComponent will connect.
  4. token: OpenVidu Token used to connect to the OpenVidu Room.
  5. showExternalPanel: Flag to control the visibility of the first external panel.
  6. showExternalPanel2: Flag to control the visibility of the second external panel.
  7. subscribeToPanelToggling method that subscribes to panel toggling events.
  8. onTokenRequested method that fires when the VideoconferenceComponent requests a token to connect to the OpenVidu Room.
  9. panelService.panelStatusObs observable that listens to panel toggling events.
  10. toggleMyPanel method that toggles the visibility of external panels.
  11. getToken method that requests a token to the server application.

The app.component.ts file declares the following properties and methods:

Configure the URLs

For local development, leave APPLICATION_SERVER_URL and LIVEKIT_URL variables empty. The function configureUrls() will automatically configure them with default values. However, for production, you should configure these variables with the correct URLs depending on your deployment.

The OpenVidu Components Angular library provides a set of CSS variables that you can use to customize the appearance of the components. You can define these variables in your application's global styles file (e.g. styles.scss).

:root {\n    --ov-primary-color: #303030; /* Primary interface color */\n    --ov-secondary-color: #3e3f3f; /* Secondary interface color */\n    --ov-tertiary-color: #598eff; /* Tertiary accent color for elements */\n    --ov-warn-color: #eb5144; /* Warning color for alerts and notifications */\n    --ov-light-color: #e6e6e6; /* Light color for elements */\n\n    --ov-accent-color: #ffae35; /* Accent color for standout UI elements */\n\n    --ov-logo-background-color: #3a3d3d; /* Background color for the logo area */\n    --ov-text-color: #ffffff; /* Default text color */\n\n    --ov-panel-text-color: #1d1d1d; /* Text color for panel elements */\n    --ov-panel-background: #ffffff; /* Background color for panels */\n\n    --ov-buttons-radius: 50%; /* Border-radius for circular buttons */\n    --ov-leave-button-radius: 10px; /* Border-radius for the leave button */\n    --ov-video-radius: 5px; /* Border-radius for video elements */\n    --ov-panel-radius: 5px; /* Border-radius for panel elements */\n}\n
"},{"location":"docs/tutorials/angular-components/openvidu-additional-panels/#adding-new-panels","title":"Adding new panels","text":"

The *ovPanel directive is used to replace the default videoconference panels with a custom ones. In the app.component.ts file, you can see the following code snippet:

@Component({\n    selector: 'app-root',\n    template: `\n        <!-- OpenVidu Video Conference Component -->\n        <ov-videoconference\n            [token]=\"token\"\n            [livekitUrl]=\"LIVEKIT_URL\"\n            [toolbarDisplayRoomName]=\"false\"\n            (onTokenRequested)=\"onTokenRequested($event)\"\n        >\n            <!-- Additional Toolbar Buttons -->\n            <div *ovToolbarAdditionalPanelButtons style=\"text-align: center;\">\n                <button mat-icon-button (click)=\"toggleMyPanel('my-panel1')\">\n                    <mat-icon>360</mat-icon>\n                </button>\n                <button mat-icon-button (click)=\"toggleMyPanel('my-panel2')\">\n                    <mat-icon>star</mat-icon>\n                </button>\n            </div>\n\n            <!-- Additional Panels -->\n            <div *ovAdditionalPanels id=\"my-panels\">\n                @if (showExternalPanel) {\n                <div id=\"my-panel1\">\n                    <h2>NEW PANEL 1</h2>\n                    <p>This is my new additional panel</p>\n                </div>\n                } @if (showExternalPanel2) {\n                <div id=\"my-panel2\">\n                    <h2>NEW PANEL 2</h2>\n                    <p>This is another new panel</p>\n                </div>\n                }\n            </div>\n        </ov-videoconference>\n    `,\n    styles: [''],\n    standalone: true,\n    imports: [OpenViduComponentsModule, MatIconButton, MatIcon],\n})\nexport class AppComponent {\n    // ...\n}\n

In this code snippet, the *ovToolbarAdditionalPanelButtons directive is used to add new buttons to the toolbar and the *ovAdditionalPanels directive is used to add new panels to the videoconference.

When the user clicks on the buttons, the toggleMyPanel method is called to toggle the visibility of the new panels. These new panels are handled by the showExternalPanel and showExternalPanel2 flags.

"},{"location":"docs/tutorials/angular-components/openvidu-admin-dashboard/","title":"openvidu-admin-dashboard","text":"

Source code

The openvidu-admin-dashboard tutorial demonstrates how to create an admin dashboard to manage the recordings of a videoconference using the OpenVidu Components Angular library.

OpenVidu Components - Admin Login

OpenVidu Components - Admin Dashboard"},{"location":"docs/tutorials/angular-components/openvidu-admin-dashboard/#running-this-tutorial","title":"Running this tutorial","text":""},{"location":"docs/tutorials/angular-components/openvidu-admin-dashboard/#1-run-openvidu-server","title":"1. Run OpenVidu Server","text":"Run OpenVidu locallyDeploy OpenVidu

  1. Download OpenVidu

    git clone https://github.com/OpenVidu/openvidu-local-deployment\n

  2. Configure the local deployment

    Windows macOS Linux 
    cd openvidu-local-deployment/community\n.\\configure_lan_private_ip_windows.bat\n
    cd openvidu-local-deployment/community\n./configure_lan_private_ip_macos.sh\n
    cd openvidu-local-deployment/community\n./configure_lan_private_ip_linux.sh\n

  3. Run OpenVidu

    docker compose up\n

To use a production-ready OpenVidu deployment, visit the official deployment guide.

"},{"location":"docs/tutorials/angular-components/openvidu-admin-dashboard/#2-download-the-tutorial-code","title":"2. Download the tutorial code","text":"
git clone https://github.com/OpenVidu/openvidu-livekit-tutorials.git\ngit clone https://github.com/OpenVidu/openvidu-tutorials.git\n
"},{"location":"docs/tutorials/angular-components/openvidu-admin-dashboard/#3-run-the-server-application","title":"3. Run the server application","text":"Node Go Ruby Java Python Rust PHP .NET

To run this server application, you need Node installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/node\n
  2. Install dependencies 
    npm install\n
  3. Run the application 
    npm start\n

To run this server application, you need Go installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/go\n
  2. Run the application 
    go run main.go\n

To run this server application, you need Ruby installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/ruby\n
  2. Install dependencies 
    bundle install\n
  3. Run the application 
    ruby app.rb\n

To run this server application, you need Java and Maven installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/java\n
  2. Run the application 
    mvn spring-boot:run\n

To run this server application, you need Python 3 installed on your device.

  1. Navigate into the server directory

    cd openvidu-livekit-tutorials/application-server/python\n

  2. Create a python virtual environment

    python -m venv venv\n

  3. Activate the virtual environment

    Windows macOS Linux 
    .\\venv\\Scripts\\activate\n
    . ./venv/bin/activate\n
    . ./venv/bin/activate\n

  4. Install dependencies

    pip install -r requirements.txt\n

  5. Run the application

    python app.py\n

To run this server application, you need Rust installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/rust\n
  2. Run the application 
    cargo run\n

To run this server application, you need PHP and Composer installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/php\n
  2. Install dependencies 
    composer install\n
  3. Run the application 
    composer start\n

To run this server application, you need .NET installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/dotnet\n
  2. Run the application 
    dotnet run\n

Warning

This .NET server application needs the LIVEKIT_API_SECRET env variable to be at least 32 characters long. Make sure to update it here and in your OpenVidu Server.

"},{"location":"docs/tutorials/angular-components/openvidu-admin-dashboard/#4-run-the-openvidu-admin-dashboard-tutorial","title":"4. Run the openvidu-admin-dashboard tutorial","text":"

To run the client application tutorial, you need Node installed on your development computer.

  1. Navigate into the application client directory:

      cd openvidu-tutorials/openvidu-components/openvidu-admin-dashboard\n

  2. Install the required dependencies:

      npm install\n

  3. Serve the application:

      npm start\n

Once the server is up and running, you can test the application by visiting http://localhost:5080.

Accessing your application client from other devices in your local network

One advantage of running OpenVidu locally is that you can test your application client with other devices in your local network very easily without worrying about SSL certificates.

Access your application client through https://xxx-yyy-zzz-www.openvidu-local.dev:5443, where xxx-yyy-zzz-www part of the domain is your LAN private IP address with dashes (-) instead of dots (.). For more information, see section Accessing your app from other devices in your network.

"},{"location":"docs/tutorials/angular-components/openvidu-admin-dashboard/#understanding-the-code","title":"Understanding the code","text":"

This tutorial is an Angular project generated with Angular CLI tool. Therefore, you will see many configuration files and other components that are not the primary focus of this tutorial. We will concentrate on the following files in the src directory:

To use OpenVidu Components Angular in your application, you need to install the library and import the OpenViduComponentsModule in your Angular module. Let's see how to do this:

  1. Create an Angular Project (version 17 or higher)

    To begin, you will need to create a new Angular project if you haven't already. Ensure you have Node.js and the Angular CLI installed. Then, run the following command to create a new Angular project:

    ng new your-project-name\n

    Replace your-project-name with the desired name for your project.

  2. Add Angular Material to your project

    OpenVidu Components Angular needs Angular Material, which provides a range of UI components. To add Angular Material to your project, navigate to your project directory and run:

    ng add @angular/material\n

  3. Install OpenVidu Components Angular

    With your Angular project set up, it's time to add videoconferencing capabilities with OpenVidu Components Angular. Install the library using npm:

    npm install openvidu-components-angular\n

  4. Import and use OpenVidu Components Angular

    To use OpenVidu Components Angular in your application, you need to:

    1. Import the OpenViduComponentsModule in your Angular application.
    2. Configure the module with the OpenViduComponentsConfig object.
    3. Add the component to your template file.
    4. Assign the OpenVidu token and LiveKit URL to the component.
    5. Customize the appearance of the components using CSS variables.
main.tsapp.component.tsstyles.scss

In your main.ts application file, import the it and configure it as follows:

// Other imports ...\n\nimport { OpenViduComponentsModule, OpenViduComponentsConfig } from 'openvidu-components-angular';\n\nconst config: OpenViduComponentsConfig = {\n    production: true,\n};\n\nbootstrapApplication(AppComponent, {\n    providers: [\n        importProvidersFrom(\n            OpenViduComponentsModule.forRoot(config)\n            // Other imports ...\n        ),\n        provideAnimations(),\n    ],\n}).catch((err) => console.error(err));\n

Use the ov-admin-login component to create a login form and the ov-admin-dashboard component to create the admin dashboard.

import { OpenViduComponentsModule } from 'openvidu-components-angular';\n\n@Component({\n  selector: 'app-root',\n  template:`\n    @if (logged) {\n    <ov-admin-dashboard\n      [recordingsList]=\"recordings()\"\n      (onLogoutRequested)=\"onLogoutRequested()\"\n      (onRefreshRecordingsRequested)=\"onRefreshRecordingsRequested()\"\n      (onLoadMoreRecordingsRequested)=\"onLoadMoreRecordingsRequested()\"\n      (onRecordingDeleteRequested)=\"onRecordingDeleteRequested($event)\"\n    ></ov-admin-dashboard>\n    } @else {\n    <ov-admin-login (onLoginRequested)=\"onLoginRequested($event)\">\n    </ov-admin-login>\n    }\n  `,\n  styles: [''],\n  standalone: true,\n  imports: [OpenViduComponentsModule],\n})\nexport class AppComponent {\n\n  roomName = 'openvidu-admin-dashboard'; // (1)!\n\n  logged: boolean = false; // (2)!\n\n  // Recordings list to show in the dashboard\n  // This is a dummy list, you should replace it with your own list from the server\n  recordings: WritableSignal<RecordingInfo[]> = signal([ // (3)!\n    {\n      id: 'recording1',\n      roomName: this.roomName,\n      roomId: 'roomId1',\n      outputMode: RecordingOutputMode.COMPOSED,\n      status: RecordingStatus.READY,\n      filename: 'sampleRecording.mp4',\n      startedAt: new Date().getTime(),\n      endedAt: new Date().getTime(),\n      duration: 0,\n      size: 100,\n      location: 'http://localhost:8080/recordings/recording1',\n    }\n  ]);\n\n  constructor() {}\n\n  onLoginRequested(credentials: { username: string; password: string }) { // (4)!\n    console.log(`Login button clicked ${credentials}`);\n    /**\n     * WARNING! This code is developed for didactic purposes only.\n     * The authentication process should be done in the server side.\n     **/\n    this.logged = true;\n  }\n\n  onLogoutRequested() { // (5)!\n    console.log('Logout button clicked');\n    /**\n     * WARNING! This code is developed for didactic purposes only.\n     * The authentication process should be done in the server side.\n     **/\n    this.logged = false;\n  }\n\n  onRefreshRecordingsRequested() { // (6)!\n    console.log('Refresh recording clicked');\n    /**\n     * WARNING! This code is developed for didactic purposes only.\n     * The authentication process should be done in the server side.\n     **/\n    // Getting the recordings from the server\n    this.recordings.update(() => [\n      {\n        id: 'recording1',\n        roomName: this.title,\n        roomId: 'roomId1',\n        outputMode: RecordingOutputMode.COMPOSED,\n        status: RecordingStatus.READY,\n        filename: 'sampleRecording1.mp4',\n        startedAt: new Date().getTime(),\n        endedAt: new Date().getTime(),\n        duration: 0,\n        size: 100,\n        location: 'http://localhost:8080/recordings/recording1',\n      },\n    ]);\n  }\n\n  onLoadMoreRecordingsRequested() { // (7)!\n    console.log('Load more recordings clicked');\n  }\n\n  onRecordingDeleteRequested(recording: RecordingDeleteRequestedEvent) { // (8)!\n    console.log(`Delete recording clicked ${recording.recordingId}`);\n    /**\n     * WARNING! This code is developed for didactic purposes only.\n     * The authentication process should be done in the server side.\n     **/\n    // Deleting the recording from the server\n    this.recordings.update((recordings) =>\n      recordings.filter((rec) => rec.id !== recording.recordingId)\n    );\n\n    console.log(this.recordings());\n  }\n}\n
  1. roomName: OpenVidu Room name.
  2. logged: Boolean that indicates if the user is logged in.
  3. recordings: Dummy list of recordings to show in the dashboard. You should replace it with your own list from the server from the server.
  4. onLoginRequested method that fires when the login button is clicked.
  5. onLogoutRequested method that fires when the logout button is clicked.
  6. onRefreshRecordingsRequested method that fires when the refresh recordings button is clicked.
  7. onLoadMoreRecordingsRequested method that fires when the load more recordings button is clicked.
  8. onRecordingDeleteRequested method that fires when the delete recording button is clicked.

The app.component.ts file declares the following properties and methods:

Configure the URLs

For local development, leave APPLICATION_SERVER_URL and LIVEKIT_URL variables empty. The function configureUrls() will automatically configure them with default values. However, for production, you should configure these variables with the correct URLs depending on your deployment.

The OpenVidu Components Angular library provides a set of CSS variables that you can use to customize the appearance of the components. You can define these variables in your application's global styles file (e.g. styles.scss).

:root {\n    --ov-primary-color: #303030; /* Primary interface color */\n    --ov-secondary-color: #3e3f3f; /* Secondary interface color */\n    --ov-tertiary-color: #598eff; /* Tertiary accent color for elements */\n    --ov-warn-color: #eb5144; /* Warning color for alerts and notifications */\n    --ov-light-color: #e6e6e6; /* Light color for elements */\n\n    --ov-accent-color: #ffae35; /* Accent color for standout UI elements */\n\n    --ov-logo-background-color: #3a3d3d; /* Background color for the logo area */\n    --ov-text-color: #ffffff; /* Default text color */\n\n    --ov-panel-text-color: #1d1d1d; /* Text color for panel elements */\n    --ov-panel-background: #ffffff; /* Background color for panels */\n\n    --ov-buttons-radius: 50%; /* Border-radius for circular buttons */\n    --ov-leave-button-radius: 10px; /* Border-radius for the leave button */\n    --ov-video-radius: 5px; /* Border-radius for video elements */\n    --ov-panel-radius: 5px; /* Border-radius for panel elements */\n}\n
"},{"location":"docs/tutorials/angular-components/openvidu-custom-activities-panel/","title":"openvidu-custom-activities-panel","text":"

Source code

The openvidu-custom-activities-panel tutorial demonstrates how to customize the activities panel, providing a more tailored user experience.

Replacing the default activities panel is made simple with the ActivitiesPanelDirective, which offers a straightforward way to replace and adapt the ActivitiesPanelComponent to your needs.

OpenVidu Components - Custom Activities Panel"},{"location":"docs/tutorials/angular-components/openvidu-custom-activities-panel/#running-this-tutorial","title":"Running this tutorial","text":""},{"location":"docs/tutorials/angular-components/openvidu-custom-activities-panel/#1-run-openvidu-server","title":"1. Run OpenVidu Server","text":"Run OpenVidu locallyDeploy OpenVidu

  1. Download OpenVidu

    git clone https://github.com/OpenVidu/openvidu-local-deployment\n

  2. Configure the local deployment

    Windows macOS Linux 
    cd openvidu-local-deployment/community\n.\\configure_lan_private_ip_windows.bat\n
    cd openvidu-local-deployment/community\n./configure_lan_private_ip_macos.sh\n
    cd openvidu-local-deployment/community\n./configure_lan_private_ip_linux.sh\n

  3. Run OpenVidu

    docker compose up\n

To use a production-ready OpenVidu deployment, visit the official deployment guide.

"},{"location":"docs/tutorials/angular-components/openvidu-custom-activities-panel/#2-download-the-tutorial-code","title":"2. Download the tutorial code","text":"
git clone https://github.com/OpenVidu/openvidu-livekit-tutorials.git\ngit clone https://github.com/OpenVidu/openvidu-tutorials.git\n
"},{"location":"docs/tutorials/angular-components/openvidu-custom-activities-panel/#3-run-the-server-application","title":"3. Run the server application","text":"Node Go Ruby Java Python Rust PHP .NET

To run this server application, you need Node installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/node\n
  2. Install dependencies 
    npm install\n
  3. Run the application 
    npm start\n

To run this server application, you need Go installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/go\n
  2. Run the application 
    go run main.go\n

To run this server application, you need Ruby installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/ruby\n
  2. Install dependencies 
    bundle install\n
  3. Run the application 
    ruby app.rb\n

To run this server application, you need Java and Maven installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/java\n
  2. Run the application 
    mvn spring-boot:run\n

To run this server application, you need Python 3 installed on your device.

  1. Navigate into the server directory

    cd openvidu-livekit-tutorials/application-server/python\n

  2. Create a python virtual environment

    python -m venv venv\n

  3. Activate the virtual environment

    Windows macOS Linux 
    .\\venv\\Scripts\\activate\n
    . ./venv/bin/activate\n
    . ./venv/bin/activate\n

  4. Install dependencies

    pip install -r requirements.txt\n

  5. Run the application

    python app.py\n

To run this server application, you need Rust installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/rust\n
  2. Run the application 
    cargo run\n

To run this server application, you need PHP and Composer installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/php\n
  2. Install dependencies 
    composer install\n
  3. Run the application 
    composer start\n

To run this server application, you need .NET installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/dotnet\n
  2. Run the application 
    dotnet run\n

Warning

This .NET server application needs the LIVEKIT_API_SECRET env variable to be at least 32 characters long. Make sure to update it here and in your OpenVidu Server.

"},{"location":"docs/tutorials/angular-components/openvidu-custom-activities-panel/#4-run-the-openvidu-custom-activities-panel-tutorial","title":"4. Run the openvidu-custom-activities-panel tutorial","text":"

To run the client application tutorial, you need Node installed on your development computer.

  1. Navigate into the application client directory:

      cd openvidu-tutorials/openvidu-components/openvidu-custom-activities-panel\n

  2. Install the required dependencies:

      npm install\n

  3. Serve the application:

      npm start\n

Once the server is up and running, you can test the application by visiting http://localhost:5080.

Accessing your application client from other devices in your local network

One advantage of running OpenVidu locally is that you can test your application client with other devices in your local network very easily without worrying about SSL certificates.

Access your application client through https://xxx-yyy-zzz-www.openvidu-local.dev:5443, where xxx-yyy-zzz-www part of the domain is your LAN private IP address with dashes (-) instead of dots (.). For more information, see section Accessing your app from other devices in your network.

"},{"location":"docs/tutorials/angular-components/openvidu-custom-activities-panel/#understanding-the-code","title":"Understanding the code","text":"

This tutorial is an Angular project generated with Angular CLI tool. Therefore, you will see many configuration files and other components that are not the primary focus of this tutorial. We will concentrate on the following files in the src directory:

To use OpenVidu Components Angular in your application, you need to install the library and import the OpenViduComponentsModule in your Angular module. Let's see how to do this:

  1. Create an Angular Project (version 17 or higher)

    To begin, you will need to create a new Angular project if you haven't already. Ensure you have Node.js and the Angular CLI installed. Then, run the following command to create a new Angular project:

    ng new your-project-name\n

    Replace your-project-name with the desired name for your project.

  2. Add Angular Material to your project

    OpenVidu Components Angular needs Angular Material, which provides a range of UI components. To add Angular Material to your project, navigate to your project directory and run:

    ng add @angular/material\n

  3. Install OpenVidu Components Angular

    With your Angular project set up, it's time to add videoconferencing capabilities with OpenVidu Components Angular. Install the library using npm:

    npm install openvidu-components-angular\n

  4. Import and use OpenVidu Components Angular

    To use OpenVidu Components Angular in your application, you need to:

    1. Import the OpenViduComponentsModule in your Angular application.
    2. Configure the module with the OpenViduComponentsConfig object.
    3. Add the component to your template file.
    4. Assign the OpenVidu token and LiveKit URL to the component.
    5. Customize the appearance of the components using CSS variables.
main.tsapp.component.tsstyles.scss

In your main.ts application file, import the it and configure it as follows:

// Other imports ...\n\nimport { OpenViduComponentsModule, OpenViduComponentsConfig } from 'openvidu-components-angular';\n\nconst config: OpenViduComponentsConfig = {\n    production: true,\n};\n\nbootstrapApplication(AppComponent, {\n    providers: [\n        importProvidersFrom(\n            OpenViduComponentsModule.forRoot(config)\n            // Other imports ...\n        ),\n        provideAnimations(),\n    ],\n}).catch((err) => console.error(err));\n

Use the ov-videoconference component to create a videoconference. This component requires a token to connect to the OpenVidu Room. The AppComponent class is responsible for requesting the token and passing it to the ov-videoconference component.

import { OpenViduComponentsModule } from 'openvidu-components-angular';\n\n@Component({\n  selector: 'app-root',\n  template:`\n    <!-- OpenVidu Video Conference Component -->\n    <ov-videoconference\n        [token]=\"token\"\n        [livekitUrl]=\"LIVEKIT_URL\"\n        (onTokenRequested)=\"onTokenRequested($event)\"\n    >\n        <!-- Custom activities panel -->\n        <div *ovActivitiesPanel id=\"my-panel\">\n            <h3>ACTIVITIES</h3>\n            <div>CUSTOM ACTIVITIES</div>\n        </div>\n    </ov-videoconference>\n  `,\n  styles: [''],\n  standalone: true,\n  imports: [OpenViduComponentsModule],\n})\nexport class AppComponent {\n  // For local development, leave these variables empty\n  // For production, configure them with correct URLs depending on your deployment\n\n  APPLICATION_SERVER_URL = '';  // (1)!\n  LIVEKIT_URL = ''; // (2)!\n\n  // The name of the room to join.\n  roomName = 'openvidu-custom-activities-panel';  // (3)!\n\n  // The token used to join the room.\n  token!: string; // (4)!\n\n  constructor(private httpClient: HttpClient) {\n    this.configureUrls();\n  }\n\n  private configureUrls() {\n    // If APPLICATION_SERVER_URL is not configured, use default value from local development\n    if (!this.APPLICATION_SERVER_URL) {\n      if (window.location.hostname === 'localhost') {\n        this.APPLICATION_SERVER_URL = 'http://localhost:6080/';\n      } else {\n        this.APPLICATION_SERVER_URL =\n          'https://' + window.location.hostname + ':6443/';\n      }\n    }\n\n    // If LIVEKIT_URL is not configured, use default value from local development\n    if (!this.LIVEKIT_URL) {\n      if (window.location.hostname === 'localhost') {\n        this.LIVEKIT_URL = 'ws://localhost:7880/';\n      } else {\n        this.LIVEKIT_URL = 'wss://' + window.location.hostname + ':7443/';\n      }\n    }\n  }\n\n  // Requests a token to join the room with the given participant name.\n  async onTokenRequested(participantName: string) { // (5)!\n    const { token } = await this.getToken(this.roomName, participantName);\n    this.token = token;\n  }\n\n  // Retrieves a token to join the room with the given name and participant name.\n  getToken(roomName: string, participantName: string): Promise<any> { // (6)!\n    // Requesting token to the server application\n  }\n}\n
  1. APPLICATION_SERVER_URL: URL to communicate the client application with the server application to request OpenVidu tokens.
  2. LIVEKIT_URL: URL to communicate the client application with the LiveKit server.
  3. roomName: OpenVidu Room identifier. This is the room where the VideoconferenceComponent will connect.
  4. token: OpenVidu Token used to connect to the OpenVidu Room.
  5. onTokenRequested method that fires when the VideoconferenceComponent requests a token to connect to the OpenVidu Room.
  6. getToken method that requests a token to the server application.

The app.component.ts file declares the following properties and methods:

Configure the URLs

For local development, leave APPLICATION_SERVER_URL and LIVEKIT_URL variables empty. The function configureUrls() will automatically configure them with default values. However, for production, you should configure these variables with the correct URLs depending on your deployment.

The OpenVidu Components Angular library provides a set of CSS variables that you can use to customize the appearance of the components. You can define these variables in your application's global styles file (e.g. styles.scss).

:root {\n    --ov-primary-color: #303030; /* Primary interface color */\n    --ov-secondary-color: #3e3f3f; /* Secondary interface color */\n    --ov-tertiary-color: #598eff; /* Tertiary accent color for elements */\n    --ov-warn-color: #eb5144; /* Warning color for alerts and notifications */\n    --ov-light-color: #e6e6e6; /* Light color for elements */\n\n    --ov-accent-color: #ffae35; /* Accent color for standout UI elements */\n\n    --ov-logo-background-color: #3a3d3d; /* Background color for the logo area */\n    --ov-text-color: #ffffff; /* Default text color */\n\n    --ov-panel-text-color: #1d1d1d; /* Text color for panel elements */\n    --ov-panel-background: #ffffff; /* Background color for panels */\n\n    --ov-buttons-radius: 50%; /* Border-radius for circular buttons */\n    --ov-leave-button-radius: 10px; /* Border-radius for the leave button */\n    --ov-video-radius: 5px; /* Border-radius for video elements */\n    --ov-panel-radius: 5px; /* Border-radius for panel elements */\n}\n
"},{"location":"docs/tutorials/angular-components/openvidu-custom-activities-panel/#customizing-chat-panel","title":"Customizing chat panel","text":"

This tutorial uses the *ovActivitiesPanel directive with the aim of replacing the default activities panel with a custom one.

In the app.component.ts file, you can see the following code snippet:

@Component({\n    selector: 'app-root',\n    template: `\n        <!-- OpenVidu Video Conference Component -->\n        <ov-videoconference\n            [token]=\"token\"\n            [livekitUrl]=\"LIVEKIT_URL\"\n            (onTokenRequested)=\"onTokenRequested($event)\"\n        >\n            <!-- Custom activities panel -->\n            <div *ovActivitiesPanel id=\"my-panel\">\n                <h3>ACTIVITIES</h3>\n                <div>CUSTOM ACTIVITIES</div>\n            </div>\n        </ov-videoconference>\n    `,\n    styles: [''],\n    standalone: true,\n    imports: [OpenViduComponentsModule],\n})\nexport class AppComponent {\n    // ...\n}\n
"},{"location":"docs/tutorials/angular-components/openvidu-custom-chat-panel/","title":"openvidu-custom-chat-panel","text":"

Source code

The openvidu-custom-chat-panel tutorial demonstrates how to customize the chat panel, providing a more tailored user experience.

Replacing the default chat panel is made simple with the ChatPanelDirective, which offers a straightforward way to replace and adapt the ChatPanelComponent to your needs.

OpenVidu Components - Custom Chat Panel"},{"location":"docs/tutorials/angular-components/openvidu-custom-chat-panel/#running-this-tutorial","title":"Running this tutorial","text":""},{"location":"docs/tutorials/angular-components/openvidu-custom-chat-panel/#1-run-openvidu-server","title":"1. Run OpenVidu Server","text":"Run OpenVidu locallyDeploy OpenVidu

  1. Download OpenVidu

    git clone https://github.com/OpenVidu/openvidu-local-deployment\n

  2. Configure the local deployment

    Windows macOS Linux 
    cd openvidu-local-deployment/community\n.\\configure_lan_private_ip_windows.bat\n
    cd openvidu-local-deployment/community\n./configure_lan_private_ip_macos.sh\n
    cd openvidu-local-deployment/community\n./configure_lan_private_ip_linux.sh\n

  3. Run OpenVidu

    docker compose up\n

To use a production-ready OpenVidu deployment, visit the official deployment guide.

"},{"location":"docs/tutorials/angular-components/openvidu-custom-chat-panel/#2-download-the-tutorial-code","title":"2. Download the tutorial code","text":"
git clone https://github.com/OpenVidu/openvidu-livekit-tutorials.git\ngit clone https://github.com/OpenVidu/openvidu-tutorials.git\n
"},{"location":"docs/tutorials/angular-components/openvidu-custom-chat-panel/#3-run-the-server-application","title":"3. Run the server application","text":"Node Go Ruby Java Python Rust PHP .NET

To run this server application, you need Node installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/node\n
  2. Install dependencies 
    npm install\n
  3. Run the application 
    npm start\n

To run this server application, you need Go installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/go\n
  2. Run the application 
    go run main.go\n

To run this server application, you need Ruby installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/ruby\n
  2. Install dependencies 
    bundle install\n
  3. Run the application 
    ruby app.rb\n

To run this server application, you need Java and Maven installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/java\n
  2. Run the application 
    mvn spring-boot:run\n

To run this server application, you need Python 3 installed on your device.

  1. Navigate into the server directory

    cd openvidu-livekit-tutorials/application-server/python\n

  2. Create a python virtual environment

    python -m venv venv\n

  3. Activate the virtual environment

    Windows macOS Linux 
    .\\venv\\Scripts\\activate\n
    . ./venv/bin/activate\n
    . ./venv/bin/activate\n

  4. Install dependencies

    pip install -r requirements.txt\n

  5. Run the application

    python app.py\n

To run this server application, you need Rust installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/rust\n
  2. Run the application 
    cargo run\n

To run this server application, you need PHP and Composer installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/php\n
  2. Install dependencies 
    composer install\n
  3. Run the application 
    composer start\n

To run this server application, you need .NET installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/dotnet\n
  2. Run the application 
    dotnet run\n

Warning

This .NET server application needs the LIVEKIT_API_SECRET env variable to be at least 32 characters long. Make sure to update it here and in your OpenVidu Server.

"},{"location":"docs/tutorials/angular-components/openvidu-custom-chat-panel/#4-run-the-openvidu-custom-chat-panel-tutorial","title":"4. Run the openvidu-custom-chat-panel tutorial","text":"

To run the client application tutorial, you need Node installed on your development computer.

  1. Navigate into the application client directory:

      cd openvidu-tutorials/openvidu-components/openvidu-custom-chat-panel\n

  2. Install the required dependencies:

      npm install\n

  3. Serve the application:

      npm start\n

Once the server is up and running, you can test the application by visiting http://localhost:5080.

Accessing your application client from other devices in your local network

One advantage of running OpenVidu locally is that you can test your application client with other devices in your local network very easily without worrying about SSL certificates.

Access your application client through https://xxx-yyy-zzz-www.openvidu-local.dev:5443, where xxx-yyy-zzz-www part of the domain is your LAN private IP address with dashes (-) instead of dots (.). For more information, see section Accessing your app from other devices in your network.

"},{"location":"docs/tutorials/angular-components/openvidu-custom-chat-panel/#understanding-the-code","title":"Understanding the code","text":"

This tutorial is an Angular project generated with Angular CLI tool. Therefore, you will see many configuration files and other components that are not the primary focus of this tutorial. We will concentrate on the following files in the src directory:

To use OpenVidu Components Angular in your application, you need to install the library and import the OpenViduComponentsModule in your Angular module. Let's see how to do this:

  1. Create an Angular Project (version 17 or higher)

    To begin, you will need to create a new Angular project if you haven't already. Ensure you have Node.js and the Angular CLI installed. Then, run the following command to create a new Angular project:

    ng new your-project-name\n

    Replace your-project-name with the desired name for your project.

  2. Add Angular Material to your project

    OpenVidu Components Angular needs Angular Material, which provides a range of UI components. To add Angular Material to your project, navigate to your project directory and run:

    ng add @angular/material\n

  3. Install OpenVidu Components Angular

    With your Angular project set up, it's time to add videoconferencing capabilities with OpenVidu Components Angular. Install the library using npm:

    npm install openvidu-components-angular\n

  4. Import and use OpenVidu Components Angular

    To use OpenVidu Components Angular in your application, you need to:

    1. Import the OpenViduComponentsModule in your Angular application.
    2. Configure the module with the OpenViduComponentsConfig object.
    3. Add the component to your template file.
    4. Assign the OpenVidu token and LiveKit URL to the component.
    5. Customize the appearance of the components using CSS variables.
main.tsapp.component.tsstyles.scss

In your main.ts application file, import the it and configure it as follows:

// Other imports ...\n\nimport { OpenViduComponentsModule, OpenViduComponentsConfig } from 'openvidu-components-angular';\n\nconst config: OpenViduComponentsConfig = {\n    production: true,\n};\n\nbootstrapApplication(AppComponent, {\n    providers: [\n        importProvidersFrom(\n            OpenViduComponentsModule.forRoot(config)\n            // Other imports ...\n        ),\n        provideAnimations(),\n    ],\n}).catch((err) => console.error(err));\n

Use the ov-videoconference component to create a videoconference. This component requires a token to connect to the OpenVidu Room. The AppComponent class is responsible for requesting the token and passing it to the ov-videoconference component.

import {\n  DataPacket_Kind,\n  DataPublishOptions,\n  DataTopic,\n  ParticipantService,\n  RemoteParticipant,\n  Room,\n  RoomEvent,\n  OpenViduComponentsModule,\n} from 'openvidu-components-angular';\n\n@Component({\n  selector: 'app-root',\n  template:`\n    <!-- OpenVidu Video Conference Component -->\n    <ov-videoconference\n      [token]=\"token\"\n      [livekitUrl]=\"LIVEKIT_URL\"\n      [toolbarDisplayRoomName]=\"false\"\n      (onTokenRequested)=\"onTokenRequested($event)\"\n      (onRoomCreated)=\"onRoomCreated($event)\"\n    >\n      <!-- Chat Panel -->\n      <div *ovChatPanel id=\"my-panel\">\n        <h3>Chat</h3>\n        <div>\n          <ul>\n            @for (msg of messages; track msg) {\n            <li>{{ msg }}</li>\n            }\n          </ul>\n        </div>\n        <input value=\"Hello\" #input />\n        <button (click)=\"send(input.value)\">Send</button>\n      </div>\n    </ov-videoconference>\n  `,\n  styles: [''],\n  standalone: true,\n  imports: [OpenViduComponentsModule],\n})\nexport class AppComponent {\n  // For local development, leave these variables empty\n  // For production, configure them with correct URLs depending on your deployment\n\n  APPLICATION_SERVER_URL = '';  // (1)!\n  LIVEKIT_URL = ''; // (2)!\n\n  // The name of the room to join.\n  roomName = 'openvidu-custom-chat-panel';  // (3)!\n\n  // The token used to join the room.\n  token!: string; // (4)!\n\n  messages: string[] = []; // (5)!\n\n  constructor(private httpClient: HttpClient, private participantService: ParticipantService) {\n    this.configureUrls();\n  }\n\n  private configureUrls() {\n    // If APPLICATION_SERVER_URL is not configured, use default value from local development\n    if (!this.APPLICATION_SERVER_URL) {\n      if (window.location.hostname === 'localhost') {\n        this.APPLICATION_SERVER_URL = 'http://localhost:6080/';\n      } else {\n        this.APPLICATION_SERVER_URL =\n          'https://' + window.location.hostname + ':6443/';\n      }\n    }\n\n    // If LIVEKIT_URL is not configured, use default value from local development\n    if (!this.LIVEKIT_URL) {\n      if (window.location.hostname === 'localhost') {\n        this.LIVEKIT_URL = 'ws://localhost:7880/';\n      } else {\n        this.LIVEKIT_URL = 'wss://' + window.location.hostname + ':7443/';\n      }\n    }\n  }\n\n  // Requests a token to join the room with the given participant name.\n  async onTokenRequested(participantName: string) { // (6)!\n    const { token } = await this.getToken(this.roomName, participantName);\n    this.token = token;\n  }\n\n  /**\n   * Handles the creation of a new room and sets up an event listener for receiving data.\n   *\n   * @param room - The Room object that was created.\n   */\n  onRoomCreated(room: Room) { // (7)!\n    // Set up an event listener for the RoomEvent.DataReceived event.\n    room.on(RoomEvent.DataReceived, ( // (8)!\n      payload: Uint8Array,\n      participant?: RemoteParticipant,\n      _?: DataPacket_Kind,\n      topic?: string\n    ) => {\n      // Check if the received data topic is related to chat messages.\n      if (topic === DataTopic.CHAT) {\n        // Decode the payload from Uint8Array to a string and parse it as JSON.\n        const { message } = JSON.parse(new TextDecoder().decode(payload));\n\n        // Get the participant's name or default to 'Unknown' if not available.\n        const participantName = participant?.name || 'Unknown';\n\n        // Add the received message to the messages array.\n        this.messages.push(message);\n\n        // Log the received message and the participant's name to the console.\n        console.log(`Message received from ${participantName}:`, message);\n      }\n    });\n  }\n\n  // Function to send a chat message\n  async send(message: string): Promise<void> { // (9)!\n    const strData = JSON.stringify({ message });\n    const data: Uint8Array = new TextEncoder().encode(strData);\n    const options: DataPublishOptions = { topic: DataTopic.CHAT };\n    await this.participantService.publishData(data, options);\n    this.messages.push(message);\n  }\n\n  // Retrieves a token to join the room with the given name and participant name.\n  getToken(roomName: string, participantName: string): Promise<any> { // (10)!\n    // Requesting token to the server application\n  }\n}\n
  1. APPLICATION_SERVER_URL: URL to communicate the client application with the server application to request OpenVidu tokens.
  2. LIVEKIT_URL: URL to communicate the client application with the LiveKit server.
  3. roomName: OpenVidu Room identifier. This is the room where the VideoconferenceComponent will connect.
  4. token: OpenVidu Token used to connect to the OpenVidu Room.
  5. messages array that stores the chat messages.
  6. onTokenRequested method that fires when the VideoconferenceComponent requests a token to connect to the OpenVidu Room.
  7. onRoomCreated method that handles the creation of a new room and sets up an event listener for receiving data.
  8. Event listener for the RoomEvent.DataReceived event that listens to chat messages.
  9. send method that sends a chat message.
  10. getToken method that requests a token to the server application.

The app.component.ts file declares the following properties and methods:

Configure the URLs

For local development, leave APPLICATION_SERVER_URL and LIVEKIT_URL variables empty. The function configureUrls() will automatically configure them with default values. However, for production, you should configure these variables with the correct URLs depending on your deployment.

The OpenVidu Components Angular library provides a set of CSS variables that you can use to customize the appearance of the components. You can define these variables in your application's global styles file (e.g. styles.scss).

:root {\n    --ov-primary-color: #303030; /* Primary interface color */\n    --ov-secondary-color: #3e3f3f; /* Secondary interface color */\n    --ov-tertiary-color: #598eff; /* Tertiary accent color for elements */\n    --ov-warn-color: #eb5144; /* Warning color for alerts and notifications */\n    --ov-light-color: #e6e6e6; /* Light color for elements */\n\n    --ov-accent-color: #ffae35; /* Accent color for standout UI elements */\n\n    --ov-logo-background-color: #3a3d3d; /* Background color for the logo area */\n    --ov-text-color: #ffffff; /* Default text color */\n\n    --ov-panel-text-color: #1d1d1d; /* Text color for panel elements */\n    --ov-panel-background: #ffffff; /* Background color for panels */\n\n    --ov-buttons-radius: 50%; /* Border-radius for circular buttons */\n    --ov-leave-button-radius: 10px; /* Border-radius for the leave button */\n    --ov-video-radius: 5px; /* Border-radius for video elements */\n    --ov-panel-radius: 5px; /* Border-radius for panel elements */\n}\n
"},{"location":"docs/tutorials/angular-components/openvidu-custom-chat-panel/#customizing-chat-panel","title":"Customizing chat panel","text":"

This tutorial uses the *ovChatPanel directive with the aim of replacing the default chat panel with a custom one.

In the app.component.ts file, you can see the following code snippet:

@Component({\n    selector: 'app-root',\n    template: `\n        <!-- OpenVidu Video Conference Component -->\n        <ov-videoconference\n            [token]=\"token\"\n            [livekitUrl]=\"LIVEKIT_URL\"\n            (onTokenRequested)=\"onTokenRequested($event)\"\n            (onRoomCreated)=\"onRoomCreated($event)\"\n        >\n            <!-- Chat Panel -->\n            <div *ovChatPanel id=\"my-panel\">\n                <h3>Chat</h3>\n                <div>\n                    <ul>\n                        @for (msg of messages; track msg) {\n                        <li>{{ msg }}</li>\n                        }\n                    </ul>\n                </div>\n                <input value=\"Hello\" #input />\n                <button (click)=\"send(input.value)\">Send</button>\n            </div>\n        </ov-videoconference>\n    `,\n    styles: [''],\n    standalone: true,\n    imports: [OpenViduComponentsModule],\n})\nexport class AppComponent {\n    // ...\n}\n
"},{"location":"docs/tutorials/angular-components/openvidu-custom-layout/","title":"openvidu-custom-layout","text":"

Source code

The openvidu-custom-layout tutorial demonstrates how to replace the default layout of the OpenVidu Components Angular library with a custom layout.

Replacing the default layout is made simple with the LayoutDirective, which offers a straightforward way to customize the LayoutComponent.

OpenVidu Components - Custom Layout"},{"location":"docs/tutorials/angular-components/openvidu-custom-layout/#running-this-tutorial","title":"Running this tutorial","text":""},{"location":"docs/tutorials/angular-components/openvidu-custom-layout/#1-run-openvidu-server","title":"1. Run OpenVidu Server","text":"Run OpenVidu locallyDeploy OpenVidu

  1. Download OpenVidu

    git clone https://github.com/OpenVidu/openvidu-local-deployment\n

  2. Configure the local deployment

    Windows macOS Linux 
    cd openvidu-local-deployment/community\n.\\configure_lan_private_ip_windows.bat\n
    cd openvidu-local-deployment/community\n./configure_lan_private_ip_macos.sh\n
    cd openvidu-local-deployment/community\n./configure_lan_private_ip_linux.sh\n

  3. Run OpenVidu

    docker compose up\n

To use a production-ready OpenVidu deployment, visit the official deployment guide.

"},{"location":"docs/tutorials/angular-components/openvidu-custom-layout/#2-download-the-tutorial-code","title":"2. Download the tutorial code","text":"
git clone https://github.com/OpenVidu/openvidu-livekit-tutorials.git\ngit clone https://github.com/OpenVidu/openvidu-tutorials.git\n
"},{"location":"docs/tutorials/angular-components/openvidu-custom-layout/#3-run-the-server-application","title":"3. Run the server application","text":"Node Go Ruby Java Python Rust PHP .NET

To run this server application, you need Node installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/node\n
  2. Install dependencies 
    npm install\n
  3. Run the application 
    npm start\n

To run this server application, you need Go installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/go\n
  2. Run the application 
    go run main.go\n

To run this server application, you need Ruby installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/ruby\n
  2. Install dependencies 
    bundle install\n
  3. Run the application 
    ruby app.rb\n

To run this server application, you need Java and Maven installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/java\n
  2. Run the application 
    mvn spring-boot:run\n

To run this server application, you need Python 3 installed on your device.

  1. Navigate into the server directory

    cd openvidu-livekit-tutorials/application-server/python\n

  2. Create a python virtual environment

    python -m venv venv\n

  3. Activate the virtual environment

    Windows macOS Linux 
    .\\venv\\Scripts\\activate\n
    . ./venv/bin/activate\n
    . ./venv/bin/activate\n

  4. Install dependencies

    pip install -r requirements.txt\n

  5. Run the application

    python app.py\n

To run this server application, you need Rust installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/rust\n
  2. Run the application 
    cargo run\n

To run this server application, you need PHP and Composer installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/php\n
  2. Install dependencies 
    composer install\n
  3. Run the application 
    composer start\n

To run this server application, you need .NET installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/dotnet\n
  2. Run the application 
    dotnet run\n

Warning

This .NET server application needs the LIVEKIT_API_SECRET env variable to be at least 32 characters long. Make sure to update it here and in your OpenVidu Server.

"},{"location":"docs/tutorials/angular-components/openvidu-custom-layout/#4-run-the-openvidu-custom-layout-tutorial","title":"4. Run the openvidu-custom-layout tutorial","text":"

To run the client application tutorial, you need Node installed on your development computer.

  1. Navigate into the application client directory:

      cd openvidu-tutorials/openvidu-components/openvidu-custom-layout\n

  2. Install the required dependencies:

      npm install\n

  3. Serve the application:

      npm start\n

Once the server is up and running, you can test the application by visiting http://localhost:5080.

Accessing your application client from other devices in your local network

One advantage of running OpenVidu locally is that you can test your application client with other devices in your local network very easily without worrying about SSL certificates.

Access your application client through https://xxx-yyy-zzz-www.openvidu-local.dev:5443, where xxx-yyy-zzz-www part of the domain is your LAN private IP address with dashes (-) instead of dots (.). For more information, see section Accessing your app from other devices in your network.

"},{"location":"docs/tutorials/angular-components/openvidu-custom-layout/#understanding-the-code","title":"Understanding the code","text":"

This tutorial is an Angular project generated with Angular CLI tool. Therefore, you will see many configuration files and other components that are not the primary focus of this tutorial. We will concentrate on the following files in the src directory:

To use OpenVidu Components Angular in your application, you need to install the library and import the OpenViduComponentsModule in your Angular module. Let's see how to do this:

  1. Create an Angular Project (version 17 or higher)

    To begin, you will need to create a new Angular project if you haven't already. Ensure you have Node.js and the Angular CLI installed. Then, run the following command to create a new Angular project:

    ng new your-project-name\n

    Replace your-project-name with the desired name for your project.

  2. Add Angular Material to your project

    OpenVidu Components Angular needs Angular Material, which provides a range of UI components. To add Angular Material to your project, navigate to your project directory and run:

    ng add @angular/material\n

  3. Install OpenVidu Components Angular

    With your Angular project set up, it's time to add videoconferencing capabilities with OpenVidu Components Angular. Install the library using npm:

    npm install openvidu-components-angular\n

  4. Import and use OpenVidu Components Angular

    To use OpenVidu Components Angular in your application, you need to:

    1. Import the OpenViduComponentsModule in your Angular application.
    2. Configure the module with the OpenViduComponentsConfig object.
    3. Add the component to your template file.
    4. Assign the OpenVidu token and LiveKit URL to the component.
    5. Customize the appearance of the components using CSS variables.
main.tsapp.component.tsstyles.scss

In your main.ts application file, import the it and configure it as follows:

// Other imports ...\n\nimport { OpenViduComponentsModule, OpenViduComponentsConfig } from 'openvidu-components-angular';\n\nconst config: OpenViduComponentsConfig = {\n    production: true,\n};\n\nbootstrapApplication(AppComponent, {\n    providers: [\n        importProvidersFrom(\n            OpenViduComponentsModule.forRoot(config)\n            // Other imports ...\n        ),\n        provideAnimations(),\n    ],\n}).catch((err) => console.error(err));\n

Use the ov-videoconference component to create a videoconference. This component requires a token to connect to the OpenVidu Room. The AppComponent class is responsible for requesting the token and passing it to the ov-videoconference component.

import { OpenViduComponentsModule, ParticipantModel, ParticipantService } from 'openvidu-components-angular';\n\n@Component({\n  selector: 'app-root',\n  template:`\n      <!-- OpenVidu Video Conference Component -->\n      <ov-videoconference\n        [token]=\"token\"\n        [livekitUrl]=\"LIVEKIT_URL\"\n        (onTokenRequested)=\"onTokenRequested($event)\"\n      >\n        <!-- Custom Layout for Video Streams -->\n        <div *ovLayout>\n          <div class=\"container\">\n            <!-- Local Participant's Tracks -->\n            @for (track of localParticipant.tracks; track track) {\n            <div\n              class=\"item\"\n              [ngClass]=\"{\n                hidden:\n                  track.isAudioTrack && !track.participant.onlyHasAudioTracks\n              }\"\n            >\n              <ov-stream [track]=\"track\"></ov-stream>\n            </div>\n            }\n\n            <!-- Remote Participants' Tracks -->\n            @for (track of remoteParticipants | tracks; track track) {\n            <div\n              class=\"item\"\n              [ngClass]=\"{\n                hidden:\n                  track.isAudioTrack && !track.participant.onlyHasAudioTracks\n              }\"\n            >\n              <ov-stream [track]=\"track\"></ov-stream>\n            </div>\n            }\n          </div>\n        </div>\n      </ov-videoconference>\n  `,\n  styles: `\n    /* css styles */\n  `,\n  standalone: true,\n    imports: [OpenViduComponentsModule, NgClass],\n})\nexport class AppComponent implements OnInit, OnDestroy {\n  // For local development, leave these variables empty\n  // For production, configure them with correct URLs depending on your deployment\n\n  APPLICATION_SERVER_URL = '';  // (1)!\n  LIVEKIT_URL = ''; // (2)!\n\n  // The name of the room to join.\n  roomName = 'openvidu-custom-layout';  // (3)!\n\n  // The token used to join the room.\n  token!: string; // (4)!\n\n  // Participant-related properties\n  localParticipant!: ParticipantModel; // (5)!\n  remoteParticipants!: ParticipantModel[]; // (6)!\n  localParticipantSubs!: Subscription; // (7)!\n  remoteParticipantsSubs!: Subscription; // (8)!\n\n  constructor(private httpClient: HttpClient,   private participantService: ParticipantService) {\n    this.configureUrls();\n  }\n\n  private configureUrls() {\n    // If APPLICATION_SERVER_URL is not configured, use default value from local development\n    if (!this.APPLICATION_SERVER_URL) {\n      if (window.location.hostname === 'localhost') {\n        this.APPLICATION_SERVER_URL = 'http://localhost:6080/';\n      } else {\n        this.APPLICATION_SERVER_URL =\n          'https://' + window.location.hostname + ':6443/';\n      }\n    }\n\n    // If LIVEKIT_URL is not configured, use default value from local development\n    if (!this.LIVEKIT_URL) {\n      if (window.location.hostname === 'localhost') {\n        this.LIVEKIT_URL = 'ws://localhost:7880/';\n      } else {\n        this.LIVEKIT_URL = 'wss://' + window.location.hostname + ':7443/';\n      }\n    }\n  }\n\n  ngOnInit() {\n    // Subscribe to participants' updates\n    this.subscribeToParticipants();\n  }\n\n  ngOnDestroy() {\n    // Unsubscribe from participant updates to prevent memory leaks\n    this.localParticipantSubs?.unsubscribe();\n    this.remoteParticipantsSubs?.unsubscribe();\n  }\n\n  // Requests a token to join the room with the given participant name.\n  async onTokenRequested(participantName: string) { // (9)!\n    const { token } = await this.getToken(this.roomName, participantName);\n    this.token = token;\n  }\n\n  // Subscribe to updates for local and remote participants\n  private subscribeToParticipants() { // (10)!\n    this.localParticipantSubs = this.participantService.localParticipant$.subscribe((p) => {\n      if (p) this.localParticipant = p;\n    });\n\n    this.remoteParticipantsSubs = this.participantService.remoteParticipants$.subscribe((participants) => {\n      this.remoteParticipants = participants;\n    });\n  }\n\n  // Retrieves a token to join the room with the given name and participant name.\n  getToken(roomName: string, participantName: string): Promise<any> { // (11)!\n    // Requesting token to the server application\n  }\n}\n
  1. APPLICATION_SERVER_URL: URL to communicate the client application with the server application to request OpenVidu tokens.
  2. LIVEKIT_URL: URL to communicate the client application with the LiveKit server.
  3. roomName: OpenVidu Room identifier. This is the room where the VideoconferenceComponent will connect.
  4. token: OpenVidu Token used to connect to the OpenVidu Room.
  5. localParticipant: Local participant model.
  6. remoteParticipants: Remote participants model.
  7. localParticipantSubs: Subscription to the local participant updates.
  8. remoteParticipantsSubs: Subscription to the remote participants updates.
  9. onTokenRequested method that fires when the VideoconferenceComponent requests a token to connect to the OpenVidu Room.
  10. subscribeToParticipants method that subscribes to updates for local and remote participants.
  11. getToken method that requests a token to the server application.

The app.component.ts file declares the following properties and methods:

Configure the URLs

For local development, leave APPLICATION_SERVER_URL and LIVEKIT_URL variables empty. The function configureUrls() will automatically configure them with default values. However, for production, you should configure these variables with the correct URLs depending on your deployment.

The OpenVidu Components Angular library provides a set of CSS variables that you can use to customize the appearance of the components. You can define these variables in your application's global styles file (e.g. styles.scss).

:root {\n    --ov-primary-color: #303030; /* Primary interface color */\n    --ov-secondary-color: #3e3f3f; /* Secondary interface color */\n    --ov-tertiary-color: #598eff; /* Tertiary accent color for elements */\n    --ov-warn-color: #eb5144; /* Warning color for alerts and notifications */\n    --ov-light-color: #e6e6e6; /* Light color for elements */\n\n    --ov-accent-color: #ffae35; /* Accent color for standout UI elements */\n\n    --ov-logo-background-color: #3a3d3d; /* Background color for the logo area */\n    --ov-text-color: #ffffff; /* Default text color */\n\n    --ov-panel-text-color: #1d1d1d; /* Text color for panel elements */\n    --ov-panel-background: #ffffff; /* Background color for panels */\n\n    --ov-buttons-radius: 50%; /* Border-radius for circular buttons */\n    --ov-leave-button-radius: 10px; /* Border-radius for the leave button */\n    --ov-video-radius: 5px; /* Border-radius for video elements */\n    --ov-panel-radius: 5px; /* Border-radius for panel elements */\n}\n
"},{"location":"docs/tutorials/angular-components/openvidu-custom-layout/#adding-custom-buttons-to-the-toolbar","title":"Adding custom buttons to the toolbar","text":"

OpenVidu Components Angular provides a directive called *ovLayout that allows you to customize the default layout of the videoconference. In this tutorial, we are creating a very basic layout just for demonstration purposes.

@Component({\n    selector: 'app-root',\n    template: `\n        <!-- OpenVidu Video Conference Component -->\n        <ov-videoconference\n            [token]=\"token\"\n            [livekitUrl]=\"LIVEKIT_URL\"\n            (onTokenRequested)=\"onTokenRequested($event)\"\n        >\n            <!-- Custom Layout for Video Streams -->\n            <div *ovLayout>\n                <div class=\"container\">\n                    <!-- Local Participant's Tracks -->\n                    @for (track of localParticipant.tracks; track track) {\n                    <div\n                        class=\"item\"\n                        [ngClass]=\"{\n                            hidden:\n                                track.isAudioTrack && !track.participant.onlyHasAudioTracks\n                        }\"\n                    >\n                        <ov-stream [track]=\"track\"></ov-stream>\n                    </div>\n                    }\n\n                    <!-- Remote Participants' Tracks -->\n                    @for (track of remoteParticipants | tracks; track track) {\n                    <div\n                        class=\"item\"\n                        [ngClass]=\"{\n                            hidden:\n                                track.isAudioTrack && !track.participant.onlyHasAudioTracks\n                        }\"\n                    >\n                        <ov-stream [track]=\"track\"></ov-stream>\n                    </div>\n                    }\n                </div>\n            </div>\n        </ov-videoconference>\n    `,\n    styles: [''],\n    standalone: true,\n    imports: [OpenViduComponentsModule, MatIconButton, MatIcon],\n})\nexport class AppComponent implements OnInit, OnDestroy {\n    // ...\n}\n

In this code snippet, the *ovLayout directive is used to customize the layout of the videoconference. The layout is divided into two sections: one for the local participant's tracks and another for the remote participants' tracks.

The repeater directive @for is used to iterate over the tracks of the local participant and the remote participants and display them in the layout using the ov-stream component.

"},{"location":"docs/tutorials/angular-components/openvidu-custom-panels/","title":"openvidu-custom-panels","text":"

Source code

The openvidu-custom-panels tutorial demonstrates how to replace the default panels with a custom ones, providing a more tailored user experience.

Customizing the videoconference panels is made simple with the PanelDirective, which offers a straightforward way to replace and adapt the PanelComponent to your needs.

OpenVidu Components - Custom Panels"},{"location":"docs/tutorials/angular-components/openvidu-custom-panels/#running-this-tutorial","title":"Running this tutorial","text":""},{"location":"docs/tutorials/angular-components/openvidu-custom-panels/#1-run-openvidu-server","title":"1. Run OpenVidu Server","text":"Run OpenVidu locallyDeploy OpenVidu

  1. Download OpenVidu

    git clone https://github.com/OpenVidu/openvidu-local-deployment\n

  2. Configure the local deployment

    Windows macOS Linux 
    cd openvidu-local-deployment/community\n.\\configure_lan_private_ip_windows.bat\n
    cd openvidu-local-deployment/community\n./configure_lan_private_ip_macos.sh\n
    cd openvidu-local-deployment/community\n./configure_lan_private_ip_linux.sh\n

  3. Run OpenVidu

    docker compose up\n

To use a production-ready OpenVidu deployment, visit the official deployment guide.

"},{"location":"docs/tutorials/angular-components/openvidu-custom-panels/#2-download-the-tutorial-code","title":"2. Download the tutorial code","text":"
git clone https://github.com/OpenVidu/openvidu-livekit-tutorials.git\ngit clone https://github.com/OpenVidu/openvidu-tutorials.git\n
"},{"location":"docs/tutorials/angular-components/openvidu-custom-panels/#3-run-the-server-application","title":"3. Run the server application","text":"Node Go Ruby Java Python Rust PHP .NET

To run this server application, you need Node installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/node\n
  2. Install dependencies 
    npm install\n
  3. Run the application 
    npm start\n

To run this server application, you need Go installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/go\n
  2. Run the application 
    go run main.go\n

To run this server application, you need Ruby installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/ruby\n
  2. Install dependencies 
    bundle install\n
  3. Run the application 
    ruby app.rb\n

To run this server application, you need Java and Maven installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/java\n
  2. Run the application 
    mvn spring-boot:run\n

To run this server application, you need Python 3 installed on your device.

  1. Navigate into the server directory

    cd openvidu-livekit-tutorials/application-server/python\n

  2. Create a python virtual environment

    python -m venv venv\n

  3. Activate the virtual environment

    Windows macOS Linux 
    .\\venv\\Scripts\\activate\n
    . ./venv/bin/activate\n
    . ./venv/bin/activate\n

  4. Install dependencies

    pip install -r requirements.txt\n

  5. Run the application

    python app.py\n

To run this server application, you need Rust installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/rust\n
  2. Run the application 
    cargo run\n

To run this server application, you need PHP and Composer installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/php\n
  2. Install dependencies 
    composer install\n
  3. Run the application 
    composer start\n

To run this server application, you need .NET installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/dotnet\n
  2. Run the application 
    dotnet run\n

Warning

This .NET server application needs the LIVEKIT_API_SECRET env variable to be at least 32 characters long. Make sure to update it here and in your OpenVidu Server.

"},{"location":"docs/tutorials/angular-components/openvidu-custom-panels/#4-run-the-openvidu-custom-panels-tutorial","title":"4. Run the openvidu-custom-panels tutorial","text":"

To run the client application tutorial, you need Node installed on your development computer.

  1. Navigate into the application client directory:

      cd openvidu-tutorials/openvidu-components/openvidu-custom-panels\n

  2. Install the required dependencies:

      npm install\n

  3. Serve the application:

      npm start\n

Once the server is up and running, you can test the application by visiting http://localhost:5080.

Accessing your application client from other devices in your local network

One advantage of running OpenVidu locally is that you can test your application client with other devices in your local network very easily without worrying about SSL certificates.

Access your application client through https://xxx-yyy-zzz-www.openvidu-local.dev:5443, where xxx-yyy-zzz-www part of the domain is your LAN private IP address with dashes (-) instead of dots (.). For more information, see section Accessing your app from other devices in your network.

"},{"location":"docs/tutorials/angular-components/openvidu-custom-panels/#understanding-the-code","title":"Understanding the code","text":"

This tutorial is an Angular project generated with Angular CLI tool. Therefore, you will see many configuration files and other components that are not the primary focus of this tutorial. We will concentrate on the following files in the src directory:

To use OpenVidu Components Angular in your application, you need to install the library and import the OpenViduComponentsModule in your Angular module. Let's see how to do this:

  1. Create an Angular Project (version 17 or higher)

    To begin, you will need to create a new Angular project if you haven't already. Ensure you have Node.js and the Angular CLI installed. Then, run the following command to create a new Angular project:

    ng new your-project-name\n

    Replace your-project-name with the desired name for your project.

  2. Add Angular Material to your project

    OpenVidu Components Angular needs Angular Material, which provides a range of UI components. To add Angular Material to your project, navigate to your project directory and run:

    ng add @angular/material\n

  3. Install OpenVidu Components Angular

    With your Angular project set up, it's time to add videoconferencing capabilities with OpenVidu Components Angular. Install the library using npm:

    npm install openvidu-components-angular\n

  4. Import and use OpenVidu Components Angular

    To use OpenVidu Components Angular in your application, you need to:

    1. Import the OpenViduComponentsModule in your Angular application.
    2. Configure the module with the OpenViduComponentsConfig object.
    3. Add the component to your template file.
    4. Assign the OpenVidu token and LiveKit URL to the component.
    5. Customize the appearance of the components using CSS variables.
main.tsapp.component.tsstyles.scss

In your main.ts application file, import the it and configure it as follows:

// Other imports ...\n\nimport { OpenViduComponentsModule, OpenViduComponentsConfig } from 'openvidu-components-angular';\n\nconst config: OpenViduComponentsConfig = {\n    production: true,\n};\n\nbootstrapApplication(AppComponent, {\n    providers: [\n        importProvidersFrom(\n            OpenViduComponentsModule.forRoot(config)\n            // Other imports ...\n        ),\n        provideAnimations(),\n    ],\n}).catch((err) => console.error(err));\n

Use the ov-videoconference component to create a videoconference. This component requires a token to connect to the OpenVidu Room. The AppComponent class is responsible for requesting the token and passing it to the ov-videoconference component.

import { OpenViduComponentsModule } from 'openvidu-components-angular';\n\n@Component({\n  selector: 'app-root',\n  template:`\n      <!-- OpenVidu Video Conference Component -->\n      <ov-videoconference\n        [token]=\"token\"\n        [livekitUrl]=\"LIVEKIT_URL\"\n        (onTokenRequested)=\"onTokenRequested($event)\"\n      >\n        <!-- Custom Panels -->\n        <ov-panel *ovPanel>\n          <!-- Custom Chat Panel -->\n          <div *ovChatPanel id=\"my-chat-panel\">This is my custom chat panel</div>\n\n          <!-- Custom Participants Panel -->\n          <div *ovParticipantsPanel id=\"my-participants-panel\">\n            This is my custom participants panel\n          </div>\n\n          <!-- Custom Activities Panel -->\n          <div *ovActivitiesPanel id=\"my-activities-panel\">\n            This is my custom activities panel\n          </div>\n        </ov-panel>\n      </ov-videoconference>\n  `,\n  styles: [''],\n  standalone: true,\n  imports: [OpenViduComponentsModule],\n})\nexport class AppComponent {\n  // For local development, leave these variables empty\n  // For production, configure them with correct URLs depending on your deployment\n\n  APPLICATION_SERVER_URL = '';  // (1)!\n  LIVEKIT_URL = ''; // (2)!\n\n  // The name of the room to join.\n  roomName = 'openvidu-custom-panels';  // (3)!\n\n  // The token used to join the room.\n  token!: string; // (4)!\n\n  constructor(private httpClient: HttpClient) {\n    this.configureUrls();\n  }\n\n  private configureUrls() {\n    // If APPLICATION_SERVER_URL is not configured, use default value from local development\n    if (!this.APPLICATION_SERVER_URL) {\n      if (window.location.hostname === 'localhost') {\n        this.APPLICATION_SERVER_URL = 'http://localhost:6080/';\n      } else {\n        this.APPLICATION_SERVER_URL =\n          'https://' + window.location.hostname + ':6443/';\n      }\n    }\n\n    // If LIVEKIT_URL is not configured, use default value from local development\n    if (!this.LIVEKIT_URL) {\n      if (window.location.hostname === 'localhost') {\n        this.LIVEKIT_URL = 'ws://localhost:7880/';\n      } else {\n        this.LIVEKIT_URL = 'wss://' + window.location.hostname + ':7443/';\n      }\n    }\n  }\n\n  // Requests a token to join the room with the given participant name.\n  async onTokenRequested(participantName: string) { // (5)!\n    const { token } = await this.getToken(this.roomName, participantName);\n    this.token = token;\n  }\n\n  // Retrieves a token to join the room with the given name and participant name.\n  getToken(roomName: string, participantName: string): Promise<any> { // (6)!\n    // Requesting token to the server application\n  }\n}\n
  1. APPLICATION_SERVER_URL: URL to communicate the client application with the server application to request OpenVidu tokens.
  2. LIVEKIT_URL: URL to communicate the client application with the LiveKit server.
  3. roomName: OpenVidu Room identifier. This is the room where the VideoconferenceComponent will connect.
  4. token: OpenVidu Token used to connect to the OpenVidu Room.
  5. onTokenRequested method that fires when the VideoconferenceComponent requests a token to connect to the OpenVidu Room.
  6. getToken method that requests a token to the server application.

The app.component.ts file declares the following properties and methods:

Configure the URLs

For local development, leave APPLICATION_SERVER_URL and LIVEKIT_URL variables empty. The function configureUrls() will automatically configure them with default values. However, for production, you should configure these variables with the correct URLs depending on your deployment.

The OpenVidu Components Angular library provides a set of CSS variables that you can use to customize the appearance of the components. You can define these variables in your application's global styles file (e.g. styles.scss).

:root {\n    --ov-primary-color: #303030; /* Primary interface color */\n    --ov-secondary-color: #3e3f3f; /* Secondary interface color */\n    --ov-tertiary-color: #598eff; /* Tertiary accent color for elements */\n    --ov-warn-color: #eb5144; /* Warning color for alerts and notifications */\n    --ov-light-color: #e6e6e6; /* Light color for elements */\n\n    --ov-accent-color: #ffae35; /* Accent color for standout UI elements */\n\n    --ov-logo-background-color: #3a3d3d; /* Background color for the logo area */\n    --ov-text-color: #ffffff; /* Default text color */\n\n    --ov-panel-text-color: #1d1d1d; /* Text color for panel elements */\n    --ov-panel-background: #ffffff; /* Background color for panels */\n\n    --ov-buttons-radius: 50%; /* Border-radius for circular buttons */\n    --ov-leave-button-radius: 10px; /* Border-radius for the leave button */\n    --ov-video-radius: 5px; /* Border-radius for video elements */\n    --ov-panel-radius: 5px; /* Border-radius for panel elements */\n}\n
"},{"location":"docs/tutorials/angular-components/openvidu-custom-panels/#customizing-the-panels","title":"Customizing the panels","text":"

The *ovPanel directive is used to replace the default videoconference panels with a custom ones. In the app.component.ts file, you can see the following code snippet:

@Component({\n    selector: 'app-root',\n    template: `\n        <!-- OpenVidu Video Conference Component -->\n        <ov-videoconference\n            [token]=\"token\"\n            [livekitUrl]=\"LIVEKIT_URL\"\n            (onTokenRequested)=\"onTokenRequested($event)\"\n        >\n            <!-- Custom Panels -->\n            <ov-panel *ovPanel>\n                <!-- Custom Chat Panel -->\n                <div *ovChatPanel id=\"my-chat-panel\">This is my custom chat panel</div>\n\n                <!-- Custom Participants Panel -->\n                <div *ovParticipantsPanel id=\"my-participants-panel\">\n                    This is my custom participants panel\n                </div>\n\n                <!-- Custom Activities Panel -->\n                <div *ovActivitiesPanel id=\"my-activities-panel\">\n                    This is my custom activities panel\n                </div>\n            </ov-panel>\n        </ov-videoconference>\n    `,\n    styles: [''],\n    standalone: true,\n    imports: [OpenViduComponentsModule],\n})\nexport class AppComponent {\n    // ...\n}\n

In this code snippet, the *ovPanel directive is used to replace the default videoconference panels with custom ones. The *ovChatPanel, *ovParticipantsPanel, and *ovActivitiesPanel directives are used to replace the default chat, participants, and activities panels with custom ones.

"},{"location":"docs/tutorials/angular-components/openvidu-custom-participant-panel-item-element/","title":"openvidu-custom-participant-panel-item-element","text":"

Source code

The openvidu-custom-participant-panel-item-element tutorial demonstrates how to replace the default participant item element inside of the participants panel with a custom one, providing a more tailored user experience.

Replacing the default participant item element is made simple with the ParticipantsPanelItemElementsDirective, which offers a straightforward way to replace and adapt the ParticipantsPanelItemComponent to your needs.

OpenVidu Components - Custom Participants Panel Item Element"},{"location":"docs/tutorials/angular-components/openvidu-custom-participant-panel-item-element/#running-this-tutorial","title":"Running this tutorial","text":""},{"location":"docs/tutorials/angular-components/openvidu-custom-participant-panel-item-element/#1-run-openvidu-server","title":"1. Run OpenVidu Server","text":"Run OpenVidu locallyDeploy OpenVidu

  1. Download OpenVidu

    git clone https://github.com/OpenVidu/openvidu-local-deployment\n

  2. Configure the local deployment

    Windows macOS Linux 
    cd openvidu-local-deployment/community\n.\\configure_lan_private_ip_windows.bat\n
    cd openvidu-local-deployment/community\n./configure_lan_private_ip_macos.sh\n
    cd openvidu-local-deployment/community\n./configure_lan_private_ip_linux.sh\n

  3. Run OpenVidu

    docker compose up\n

To use a production-ready OpenVidu deployment, visit the official deployment guide.

"},{"location":"docs/tutorials/angular-components/openvidu-custom-participant-panel-item-element/#2-download-the-tutorial-code","title":"2. Download the tutorial code","text":"
git clone https://github.com/OpenVidu/openvidu-livekit-tutorials.git\ngit clone https://github.com/OpenVidu/openvidu-tutorials.git\n
"},{"location":"docs/tutorials/angular-components/openvidu-custom-participant-panel-item-element/#3-run-the-server-application","title":"3. Run the server application","text":"Node Go Ruby Java Python Rust PHP .NET

To run this server application, you need Node installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/node\n
  2. Install dependencies 
    npm install\n
  3. Run the application 
    npm start\n

To run this server application, you need Go installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/go\n
  2. Run the application 
    go run main.go\n

To run this server application, you need Ruby installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/ruby\n
  2. Install dependencies 
    bundle install\n
  3. Run the application 
    ruby app.rb\n

To run this server application, you need Java and Maven installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/java\n
  2. Run the application 
    mvn spring-boot:run\n

To run this server application, you need Python 3 installed on your device.

  1. Navigate into the server directory

    cd openvidu-livekit-tutorials/application-server/python\n

  2. Create a python virtual environment

    python -m venv venv\n

  3. Activate the virtual environment

    Windows macOS Linux 
    .\\venv\\Scripts\\activate\n
    . ./venv/bin/activate\n
    . ./venv/bin/activate\n

  4. Install dependencies

    pip install -r requirements.txt\n

  5. Run the application

    python app.py\n

To run this server application, you need Rust installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/rust\n
  2. Run the application 
    cargo run\n

To run this server application, you need PHP and Composer installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/php\n
  2. Install dependencies 
    composer install\n
  3. Run the application 
    composer start\n

To run this server application, you need .NET installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/dotnet\n
  2. Run the application 
    dotnet run\n

Warning

This .NET server application needs the LIVEKIT_API_SECRET env variable to be at least 32 characters long. Make sure to update it here and in your OpenVidu Server.

"},{"location":"docs/tutorials/angular-components/openvidu-custom-participant-panel-item-element/#4-run-the-openvidu-custom-participant-panel-item-element-tutorial","title":"4. Run the openvidu-custom-participant-panel-item-element tutorial","text":"

To run the client application tutorial, you need Node installed on your development computer.

  1. Navigate into the application client directory:

      cd openvidu-tutorials/openvidu-components/openvidu-custom-participant-panel-item-element\n

  2. Install the required dependencies:

      npm install\n

  3. Serve the application:

      npm start\n

Once the server is up and running, you can test the application by visiting http://localhost:5080.

Accessing your application client from other devices in your local network

One advantage of running OpenVidu locally is that you can test your application client with other devices in your local network very easily without worrying about SSL certificates.

Access your application client through https://xxx-yyy-zzz-www.openvidu-local.dev:5443, where xxx-yyy-zzz-www part of the domain is your LAN private IP address with dashes (-) instead of dots (.). For more information, see section Accessing your app from other devices in your network.

"},{"location":"docs/tutorials/angular-components/openvidu-custom-participant-panel-item-element/#understanding-the-code","title":"Understanding the code","text":"

This tutorial is an Angular project generated with Angular CLI tool. Therefore, you will see many configuration files and other components that are not the primary focus of this tutorial. We will concentrate on the following files in the src directory:

To use OpenVidu Components Angular in your application, you need to install the library and import the OpenViduComponentsModule in your Angular module. Let's see how to do this:

  1. Create an Angular Project (version 17 or higher)

    To begin, you will need to create a new Angular project if you haven't already. Ensure you have Node.js and the Angular CLI installed. Then, run the following command to create a new Angular project:

    ng new your-project-name\n

    Replace your-project-name with the desired name for your project.

  2. Add Angular Material to your project

    OpenVidu Components Angular needs Angular Material, which provides a range of UI components. To add Angular Material to your project, navigate to your project directory and run:

    ng add @angular/material\n

  3. Install OpenVidu Components Angular

    With your Angular project set up, it's time to add videoconferencing capabilities with OpenVidu Components Angular. Install the library using npm:

    npm install openvidu-components-angular\n

  4. Import and use OpenVidu Components Angular

    To use OpenVidu Components Angular in your application, you need to:

    1. Import the OpenViduComponentsModule in your Angular application.
    2. Configure the module with the OpenViduComponentsConfig object.
    3. Add the component to your template file.
    4. Assign the OpenVidu token and LiveKit URL to the component.
    5. Customize the appearance of the components using CSS variables.
main.tsapp.component.tsstyles.scss

In your main.ts application file, import the it and configure it as follows:

// Other imports ...\n\nimport { OpenViduComponentsModule, OpenViduComponentsConfig } from 'openvidu-components-angular';\n\nconst config: OpenViduComponentsConfig = {\n    production: true,\n};\n\nbootstrapApplication(AppComponent, {\n    providers: [\n        importProvidersFrom(\n            OpenViduComponentsModule.forRoot(config)\n            // Other imports ...\n        ),\n        provideAnimations(),\n    ],\n}).catch((err) => console.error(err));\n

Use the ov-videoconference component to create a videoconference. This component requires a token to connect to the OpenVidu Room. The AppComponent class is responsible for requesting the token and passing it to the ov-videoconference component.

import {\n  ParticipantModel,\n    ParticipantService,\n  OpenViduComponentsModule\n} from 'openvidu-components-angular';\n\n@Component({\n  selector: 'app-root',\n  template:`\n    <!-- OpenVidu Video Conference Component -->\n    <ov-videoconference\n      [token]=\"token\"\n      [livekitUrl]=\"LIVEKIT_URL\"\n      (onTokenRequested)=\"onTokenRequested($event)\"\n    >\n      <!-- Participant Panel Item Elements -->\n      <div *ovParticipantPanelItemElements=\"let participant\">\n        <!-- Leave Button for Local Participant -->\n        @if (participant.isLocal) {\n        <button (click)=\"leaveSession()\">Leave</button>\n        }\n      </div>\n    </ov-videoconference>\n  `,\n  styles: [''],\n  standalone: true,\n  imports: [OpenViduComponentsModule],\n})\nexport class AppComponent {\n  // For local development, leave these variables empty\n  // For production, configure them with correct URLs depending on your deployment\n\n  APPLICATION_SERVER_URL = '';  // (1)!\n  LIVEKIT_URL = ''; // (2)!\n\n  // The name of the room to join.\n  roomName = 'openvidu-custom-participant-panel-item-element';  // (3)!\n\n  // The token used to join the room.\n  token!: string; // (4)!\n\n  constructor(private httpClient: HttpClient) {\n    this.configureUrls();\n  }\n\n  private configureUrls() {\n    // If APPLICATION_SERVER_URL is not configured, use default value from local development\n    if (!this.APPLICATION_SERVER_URL) {\n      if (window.location.hostname === 'localhost') {\n        this.APPLICATION_SERVER_URL = 'http://localhost:6080/';\n      } else {\n        this.APPLICATION_SERVER_URL =\n          'https://' + window.location.hostname + ':6443/';\n      }\n    }\n\n    // If LIVEKIT_URL is not configured, use default value from local development\n    if (!this.LIVEKIT_URL) {\n      if (window.location.hostname === 'localhost') {\n        this.LIVEKIT_URL = 'ws://localhost:7880/';\n      } else {\n        this.LIVEKIT_URL = 'wss://' + window.location.hostname + ':7443/';\n      }\n    }\n  }\n\n  // Requests a token to join the room with the given participant name.\n  async onTokenRequested(participantName: string) { // (5)!\n    const { token } = await this.getToken(this.roomName, participantName);\n    this.token = token;\n  }\n\n  // Function to leave the session\n  async leaveSession() { // (6)!\n    await this.openviduService.disconnectRoom();\n  }\n\n  // Retrieves a token to join the room with the given name and participant name.\n  getToken(roomName: string, participantName: string): Promise<any> { // (7)!\n    // Requesting token to the server application\n  }\n}\n
  1. APPLICATION_SERVER_URL: URL to communicate the client application with the server application to request OpenVidu tokens.
  2. LIVEKIT_URL: URL to communicate the client application with the LiveKit server.
  3. roomName: OpenVidu Room identifier. This is the room where the VideoconferenceComponent will connect.
  4. token: OpenVidu Token used to connect to the OpenVidu Room.
  5. onTokenRequested method that fires when the VideoconferenceComponent requests a token to connect to the OpenVidu Room.
  6. leaveSession method that disconnects the client from the OpenVidu Room.
  7. getToken method that requests a token to the server application.

The app.component.ts file declares the following properties and methods:

Configure the URLs

For local development, leave APPLICATION_SERVER_URL and LIVEKIT_URL variables empty. The function configureUrls() will automatically configure them with default values. However, for production, you should configure these variables with the correct URLs depending on your deployment.

The OpenVidu Components Angular library provides a set of CSS variables that you can use to customize the appearance of the components. You can define these variables in your application's global styles file (e.g. styles.scss).

:root {\n    --ov-primary-color: #303030; /* Primary interface color */\n    --ov-secondary-color: #3e3f3f; /* Secondary interface color */\n    --ov-tertiary-color: #598eff; /* Tertiary accent color for elements */\n    --ov-warn-color: #eb5144; /* Warning color for alerts and notifications */\n    --ov-light-color: #e6e6e6; /* Light color for elements */\n\n    --ov-accent-color: #ffae35; /* Accent color for standout UI elements */\n\n    --ov-logo-background-color: #3a3d3d; /* Background color for the logo area */\n    --ov-text-color: #ffffff; /* Default text color */\n\n    --ov-panel-text-color: #1d1d1d; /* Text color for panel elements */\n    --ov-panel-background: #ffffff; /* Background color for panels */\n\n    --ov-buttons-radius: 50%; /* Border-radius for circular buttons */\n    --ov-leave-button-radius: 10px; /* Border-radius for the leave button */\n    --ov-video-radius: 5px; /* Border-radius for video elements */\n    --ov-panel-radius: 5px; /* Border-radius for panel elements */\n}\n
"},{"location":"docs/tutorials/angular-components/openvidu-custom-participant-panel-item-element/#customizing-participant-item-element","title":"Customizing participant item element","text":"

This tutorial uses the *ovParticipantPanelItem directive with the aim of replacing the default participant item, inside of the participants panel, with a custom one.

In the app.component.ts file, you can see the following code snippet:

@Component({\n    selector: 'app-root',\n    template: `\n        <!-- OpenVidu Video Conference Component -->\n        <ov-videoconference\n            [token]=\"token\"\n            [livekitUrl]=\"LIVEKIT_URL\"\n            (onTokenRequested)=\"onTokenRequested($event)\"\n        >\n            <!-- Participant Panel Item Elements -->\n            <div *ovParticipantPanelItemElements=\"let participant\">\n                <!-- Leave Button for Local Participant -->\n                @if (participant.isLocal) {\n                <button (click)=\"leaveSession()\">Leave</button>\n                }\n            </div>\n        </ov-videoconference>\n    `,\n    styles: [''],\n    standalone: true,\n    imports: [OpenViduComponentsModule],\n})\nexport class AppComponent {\n    // ...\n}\n

In this code snippet, the *ovParticipantPanelItemElements directive is used to replace the default participant item element, inside of the participants panel, with a custom one.

The *ovParticipantPanelItemElements directive provides a way to access the participant object and customize the participant item component to your needs.

"},{"location":"docs/tutorials/angular-components/openvidu-custom-participant-panel-item/","title":"openvidu-custom-participant-panel-item","text":"

Source code

The openvidu-custom-participant-panel-item tutorial demonstrates how to replace the default participant item inside of the participants panel with a custom one, providing a more tailored user experience.

Replacing the default participant item is made simple with the ParticipantsPanelItemDirective, which offers a straightforward way to replace and adapt the ParticipantsPanelItemComponent to your needs.

OpenVidu Components - Custom Participants Panel Item"},{"location":"docs/tutorials/angular-components/openvidu-custom-participant-panel-item/#running-this-tutorial","title":"Running this tutorial","text":""},{"location":"docs/tutorials/angular-components/openvidu-custom-participant-panel-item/#1-run-openvidu-server","title":"1. Run OpenVidu Server","text":"Run OpenVidu locallyDeploy OpenVidu

  1. Download OpenVidu

    git clone https://github.com/OpenVidu/openvidu-local-deployment\n

  2. Configure the local deployment

    Windows macOS Linux 
    cd openvidu-local-deployment/community\n.\\configure_lan_private_ip_windows.bat\n
    cd openvidu-local-deployment/community\n./configure_lan_private_ip_macos.sh\n
    cd openvidu-local-deployment/community\n./configure_lan_private_ip_linux.sh\n

  3. Run OpenVidu

    docker compose up\n

To use a production-ready OpenVidu deployment, visit the official deployment guide.

"},{"location":"docs/tutorials/angular-components/openvidu-custom-participant-panel-item/#2-download-the-tutorial-code","title":"2. Download the tutorial code","text":"
git clone https://github.com/OpenVidu/openvidu-livekit-tutorials.git\ngit clone https://github.com/OpenVidu/openvidu-tutorials.git\n
"},{"location":"docs/tutorials/angular-components/openvidu-custom-participant-panel-item/#3-run-the-server-application","title":"3. Run the server application","text":"Node Go Ruby Java Python Rust PHP .NET

To run this server application, you need Node installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/node\n
  2. Install dependencies 
    npm install\n
  3. Run the application 
    npm start\n

To run this server application, you need Go installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/go\n
  2. Run the application 
    go run main.go\n

To run this server application, you need Ruby installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/ruby\n
  2. Install dependencies 
    bundle install\n
  3. Run the application 
    ruby app.rb\n

To run this server application, you need Java and Maven installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/java\n
  2. Run the application 
    mvn spring-boot:run\n

To run this server application, you need Python 3 installed on your device.

  1. Navigate into the server directory

    cd openvidu-livekit-tutorials/application-server/python\n

  2. Create a python virtual environment

    python -m venv venv\n

  3. Activate the virtual environment

    Windows macOS Linux 
    .\\venv\\Scripts\\activate\n
    . ./venv/bin/activate\n
    . ./venv/bin/activate\n

  4. Install dependencies

    pip install -r requirements.txt\n

  5. Run the application

    python app.py\n

To run this server application, you need Rust installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/rust\n
  2. Run the application 
    cargo run\n

To run this server application, you need PHP and Composer installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/php\n
  2. Install dependencies 
    composer install\n
  3. Run the application 
    composer start\n

To run this server application, you need .NET installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/dotnet\n
  2. Run the application 
    dotnet run\n

Warning

This .NET server application needs the LIVEKIT_API_SECRET env variable to be at least 32 characters long. Make sure to update it here and in your OpenVidu Server.

"},{"location":"docs/tutorials/angular-components/openvidu-custom-participant-panel-item/#4-run-the-openvidu-custom-participant-panel-item-tutorial","title":"4. Run the openvidu-custom-participant-panel-item tutorial","text":"

To run the client application tutorial, you need Node installed on your development computer.

  1. Navigate into the application client directory:

      cd openvidu-tutorials/openvidu-components/openvidu-custom-participant-panel-item\n

  2. Install the required dependencies:

      npm install\n

  3. Serve the application:

      npm start\n

Once the server is up and running, you can test the application by visiting http://localhost:5080.

Accessing your application client from other devices in your local network

One advantage of running OpenVidu locally is that you can test your application client with other devices in your local network very easily without worrying about SSL certificates.

Access your application client through https://xxx-yyy-zzz-www.openvidu-local.dev:5443, where xxx-yyy-zzz-www part of the domain is your LAN private IP address with dashes (-) instead of dots (.). For more information, see section Accessing your app from other devices in your network.

"},{"location":"docs/tutorials/angular-components/openvidu-custom-participant-panel-item/#understanding-the-code","title":"Understanding the code","text":"

This tutorial is an Angular project generated with Angular CLI tool. Therefore, you will see many configuration files and other components that are not the primary focus of this tutorial. We will concentrate on the following files in the src directory:

To use OpenVidu Components Angular in your application, you need to install the library and import the OpenViduComponentsModule in your Angular module. Let's see how to do this:

  1. Create an Angular Project (version 17 or higher)

    To begin, you will need to create a new Angular project if you haven't already. Ensure you have Node.js and the Angular CLI installed. Then, run the following command to create a new Angular project:

    ng new your-project-name\n

    Replace your-project-name with the desired name for your project.

  2. Add Angular Material to your project

    OpenVidu Components Angular needs Angular Material, which provides a range of UI components. To add Angular Material to your project, navigate to your project directory and run:

    ng add @angular/material\n

  3. Install OpenVidu Components Angular

    With your Angular project set up, it's time to add videoconferencing capabilities with OpenVidu Components Angular. Install the library using npm:

    npm install openvidu-components-angular\n

  4. Import and use OpenVidu Components Angular

    To use OpenVidu Components Angular in your application, you need to:

    1. Import the OpenViduComponentsModule in your Angular application.
    2. Configure the module with the OpenViduComponentsConfig object.
    3. Add the component to your template file.
    4. Assign the OpenVidu token and LiveKit URL to the component.
    5. Customize the appearance of the components using CSS variables.
main.tsapp.component.tsstyles.scss

In your main.ts application file, import the it and configure it as follows:

// Other imports ...\n\nimport { OpenViduComponentsModule, OpenViduComponentsConfig } from 'openvidu-components-angular';\n\nconst config: OpenViduComponentsConfig = {\n    production: true,\n};\n\nbootstrapApplication(AppComponent, {\n    providers: [\n        importProvidersFrom(\n            OpenViduComponentsModule.forRoot(config)\n            // Other imports ...\n        ),\n        provideAnimations(),\n    ],\n}).catch((err) => console.error(err));\n

Use the ov-videoconference component to create a videoconference. This component requires a token to connect to the OpenVidu Room. The AppComponent class is responsible for requesting the token and passing it to the ov-videoconference component.

import {\n  ParticipantModel,\n    ParticipantService,\n  OpenViduComponentsModule\n} from 'openvidu-components-angular';\n\n@Component({\n  selector: 'app-root',\n  template:`\n    <!-- OpenVidu Video Conference Component -->\n    <ov-videoconference\n        [token]=\"token\"\n        [livekitUrl]=\"LIVEKIT_URL\"\n        (onTokenRequested)=\"onTokenRequested($event)\"\n    >\n        <!-- Participant Panel Items -->\n        <div *ovParticipantPanelItem=\"let participant\" style=\"display: flex\">\n            <p>{{ participant.name }}</p>\n\n            <!-- More Options Menu -->\n            <button mat-icon-button [matMenuTriggerFor]=\"menu\">\n                <mat-icon>more_vert</mat-icon>\n            </button>\n\n            <!-- Menu Content -->\n            <mat-menu #menu=\"matMenu\">\n                <button mat-menu-item>Button 1</button>\n                <button mat-menu-item>Button 2</button>\n            </mat-menu>\n        </div>\n    </ov-videoconference>\n  `,\n  styles: [''],\n  standalone: true,\n    imports: [\n    OpenViduComponentsModule,\n    MatIconButton,\n    MatMenuTrigger,\n    MatIcon,\n    MatMenu,\n    MatMenuItem,\n  ],\n})\nexport class AppComponent {\n  // For local development, leave these variables empty\n  // For production, configure them with correct URLs depending on your deployment\n\n  APPLICATION_SERVER_URL = '';  // (1)!\n  LIVEKIT_URL = ''; // (2)!\n\n  // The name of the room to join.\n  roomName = 'openvidu-custom-participant-panel-item';  // (3)!\n\n  // The token used to join the room.\n  token!: string; // (4)!\n\n  constructor(private httpClient: HttpClient) {\n    this.configureUrls();\n  }\n\n  private configureUrls() {\n    // If APPLICATION_SERVER_URL is not configured, use default value from local development\n    if (!this.APPLICATION_SERVER_URL) {\n      if (window.location.hostname === 'localhost') {\n        this.APPLICATION_SERVER_URL = 'http://localhost:6080/';\n      } else {\n        this.APPLICATION_SERVER_URL =\n          'https://' + window.location.hostname + ':6443/';\n      }\n    }\n\n    // If LIVEKIT_URL is not configured, use default value from local development\n    if (!this.LIVEKIT_URL) {\n      if (window.location.hostname === 'localhost') {\n        this.LIVEKIT_URL = 'ws://localhost:7880/';\n      } else {\n        this.LIVEKIT_URL = 'wss://' + window.location.hostname + ':7443/';\n      }\n    }\n  }\n\n  // Requests a token to join the room with the given participant name.\n  async onTokenRequested(participantName: string) { // (5)!\n    const { token } = await this.getToken(this.roomName, participantName);\n    this.token = token;\n  }\n\n  // Retrieves a token to join the room with the given name and participant name.\n  getToken(roomName: string, participantName: string): Promise<any> { // (6)!\n    // Requesting token to the server application\n  }\n}\n
  1. APPLICATION_SERVER_URL: URL to communicate the client application with the server application to request OpenVidu tokens.
  2. LIVEKIT_URL: URL to communicate the client application with the LiveKit server.
  3. roomName: OpenVidu Room identifier. This is the room where the VideoconferenceComponent will connect.
  4. token: OpenVidu Token used to connect to the OpenVidu Room.
  5. onTokenRequested method that fires when the VideoconferenceComponent requests a token to connect to the OpenVidu Room.
  6. getToken method that requests a token to the server application.

The app.component.ts file declares the following properties and methods:

Configure the URLs

For local development, leave APPLICATION_SERVER_URL and LIVEKIT_URL variables empty. The function configureUrls() will automatically configure them with default values. However, for production, you should configure these variables with the correct URLs depending on your deployment.

The OpenVidu Components Angular library provides a set of CSS variables that you can use to customize the appearance of the components. You can define these variables in your application's global styles file (e.g. styles.scss).

:root {\n    --ov-primary-color: #303030; /* Primary interface color */\n    --ov-secondary-color: #3e3f3f; /* Secondary interface color */\n    --ov-tertiary-color: #598eff; /* Tertiary accent color for elements */\n    --ov-warn-color: #eb5144; /* Warning color for alerts and notifications */\n    --ov-light-color: #e6e6e6; /* Light color for elements */\n\n    --ov-accent-color: #ffae35; /* Accent color for standout UI elements */\n\n    --ov-logo-background-color: #3a3d3d; /* Background color for the logo area */\n    --ov-text-color: #ffffff; /* Default text color */\n\n    --ov-panel-text-color: #1d1d1d; /* Text color for panel elements */\n    --ov-panel-background: #ffffff; /* Background color for panels */\n\n    --ov-buttons-radius: 50%; /* Border-radius for circular buttons */\n    --ov-leave-button-radius: 10px; /* Border-radius for the leave button */\n    --ov-video-radius: 5px; /* Border-radius for video elements */\n    --ov-panel-radius: 5px; /* Border-radius for panel elements */\n}\n
"},{"location":"docs/tutorials/angular-components/openvidu-custom-participant-panel-item/#customizing-participant-item","title":"Customizing participant item","text":"

This tutorial uses the *ovParticipantPanelItem directive with the aim of replacing the default participant item, inside of the participants panel, with a custom one.

In the app.component.ts file, you can see the following code snippet:

@Component({\n    selector: 'app-root',\n    template: `\n        <!-- OpenVidu Video Conference Component -->\n        <ov-videoconference\n            [token]=\"token\"\n            [livekitUrl]=\"LIVEKIT_URL\"\n            (onTokenRequested)=\"onTokenRequested($event)\"\n        >\n            <!-- Participant Panel Items -->\n            <div *ovParticipantPanelItem=\"let participant\" style=\"display: flex\">\n                <p>{{ participant.name }}</p>\n\n                <!-- More Options Menu -->\n                <button mat-icon-button [matMenuTriggerFor]=\"menu\">\n                    <mat-icon>more_vert</mat-icon>\n                </button>\n\n                <!-- Menu Content -->\n                <mat-menu #menu=\"matMenu\">\n                    <button mat-menu-item>Button 1</button>\n                    <button mat-menu-item>Button 2</button>\n                </mat-menu>\n            </div>\n        </ov-videoconference>\n    `,\n    styles: [''],\n    standalone: true,\n    imports: [\n        OpenViduComponentsModule,\n        MatIconButton,\n        MatMenuTrigger,\n        MatIcon,\n        MatMenu,\n        MatMenuItem,\n    ],\n})\nexport class AppComponent {\n    // ...\n}\n

In this code snippet, the *ovParticipantPanelItem directive is used to replace the default participant item inside of the participants panel with a custom one. The *ovParticipantPanelItem directive provides a way to access the participant object and customize the participant item component to your needs.

"},{"location":"docs/tutorials/angular-components/openvidu-custom-participants-panel/","title":"openvidu-custom-participants-panel","text":"

Source code

The openvidu-custom-participants-panel tutorial demonstrates how to customize the participants panel, providing a more tailored user experience.

Replacing the default participants panel is made simple with the ParticipantsPanelDirective, which offers a straightforward way to replace and adapt the ParticipantsPanelComponent to your needs.

OpenVidu Components - Custom Participants Panel"},{"location":"docs/tutorials/angular-components/openvidu-custom-participants-panel/#running-this-tutorial","title":"Running this tutorial","text":""},{"location":"docs/tutorials/angular-components/openvidu-custom-participants-panel/#1-run-openvidu-server","title":"1. Run OpenVidu Server","text":"Run OpenVidu locallyDeploy OpenVidu

  1. Download OpenVidu

    git clone https://github.com/OpenVidu/openvidu-local-deployment\n

  2. Configure the local deployment

    Windows macOS Linux 
    cd openvidu-local-deployment/community\n.\\configure_lan_private_ip_windows.bat\n
    cd openvidu-local-deployment/community\n./configure_lan_private_ip_macos.sh\n
    cd openvidu-local-deployment/community\n./configure_lan_private_ip_linux.sh\n

  3. Run OpenVidu

    docker compose up\n

To use a production-ready OpenVidu deployment, visit the official deployment guide.

"},{"location":"docs/tutorials/angular-components/openvidu-custom-participants-panel/#2-download-the-tutorial-code","title":"2. Download the tutorial code","text":"
git clone https://github.com/OpenVidu/openvidu-livekit-tutorials.git\ngit clone https://github.com/OpenVidu/openvidu-tutorials.git\n
"},{"location":"docs/tutorials/angular-components/openvidu-custom-participants-panel/#3-run-the-server-application","title":"3. Run the server application","text":"Node Go Ruby Java Python Rust PHP .NET

To run this server application, you need Node installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/node\n
  2. Install dependencies 
    npm install\n
  3. Run the application 
    npm start\n

To run this server application, you need Go installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/go\n
  2. Run the application 
    go run main.go\n

To run this server application, you need Ruby installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/ruby\n
  2. Install dependencies 
    bundle install\n
  3. Run the application 
    ruby app.rb\n

To run this server application, you need Java and Maven installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/java\n
  2. Run the application 
    mvn spring-boot:run\n

To run this server application, you need Python 3 installed on your device.

  1. Navigate into the server directory

    cd openvidu-livekit-tutorials/application-server/python\n

  2. Create a python virtual environment

    python -m venv venv\n

  3. Activate the virtual environment

    Windows macOS Linux 
    .\\venv\\Scripts\\activate\n
    . ./venv/bin/activate\n
    . ./venv/bin/activate\n

  4. Install dependencies

    pip install -r requirements.txt\n

  5. Run the application

    python app.py\n

To run this server application, you need Rust installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/rust\n
  2. Run the application 
    cargo run\n

To run this server application, you need PHP and Composer installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/php\n
  2. Install dependencies 
    composer install\n
  3. Run the application 
    composer start\n

To run this server application, you need .NET installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/dotnet\n
  2. Run the application 
    dotnet run\n

Warning

This .NET server application needs the LIVEKIT_API_SECRET env variable to be at least 32 characters long. Make sure to update it here and in your OpenVidu Server.

"},{"location":"docs/tutorials/angular-components/openvidu-custom-participants-panel/#4-run-the-openvidu-custom-participants-panel-tutorial","title":"4. Run the openvidu-custom-participants-panel tutorial","text":"

To run the client application tutorial, you need Node installed on your development computer.

  1. Navigate into the application client directory:

      cd openvidu-tutorials/openvidu-components/openvidu-custom-participants-panel\n

  2. Install the required dependencies:

      npm install\n

  3. Serve the application:

      npm start\n

Once the server is up and running, you can test the application by visiting http://localhost:5080.

Accessing your application client from other devices in your local network

One advantage of running OpenVidu locally is that you can test your application client with other devices in your local network very easily without worrying about SSL certificates.

Access your application client through https://xxx-yyy-zzz-www.openvidu-local.dev:5443, where xxx-yyy-zzz-www part of the domain is your LAN private IP address with dashes (-) instead of dots (.). For more information, see section Accessing your app from other devices in your network.

"},{"location":"docs/tutorials/angular-components/openvidu-custom-participants-panel/#understanding-the-code","title":"Understanding the code","text":"

This tutorial is an Angular project generated with Angular CLI tool. Therefore, you will see many configuration files and other components that are not the primary focus of this tutorial. We will concentrate on the following files in the src directory:

To use OpenVidu Components Angular in your application, you need to install the library and import the OpenViduComponentsModule in your Angular module. Let's see how to do this:

  1. Create an Angular Project (version 17 or higher)

    To begin, you will need to create a new Angular project if you haven't already. Ensure you have Node.js and the Angular CLI installed. Then, run the following command to create a new Angular project:

    ng new your-project-name\n

    Replace your-project-name with the desired name for your project.

  2. Add Angular Material to your project

    OpenVidu Components Angular needs Angular Material, which provides a range of UI components. To add Angular Material to your project, navigate to your project directory and run:

    ng add @angular/material\n

  3. Install OpenVidu Components Angular

    With your Angular project set up, it's time to add videoconferencing capabilities with OpenVidu Components Angular. Install the library using npm:

    npm install openvidu-components-angular\n

  4. Import and use OpenVidu Components Angular

    To use OpenVidu Components Angular in your application, you need to:

    1. Import the OpenViduComponentsModule in your Angular application.
    2. Configure the module with the OpenViduComponentsConfig object.
    3. Add the component to your template file.
    4. Assign the OpenVidu token and LiveKit URL to the component.
    5. Customize the appearance of the components using CSS variables.
main.tsapp.component.tsstyles.scss

In your main.ts application file, import the it and configure it as follows:

// Other imports ...\n\nimport { OpenViduComponentsModule, OpenViduComponentsConfig } from 'openvidu-components-angular';\n\nconst config: OpenViduComponentsConfig = {\n    production: true,\n};\n\nbootstrapApplication(AppComponent, {\n    providers: [\n        importProvidersFrom(\n            OpenViduComponentsModule.forRoot(config)\n            // Other imports ...\n        ),\n        provideAnimations(),\n    ],\n}).catch((err) => console.error(err));\n

Use the ov-videoconference component to create a videoconference. This component requires a token to connect to the OpenVidu Room. The AppComponent class is responsible for requesting the token and passing it to the ov-videoconference component.

import {\n  ParticipantModel,\n    ParticipantService,\n  OpenViduComponentsModule\n} from 'openvidu-components-angular';\n\n@Component({\n  selector: 'app-root',\n  template:`\n    <!-- OpenVidu Video Conference Component -->\n    <ov-videoconference\n      [token]=\"token\"\n      [livekitUrl]=\"LIVEKIT_URL\"\n      (onTokenRequested)=\"onTokenRequested($event)\"\n    >\n      <!-- Custom Participants Panel -->\n      <div *ovParticipantsPanel id=\"my-panel\">\n        <ul id=\"local\">\n          <li>{{ localParticipant.name }}</li>\n        </ul>\n        <ul id=\"remote\">\n          @for (p of remoteParticipants; track p) {\n          <li>{{ p.name }}</li>\n          }\n        </ul>\n      </div>\n    </ov-videoconference>\n  `,\n  styles: [''],\n  standalone: true,\n  imports: [OpenViduComponentsModule],\n})\nexport class AppComponent implements OnInit, OnDestroy {\n  // For local development, leave these variables empty\n  // For production, configure them with correct URLs depending on your deployment\n\n  APPLICATION_SERVER_URL = '';  // (1)!\n  LIVEKIT_URL = ''; // (2)!\n\n  // The name of the room to join.\n  roomName = 'openvidu-custom-participants-panel';  // (3)!\n\n  // The token used to join the room.\n  token!: string; // (4)!\n\n  // Participant-related properties\n  localParticipant!: ParticipantModel; // (5)!\n  remoteParticipants!: ParticipantModel[]; // (6)!\n  localParticipantSubs!: Subscription; // (7)!\n  remoteParticipantsSubs!: Subscription; // (8)!\n\n  constructor(private httpClient: HttpClient, private participantService: ParticipantService) {\n    this.configureUrls();\n  }\n\n  private configureUrls() {\n    // If APPLICATION_SERVER_URL is not configured, use default value from local development\n    if (!this.APPLICATION_SERVER_URL) {\n      if (window.location.hostname === 'localhost') {\n        this.APPLICATION_SERVER_URL = 'http://localhost:6080/';\n      } else {\n        this.APPLICATION_SERVER_URL =\n          'https://' + window.location.hostname + ':6443/';\n      }\n    }\n\n    // If LIVEKIT_URL is not configured, use default value from local development\n    if (!this.LIVEKIT_URL) {\n      if (window.location.hostname === 'localhost') {\n        this.LIVEKIT_URL = 'ws://localhost:7880/';\n      } else {\n        this.LIVEKIT_URL = 'wss://' + window.location.hostname + ':7443/';\n      }\n    }\n  }\n\n  ngOnInit() {\n    // Subscribe to participants' updates\n    this.subscribeToParticipants();\n  }\n\n  ngOnDestroy() {\n    // Unsubscribe from participant updates to prevent memory leaks\n    this.localParticipantSubs?.unsubscribe();\n    this.remoteParticipantsSubs?.unsubscribe();\n  }\n\n  // Requests a token to join the room with the given participant name.\n  async onTokenRequested(participantName: string) { // (9)!\n    const { token } = await this.getToken(this.roomName, participantName);\n    this.token = token;\n  }\n\n  // Subscribe to updates for local and remote participants\n  private subscribeToParticipants() { // (10)!\n    this.localParticipantSubs = this.participantService.localParticipant$.subscribe((p) => {\n      if (p) this.localParticipant = p;\n    });\n\n    this.remoteParticipantsSubs = this.participantService.remoteParticipants$.subscribe((participants) => {\n      this.remoteParticipants = participants;\n    });\n  }\n\n  // Retrieves a token to join the room with the given name and participant name.\n  getToken(roomName: string, participantName: string): Promise<any> { // (11)!\n    // Requesting token to the server application\n  }\n}\n
  1. APPLICATION_SERVER_URL: URL to communicate the client application with the server application to request OpenVidu tokens.
  2. LIVEKIT_URL: URL to communicate the client application with the LiveKit server.
  3. roomName: OpenVidu Room identifier. This is the room where the VideoconferenceComponent will connect.
  4. token: OpenVidu Token used to connect to the OpenVidu Room.
  5. localParticipant: Local participant model.
  6. remoteParticipants: Remote participants model.
  7. localParticipantSubs: Subscription to the local participant updates.
  8. remoteParticipantsSubs: Subscription to the remote participants updates.
  9. onTokenRequested method that fires when the VideoconferenceComponent requests a token to connect to the OpenVidu Room.
  10. subscribeToParticipants method that subscribes to updates for local and remote participants.
  11. getToken method that requests a token to the server application.

The app.component.ts file declares the following properties and methods:

Configure the URLs

For local development, leave APPLICATION_SERVER_URL and LIVEKIT_URL variables empty. The function configureUrls() will automatically configure them with default values. However, for production, you should configure these variables with the correct URLs depending on your deployment.

The OpenVidu Components Angular library provides a set of CSS variables that you can use to customize the appearance of the components. You can define these variables in your application's global styles file (e.g. styles.scss).

:root {\n    --ov-primary-color: #303030; /* Primary interface color */\n    --ov-secondary-color: #3e3f3f; /* Secondary interface color */\n    --ov-tertiary-color: #598eff; /* Tertiary accent color for elements */\n    --ov-warn-color: #eb5144; /* Warning color for alerts and notifications */\n    --ov-light-color: #e6e6e6; /* Light color for elements */\n\n    --ov-accent-color: #ffae35; /* Accent color for standout UI elements */\n\n    --ov-logo-background-color: #3a3d3d; /* Background color for the logo area */\n    --ov-text-color: #ffffff; /* Default text color */\n\n    --ov-panel-text-color: #1d1d1d; /* Text color for panel elements */\n    --ov-panel-background: #ffffff; /* Background color for panels */\n\n    --ov-buttons-radius: 50%; /* Border-radius for circular buttons */\n    --ov-leave-button-radius: 10px; /* Border-radius for the leave button */\n    --ov-video-radius: 5px; /* Border-radius for video elements */\n    --ov-panel-radius: 5px; /* Border-radius for panel elements */\n}\n
"},{"location":"docs/tutorials/angular-components/openvidu-custom-participants-panel/#customizing-participants-panel","title":"Customizing participants panel","text":"

This tutorial uses the *ovParticipantsPanel directive with the aim of replacing the default participant panel with a custom one.

In the app.component.ts file, you can see the following code snippet:

@Component({\n    selector: 'app-root',\n    template: `\n        <!-- OpenVidu Video Conference Component -->\n    <ov-videoconference\n      [token]=\"token\"\n      [livekitUrl]=\"LIVEKIT_URL\"\n      (onTokenRequested)=\"onTokenRequested($event)\"\n    >\n      <!-- Custom Participants Panel -->\n      <div *ovParticipantsPanel id=\"my-panel\">\n        <ul id=\"local\">\n          <li>{{ localParticipant.name }}</li>\n        </ul>\n        <ul id=\"remote\">\n          @for (p of remoteParticipants; track p) {\n          <li>{{ p.name }}</li>\n          }\n        </ul>\n      </div>\n    </ov-videoconference>\n    `,\n    styles: [''],\n    standalone: true,\n    imports: [OpenViduComponentsModule],\n})\nexport class AppComponent implements OnInit, OnDestroy{\n    // ...\n}\n
"},{"location":"docs/tutorials/angular-components/openvidu-custom-stream/","title":"openvidu-custom-stream","text":"

Source code

The openvidu-custom-stream tutorial demonstrates how to replace the default video stream with a custom one, providing a more tailored user experience.

Customizing the video stream component is made simple with the StreamDirective, which offers a straightforward way to replace and adapt the StreamComponent to your needs.

OpenVidu Components - Custom Stream"},{"location":"docs/tutorials/angular-components/openvidu-custom-stream/#running-this-tutorial","title":"Running this tutorial","text":""},{"location":"docs/tutorials/angular-components/openvidu-custom-stream/#1-run-openvidu-server","title":"1. Run OpenVidu Server","text":"Run OpenVidu locallyDeploy OpenVidu

  1. Download OpenVidu

    git clone https://github.com/OpenVidu/openvidu-local-deployment\n

  2. Configure the local deployment

    Windows macOS Linux 
    cd openvidu-local-deployment/community\n.\\configure_lan_private_ip_windows.bat\n
    cd openvidu-local-deployment/community\n./configure_lan_private_ip_macos.sh\n
    cd openvidu-local-deployment/community\n./configure_lan_private_ip_linux.sh\n

  3. Run OpenVidu

    docker compose up\n

To use a production-ready OpenVidu deployment, visit the official deployment guide.

"},{"location":"docs/tutorials/angular-components/openvidu-custom-stream/#2-download-the-tutorial-code","title":"2. Download the tutorial code","text":"
git clone https://github.com/OpenVidu/openvidu-livekit-tutorials.git\ngit clone https://github.com/OpenVidu/openvidu-tutorials.git\n
"},{"location":"docs/tutorials/angular-components/openvidu-custom-stream/#3-run-the-server-application","title":"3. Run the server application","text":"Node Go Ruby Java Python Rust PHP .NET

To run this server application, you need Node installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/node\n
  2. Install dependencies 
    npm install\n
  3. Run the application 
    npm start\n

To run this server application, you need Go installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/go\n
  2. Run the application 
    go run main.go\n

To run this server application, you need Ruby installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/ruby\n
  2. Install dependencies 
    bundle install\n
  3. Run the application 
    ruby app.rb\n

To run this server application, you need Java and Maven installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/java\n
  2. Run the application 
    mvn spring-boot:run\n

To run this server application, you need Python 3 installed on your device.

  1. Navigate into the server directory

    cd openvidu-livekit-tutorials/application-server/python\n

  2. Create a python virtual environment

    python -m venv venv\n

  3. Activate the virtual environment

    Windows macOS Linux 
    .\\venv\\Scripts\\activate\n
    . ./venv/bin/activate\n
    . ./venv/bin/activate\n

  4. Install dependencies

    pip install -r requirements.txt\n

  5. Run the application

    python app.py\n

To run this server application, you need Rust installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/rust\n
  2. Run the application 
    cargo run\n

To run this server application, you need PHP and Composer installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/php\n
  2. Install dependencies 
    composer install\n
  3. Run the application 
    composer start\n

To run this server application, you need .NET installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/dotnet\n
  2. Run the application 
    dotnet run\n

Warning

This .NET server application needs the LIVEKIT_API_SECRET env variable to be at least 32 characters long. Make sure to update it here and in your OpenVidu Server.

"},{"location":"docs/tutorials/angular-components/openvidu-custom-stream/#4-run-the-openvidu-custom-stream-tutorial","title":"4. Run the openvidu-custom-stream tutorial","text":"

To run the client application tutorial, you need Node installed on your development computer.

  1. Navigate into the application client directory:

      cd openvidu-tutorials/openvidu-components/openvidu-custom-stream\n

  2. Install the required dependencies:

      npm install\n

  3. Serve the application:

      npm start\n

Once the server is up and running, you can test the application by visiting http://localhost:5080.

Accessing your application client from other devices in your local network

One advantage of running OpenVidu locally is that you can test your application client with other devices in your local network very easily without worrying about SSL certificates.

Access your application client through https://xxx-yyy-zzz-www.openvidu-local.dev:5443, where xxx-yyy-zzz-www part of the domain is your LAN private IP address with dashes (-) instead of dots (.). For more information, see section Accessing your app from other devices in your network.

"},{"location":"docs/tutorials/angular-components/openvidu-custom-stream/#understanding-the-code","title":"Understanding the code","text":"

This tutorial is an Angular project generated with Angular CLI tool. Therefore, you will see many configuration files and other components that are not the primary focus of this tutorial. We will concentrate on the following files in the src directory:

To use OpenVidu Components Angular in your application, you need to install the library and import the OpenViduComponentsModule in your Angular module. Let's see how to do this:

  1. Create an Angular Project (version 17 or higher)

    To begin, you will need to create a new Angular project if you haven't already. Ensure you have Node.js and the Angular CLI installed. Then, run the following command to create a new Angular project:

    ng new your-project-name\n

    Replace your-project-name with the desired name for your project.

  2. Add Angular Material to your project

    OpenVidu Components Angular needs Angular Material, which provides a range of UI components. To add Angular Material to your project, navigate to your project directory and run:

    ng add @angular/material\n

  3. Install OpenVidu Components Angular

    With your Angular project set up, it's time to add videoconferencing capabilities with OpenVidu Components Angular. Install the library using npm:

    npm install openvidu-components-angular\n

  4. Import and use OpenVidu Components Angular

    To use OpenVidu Components Angular in your application, you need to:

    1. Import the OpenViduComponentsModule in your Angular application.
    2. Configure the module with the OpenViduComponentsConfig object.
    3. Add the component to your template file.
    4. Assign the OpenVidu token and LiveKit URL to the component.
    5. Customize the appearance of the components using CSS variables.
main.tsapp.component.tsstyles.scss

In your main.ts application file, import the it and configure it as follows:

// Other imports ...\n\nimport { OpenViduComponentsModule, OpenViduComponentsConfig } from 'openvidu-components-angular';\n\nconst config: OpenViduComponentsConfig = {\n    production: true,\n};\n\nbootstrapApplication(AppComponent, {\n    providers: [\n        importProvidersFrom(\n            OpenViduComponentsModule.forRoot(config)\n            // Other imports ...\n        ),\n        provideAnimations(),\n    ],\n}).catch((err) => console.error(err));\n

Use the ov-videoconference component to create a videoconference. This component requires a token to connect to the OpenVidu Room. The AppComponent class is responsible for requesting the token and passing it to the ov-videoconference component.

import { OpenViduComponentsModule } from 'openvidu-components-angular';\n\n@Component({\n  selector: 'app-root',\n  template:`\n        <!-- OpenVidu Video Conference Component -->\n      <ov-videoconference\n        [token]=\"token\"\n        [livekitUrl]=\"LIVEKIT_URL\"\n        (onTokenRequested)=\"onTokenRequested($event)\"\n      >\n        <!-- Display Video Streams -->\n        <div *ovStream=\"let track\">\n          <!-- Video Stream Component -->\n          <ov-stream [track]=\"track\" [displayParticipantName]=\"false\"></ov-stream>\n\n          <!-- Display Participant's Name -->\n          <p>{{ track.participant.name }}</p>\n        </div>\n      </ov-videoconference>\n  `,\n  styles: [''],\n  standalone: true,\n  imports: [OpenViduComponentsModule],\n})\nexport class AppComponent {\n  // For local development, leave these variables empty\n  // For production, configure them with correct URLs depending on your deployment\n\n  APPLICATION_SERVER_URL = '';  // (1)!\n  LIVEKIT_URL = ''; // (2)!\n\n  // The name of the room to join.\n  roomName = 'openvidu-custom-stream';  // (3)!\n\n  // The token used to join the room.\n  token!: string; // (4)!\n\n  constructor(private httpClient: HttpClient) {\n    this.configureUrls();\n  }\n\n  private configureUrls() {\n    // If APPLICATION_SERVER_URL is not configured, use default value from local development\n    if (!this.APPLICATION_SERVER_URL) {\n      if (window.location.hostname === 'localhost') {\n        this.APPLICATION_SERVER_URL = 'http://localhost:6080/';\n      } else {\n        this.APPLICATION_SERVER_URL =\n          'https://' + window.location.hostname + ':6443/';\n      }\n    }\n\n    // If LIVEKIT_URL is not configured, use default value from local development\n    if (!this.LIVEKIT_URL) {\n      if (window.location.hostname === 'localhost') {\n        this.LIVEKIT_URL = 'ws://localhost:7880/';\n      } else {\n        this.LIVEKIT_URL = 'wss://' + window.location.hostname + ':7443/';\n      }\n    }\n  }\n\n  // Requests a token to join the room with the given participant name.\n  async onTokenRequested(participantName: string) { // (5)!\n    const { token } = await this.getToken(this.roomName, participantName);\n    this.token = token;\n  }\n\n  // Retrieves a token to join the room with the given name and participant name.\n  getToken(roomName: string, participantName: string): Promise<any> { // (6)!\n    // Requesting token to the server application\n  }\n}\n
  1. APPLICATION_SERVER_URL: URL to communicate the client application with the server application to request OpenVidu tokens.
  2. LIVEKIT_URL: URL to communicate the client application with the LiveKit server.
  3. roomName: OpenVidu Room identifier. This is the room where the VideoconferenceComponent will connect.
  4. token: OpenVidu Token used to connect to the OpenVidu Room.
  5. onTokenRequested method that fires when the VideoconferenceComponent requests a token to connect to the OpenVidu Room.
  6. getToken method that requests a token to the server application.

The app.component.ts file declares the following properties and methods:

Configure the URLs

For local development, leave APPLICATION_SERVER_URL and LIVEKIT_URL variables empty. The function configureUrls() will automatically configure them with default values. However, for production, you should configure these variables with the correct URLs depending on your deployment.

The OpenVidu Components Angular library provides a set of CSS variables that you can use to customize the appearance of the components. You can define these variables in your application's global styles file (e.g. styles.scss).

:root {\n    --ov-primary-color: #303030; /* Primary interface color */\n    --ov-secondary-color: #3e3f3f; /* Secondary interface color */\n    --ov-tertiary-color: #598eff; /* Tertiary accent color for elements */\n    --ov-warn-color: #eb5144; /* Warning color for alerts and notifications */\n    --ov-light-color: #e6e6e6; /* Light color for elements */\n\n    --ov-accent-color: #ffae35; /* Accent color for standout UI elements */\n\n    --ov-logo-background-color: #3a3d3d; /* Background color for the logo area */\n    --ov-text-color: #ffffff; /* Default text color */\n\n    --ov-panel-text-color: #1d1d1d; /* Text color for panel elements */\n    --ov-panel-background: #ffffff; /* Background color for panels */\n\n    --ov-buttons-radius: 50%; /* Border-radius for circular buttons */\n    --ov-leave-button-radius: 10px; /* Border-radius for the leave button */\n    --ov-video-radius: 5px; /* Border-radius for video elements */\n    --ov-panel-radius: 5px; /* Border-radius for panel elements */\n}\n
"},{"location":"docs/tutorials/angular-components/openvidu-custom-stream/#customizing-the-video-stream","title":"Customizing the video stream","text":"

The *ovStream directive is used to replace the default video stream with a custom one and allows you to customize the video stream component to your needs. It provides a way to access the video stream track and the participant name.

In the app.component.ts file, you can see the following code snippet:

@Component({\n    selector: 'app-root',\n    template: `\n        <!-- OpenVidu Video Conference Component -->\n        <ov-videoconference\n            [token]=\"token\"\n            [livekitUrl]=\"LIVEKIT_URL\"\n            (onTokenRequested)=\"onTokenRequested($event)\"\n        >\n            <!-- Display Video Streams -->\n            <div *ovStream=\"let track\">\n                <!-- Video Stream Component -->\n                <ov-stream [track]=\"track\" [displayParticipantName]=\"false\"></ov-stream>\n\n                <!-- Display Participant's Name -->\n                <p>{{ track.participant.name }}</p>\n            </div>\n        </ov-videoconference>\n    `,\n    styles: [''],\n    standalone: true,\n    imports: [OpenViduComponentsModule],\n})\nexport class AppComponent {\n    // ...\n}\n

In this code snippet, the *ovStream directive provides access to the ParticipantTrackPublication object, which contains the video stream track and the participant name.

The track object is passed to the ov-stream component to display the video stream. The track.participant.name object is used to display the participant's name.

"},{"location":"docs/tutorials/angular-components/openvidu-custom-toolbar/","title":"openvidu-custom-toolbar","text":"

Source code

The openvidu-custom-toolbar tutorial demonstrates how to replace the default toolbar with a custom one, providing a more tailored user experience.

Customizing the toolbar is made simple with the ToolbarDirective, which offers a straightforward way to replace and adapt the ToolbarComponent to your needs.

OpenVidu Components - Custom Toolbar"},{"location":"docs/tutorials/angular-components/openvidu-custom-toolbar/#running-this-tutorial","title":"Running this tutorial","text":""},{"location":"docs/tutorials/angular-components/openvidu-custom-toolbar/#1-run-openvidu-server","title":"1. Run OpenVidu Server","text":"Run OpenVidu locallyDeploy OpenVidu

  1. Download OpenVidu

    git clone https://github.com/OpenVidu/openvidu-local-deployment\n

  2. Configure the local deployment

    Windows macOS Linux 
    cd openvidu-local-deployment/community\n.\\configure_lan_private_ip_windows.bat\n
    cd openvidu-local-deployment/community\n./configure_lan_private_ip_macos.sh\n
    cd openvidu-local-deployment/community\n./configure_lan_private_ip_linux.sh\n

  3. Run OpenVidu

    docker compose up\n

To use a production-ready OpenVidu deployment, visit the official deployment guide.

"},{"location":"docs/tutorials/angular-components/openvidu-custom-toolbar/#2-download-the-tutorial-code","title":"2. Download the tutorial code","text":"
git clone https://github.com/OpenVidu/openvidu-livekit-tutorials.git\ngit clone https://github.com/OpenVidu/openvidu-tutorials.git\n
"},{"location":"docs/tutorials/angular-components/openvidu-custom-toolbar/#3-run-the-server-application","title":"3. Run the server application","text":"Node Go Ruby Java Python Rust PHP .NET

To run this server application, you need Node installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/node\n
  2. Install dependencies 
    npm install\n
  3. Run the application 
    npm start\n

To run this server application, you need Go installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/go\n
  2. Run the application 
    go run main.go\n

To run this server application, you need Ruby installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/ruby\n
  2. Install dependencies 
    bundle install\n
  3. Run the application 
    ruby app.rb\n

To run this server application, you need Java and Maven installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/java\n
  2. Run the application 
    mvn spring-boot:run\n

To run this server application, you need Python 3 installed on your device.

  1. Navigate into the server directory

    cd openvidu-livekit-tutorials/application-server/python\n

  2. Create a python virtual environment

    python -m venv venv\n

  3. Activate the virtual environment

    Windows macOS Linux 
    .\\venv\\Scripts\\activate\n
    . ./venv/bin/activate\n
    . ./venv/bin/activate\n

  4. Install dependencies

    pip install -r requirements.txt\n

  5. Run the application

    python app.py\n

To run this server application, you need Rust installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/rust\n
  2. Run the application 
    cargo run\n

To run this server application, you need PHP and Composer installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/php\n
  2. Install dependencies 
    composer install\n
  3. Run the application 
    composer start\n

To run this server application, you need .NET installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/dotnet\n
  2. Run the application 
    dotnet run\n

Warning

This .NET server application needs the LIVEKIT_API_SECRET env variable to be at least 32 characters long. Make sure to update it here and in your OpenVidu Server.

"},{"location":"docs/tutorials/angular-components/openvidu-custom-toolbar/#4-run-the-openvidu-custom-toolbar-tutorial","title":"4. Run the openvidu-custom-toolbar tutorial","text":"

To run the client application tutorial, you need Node installed on your development computer.

  1. Navigate into the application client directory:

      cd openvidu-tutorials/openvidu-components/openvidu-custom-toolbar\n

  2. Install the required dependencies:

      npm install\n

  3. Serve the application:

      npm start\n

Once the server is up and running, you can test the application by visiting http://localhost:5080.

Accessing your application client from other devices in your local network

One advantage of running OpenVidu locally is that you can test your application client with other devices in your local network very easily without worrying about SSL certificates.

Access your application client through https://xxx-yyy-zzz-www.openvidu-local.dev:5443, where xxx-yyy-zzz-www part of the domain is your LAN private IP address with dashes (-) instead of dots (.). For more information, see section Accessing your app from other devices in your network.

"},{"location":"docs/tutorials/angular-components/openvidu-custom-toolbar/#understanding-the-code","title":"Understanding the code","text":"

This tutorial is an Angular project generated with Angular CLI tool. Therefore, you will see many configuration files and other components that are not the primary focus of this tutorial. We will concentrate on the following files in the src directory:

To use OpenVidu Components Angular in your application, you need to install the library and import the OpenViduComponentsModule in your Angular module. Let's see how to do this:

  1. Create an Angular Project (version 17 or higher)

    To begin, you will need to create a new Angular project if you haven't already. Ensure you have Node.js and the Angular CLI installed. Then, run the following command to create a new Angular project:

    ng new your-project-name\n

    Replace your-project-name with the desired name for your project.

  2. Add Angular Material to your project

    OpenVidu Components Angular needs Angular Material, which provides a range of UI components. To add Angular Material to your project, navigate to your project directory and run:

    ng add @angular/material\n

  3. Install OpenVidu Components Angular

    With your Angular project set up, it's time to add videoconferencing capabilities with OpenVidu Components Angular. Install the library using npm:

    npm install openvidu-components-angular\n

  4. Import and use OpenVidu Components Angular

    To use OpenVidu Components Angular in your application, you need to:

    1. Import the OpenViduComponentsModule in your Angular application.
    2. Configure the module with the OpenViduComponentsConfig object.
    3. Add the component to your template file.
    4. Assign the OpenVidu token and LiveKit URL to the component.
    5. Customize the appearance of the components using CSS variables.
main.tsapp.component.tsstyles.scss

In your main.ts application file, import the it and configure it as follows:

// Other imports ...\n\nimport { OpenViduComponentsModule, OpenViduComponentsConfig } from 'openvidu-components-angular';\n\nconst config: OpenViduComponentsConfig = {\n    production: true,\n};\n\nbootstrapApplication(AppComponent, {\n    providers: [\n        importProvidersFrom(\n            OpenViduComponentsModule.forRoot(config)\n            // Other imports ...\n        ),\n        provideAnimations(),\n    ],\n}).catch((err) => console.error(err));\n

Use the ov-videoconference component to create a videoconference. This component requires a token to connect to the OpenVidu Room. The AppComponent class is responsible for requesting the token and passing it to the ov-videoconference component.

import { OpenViduComponentsModule, ParticipantService } from 'openvidu-components-angular';\n\n@Component({\n  selector: 'app-root',\n  template:`\n    <ov-videoconference\n      [token]=\"token\"\n      [livekitUrl]=\"LIVEKIT_URL\"\n      (onTokenRequested)=\"onTokenRequested($event)\"\n    >\n      <div *ovToolbar style=\"text-align: center;\">\n        <button (click)=\"toggleVideo()\">Toggle Video</button>\n        <button (click)=\"toggleAudio()\">Toggle Audio</button>\n      </div>\n    </ov-videoconference>\n  `,\n  styles: [''],\n  standalone: true,\n  imports: [OpenViduComponentsModule],\n})\nexport class AppComponent {\n  // For local development, leave these variables empty\n  // For production, configure them with correct URLs depending on your deployment\n\n  APPLICATION_SERVER_URL = '';  // (1)!\n  LIVEKIT_URL = ''; // (2)!\n\n  // The name of the room to join.\n  roomName = 'openvidu-custom-toolbar';  // (3)!\n\n  // The token used to join the room.\n  token!: string; // (4)!\n\n  constructor(private httpClient: HttpClient, private participantService: ParticipantService) {\n    this.configureUrls();\n  }\n\n  private configureUrls() {\n    // If APPLICATION_SERVER_URL is not configured, use default value from local development\n    if (!this.APPLICATION_SERVER_URL) {\n      if (window.location.hostname === 'localhost') {\n        this.APPLICATION_SERVER_URL = 'http://localhost:6080/';\n      } else {\n        this.APPLICATION_SERVER_URL =\n          'https://' + window.location.hostname + ':6443/';\n      }\n    }\n\n    // If LIVEKIT_URL is not configured, use default value from local development\n    if (!this.LIVEKIT_URL) {\n      if (window.location.hostname === 'localhost') {\n        this.LIVEKIT_URL = 'ws://localhost:7880/';\n      } else {\n        this.LIVEKIT_URL = 'wss://' + window.location.hostname + ':7443/';\n      }\n    }\n  }\n\n  // Requests a token to join the room with the given participant name.\n  async onTokenRequested(participantName: string) { // (5)!\n    const { token } = await this.getToken(this.roomName, participantName);\n    this.token = token;\n  }\n\n  // Toggles the camera on and off.\n  async toggleVideo() { // (6)!\n    const isCameraEnabled = this.participantService.isMyCameraEnabled();\n    await this.participantService.setCameraEnabled(!isCameraEnabled);\n  }\n\n  // Toggles the microphone on and off.\n  async toggleAudio() { // (7)!\n    const isMicrophoneEnabled = this.participantService.isMyMicrophoneEnabled();\n    await this.participantService.setMicrophoneEnabled(!isMicrophoneEnabled);\n  }\n\n  // Retrieves a token to join the room with the given name and participant name.\n  getToken(roomName: string, participantName: string): Promise<any> { // (8)!\n    // Requesting token to the server application\n  }\n}\n
  1. APPLICATION_SERVER_URL: URL to communicate the client application with the server application to request OpenVidu tokens.
  2. LIVEKIT_URL: URL to communicate the client application with the LiveKit server.
  3. roomName: OpenVidu Room identifier. This is the room where the VideoconferenceComponent will connect.
  4. token: OpenVidu Token used to connect to the OpenVidu Room.
  5. onTokenRequested method that fires when the VideoconferenceComponent requests a token to connect to the OpenVidu Room.
  6. toggleVideo method that toggles the camera on and off.
  7. toggleAudio method that toggles the microphone on and off.
  8. getToken method that requests a token to the server application.

The app.component.ts file declares the following properties and methods:

Configure the URLs

For local development, leave APPLICATION_SERVER_URL and LIVEKIT_URL variables empty. The function configureUrls() will automatically configure them with default values. However, for production, you should configure these variables with the correct URLs depending on your deployment.

The OpenVidu Components Angular library provides a set of CSS variables that you can use to customize the appearance of the components. You can define these variables in your application's global styles file (e.g. styles.scss).

:root {\n    --ov-primary-color: #303030; /* Primary interface color */\n    --ov-secondary-color: #3e3f3f; /* Secondary interface color */\n    --ov-tertiary-color: #598eff; /* Tertiary accent color for elements */\n    --ov-warn-color: #eb5144; /* Warning color for alerts and notifications */\n    --ov-light-color: #e6e6e6; /* Light color for elements */\n\n    --ov-accent-color: #ffae35; /* Accent color for standout UI elements */\n\n    --ov-logo-background-color: #3a3d3d; /* Background color for the logo area */\n    --ov-text-color: #ffffff; /* Default text color */\n\n    --ov-panel-text-color: #1d1d1d; /* Text color for panel elements */\n    --ov-panel-background: #ffffff; /* Background color for panels */\n\n    --ov-buttons-radius: 50%; /* Border-radius for circular buttons */\n    --ov-leave-button-radius: 10px; /* Border-radius for the leave button */\n    --ov-video-radius: 5px; /* Border-radius for video elements */\n    --ov-panel-radius: 5px; /* Border-radius for panel elements */\n}\n
"},{"location":"docs/tutorials/angular-components/openvidu-custom-toolbar/#customizing-the-toolbar","title":"Customizing the toolbar","text":"

The *ov-toolbar directive allows you to replace the default toolbar with a custom one. This directive is applied to a div element that contains the custom toolbar elements.

In the app.component.ts file, you can see the following code snippet:

@Component({\n  selector: 'app-root',\n  template:`\n    <ov-videoconference\n      [token]=\"token\"\n      [livekitUrl]=\"LIVEKIT_URL\"\n      (onTokenRequested)=\"onTokenRequested($event)\"\n    >\n      <div *ovToolbar style=\"text-align: center;\">\n        <button (click)=\"toggleVideo()\">Toggle Video</button>\n        <button (click)=\"toggleAudio()\">Toggle Audio</button>\n      </div>\n\n    </ov-videoconference>\n  `,\n  styles: [''],\n  standalone: true,\n  imports: [OpenViduComponentsModule],\n})\nexport class AppComponent {\n  // ...\n}\n

In this code snippet, the *ov-toolbar directive is applied to a div element that contains two buttons. These buttons are used to toggle the camera and microphone on and off.

"},{"location":"docs/tutorials/angular-components/openvidu-custom-ui/","title":"openvidu-custom-ui","text":"

Source code

Creating a unique and intuitive user interface (UI) is essential for ensuring a great user experience. OpenVidu Components Angular allows for flexibility in UI customization to fit your application's design requirements.

OpenVidu Components - Custom UI"},{"location":"docs/tutorials/angular-components/openvidu-custom-ui/#running-this-tutorial","title":"Running this tutorial","text":""},{"location":"docs/tutorials/angular-components/openvidu-custom-ui/#1-run-openvidu-server","title":"1. Run OpenVidu Server","text":"Run OpenVidu locallyDeploy OpenVidu

  1. Download OpenVidu

    git clone https://github.com/OpenVidu/openvidu-local-deployment\n

  2. Configure the local deployment

    Windows macOS Linux 
    cd openvidu-local-deployment/community\n.\\configure_lan_private_ip_windows.bat\n
    cd openvidu-local-deployment/community\n./configure_lan_private_ip_macos.sh\n
    cd openvidu-local-deployment/community\n./configure_lan_private_ip_linux.sh\n

  3. Run OpenVidu

    docker compose up\n

To use a production-ready OpenVidu deployment, visit the official deployment guide.

"},{"location":"docs/tutorials/angular-components/openvidu-custom-ui/#2-download-the-tutorial-code","title":"2. Download the tutorial code","text":"
git clone https://github.com/OpenVidu/openvidu-livekit-tutorials.git\ngit clone https://github.com/OpenVidu/openvidu-tutorials.git\n
"},{"location":"docs/tutorials/angular-components/openvidu-custom-ui/#3-run-the-server-application","title":"3. Run the server application","text":"Node Go Ruby Java Python Rust PHP .NET

To run this server application, you need Node installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/node\n
  2. Install dependencies 
    npm install\n
  3. Run the application 
    npm start\n

To run this server application, you need Go installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/go\n
  2. Run the application 
    go run main.go\n

To run this server application, you need Ruby installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/ruby\n
  2. Install dependencies 
    bundle install\n
  3. Run the application 
    ruby app.rb\n

To run this server application, you need Java and Maven installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/java\n
  2. Run the application 
    mvn spring-boot:run\n

To run this server application, you need Python 3 installed on your device.

  1. Navigate into the server directory

    cd openvidu-livekit-tutorials/application-server/python\n

  2. Create a python virtual environment

    python -m venv venv\n

  3. Activate the virtual environment

    Windows macOS Linux 
    .\\venv\\Scripts\\activate\n
    . ./venv/bin/activate\n
    . ./venv/bin/activate\n

  4. Install dependencies

    pip install -r requirements.txt\n

  5. Run the application

    python app.py\n

To run this server application, you need Rust installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/rust\n
  2. Run the application 
    cargo run\n

To run this server application, you need PHP and Composer installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/php\n
  2. Install dependencies 
    composer install\n
  3. Run the application 
    composer start\n

To run this server application, you need .NET installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/dotnet\n
  2. Run the application 
    dotnet run\n

Warning

This .NET server application needs the LIVEKIT_API_SECRET env variable to be at least 32 characters long. Make sure to update it here and in your OpenVidu Server.

"},{"location":"docs/tutorials/angular-components/openvidu-custom-ui/#4-run-the-openvidu-custom-ui-tutorial","title":"4. Run the openvidu-custom-ui tutorial","text":"

To run the client application tutorial, you need Node installed on your development computer.

  1. Navigate into the application client directory:

      cd openvidu-tutorials/openvidu-components/openvidu-custom-ui\n

  2. Install the required dependencies:

      npm install\n

  3. Serve the application:

      npm start\n

Once the server is up and running, you can test the application by visiting http://localhost:5080.

Accessing your application client from other devices in your local network

One advantage of running OpenVidu locally is that you can test your application client with other devices in your local network very easily without worrying about SSL certificates.

Access your application client through https://xxx-yyy-zzz-www.openvidu-local.dev:5443, where xxx-yyy-zzz-www part of the domain is your LAN private IP address with dashes (-) instead of dots (.). For more information, see section Accessing your app from other devices in your network.

"},{"location":"docs/tutorials/angular-components/openvidu-custom-ui/#understanding-the-code","title":"Understanding the code","text":"

This tutorial is an Angular project generated with Angular CLI tool. Therefore, you will see many configuration files and other components that are not the primary focus of this tutorial. We will concentrate on the following files in the src directory:

To use OpenVidu Components Angular in your application, you need to install the library and import the OpenViduComponentsModule in your Angular module. Let's see how to do this:

  1. Create an Angular Project (version 17 or higher)

    To begin, you will need to create a new Angular project if you haven't already. Ensure you have Node.js and the Angular CLI installed. Then, run the following command to create a new Angular project:

    ng new your-project-name\n

    Replace your-project-name with the desired name for your project.

  2. Add Angular Material to your project

    OpenVidu Components Angular needs Angular Material, which provides a range of UI components. To add Angular Material to your project, navigate to your project directory and run:

    ng add @angular/material\n

  3. Install OpenVidu Components Angular

    With your Angular project set up, it's time to add videoconferencing capabilities with OpenVidu Components Angular. Install the library using npm:

    npm install openvidu-components-angular\n

  4. Import and use OpenVidu Components Angular

    To use OpenVidu Components Angular in your application, you need to:

    1. Import the OpenViduComponentsModule in your Angular application.
    2. Configure the module with the OpenViduComponentsConfig object.
    3. Add the component to your template file.
    4. Assign the OpenVidu token and LiveKit URL to the component.
    5. Customize the appearance of the components using CSS variables.
main.tsapp.component.tsstyles.scss

In your main.ts application file, import the it and configure it as follows:

// Other imports ...\n\nimport { OpenViduComponentsModule, OpenViduComponentsConfig } from 'openvidu-components-angular';\n\nconst config: OpenViduComponentsConfig = {\n    production: true,\n};\n\nbootstrapApplication(AppComponent, {\n    providers: [\n        importProvidersFrom(\n            OpenViduComponentsModule.forRoot(config)\n            // Other imports ...\n        ),\n        provideAnimations(),\n    ],\n}).catch((err) => console.error(err));\n

Use the ov-videoconference component to create a videoconference. This component requires a token to connect to the OpenVidu Room. The AppComponent class is responsible for requesting the token and passing it to the ov-videoconference component.

import { OpenViduComponentsModule } from 'openvidu-components-angular';\n\n@Component({\n  selector: 'app-root',\n  template:`\n    <ov-videoconference\n      [token]=\"token\"\n      [livekitUrl]=\"LIVEKIT_URL\"\n      (onTokenRequested)=\"onTokenRequested($event)\"\n    >\n    </ov-videoconference>\n  `,\n  styles: [''],\n  standalone: true,\n  imports: [OpenViduComponentsModule],\n})\nexport class AppComponent {\n  // For local development, leave these variables empty\n  // For production, configure them with correct URLs depending on your deployment\n\n  APPLICATION_SERVER_URL = '';  // (1)!\n  LIVEKIT_URL = ''; // (2)!\n\n  // The name of the room to join.\n  roomName = 'openvidu-custom-ui';  // (3)!\n\n  // The token used to join the room.\n  token!: string; // (4)!\n\n  constructor(private httpClient: HttpClient) {\n    this.configureUrls();\n  }\n\n  private configureUrls() {\n    // If APPLICATION_SERVER_URL is not configured, use default value from local development\n    if (!this.APPLICATION_SERVER_URL) {\n      if (window.location.hostname === 'localhost') {\n        this.APPLICATION_SERVER_URL = 'http://localhost:6080/';\n      } else {\n        this.APPLICATION_SERVER_URL =\n          'https://' + window.location.hostname + ':6443/';\n      }\n    }\n\n    // If LIVEKIT_URL is not configured, use default value from local development\n    if (!this.LIVEKIT_URL) {\n      if (window.location.hostname === 'localhost') {\n        this.LIVEKIT_URL = 'ws://localhost:7880/';\n      } else {\n        this.LIVEKIT_URL = 'wss://' + window.location.hostname + ':7443/';\n      }\n    }\n  }\n\n  // Requests a token to join the room with the given participant name.\n  async onTokenRequested(participantName: string) { // (5)!\n    const { token } = await this.getToken(this.roomName, participantName);\n    this.token = token;\n  }\n\n  // Retrieves a token to join the room with the given name and participant name.\n  getToken(roomName: string, participantName: string): Promise<any> { // (6)!\n    // Requesting token to the server application\n  }\n}\n
  1. APPLICATION_SERVER_URL: URL to communicate the client application with the server application to request OpenVidu tokens.
  2. LIVEKIT_URL: URL to communicate the client application with the LiveKit server.
  3. roomName: OpenVidu Room identifier. This is the room where the VideoconferenceComponent will connect
  4. token: OpenVidu Token used to connect to the OpenVidu Room.
  5. onTokenRequested method that fires when the VideoconferenceComponent requests a token to connect to the OpenVidu Room.
  6. getToken method that requests a token to the server application.

The app.component.ts file declares the following properties and methods:

Configure the URLs

For local development, leave APPLICATION_SERVER_URL and LIVEKIT_URL variables empty. The function configureUrls() will automatically configure them with default values. However, for production, you should configure these variables with the correct URLs depending on your deployment.

The OpenVidu Components Angular library provides a set of CSS variables that you can use to customize the appearance of the components. You can define these variables in your application's global styles file (e.g. styles.scss).

:root {\n    --ov-primary-color: #303030; /* Primary interface color */\n    --ov-secondary-color: #3e3f3f; /* Secondary interface color */\n    --ov-tertiary-color: #598eff; /* Tertiary accent color for elements */\n    --ov-warn-color: #eb5144; /* Warning color for alerts and notifications */\n    --ov-light-color: #e6e6e6; /* Light color for elements */\n\n    --ov-accent-color: #ffae35; /* Accent color for standout UI elements */\n\n    --ov-logo-background-color: #3a3d3d; /* Background color for the logo area */\n    --ov-text-color: #ffffff; /* Default text color */\n\n    --ov-panel-text-color: #1d1d1d; /* Text color for panel elements */\n    --ov-panel-background: #ffffff; /* Background color for panels */\n\n    --ov-buttons-radius: 50%; /* Border-radius for circular buttons */\n    --ov-leave-button-radius: 10px; /* Border-radius for the leave button */\n    --ov-video-radius: 5px; /* Border-radius for video elements */\n    --ov-panel-radius: 5px; /* Border-radius for panel elements */\n}\n
"},{"location":"docs/tutorials/angular-components/openvidu-custom-ui/#customizing-the-ui","title":"Customizing the UI","text":"

To customize the appearance of OpenVidu Components, simply redefine the necessary CSS variables in your styles.scss file. For instance, to change the primary color used throughout your application, you would update the --ov-primary-color variable as shown below:

:root {\n  --ov-primary-color: #yourNewColor; /* Replace #yourNewColor with your chosen hex color code */\n\n  /* Others variables ... */\n}\n
Once you redefine a variable, the new style will automatically apply to all components in the OpenVidu UI that use that variable.

The library also allows you to customize shape of buttons, panels and videos customization, the background color personalization of panels, buttons and videoconference and also you can change the text color.

"},{"location":"docs/tutorials/angular-components/openvidu-custom-ui/#replacing-the-branding-logo","title":"Replacing the branding logo","text":"

You can replace the branding logo with your own. Just modify the src/assets/images/logo.png file with your own logo.

"},{"location":"docs/tutorials/angular-components/openvidu-toggle-hand/","title":"openvidu-toggle-hand","text":"

Source code

The openvidu-toggle-hand tutorial demonstrates how to add a toggle hand feature to the OpenVidu Components Angular library.

The toggle hand feature allows participants to raise and lower their hand during a videoconference. This feature is useful for participants to signal that they want to speak or ask a question.

This tutorial combines the use of the ToolbarAdditionalButtonsDirective, the StreamDirective and the ParticipantsPanelItemElementsDirective to create a custom toolbar button, a custom stream component element and a custom participant panel item element. Check the openvidu-toolbar-buttons and the openvidu-custom-stream tutorials documentation for learning more about these directives.

OpenVidu Components - Toggle Hand"},{"location":"docs/tutorials/angular-components/openvidu-toggle-hand/#running-this-tutorial","title":"Running this tutorial","text":""},{"location":"docs/tutorials/angular-components/openvidu-toggle-hand/#1-run-openvidu-server","title":"1. Run OpenVidu Server","text":"Run OpenVidu locallyDeploy OpenVidu

  1. Download OpenVidu

    git clone https://github.com/OpenVidu/openvidu-local-deployment\n

  2. Configure the local deployment

    Windows macOS Linux 
    cd openvidu-local-deployment/community\n.\\configure_lan_private_ip_windows.bat\n
    cd openvidu-local-deployment/community\n./configure_lan_private_ip_macos.sh\n
    cd openvidu-local-deployment/community\n./configure_lan_private_ip_linux.sh\n

  3. Run OpenVidu

    docker compose up\n

To use a production-ready OpenVidu deployment, visit the official deployment guide.

"},{"location":"docs/tutorials/angular-components/openvidu-toggle-hand/#2-download-the-tutorial-code","title":"2. Download the tutorial code","text":"
git clone https://github.com/OpenVidu/openvidu-livekit-tutorials.git\ngit clone https://github.com/OpenVidu/openvidu-tutorials.git\n
"},{"location":"docs/tutorials/angular-components/openvidu-toggle-hand/#3-run-the-server-application","title":"3. Run the server application","text":"Node Go Ruby Java Python Rust PHP .NET

To run this server application, you need Node installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/node\n
  2. Install dependencies 
    npm install\n
  3. Run the application 
    npm start\n

To run this server application, you need Go installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/go\n
  2. Run the application 
    go run main.go\n

To run this server application, you need Ruby installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/ruby\n
  2. Install dependencies 
    bundle install\n
  3. Run the application 
    ruby app.rb\n

To run this server application, you need Java and Maven installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/java\n
  2. Run the application 
    mvn spring-boot:run\n

To run this server application, you need Python 3 installed on your device.

  1. Navigate into the server directory

    cd openvidu-livekit-tutorials/application-server/python\n

  2. Create a python virtual environment

    python -m venv venv\n

  3. Activate the virtual environment

    Windows macOS Linux 
    .\\venv\\Scripts\\activate\n
    . ./venv/bin/activate\n
    . ./venv/bin/activate\n

  4. Install dependencies

    pip install -r requirements.txt\n

  5. Run the application

    python app.py\n

To run this server application, you need Rust installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/rust\n
  2. Run the application 
    cargo run\n

To run this server application, you need PHP and Composer installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/php\n
  2. Install dependencies 
    composer install\n
  3. Run the application 
    composer start\n

To run this server application, you need .NET installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/dotnet\n
  2. Run the application 
    dotnet run\n

Warning

This .NET server application needs the LIVEKIT_API_SECRET env variable to be at least 32 characters long. Make sure to update it here and in your OpenVidu Server.

"},{"location":"docs/tutorials/angular-components/openvidu-toggle-hand/#4-run-the-openvidu-toggle-hand-tutorial","title":"4. Run the openvidu-toggle-hand tutorial","text":"

To run the client application tutorial, you need Node installed on your development computer.

  1. Navigate into the application client directory:

      cd openvidu-tutorials/openvidu-components/openvidu-toggle-hand\n

  2. Install the required dependencies:

      npm install\n

  3. Serve the application:

      npm start\n

Once the server is up and running, you can test the application by visiting http://localhost:5080.

Accessing your application client from other devices in your local network

One advantage of running OpenVidu locally is that you can test your application client with other devices in your local network very easily without worrying about SSL certificates.

Access your application client through https://xxx-yyy-zzz-www.openvidu-local.dev:5443, where xxx-yyy-zzz-www part of the domain is your LAN private IP address with dashes (-) instead of dots (.). For more information, see section Accessing your app from other devices in your network.

"},{"location":"docs/tutorials/angular-components/openvidu-toggle-hand/#understanding-the-code","title":"Understanding the code","text":"

This tutorial is an Angular project generated with Angular CLI tool. Therefore, you will see many configuration files and other components that are not the primary focus of this tutorial. We will concentrate on the following files in the src directory:

To use OpenVidu Components Angular in your application, you need to install the library and import the OpenViduComponentsModule in your Angular module. Let's see how to do this:

  1. Create an Angular Project (version 17 or higher)

    To begin, you will need to create a new Angular project if you haven't already. Ensure you have Node.js and the Angular CLI installed. Then, run the following command to create a new Angular project:

    ng new your-project-name\n

    Replace your-project-name with the desired name for your project.

  2. Add Angular Material to your project

    OpenVidu Components Angular needs Angular Material, which provides a range of UI components. To add Angular Material to your project, navigate to your project directory and run:

    ng add @angular/material\n

  3. Install OpenVidu Components Angular

    With your Angular project set up, it's time to add videoconferencing capabilities with OpenVidu Components Angular. Install the library using npm:

    npm install openvidu-components-angular\n

  4. Import and use OpenVidu Components Angular

    To use OpenVidu Components Angular in your application, you need to:

    1. Import the OpenViduComponentsModule in your Angular application.
    2. Configure the module with the OpenViduComponentsConfig object.
    3. Add the component to your template file.
    4. Assign the OpenVidu token and LiveKit URL to the component.
    5. Customize the appearance of the components using CSS variables.
main.tsapp.component.tsmodels/participant-app.model.tsstyles.scss

In your main.ts application file, import the it and configure it as follows:

// Other imports ...\n\nimport { OpenViduComponentsModule, OpenViduComponentsConfig } from 'openvidu-components-angular';\n\nconst config: OpenViduComponentsConfig = {\n    production: true,\n};\n\nbootstrapApplication(AppComponent, {\n    providers: [\n        importProvidersFrom(\n            OpenViduComponentsModule.forRoot(config)\n            // Other imports ...\n        ),\n        provideAnimations(),\n    ],\n}).catch((err) => console.error(err));\n

Use the ov-videoconference component to create a videoconference. This component requires a token to connect to the OpenVidu Room. The AppComponent class is responsible for requesting the token and passing it to the ov-videoconference component.

import {\n  ParticipantModel,\n  ParticipantService,\n  OpenViduComponentsModule\n} from 'openvidu-components-angular';\n\nenum DataTopicApp {\n  HAND_TOGGLE = 'handToggle'\n}\n\n@Component({\n  selector: 'app-root',\n  template:`\n    <!-- OpenVidu Video Conference Component -->\n    <ov-videoconference\n      [prejoin]=\"true\"\n      [token]=\"token\"\n      [livekitUrl]=\"LIVEKIT_URL\"\n      (onTokenRequested)=\"onTokenRequested($event)\"\n      (onRoomCreated)=\"handleRemoteHand($event)\"\n    >\n      <div *ovToolbarAdditionalButtons>\n        <button toolbar-btn mat-icon-button (click)=\"handleLocalHand()\" [class.active-btn]=\"hasHandRaised\">\n          <mat-icon matTooltip=\"Toggle hand\">front_hand</mat-icon>\n        </button>\n      </div>\n\n      <div *ovStream=\"let track\" style=\"height: 100%\">\n        <ov-stream [track]=\"track\"></ov-stream>\n        @if (track.participant.hasHandRaised) {\n        <mat-icon @inOutHandAnimation id=\"hand-notification\">front_hand</mat-icon>\n        }\n      </div>\n\n      <div *ovParticipantPanelItemElements=\"let participant\">\n        @if (participant.hasHandRaised) {\n        <mat-icon>front_hand</mat-icon>\n        }\n      </div>\n    </ov-videoconference>\n  `,\n  styles: [''],\n  standalone: true,\n  imports: [OpenViduComponentsModule, MatIconButton, MatIcon]\n})\nexport class AppComponent {\n  // For local development, leave these variables empty\n  // For production, configure them with correct URLs depending on your deployment\n\n  APPLICATION_SERVER_URL = '';  // (1)!\n  LIVEKIT_URL = ''; // (2)!\n\n  // The name of the room to join.\n  roomName = 'openvidu-toggle-hand';  // (3)!\n\n  // The token used to join the room.\n  token!: string; // (4)!\n\n  // Whether the local participant has raised their hand.\n  hasHandRaised: boolean = false; // (5)!\n\n  constructor(private httpClient: HttpClient, private participantService: ParticipantService) {\n    this.configureUrls();\n  }\n\n  private configureUrls() {\n    // If APPLICATION_SERVER_URL is not configured, use default value from local development\n    if (!this.APPLICATION_SERVER_URL) {\n      if (window.location.hostname === 'localhost') {\n        this.APPLICATION_SERVER_URL = 'http://localhost:6080/';\n      } else {\n        this.APPLICATION_SERVER_URL =\n          'https://' + window.location.hostname + ':6443/';\n      }\n    }\n\n    // If LIVEKIT_URL is not configured, use default value from local development\n    if (!this.LIVEKIT_URL) {\n      if (window.location.hostname === 'localhost') {\n        this.LIVEKIT_URL = 'ws://localhost:7880/';\n      } else {\n        this.LIVEKIT_URL = 'wss://' + window.location.hostname + ':7443/';\n      }\n    }\n  }\n\n  // Requests a token to join the room with the given participant name.\n  async onTokenRequested(participantName: string) { // (6)!\n    const { token } = await this.getToken(this.roomName, participantName);\n    this.token = token;\n  }\n\n  // Handles the reception of a remote hand-raising event.\n  handleRemoteHand(room: Room) { // (7)!\n    // Subscribe to hand toggling events from other participants\n    room.on(RoomEvent.DataReceived, (payload: Uint8Array, participant?: RemoteParticipant, _?: DataPacket_Kind, topic?: string) => { // (8)!\n      if (topic === DataTopicApp.HAND_TOGGLE) {\n        const p = this.participantService.getRemoteParticipantBySid(participant.sid); // (9)!\n        if (p) {\n          (<ParticipantAppModel>p).toggleHandRaised(); // (10)!\n        }\n        this.participantService.updateRemoteParticipants(); // (11)!\n      }\n    });\n  }\n\n  // Handles the local hand-raising event.\n  async handleLocalHand() {  // (12)!\n    // Get local participant with ParticipantService\n    const participant = <ParticipantAppModel>this.participantService.getLocalParticipant(); // (13)!\n\n    // Toggle the participant hand with the method we wil add in our ParticipantAppModel\n    participant.toggleHandRaised(); // (14)!\n\n    // Refresh the local participant object for others component and services\n    this.participantService.updateLocalParticipant(); // (15)!\n\n    // Send a signal with the new value to others participant using the openvidu-browser signal\n    const strData = JSON.stringify({});\n    const data: Uint8Array = new TextEncoder().encode(strData);\n    const options: DataPublishOptions = { topic: DataTopicApp.HAND_TOGGLE };\n\n    await this.participantService.publishData(data, options); // (16)!\n  }\n\n  // Retrieves a token to join the room with the given name and participant name.\n  getToken(roomName: string, participantName: string): Promise<any> { // (17)!\n    // Requesting token to the server application\n  }\n}\n
  1. APPLICATION_SERVER_URL: URL to communicate the client application with the server application to request OpenVidu tokens.
  2. LIVEKIT_URL: URL to communicate the client application with the LiveKit server.
  3. roomName: OpenVidu Room identifier. This is the room where the VideoconferenceComponent will connect.
  4. token: OpenVidu Token used to connect to the OpenVidu Room.
  5. hasHandRaised: Boolean that indicates if the local participant has raised their hand.
  6. onTokenRequested method that fires when the VideoconferenceComponent requests a token to connect to the OpenVidu Room.
  7. handleRemoteHand method that handles the reception of a remote HAND_TOGGLE event.
  8. on method that subscribes to the DataReceived event to handle the reception of a remote HAND_TOGGLE event.
  9. getRemoteParticipantBySid method that retrieves a remote participant by its unique ID.
  10. toggleHandRaised method that toggles the hand raising status of a remote participant.
  11. updateRemoteParticipants method that updates the list of remote participants.
  12. handleLocalHand method that handles the local HAND_TOGGLE event.
  13. getLocalParticipant method that retrieves the local participant.
  14. toggleHandRaised method that toggles the hand raising status of the local participant.
  15. updateLocalParticipant method that updates the local participant.
  16. publishData method that sends a signal to other participants.
  17. getToken method that requests a token to the server application.

The app.component.ts file declares the following properties and methods:

Configure the URLs

For local development, leave APPLICATION_SERVER_URL and LIVEKIT_URL variables empty. The function configureUrls() will automatically configure them with default values. However, for production, you should configure these variables with the correct URLs depending on your deployment.

The ParticipantAppModel class extends the ParticipantModel class to add the ability to raise and lower the hand.

  import { ParticipantModel, ParticipantProperties } from 'openvidu-components-angular';\n\n  // Represents a participant in the application, with the ability to raise their hand.\n  export class ParticipantAppModel extends ParticipantModel {\n\n    // Indicates whether the participant has raised their hand.\n    hasHandRaised: boolean;\n\n    //  Creates a new instance of ParticipantAppModel.\n    constructor(props: ParticipantProperties) {\n      super(props);\n      this.hasHandRaised = false;\n    }\n\n    // Toggles the participant's hand raised status.\n    toggleHandRaised() {\n      this.hasHandRaised = !this.hasHandRaised;\n    }\n  }\n

The OpenVidu Components Angular library provides a set of CSS variables that you can use to customize the appearance of the components. You can define these variables in your application's global styles file (e.g. styles.scss).

:root {\n    --ov-primary-color: #303030; /* Primary interface color */\n    --ov-secondary-color: #3e3f3f; /* Secondary interface color */\n    --ov-tertiary-color: #598eff; /* Tertiary accent color for elements */\n    --ov-warn-color: #eb5144; /* Warning color for alerts and notifications */\n    --ov-light-color: #e6e6e6; /* Light color for elements */\n\n    --ov-accent-color: #ffae35; /* Accent color for standout UI elements */\n\n    --ov-logo-background-color: #3a3d3d; /* Background color for the logo area */\n    --ov-text-color: #ffffff; /* Default text color */\n\n    --ov-panel-text-color: #1d1d1d; /* Text color for panel elements */\n    --ov-panel-background: #ffffff; /* Background color for panels */\n\n    --ov-buttons-radius: 50%; /* Border-radius for circular buttons */\n    --ov-leave-button-radius: 10px; /* Border-radius for the leave button */\n    --ov-video-radius: 5px; /* Border-radius for video elements */\n    --ov-panel-radius: 5px; /* Border-radius for panel elements */\n}\n
"},{"location":"docs/tutorials/angular-components/openvidu-toolbar-buttons/","title":"openvidu-toolbar-buttons","text":"

Source code

The openvidu-toolbar-buttons tutorial demonstrates how to add custom buttons to the central part of the default toolbar in the OpenVidu Components Angular library.

Adding toolbar buttons is made simple with the ToolbarAdditionalButtonsDirective, which offers a straightforward way to add custom buttons to the ToolbarComponent.

OpenVidu Components - Toolbar Buttons"},{"location":"docs/tutorials/angular-components/openvidu-toolbar-buttons/#running-this-tutorial","title":"Running this tutorial","text":""},{"location":"docs/tutorials/angular-components/openvidu-toolbar-buttons/#1-run-openvidu-server","title":"1. Run OpenVidu Server","text":"Run OpenVidu locallyDeploy OpenVidu

  1. Download OpenVidu

    git clone https://github.com/OpenVidu/openvidu-local-deployment\n

  2. Configure the local deployment

    Windows macOS Linux 
    cd openvidu-local-deployment/community\n.\\configure_lan_private_ip_windows.bat\n
    cd openvidu-local-deployment/community\n./configure_lan_private_ip_macos.sh\n
    cd openvidu-local-deployment/community\n./configure_lan_private_ip_linux.sh\n

  3. Run OpenVidu

    docker compose up\n

To use a production-ready OpenVidu deployment, visit the official deployment guide.

"},{"location":"docs/tutorials/angular-components/openvidu-toolbar-buttons/#2-download-the-tutorial-code","title":"2. Download the tutorial code","text":"
git clone https://github.com/OpenVidu/openvidu-livekit-tutorials.git\ngit clone https://github.com/OpenVidu/openvidu-tutorials.git\n
"},{"location":"docs/tutorials/angular-components/openvidu-toolbar-buttons/#3-run-the-server-application","title":"3. Run the server application","text":"Node Go Ruby Java Python Rust PHP .NET

To run this server application, you need Node installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/node\n
  2. Install dependencies 
    npm install\n
  3. Run the application 
    npm start\n

To run this server application, you need Go installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/go\n
  2. Run the application 
    go run main.go\n

To run this server application, you need Ruby installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/ruby\n
  2. Install dependencies 
    bundle install\n
  3. Run the application 
    ruby app.rb\n

To run this server application, you need Java and Maven installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/java\n
  2. Run the application 
    mvn spring-boot:run\n

To run this server application, you need Python 3 installed on your device.

  1. Navigate into the server directory

    cd openvidu-livekit-tutorials/application-server/python\n

  2. Create a python virtual environment

    python -m venv venv\n

  3. Activate the virtual environment

    Windows macOS Linux 
    .\\venv\\Scripts\\activate\n
    . ./venv/bin/activate\n
    . ./venv/bin/activate\n

  4. Install dependencies

    pip install -r requirements.txt\n

  5. Run the application

    python app.py\n

To run this server application, you need Rust installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/rust\n
  2. Run the application 
    cargo run\n

To run this server application, you need PHP and Composer installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/php\n
  2. Install dependencies 
    composer install\n
  3. Run the application 
    composer start\n

To run this server application, you need .NET installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/dotnet\n
  2. Run the application 
    dotnet run\n

Warning

This .NET server application needs the LIVEKIT_API_SECRET env variable to be at least 32 characters long. Make sure to update it here and in your OpenVidu Server.

"},{"location":"docs/tutorials/angular-components/openvidu-toolbar-buttons/#4-run-the-openvidu-toolbar-buttons-tutorial","title":"4. Run the openvidu-toolbar-buttons tutorial","text":"

To run the client application tutorial, you need Node installed on your development computer.

  1. Navigate into the application client directory:

      cd openvidu-tutorials/openvidu-components/openvidu-toolbar-buttons\n

  2. Install the required dependencies:

      npm install\n

  3. Serve the application:

      npm start\n

Once the server is up and running, you can test the application by visiting http://localhost:5080.

Accessing your application client from other devices in your local network

One advantage of running OpenVidu locally is that you can test your application client with other devices in your local network very easily without worrying about SSL certificates.

Access your application client through https://xxx-yyy-zzz-www.openvidu-local.dev:5443, where xxx-yyy-zzz-www part of the domain is your LAN private IP address with dashes (-) instead of dots (.). For more information, see section Accessing your app from other devices in your network.

"},{"location":"docs/tutorials/angular-components/openvidu-toolbar-buttons/#understanding-the-code","title":"Understanding the code","text":"

This tutorial is an Angular project generated with Angular CLI tool. Therefore, you will see many configuration files and other components that are not the primary focus of this tutorial. We will concentrate on the following files in the src directory:

To use OpenVidu Components Angular in your application, you need to install the library and import the OpenViduComponentsModule in your Angular module. Let's see how to do this:

  1. Create an Angular Project (version 17 or higher)

    To begin, you will need to create a new Angular project if you haven't already. Ensure you have Node.js and the Angular CLI installed. Then, run the following command to create a new Angular project:

    ng new your-project-name\n

    Replace your-project-name with the desired name for your project.

  2. Add Angular Material to your project

    OpenVidu Components Angular needs Angular Material, which provides a range of UI components. To add Angular Material to your project, navigate to your project directory and run:

    ng add @angular/material\n

  3. Install OpenVidu Components Angular

    With your Angular project set up, it's time to add videoconferencing capabilities with OpenVidu Components Angular. Install the library using npm:

    npm install openvidu-components-angular\n

  4. Import and use OpenVidu Components Angular

    To use OpenVidu Components Angular in your application, you need to:

    1. Import the OpenViduComponentsModule in your Angular application.
    2. Configure the module with the OpenViduComponentsConfig object.
    3. Add the component to your template file.
    4. Assign the OpenVidu token and LiveKit URL to the component.
    5. Customize the appearance of the components using CSS variables.
main.tsapp.component.tsstyles.scss

In your main.ts application file, import the it and configure it as follows:

// Other imports ...\n\nimport { OpenViduComponentsModule, OpenViduComponentsConfig } from 'openvidu-components-angular';\n\nconst config: OpenViduComponentsConfig = {\n    production: true,\n};\n\nbootstrapApplication(AppComponent, {\n    providers: [\n        importProvidersFrom(\n            OpenViduComponentsModule.forRoot(config)\n            // Other imports ...\n        ),\n        provideAnimations(),\n    ],\n}).catch((err) => console.error(err));\n

Use the ov-videoconference component to create a videoconference. This component requires a token to connect to the OpenVidu Room. The AppComponent class is responsible for requesting the token and passing it to the ov-videoconference component.

import { MatIcon } from '@angular/material/icon';\nimport { MatIconButton } from '@angular/material/button';\nimport { OpenViduComponentsModule, ParticipantService } from 'openvidu-components-angular';\n\n@Component({\n  selector: 'app-root',\n  template:`\n    <ov-videoconference\n      [token]=\"token\"\n      [livekitUrl]=\"LIVEKIT_URL\"\n      (onTokenRequested)=\"onTokenRequested($event)\"\n    >\n      <div *ovToolbarAdditionalButtons style=\"text-align: center;\">\n        <button mat-icon-button (click)=\"toggleVideo()\">\n          <mat-icon>videocam</mat-icon>\n        </button>\n        <button mat-icon-button (click)=\"toggleAudio()\">\n          <mat-icon>mic</mat-icon>\n        </button>\n      </div>\n    </ov-videoconference>\n  `,\n  styles: [''],\n  standalone: true,\n    imports: [OpenViduComponentsModule, MatIconButton, MatIcon],\n})\nexport class AppComponent {\n  // For local development, leave these variables empty\n  // For production, configure them with correct URLs depending on your deployment\n\n  APPLICATION_SERVER_URL = '';  // (1)!\n  LIVEKIT_URL = ''; // (2)!\n\n  // The name of the room to join.\n  roomName = 'openvidu-toolbar-buttons';  // (3)!\n\n  // The token used to join the room.\n  token!: string; // (4)!\n\n  constructor(private httpClient: HttpClient, private participantService: ParticipantService) {\n    this.configureUrls();\n  }\n\n  private configureUrls() {\n    // If APPLICATION_SERVER_URL is not configured, use default value from local development\n    if (!this.APPLICATION_SERVER_URL) {\n      if (window.location.hostname === 'localhost') {\n        this.APPLICATION_SERVER_URL = 'http://localhost:6080/';\n      } else {\n        this.APPLICATION_SERVER_URL =\n          'https://' + window.location.hostname + ':6443/';\n      }\n    }\n\n    // If LIVEKIT_URL is not configured, use default value from local development\n    if (!this.LIVEKIT_URL) {\n      if (window.location.hostname === 'localhost') {\n        this.LIVEKIT_URL = 'ws://localhost:7880/';\n      } else {\n        this.LIVEKIT_URL = 'wss://' + window.location.hostname + ':7443/';\n      }\n    }\n  }\n\n  // Requests a token to join the room with the given participant name.\n  async onTokenRequested(participantName: string) { // (5)!\n    const { token } = await this.getToken(this.roomName, participantName);\n    this.token = token;\n  }\n\n  // Toggles the camera on and off.\n  async toggleVideo() { // (6)!\n    const isCameraEnabled = this.participantService.isMyCameraEnabled();\n    await this.participantService.setCameraEnabled(!isCameraEnabled);\n  }\n\n  // Toggles the microphone on and off.\n  async toggleAudio() { // (7)!\n    const isMicrophoneEnabled = this.participantService.isMyMicrophoneEnabled();\n    await this.participantService.setMicrophoneEnabled(!isMicrophoneEnabled);\n  }\n\n  // Retrieves a token to join the room with the given name and participant name.\n  getToken(roomName: string, participantName: string): Promise<any> { // (8)!\n    // Requesting token to the server application\n  }\n}\n
  1. APPLICATION_SERVER_URL: URL to communicate the client application with the server application to request OpenVidu tokens.
  2. LIVEKIT_URL: URL to communicate the client application with the LiveKit server.
  3. roomName: OpenVidu Room identifier. This is the room where the VideoconferenceComponent will connect.
  4. token: OpenVidu Token used to connect to the OpenVidu Room.
  5. onTokenRequested method that fires when the VideoconferenceComponent requests a token to connect to the OpenVidu Room.
  6. toggleVideo method that toggles the camera on and off.
  7. toggleAudio method that toggles the microphone on and off.
  8. getToken method that requests a token to the server application.

The app.component.ts file declares the following properties and methods:

Configure the URLs

For local development, leave APPLICATION_SERVER_URL and LIVEKIT_URL variables empty. The function configureUrls() will automatically configure them with default values. However, for production, you should configure these variables with the correct URLs depending on your deployment.

The OpenVidu Components Angular library provides a set of CSS variables that you can use to customize the appearance of the components. You can define these variables in your application's global styles file (e.g. styles.scss).

:root {\n    --ov-primary-color: #303030; /* Primary interface color */\n    --ov-secondary-color: #3e3f3f; /* Secondary interface color */\n    --ov-tertiary-color: #598eff; /* Tertiary accent color for elements */\n    --ov-warn-color: #eb5144; /* Warning color for alerts and notifications */\n    --ov-light-color: #e6e6e6; /* Light color for elements */\n\n    --ov-accent-color: #ffae35; /* Accent color for standout UI elements */\n\n    --ov-logo-background-color: #3a3d3d; /* Background color for the logo area */\n    --ov-text-color: #ffffff; /* Default text color */\n\n    --ov-panel-text-color: #1d1d1d; /* Text color for panel elements */\n    --ov-panel-background: #ffffff; /* Background color for panels */\n\n    --ov-buttons-radius: 50%; /* Border-radius for circular buttons */\n    --ov-leave-button-radius: 10px; /* Border-radius for the leave button */\n    --ov-video-radius: 5px; /* Border-radius for video elements */\n    --ov-panel-radius: 5px; /* Border-radius for panel elements */\n}\n
"},{"location":"docs/tutorials/angular-components/openvidu-toolbar-buttons/#adding-additional-buttons-to-the-toolbar","title":"Adding additional buttons to the toolbar","text":"

OpenVidu Components Angular provides a directive called *ovToolbarAdditionalButtons that allows you to add custom buttons to the toolbar.

In the app.component.ts file, you can see the following code snippet:

@Component({\n  selector: 'app-root',\n  template:`\n    <ov-videoconference\n      [token]=\"token\"\n      [livekitUrl]=\"LIVEKIT_URL\"\n      (onTokenRequested)=\"onTokenRequested($event)\"\n    >\n      <div *ovToolbarAdditionalButtons style=\"text-align: center;\">\n        <button mat-icon-button (click)=\"toggleVideo()\">\n          <mat-icon>videocam</mat-icon>\n        </button>\n        <button mat-icon-button (click)=\"toggleAudio()\">\n          <mat-icon>mic</mat-icon>\n        </button>\n      </div>\n\n    </ov-videoconference>\n  `,\n  styles: [''],\n  standalone: true,\n  imports: [OpenViduComponentsModule, MatIconButton, MatIcon],\n})\nexport class AppComponent {\n  // ...\n}\n

In this code snippet, the *ovToolbarAdditionalButtons directive is used to add two buttons to the toolbar. The mat-icon-button component from Angular Material is used to create the buttons. The toggleVideo and toggleAudio methods are called when the buttons are clicked.

"},{"location":"docs/tutorials/angular-components/openvidu-toolbar-panel-buttons/","title":"openvidu-toolbar-panel-buttons","text":"

Source code

The openvidu-toolbar-panel-buttons tutorial demonstrates how to add custom buttons to the right part of the default toolbar in the OpenVidu Components Angular library.

Adding toolbar buttons is made simple with the ToolbarAdditionalPanelButtonsDirective, which offers a straightforward way to add custom buttons to the ToolbarComponent.

OpenVidu Components - Toolbar Panel Buttons"},{"location":"docs/tutorials/angular-components/openvidu-toolbar-panel-buttons/#running-this-tutorial","title":"Running this tutorial","text":""},{"location":"docs/tutorials/angular-components/openvidu-toolbar-panel-buttons/#1-run-openvidu-server","title":"1. Run OpenVidu Server","text":"Run OpenVidu locallyDeploy OpenVidu

  1. Download OpenVidu

    git clone https://github.com/OpenVidu/openvidu-local-deployment\n

  2. Configure the local deployment

    Windows macOS Linux 
    cd openvidu-local-deployment/community\n.\\configure_lan_private_ip_windows.bat\n
    cd openvidu-local-deployment/community\n./configure_lan_private_ip_macos.sh\n
    cd openvidu-local-deployment/community\n./configure_lan_private_ip_linux.sh\n

  3. Run OpenVidu

    docker compose up\n

To use a production-ready OpenVidu deployment, visit the official deployment guide.

"},{"location":"docs/tutorials/angular-components/openvidu-toolbar-panel-buttons/#2-download-the-tutorial-code","title":"2. Download the tutorial code","text":"
git clone https://github.com/OpenVidu/openvidu-livekit-tutorials.git\ngit clone https://github.com/OpenVidu/openvidu-tutorials.git\n
"},{"location":"docs/tutorials/angular-components/openvidu-toolbar-panel-buttons/#3-run-the-server-application","title":"3. Run the server application","text":"Node Go Ruby Java Python Rust PHP .NET

To run this server application, you need Node installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/node\n
  2. Install dependencies 
    npm install\n
  3. Run the application 
    npm start\n

To run this server application, you need Go installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/go\n
  2. Run the application 
    go run main.go\n

To run this server application, you need Ruby installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/ruby\n
  2. Install dependencies 
    bundle install\n
  3. Run the application 
    ruby app.rb\n

To run this server application, you need Java and Maven installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/java\n
  2. Run the application 
    mvn spring-boot:run\n

To run this server application, you need Python 3 installed on your device.

  1. Navigate into the server directory

    cd openvidu-livekit-tutorials/application-server/python\n

  2. Create a python virtual environment

    python -m venv venv\n

  3. Activate the virtual environment

    Windows macOS Linux 
    .\\venv\\Scripts\\activate\n
    . ./venv/bin/activate\n
    . ./venv/bin/activate\n

  4. Install dependencies

    pip install -r requirements.txt\n

  5. Run the application

    python app.py\n

To run this server application, you need Rust installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/rust\n
  2. Run the application 
    cargo run\n

To run this server application, you need PHP and Composer installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/php\n
  2. Install dependencies 
    composer install\n
  3. Run the application 
    composer start\n

To run this server application, you need .NET installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/dotnet\n
  2. Run the application 
    dotnet run\n

Warning

This .NET server application needs the LIVEKIT_API_SECRET env variable to be at least 32 characters long. Make sure to update it here and in your OpenVidu Server.

"},{"location":"docs/tutorials/angular-components/openvidu-toolbar-panel-buttons/#4-run-the-openvidu-toolbar-panel-buttons-tutorial","title":"4. Run the openvidu-toolbar-panel-buttons tutorial","text":"

To run the client application tutorial, you need Node installed on your development computer.

  1. Navigate into the application client directory:

      cd openvidu-tutorials/openvidu-components/openvidu-toolbar-panel-buttons\n

  2. Install the required dependencies:

      npm install\n

  3. Serve the application:

      npm start\n

Once the server is up and running, you can test the application by visiting http://localhost:5080.

Accessing your application client from other devices in your local network

One advantage of running OpenVidu locally is that you can test your application client with other devices in your local network very easily without worrying about SSL certificates.

Access your application client through https://xxx-yyy-zzz-www.openvidu-local.dev:5443, where xxx-yyy-zzz-www part of the domain is your LAN private IP address with dashes (-) instead of dots (.). For more information, see section Accessing your app from other devices in your network.

"},{"location":"docs/tutorials/angular-components/openvidu-toolbar-panel-buttons/#understanding-the-code","title":"Understanding the code","text":"

This tutorial is an Angular project generated with Angular CLI tool. Therefore, you will see many configuration files and other components that are not the primary focus of this tutorial. We will concentrate on the following files in the src directory:

To use OpenVidu Components Angular in your application, you need to install the library and import the OpenViduComponentsModule in your Angular module. Let's see how to do this:

  1. Create an Angular Project (version 17 or higher)

    To begin, you will need to create a new Angular project if you haven't already. Ensure you have Node.js and the Angular CLI installed. Then, run the following command to create a new Angular project:

    ng new your-project-name\n

    Replace your-project-name with the desired name for your project.

  2. Add Angular Material to your project

    OpenVidu Components Angular needs Angular Material, which provides a range of UI components. To add Angular Material to your project, navigate to your project directory and run:

    ng add @angular/material\n

  3. Install OpenVidu Components Angular

    With your Angular project set up, it's time to add videoconferencing capabilities with OpenVidu Components Angular. Install the library using npm:

    npm install openvidu-components-angular\n

  4. Import and use OpenVidu Components Angular

    To use OpenVidu Components Angular in your application, you need to:

    1. Import the OpenViduComponentsModule in your Angular application.
    2. Configure the module with the OpenViduComponentsConfig object.
    3. Add the component to your template file.
    4. Assign the OpenVidu token and LiveKit URL to the component.
    5. Customize the appearance of the components using CSS variables.
main.tsapp.component.tsstyles.scss

In your main.ts application file, import the it and configure it as follows:

// Other imports ...\n\nimport { OpenViduComponentsModule, OpenViduComponentsConfig } from 'openvidu-components-angular';\n\nconst config: OpenViduComponentsConfig = {\n    production: true,\n};\n\nbootstrapApplication(AppComponent, {\n    providers: [\n        importProvidersFrom(\n            OpenViduComponentsModule.forRoot(config)\n            // Other imports ...\n        ),\n        provideAnimations(),\n    ],\n}).catch((err) => console.error(err));\n

Use the ov-videoconference component to create a videoconference. This component requires a token to connect to the OpenVidu Room. The AppComponent class is responsible for requesting the token and passing it to the ov-videoconference component.

import { MatIcon } from '@angular/material/icon';\nimport { MatIconButton } from '@angular/material/button';\nimport { OpenViduComponentsModule } from 'openvidu-components-angular';\n\n@Component({\n  selector: 'app-root',\n  template:`\n      <ov-videoconference\n        [token]=\"token\"\n        [livekitUrl]=\"LIVEKIT_URL\"\n        [toolbarDisplayRoomName]=\"false\"\n        (onTokenRequested)=\"onTokenRequested($event)\"\n      >\n        <div *ovToolbarAdditionalPanelButtons style=\"text-align: center;\">\n          <button mat-icon-button (click)=\"onButtonClicked()\">\n            <mat-icon>star</mat-icon>\n          </button>\n        </div>\n      </ov-videoconference>\n  `,\n  styles: [''],\n  standalone: true,\n    imports: [OpenViduComponentsModule, MatIconButton, MatIcon],\n})\nexport class AppComponent {\n  // For local development, leave these variables empty\n  // For production, configure them with correct URLs depending on your deployment\n\n  APPLICATION_SERVER_URL = '';  // (1)!\n  LIVEKIT_URL = ''; // (2)!\n\n  // The name of the room to join.\n  roomName = 'openvidu-toolbar-panel-buttons';  // (3)!\n\n  // The token used to join the room.\n  token!: string; // (4)!\n\n  constructor(private httpClient: HttpClient) {\n    this.configureUrls();\n  }\n\n  private configureUrls() {\n    // If APPLICATION_SERVER_URL is not configured, use default value from local development\n    if (!this.APPLICATION_SERVER_URL) {\n      if (window.location.hostname === 'localhost') {\n        this.APPLICATION_SERVER_URL = 'http://localhost:6080/';\n      } else {\n        this.APPLICATION_SERVER_URL =\n          'https://' + window.location.hostname + ':6443/';\n      }\n    }\n\n    // If LIVEKIT_URL is not configured, use default value from local development\n    if (!this.LIVEKIT_URL) {\n      if (window.location.hostname === 'localhost') {\n        this.LIVEKIT_URL = 'ws://localhost:7880/';\n      } else {\n        this.LIVEKIT_URL = 'wss://' + window.location.hostname + ':7443/';\n      }\n    }\n  }\n\n  // Requests a token to join the room with the given participant name.\n  async onTokenRequested(participantName: string) { // (5)!\n    const { token } = await this.getToken(this.roomName, participantName);\n    this.token = token;\n  }\n\n  // Method to handle button click\n  onButtonClicked() { // (6)!\n    alert('button clicked');\n  }\n\n  // Retrieves a token to join the room with the given name and participant name.\n  getToken(roomName: string, participantName: string): Promise<any> { // (7)!\n    // Requesting token to the server application\n  }\n}\n
  1. APPLICATION_SERVER_URL: URL to communicate the client application with the server application to request OpenVidu tokens.
  2. LIVEKIT_URL: URL to communicate the client application with the LiveKit server.
  3. roomName: OpenVidu Room identifier. This is the room where the VideoconferenceComponent will connect.
  4. token: OpenVidu Token used to connect to the OpenVidu Room.
  5. onTokenRequested method that fires when the VideoconferenceComponent requests a token to connect to the OpenVidu Room.
  6. onButtonClicked method that fires when the custom button is clicked.
  7. getToken method that requests a token to the server application.

The app.component.ts file declares the following properties and methods:

Configure the URLs

For local development, leave APPLICATION_SERVER_URL and LIVEKIT_URL variables empty. The function configureUrls() will automatically configure them with default values. However, for production, you should configure these variables with the correct URLs depending on your deployment.

The OpenVidu Components Angular library provides a set of CSS variables that you can use to customize the appearance of the components. You can define these variables in your application's global styles file (e.g. styles.scss).

:root {\n    --ov-primary-color: #303030; /* Primary interface color */\n    --ov-secondary-color: #3e3f3f; /* Secondary interface color */\n    --ov-tertiary-color: #598eff; /* Tertiary accent color for elements */\n    --ov-warn-color: #eb5144; /* Warning color for alerts and notifications */\n    --ov-light-color: #e6e6e6; /* Light color for elements */\n\n    --ov-accent-color: #ffae35; /* Accent color for standout UI elements */\n\n    --ov-logo-background-color: #3a3d3d; /* Background color for the logo area */\n    --ov-text-color: #ffffff; /* Default text color */\n\n    --ov-panel-text-color: #1d1d1d; /* Text color for panel elements */\n    --ov-panel-background: #ffffff; /* Background color for panels */\n\n    --ov-buttons-radius: 50%; /* Border-radius for circular buttons */\n    --ov-leave-button-radius: 10px; /* Border-radius for the leave button */\n    --ov-video-radius: 5px; /* Border-radius for video elements */\n    --ov-panel-radius: 5px; /* Border-radius for panel elements */\n}\n
"},{"location":"docs/tutorials/angular-components/openvidu-toolbar-panel-buttons/#adding-custom-buttons-to-the-toolbar","title":"Adding custom buttons to the toolbar","text":"

OpenVidu Components Angular provides a directive called *ovToolbarAdditionalPanelButtons that allows you to add custom buttons to the toolbar. This directive can be used to add buttons to the right part of the toolbar.

In the app.component.ts file, you can see the following code snippet:

@Component({\n    selector: 'app-root',\n    template: `\n        <ov-videoconference\n            [token]=\"token\"\n            [livekitUrl]=\"LIVEKIT_URL\"\n            [toolbarDisplayRoomName]=\"false\"\n            (onTokenRequested)=\"onTokenRequested($event)\"\n        >\n            <div *ovToolbarAdditionalPanelButtons style=\"text-align: center;\">\n                <button mat-icon-button (click)=\"onButtonClicked()\">\n                    <mat-icon>star</mat-icon>\n                </button>\n            </div>\n        </ov-videoconference>\n    `,\n    styles: [''],\n    standalone: true,\n    imports: [OpenViduComponentsModule, MatIconButton, MatIcon],\n})\nexport class AppComponent {\n    // ...\n}\n

In this code snippet, the *ovToolbarAdditionalPanelButtons directive is used to add a custom button to the right part of the toolbar and is displayed as a star icon, and the onButtonClicked method is called when the button is clicked.

"},{"location":"docs/tutorials/application-client/","title":"Application client tutorials","text":"

Every application client below shares the same core functionality:

Every application client below is interchangeable with the others, because:

JavaScript

React

Angular

Vue

Electron

Ionic

"},{"location":"docs/tutorials/application-client/angular/","title":"openvidu-angular","text":"

Source code

This tutorial is a simple video-call application built with Angular that allows:

It uses the LiveKit JS SDK to connect to the LiveKit server and interact with the video call room.

"},{"location":"docs/tutorials/application-client/angular/#running-this-tutorial","title":"Running this tutorial","text":""},{"location":"docs/tutorials/application-client/angular/#1-run-openvidu-server","title":"1. Run OpenVidu Server","text":"Run OpenVidu locallyDeploy OpenVidu

  1. Download OpenVidu

    git clone https://github.com/OpenVidu/openvidu-local-deployment\n

  2. Configure the local deployment

    Windows macOS Linux 
    cd openvidu-local-deployment/community\n.\\configure_lan_private_ip_windows.bat\n
    cd openvidu-local-deployment/community\n./configure_lan_private_ip_macos.sh\n
    cd openvidu-local-deployment/community\n./configure_lan_private_ip_linux.sh\n

  3. Run OpenVidu

    docker compose up\n

To use a production-ready OpenVidu deployment, visit the official deployment guide.

"},{"location":"docs/tutorials/application-client/angular/#2-download-the-tutorial-code","title":"2. Download the tutorial code","text":"
git clone https://github.com/OpenVidu/openvidu-livekit-tutorials.git\n
"},{"location":"docs/tutorials/application-client/angular/#3-run-a-server-application","title":"3. Run a server application","text":"Node Go Ruby Java Python Rust PHP .NET

To run this server application, you need Node installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/node\n
  2. Install dependencies 
    npm install\n
  3. Run the application 
    npm start\n

To run this server application, you need Go installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/go\n
  2. Run the application 
    go run main.go\n

To run this server application, you need Ruby installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/ruby\n
  2. Install dependencies 
    bundle install\n
  3. Run the application 
    ruby app.rb\n

To run this server application, you need Java and Maven installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/java\n
  2. Run the application 
    mvn spring-boot:run\n

To run this server application, you need Python 3 installed on your device.

  1. Navigate into the server directory

    cd openvidu-livekit-tutorials/application-server/python\n

  2. Create a python virtual environment

    python -m venv venv\n

  3. Activate the virtual environment

    Windows macOS Linux 
    .\\venv\\Scripts\\activate\n
    . ./venv/bin/activate\n
    . ./venv/bin/activate\n

  4. Install dependencies

    pip install -r requirements.txt\n

  5. Run the application

    python app.py\n

To run this server application, you need Rust installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/rust\n
  2. Run the application 
    cargo run\n

To run this server application, you need PHP and Composer installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/php\n
  2. Install dependencies 
    composer install\n
  3. Run the application 
    composer start\n

To run this server application, you need .NET installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/dotnet\n
  2. Run the application 
    dotnet run\n

Warning

This .NET server application needs the LIVEKIT_API_SECRET env variable to be at least 32 characters long. Make sure to update it here and in your OpenVidu Server.

"},{"location":"docs/tutorials/application-client/angular/#4-run-the-client-application","title":"4. Run the client application","text":"

To run the client application tutorial, you need Node installed on your development computer.

  1. Navigate into the application client directory:

    cd openvidu-livekit-tutorials/application-client/openvidu-angular\n

  2. Install the required dependencies:

    npm install\n

  3. Serve the application:

    npm start\n

Once the server is up and running, you can test the application by visiting http://localhost:5080. You should see a screen like this:

Accessing your application client from other devices in your local network

One advantage of running OpenVidu locally is that you can test your application client with other devices in your local network very easily without worrying about SSL certificates.

Access your application client through https://xxx-yyy-zzz-www.openvidu-local.dev:5443, where xxx-yyy-zzz-www part of the domain is your LAN private IP address with dashes (-) instead of dots (.). For more information, see section Accessing your app from other devices in your network.

"},{"location":"docs/tutorials/application-client/angular/#understanding-the-code","title":"Understanding the code","text":"

This Angular project has been created using the Angular CLI tool. You may come across various configuration files and other items that are not essential for this tutorial. Our focus will be on the key files located within the src/app/ directory:

To use the LiveKit JS SDK in an Angular application, you need to install the livekit-client package. This package provides the necessary classes and methods to interact with the LiveKit server. You can install it using the following command:

npm install livekit-client\n

Now let's see the code of the app.component.ts file:

app.component.ts
type TrackInfo = { // (1)!\n    trackPublication: RemoteTrackPublication;\n    participantIdentity: string;\n};\n\n// For local development, leave these variables empty\n// For production, configure them with correct URLs depending on your deployment\nvar APPLICATION_SERVER_URL = ''; // (2)!\nvar LIVEKIT_URL = ''; // (3)!\n\n@Component({ // (4)!\n    selector: 'app-root',\n    standalone: true,\n    imports: [ReactiveFormsModule, AudioComponent, VideoComponent],\n    templateUrl: './app.component.html',\n    styleUrl: './app.component.css',\n})\nexport class AppComponent implements OnDestroy {\n    roomForm = new FormGroup({ // (5)!\n        roomName: new FormControl('Test Room', Validators.required),\n        participantName: new FormControl('Participant' + Math.floor(Math.random() * 100), Validators.required),\n    });\n\n    room = signal<Room | undefined>(undefined); // (6)!\n    localTrack = signal<LocalVideoTrack | undefined>(undefined); // (7)!\n    remoteTracksMap = signal<Map<string, TrackInfo>>(new Map()); // (8)!\n\n    constructor(private httpClient: HttpClient) {\n        this.configureUrls();\n    }\n\n    configureUrls() {\n        // If APPLICATION_SERVER_URL is not configured, use default value from local development\n        if (!APPLICATION_SERVER_URL) {\n            if (window.location.hostname === 'localhost') {\n                APPLICATION_SERVER_URL = 'http://localhost:6080/';\n            } else {\n                APPLICATION_SERVER_URL = 'https://' + window.location.hostname + ':6443/';\n            }\n        }\n\n        // If LIVEKIT_URL is not configured, use default value from local development\n        if (!LIVEKIT_URL) {\n            if (window.location.hostname === 'localhost') {\n                LIVEKIT_URL = 'ws://localhost:7880/';\n            } else {\n                LIVEKIT_URL = 'wss://' + window.location.hostname + ':7443/';\n            }\n        }\n    }\n
  1. TrackInfo type, which groups a track publication with the participant's identity.
  2. The URL of the application server.
  3. The URL of the LiveKit server.
  4. Angular component decorator that defines the AppComponent class and associates the HTML and CSS files with it.
  5. The roomForm object, which is a form group that contains the roomName and participantName fields. These fields are used to join a video call room.
  6. The room object, which represents the video call room.
  7. The local video track, which represents the user's camera.
  8. Map that links track SIDs with TrackInfo objects. This map is used to store remote tracks and their associated participant identities.

The app.component.ts file defines the following variables:

Configure the URLs

For local development, leave APPLICATION_SERVER_URL and LIVEKIT_URL variables empty. The function configureUrls() will automatically configure them with default values. However, for production, you should configure these variables with the correct URLs depending on your deployment.

"},{"location":"docs/tutorials/application-client/angular/#joining-a-room","title":"Joining a Room","text":"

After the user specifies their participant name and the name of the room they want to join, when they click the Join button, the joinRoom() method is called:

app.component.ts
async joinRoom() {\n    // Initialize a new Room object\n    const room = new Room();\n    this.room.set(room); // (1)!\n\n    // Specify the actions when events take place in the room\n    // On every new Track received...\n    this.room.on(\n        RoomEvent.TrackSubscribed,\n        (_track: RemoteTrack, publication: RemoteTrackPublication, participant: RemoteParticipant) => { // (2)!\n            this.remoteTracksMap.update((map) => {\n                map.set(publication.trackSid, {\n                    trackPublication: publication,\n                    participantIdentity: participant.identity,\n                });\n                return map;\n            });\n        }\n    );\n\n    // On every new Track destroyed...\n    room.on(RoomEvent.TrackUnsubscribed, (_track: RemoteTrack, publication: RemoteTrackPublication) => { // (3)!\n        this.remoteTracksMap.update((map) => {\n            map.delete(publication.trackSid);\n            return map;\n        });\n    });\n\n    try {\n        // Get the room name and participant name from the form\n        const roomName = this.roomForm.value.roomName!; // (4)!\n        const participantName = this.roomForm.value.participantName!;\n\n        // Get a token from your application server with the room name and participant name\n        const token = await this.getToken(roomName, participantName); // (5)!\n\n        // Connect to the room with the LiveKit URL and the token\n        await room.connect(LIVEKIT_URL, token); // (6)!\n\n        // Publish your camera and microphone\n        await room.localParticipant.enableCameraAndMicrophone(); // (7)!\n        this.localTrack.set(room.localParticipant.videoTrackPublications.values().next().value.videoTrack);\n    } catch (error: any) {\n        console.log(\n            'There was an error connecting to the room:',\n            error?.error?.errorMessage || error?.message || error\n        );\n        await this.leaveRoom();\n    }\n}\n
  1. Initialize a new Room object.
  2. Event handling for when a new track is received in the room.
  3. Event handling for when a track is destroyed.
  4. Get the room name and participant name from the form.
  5. Get a token from the application server with the room name and participant name.
  6. Connect to the room with the LiveKit URL and the token.
  7. Publish your camera and microphone.

The joinRoom() method performs the following actions:

  1. It creates a new Room object. This object represents the video call room.

    Info

    When the room object is defined, the HTML template is automatically updated hiding the \"Join room\" page and showing the \"Room\" layout.

  2. Event handling is configured for different scenarios within the room. These events are fired when new tracks are subscribed to and when existing tracks are unsubscribed.

    These event handlers are essential for managing the behavior of tracks within the video call. You can further extend the event handling as needed for your application.

    Take a look at all events

    You can take a look at all the events in the Livekit Documentation

  3. It retrieves the room name and participant name from the form.

  4. It requests a token from the application server using the room name and participant name. This is done by calling the getToken() method:

    app.component.ts
    /**\n * --------------------------------------------\n * GETTING A TOKEN FROM YOUR APPLICATION SERVER\n * --------------------------------------------\n * The method below request the creation of a token to\n * your application server. This prevents the need to expose\n * your LiveKit API key and secret to the client side.\n *\n * In this sample code, there is no user control at all. Anybody could\n * access your application server endpoints. In a real production\n * environment, your application server must identify the user to allow\n * access to the endpoints.\n */\nasync getToken(roomName: string, participantName: string): Promise<string> {\n    const response = await lastValueFrom(\n        this.httpClient.post<{ token: string }>(APPLICATION_SERVER_URL + 'token', { roomName, participantName })\n    );\n    return response.token;\n}\n

    This function sends a POST request using HttpClient to the application server's /token endpoint. The request body contains the room name and participant name. The server responds with a token that is used to connect to the room.

  5. It connects to the room using the LiveKit URL and the token.

  6. It publishes the camera and microphone tracks to the room using room.localParticipant.enableCameraAndMicrophone(), which asks the user for permission to access their camera and microphone at the same time. The local video track is then stored in the localTrack variable.
"},{"location":"docs/tutorials/application-client/angular/#displaying-video-and-audio-tracks","title":"Displaying Video and Audio Tracks","text":"

In order to display participants' video and audio tracks, the app.component.html file integrates the VideoComponent and AudioComponent.

app.component.html
<div id=\"layout-container\">\n    @if (localTrack()) {\n    <video-component\n        [track]=\"localTrack()!\"\n        [participantIdentity]=\"roomForm.value.participantName!\"\n        [local]=\"true\"\n    ></video-component>\n    }\n    @for (remoteTrack of remoteTracksMap().values(); track remoteTrack.trackPublication.trackSid) {\n        @if (remoteTrack.trackPublication.kind === 'video') {\n        <video-component\n            [track]=\"remoteTrack.trackPublication.videoTrack!\"\n            [participantIdentity]=\"remoteTrack.participantIdentity\"\n        ></video-component>\n        } @else {\n        <audio-component [track]=\"remoteTrack.trackPublication.audioTrack!\" hidden></audio-component>\n        }\n    }\n</div>\n

This code snippet does the following:

Let's see now the code of the video.component.ts file:

video.component.ts
// (1)!\n@Component({\n    selector: 'video-component',\n    standalone: true,\n    imports: [],\n    templateUrl: './video.component.html',\n    styleUrl: './video.component.css',\n})\nexport class VideoComponent implements AfterViewInit, OnDestroy {\n    videoElement = viewChild<ElementRef<HTMLVideoElement>>('videoElement'); // (2)!\n\n    track = input.required<LocalVideoTrack | RemoteVideoTrack>(); // (3)!\n    participantIdentity = input.required<string>(); // (4)!\n    local = input(false); // (5)!\n\n    ngAfterViewInit() {\n        if (this.videoElement()) {\n            this.track().attach(this.videoElement()!.nativeElement); // (6)!\n        }\n    }\n\n    ngOnDestroy() {\n        this.track().detach(); // (7)!\n    }\n}\n
  1. Angular component decorator that defines the VideoComponent class and associates the HTML and CSS files with it.
  2. The reference to the video element in the HTML template.
  3. The video track object, which can be a LocalVideoTrack or a RemoteVideoTrack.
  4. The participant identity associated with the video track.
  5. A boolean flag that indicates whether the video track belongs to the local participant.
  6. Attach the video track to the video element when the track is set.
  7. Detach the video track when the component is destroyed.

The VideoComponent does the following:

Finally, let's see the code of the audio.component.ts file:

audio.component.ts
// (1)!\n@Component({\n    selector: 'audio-component',\n    standalone: true,\n    imports: [],\n    templateUrl: './audio.component.html',\n    styleUrl: './audio.component.css',\n})\nexport class AudioComponent implements AfterViewInit, OnDestroy {\n    audioElement = viewChild<ElementRef<HTMLAudioElement>>('audioElement'); // (2)!\n\n    track = input.required<LocalAudioTrack | RemoteAudioTrack>(); // (3)!\n\n    ngAfterViewInit() {\n        if (this.audioElement()) {\n            this.track().attach(this.audioElement()!.nativeElement); // (4)!\n        }\n    }\n\n    ngOnDestroy() {\n        this.track().detach(); // (5)!\n    }\n}\n
  1. Angular component decorator that defines the AudioComponent class and associates the HTML and CSS files with it.
  2. The reference to the audio element in the HTML template.
  3. The audio track object, which can be a RemoteAudioTrack or a LocalAudioTrack, although in this case, it will always be a RemoteAudioTrack.
  4. Attach the audio track to the audio element when view is initialized.
  5. Detach the audio track when the component is destroyed.

The AudioComponent class is similar to the VideoComponent class, but it is used to display audio tracks. It attaches the audio track to the audio element when view is initialized and detaches the audio track when the component is destroyed.

"},{"location":"docs/tutorials/application-client/angular/#leaving-the-room","title":"Leaving the Room","text":"

When the user wants to leave the room, they can click the Leave Room button. This action calls the leaveRoom() method:

app.component.ts
async leaveRoom() {\n    // Leave the room by calling 'disconnect' method over the Room object\n    await this.room()?.disconnect(); // (1)!\n\n    // Reset all variables\n    this.room.set(undefined); // (2)!\n    this.localTrack.set(undefined);\n    this.remoteTracksMap.set(new Map());\n}\n\n@HostListener('window:beforeunload') // (3)!\nasync ngOnDestroy() {\n    // On window closed or component destroyed, leave the room\n    await this.leaveRoom();\n}\n
  1. Disconnect the user from the room.
  2. Reset all variables.
  3. Call the leaveRoom() method when the user closes the browser window or navigates to another page.

The leaveRoom() method performs the following actions:

The window.onbeforeunload event and the ngOnDestroy() lifecycle hook are used to ensure that the user leaves the room when the browser window is closed or the component is destroyed.

"},{"location":"docs/tutorials/application-client/electron/","title":"openvidu-electron","text":"

Source code

This tutorial is a simple video-call application built with Electron that allows:

It uses the LiveKit JS SDK to connect to the LiveKit server and interact with the video call room.

"},{"location":"docs/tutorials/application-client/electron/#running-this-tutorial","title":"Running this tutorial","text":""},{"location":"docs/tutorials/application-client/electron/#1-run-openvidu-server","title":"1. Run OpenVidu Server","text":"Run OpenVidu locallyDeploy OpenVidu

  1. Download OpenVidu

    git clone https://github.com/OpenVidu/openvidu-local-deployment\n

  2. Configure the local deployment

    Windows macOS Linux 
    cd openvidu-local-deployment/community\n.\\configure_lan_private_ip_windows.bat\n
    cd openvidu-local-deployment/community\n./configure_lan_private_ip_macos.sh\n
    cd openvidu-local-deployment/community\n./configure_lan_private_ip_linux.sh\n

  3. Run OpenVidu

    docker compose up\n

To use a production-ready OpenVidu deployment, visit the official deployment guide.

"},{"location":"docs/tutorials/application-client/electron/#2-download-the-tutorial-code","title":"2. Download the tutorial code","text":"
git clone https://github.com/OpenVidu/openvidu-livekit-tutorials.git\n
"},{"location":"docs/tutorials/application-client/electron/#3-run-a-server-application","title":"3. Run a server application","text":"Node Go Ruby Java Python Rust PHP .NET

To run this server application, you need Node installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/node\n
  2. Install dependencies 
    npm install\n
  3. Run the application 
    npm start\n

To run this server application, you need Go installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/go\n
  2. Run the application 
    go run main.go\n

To run this server application, you need Ruby installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/ruby\n
  2. Install dependencies 
    bundle install\n
  3. Run the application 
    ruby app.rb\n

To run this server application, you need Java and Maven installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/java\n
  2. Run the application 
    mvn spring-boot:run\n

To run this server application, you need Python 3 installed on your device.

  1. Navigate into the server directory

    cd openvidu-livekit-tutorials/application-server/python\n

  2. Create a python virtual environment

    python -m venv venv\n

  3. Activate the virtual environment

    Windows macOS Linux 
    .\\venv\\Scripts\\activate\n
    . ./venv/bin/activate\n
    . ./venv/bin/activate\n

  4. Install dependencies

    pip install -r requirements.txt\n

  5. Run the application

    python app.py\n

To run this server application, you need Rust installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/rust\n
  2. Run the application 
    cargo run\n

To run this server application, you need PHP and Composer installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/php\n
  2. Install dependencies 
    composer install\n
  3. Run the application 
    composer start\n

To run this server application, you need .NET installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/dotnet\n
  2. Run the application 
    dotnet run\n

Warning

This .NET server application needs the LIVEKIT_API_SECRET env variable to be at least 32 characters long. Make sure to update it here and in your OpenVidu Server.

"},{"location":"docs/tutorials/application-client/electron/#4-run-the-client-application","title":"4. Run the client application","text":"

To run the client application tutorial, you need Node installed on your development computer.

  1. Navigate into the application client directory:

    cd openvidu-livekit-tutorials/application-client/openvidu-electron\n

  2. Install the required dependencies:

    npm install\n

  3. Run the application:

    npm start\n

The application will seamlessly initiate as a native desktop program, adapting itself to the specific operating system you are using. Once the application is open, you should see a screen like this:

Accessing your application client from other devices in your local network

One advantage of running OpenVidu locally is that you can test your application client with other devices in your local network very easily without worrying about SSL certificates.

Access your application client through https://xxx-yyy-zzz-www.openvidu-local.dev:5443, where xxx-yyy-zzz-www part of the domain is your LAN private IP address with dashes (-) instead of dots (.). For more information, see section Accessing your app from other devices in your network.

"},{"location":"docs/tutorials/application-client/electron/#understanding-the-code","title":"Understanding the code","text":"

This Electron project has been created using electron-forge. As an Electron application, the code is divided into two main parts, the main process and the renderer process. The most important files are located within the src/ directory:

To use the LiveKit JS SDK in an Electron application, you need to install the livekit-client package. This package provides the necessary classes and methods to interact with the LiveKit server. You can install it using the following command:

npm install livekit-client\n

Now let's see the code of the app.js file:

app.js
const { Room, RoomEvent } = require(\"livekit-client\"); // (1)!\n\n// Configure this constants with correct URLs depending on your deployment\nconst APPLICATION_SERVER_URL = \"http://localhost:6080/\"; // (2)!\nconst LIVEKIT_URL = \"ws://localhost:7880/\"; // (3)!\n\nvar room; // (4)!\n
  1. Import the Room and RoomEvent classes from the livekit-client package.
  2. The URL of the application server.
  3. The URL of the LiveKit server.
  4. The room object, which represents the video call room.

The app.js file defines the following variables:

Configure the URLs

You should configure APPLICATION_SERVER_URL and LIVEKIT_URL constants with the correct URLs depending on your deployment.

"},{"location":"docs/tutorials/application-client/electron/#joining-a-room","title":"Joining a Room","text":"

After the user specifies their participant name and the name of the room they want to join, when they click the Join button, the joinRoom() function is called:

app.js
async function joinRoom() {\n    // Disable 'Join' button\n    document.getElementById(\"join-button\").disabled = true;\n    document.getElementById(\"join-button\").innerText = \"Joining...\";\n\n    // Initialize a new Room object\n    room = new Room(); // (1)!\n\n    // Specify the actions when events take place in the room\n    // On every new Track received...\n    room.on(RoomEvent.TrackSubscribed, (track, _publication, participant) => {\n        // (2)!\n        addTrack(track, participant.identity);\n    });\n\n    // On every new Track destroyed...\n    room.on(RoomEvent.TrackUnsubscribed, (track, _publication, participant) => {\n        // (3)!\n        track.detach();\n        document.getElementById(track.sid)?.remove();\n\n        if (track.kind === \"video\") {\n            removeVideoContainer(participant.identity);\n        }\n    });\n\n    try {\n        // Get the room name and participant name from the form\n        const roomName = document.getElementById(\"room-name\").value; // (4)!\n        const userName = document.getElementById(\"participant-name\").value;\n\n        // Get a token from your application server with the room name and participant name\n        const token = await getToken(roomName, userName); // (5)!\n\n        // Connect to the room with the LiveKit URL and the token\n        await room.connect(LIVEKIT_URL, token); // (6)!\n\n        // Hide the 'Join room' page and show the 'Room' page\n        document.getElementById(\"room-title\").innerText = roomName; // (7)!\n        document.getElementById(\"join\").hidden = true;\n        document.getElementById(\"room\").hidden = false;\n\n        // Publish your camera and microphone\n        await room.localParticipant.enableCameraAndMicrophone(); // (8)!\n        const localVideoTrack = this.room.localParticipant.videoTrackPublications.values().next().value.track;\n        addTrack(localVideoTrack, userName, true);\n    } catch (error) {\n        console.log(\"There was an error connecting to the room:\", error.message);\n    }\n}\n
  1. Initialize a new Room object.
  2. Event handling for when a new track is received in the room.
  3. Event handling for when a track is destroyed.
  4. Get the room name and participant name from the form.
  5. Get a token from the application server with the room name and participant name.
  6. Connect to the room with the LiveKit URL and the token.
  7. Hide the \"Join room\" page and show the \"Room\" page.
  8. Publish your camera and microphone.

The joinRoom() function performs the following actions:

  1. It creates a new Room object. This object represents the video call room.

  2. Event handling is configured for different scenarios within the room. These events are fired when new tracks are subscribed to and when existing tracks are unsubscribed.

    app.js
    function addTrack(track, participantIdentity, local = false) {\n    const element = track.attach(); // (1)!\n    element.id = track.sid;\n\n    /* If the track is a video track, we create a container and append the video element to it\n    with the participant's identity */\n    if (track.kind === \"video\") {\n        const videoContainer = createVideoContainer(participantIdentity, local);\n        videoContainer.append(element);\n        appendParticipantData(videoContainer, participantIdentity + (local ? \" (You)\" : \"\"));\n    } else {\n        document.getElementById(\"layout-container\").append(element);\n    }\n}\n
    1. Attach the track to an HTML element.
    app.js
    function createVideoContainer(participantIdentity, local = false) {\n    const videoContainer = document.createElement(\"div\");\n    videoContainer.id = `camera-${participantIdentity}`;\n    videoContainer.className = \"video-container\";\n    const layoutContainer = document.getElementById(\"layout-container\");\n\n    if (local) {\n        layoutContainer.prepend(videoContainer);\n    } else {\n        layoutContainer.append(videoContainer);\n    }\n\n    return videoContainer;\n}\n\nfunction appendParticipantData(videoContainer, participantIdentity) {\n    const dataElement = document.createElement(\"div\");\n    dataElement.className = \"participant-data\";\n    dataElement.innerHTML = `<p>${participantIdentity}</p>`;\n    videoContainer.prepend(dataElement);\n}\n
    app.js
    function removeVideoContainer(participantIdentity) {\n    const videoContainer = document.getElementById(`camera-${participantIdentity}`);\n    videoContainer?.remove();\n}\n

    These event handlers are essential for managing the behavior of tracks within the video call.

    Take a look at all events

    You can take a look at all the events in the Livekit Documentation

  3. It retrieves the room name and participant name from the form.

  4. It requests a token from the application server using the room name and participant name. This is done by calling the getToken() function:

    app.js
    /**\n * --------------------------------------------\n * GETTING A TOKEN FROM YOUR APPLICATION SERVER\n * --------------------------------------------\n * The method below request the creation of a token to\n * your application server. This prevents the need to expose\n * your LiveKit API key and secret to the client side.\n *\n * In this sample code, there is no user control at all. Anybody could\n * access your application server endpoints. In a real production\n * environment, your application server must identify the user to allow\n * access to the endpoints.\n */\nasync function getToken(roomName, participantName) {\n    const response = await fetch(APPLICATION_SERVER_URL + \"token\", {\n        method: \"POST\",\n        headers: {\n            \"Content-Type\": \"application/json\"\n        },\n        body: JSON.stringify({\n            roomName,\n            participantName\n        })\n    });\n\n    if (!response.ok) {\n        const error = await response.json();\n        throw new Error(`Failed to get token: ${error.errorMessage}`);\n    }\n\n    const token = await response.json();\n    return token.token;\n}\n

    This function sends a POST request using fetch() to the application server's /token endpoint. The request body contains the room name and participant name. The server responds with a token that is used to connect to the room.

  5. It connects to the room using the LiveKit URL and the token.

  6. It updates the UI to hide the \"Join room\" page and show the \"Room\" layout.
  7. It publishes the camera and microphone tracks to the room using room.localParticipant.enableCameraAndMicrophone(), which asks the user for permission to access their camera and microphone at the same time. The local video track is then added to the layout.
"},{"location":"docs/tutorials/application-client/electron/#leaving-the-room","title":"Leaving the Room","text":"

When the user wants to leave the room, they can click the Leave Room button. This action calls the leaveRoom() function:

app.js
async function leaveRoom() {\n    // Leave the room by calling 'disconnect' method over the Room object\n    await room.disconnect(); // (1)!\n\n    // Remove all HTML elements inside the layout container\n    removeAllLayoutElements(); // (2)!\n\n    // Back to 'Join room' page\n    document.getElementById(\"join\").hidden = false; // (3)!\n    document.getElementById(\"room\").hidden = true;\n\n    // Enable 'Join' button\n    document.getElementById(\"join-button\").disabled = false;\n    document.getElementById(\"join-button\").innerText = \"Join!\";\n}\n\n// (4)!\nwindow.onbeforeunload = () => {\n    room?.disconnect();\n};\n
  1. Disconnect the user from the room.
  2. Remove all HTML elements inside the layout container.
  3. Show the \"Join room\" page and hide the \"Room\" layout.
  4. Call the disconnect() method on the room object when the user closes the tab or navigates to another page.

The leaveRoom() function performs the following actions:

The window.onbeforeunload event is used to ensure that the user is disconnected from the room before the page is unloaded. This event is triggered when the user closes the tab or navigates to another page.

"},{"location":"docs/tutorials/application-client/ionic/","title":"openvidu-ionic","text":"

Source code

This tutorial is a simple video-call application built with Ionic, using Angular and Capacitor, that allows:

It uses the LiveKit JS SDK to connect to the LiveKit server and interact with the video call room.

"},{"location":"docs/tutorials/application-client/ionic/#running-this-tutorial","title":"Running this tutorial","text":""},{"location":"docs/tutorials/application-client/ionic/#1-run-openvidu-server","title":"1. Run OpenVidu Server","text":"Run OpenVidu locallyDeploy OpenVidu

  1. Download OpenVidu

    git clone https://github.com/OpenVidu/openvidu-local-deployment\n

  2. Configure the local deployment

    Windows macOS Linux 
    cd openvidu-local-deployment/community\n.\\configure_lan_private_ip_windows.bat\n
    cd openvidu-local-deployment/community\n./configure_lan_private_ip_macos.sh\n
    cd openvidu-local-deployment/community\n./configure_lan_private_ip_linux.sh\n

  3. Run OpenVidu

    docker compose up\n

To use a production-ready OpenVidu deployment, visit the official deployment guide.

"},{"location":"docs/tutorials/application-client/ionic/#2-download-the-tutorial-code","title":"2. Download the tutorial code","text":"
git clone https://github.com/OpenVidu/openvidu-livekit-tutorials.git\n
"},{"location":"docs/tutorials/application-client/ionic/#3-run-a-server-application","title":"3. Run a server application","text":"Node Go Ruby Java Python Rust PHP .NET

To run this server application, you need Node installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/node\n
  2. Install dependencies 
    npm install\n
  3. Run the application 
    npm start\n

To run this server application, you need Go installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/go\n
  2. Run the application 
    go run main.go\n

To run this server application, you need Ruby installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/ruby\n
  2. Install dependencies 
    bundle install\n
  3. Run the application 
    ruby app.rb\n

To run this server application, you need Java and Maven installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/java\n
  2. Run the application 
    mvn spring-boot:run\n

To run this server application, you need Python 3 installed on your device.

  1. Navigate into the server directory

    cd openvidu-livekit-tutorials/application-server/python\n

  2. Create a python virtual environment

    python -m venv venv\n

  3. Activate the virtual environment

    Windows macOS Linux 
    .\\venv\\Scripts\\activate\n
    . ./venv/bin/activate\n
    . ./venv/bin/activate\n

  4. Install dependencies

    pip install -r requirements.txt\n

  5. Run the application

    python app.py\n

To run this server application, you need Rust installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/rust\n
  2. Run the application 
    cargo run\n

To run this server application, you need PHP and Composer installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/php\n
  2. Install dependencies 
    composer install\n
  3. Run the application 
    composer start\n

To run this server application, you need .NET installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/dotnet\n
  2. Run the application 
    dotnet run\n

Warning

This .NET server application needs the LIVEKIT_API_SECRET env variable to be at least 32 characters long. Make sure to update it here and in your OpenVidu Server.

"},{"location":"docs/tutorials/application-client/ionic/#4-run-the-client-application","title":"4. Run the client application","text":"

To run the client application tutorial, you need Node installed on your development computer.

  1. Navigate into the application client directory:

    cd openvidu-livekit-tutorials/application-client/openvidu-angular\n

  2. Install the required dependencies:

    npm install\n

  3. Serve the application:

    You have two options for running the client application: browser-based or mobile device-based:

    Browser Mobile

    To run the application in a browser, you will need to start the Ionic server. To do so, run the following command:

    npm start\n

    Once the server is up and running, you can test the application by visiting http://localhost:5080. You should see a screen like this:

    Mobile appearance

    To show the app with a mobile device appearance, open the dev tools in your browser and find the button to adapt the viewport to a mobile device aspect ratio. You may also choose predefined types of devices to see the behavior of your app in different resolutions.

    Accessing your application client from other devices in your local network

    One advantage of running OpenVidu locally is that you can test your application client with other devices in your local network very easily without worrying about SSL certificates.

    Access your application client through https://xxx-yyy-zzz-www.openvidu-local.dev:5443, where xxx-yyy-zzz-www part of the domain is your LAN private IP address with dashes (-) instead of dots (.). For more information, see section Accessing your app from other devices in your network.

    Running the tutorial on a mobile device presents additional challenges compared to running it in a browser, mainly due to the application being launched on a different device, such as an Android smartphone or iPhone, rather than our computer. To overcome these challenges, the following steps need to be taken:

    1. Localhost limitations:

      The usage of localhost in our Ionic app is restricted, preventing seamless communication between the application client and the server.

    2. Serve over local network:

      The application must be served over our local network to enable communication between the device and the server.

    3. Secure connection requirement for WebRTC API:

      The WebRTC API demands a secure connection for functionality outside of localhost, necessitating the serving of the application over HTTPS.

    If you run OpenVidu locally you don't need to worry about this. OpenVidu will handle all of the above requirements for you. For more information, see section Accessing your app from other devices in your network.

    Now, let's explore how to run the application on a mobile device:

    Requirements

    Before running the application on a mobile device, make sure that the device is connected to the same network as your PC and the mobile is connected to the PC via USB.

    Android iOS 
    npm run android\n

    You will need Ruby and Cocoapods installed in your computer.

    The app must be signed with a development team. To do so, open the project in Xcode and select a development team in the Signing & Capabilities editor.

    npm run ios\n

    The script will ask you for the device you want to run the application on. You should select the real device you have connected to your computer.

    Once the mobile device has been selected, the script will launch the application on the device and you will see a screen like this:

"},{"location":"docs/tutorials/application-client/ionic/#understanding-the-code","title":"Understanding the code","text":"

This Ionic project has been created using the Ionic CLI tool. You may come across various configuration files and other items that are not essential for this tutorial. Our focus will be on the key files located within the src/app/ directory:

To use the LiveKit JS SDK in an Ionic application, you need to install the livekit-client package. This package provides the necessary classes and methods to interact with the LiveKit server. You can install it using the following command:

npm install livekit-client\n

Now let's see the code of the app.component.ts file:

app.component.ts
type TrackInfo = { // (1)!\n    trackPublication: RemoteTrackPublication;\n    participantIdentity: string;\n};\n\n// For local development launching app in web browser, leave these variables empty\n// For production or when launching app in device, configure them with correct URLs\nvar APPLICATION_SERVER_URL = ''; // (2)!\nvar LIVEKIT_URL = ''; // (3)!\n\n@Component({ // (4)!\n    selector: 'app-root',\n    templateUrl: 'app.component.html',\n    styleUrl: 'app.component.scss',\n    standalone: true,\n    imports: [\n        IonApp,\n        VideoComponent,\n        AudioComponent,\n        ReactiveFormsModule,\n        IonHeader,\n        IonToolbar,\n        IonTitle,\n        IonButtons,\n        IonButton,\n        IonFab,\n        IonFabButton,\n        IonIcon,\n        IonContent,\n        IonList,\n        IonItem,\n        IonInput,\n        IonFooter,\n    ],\n})\nexport class AppComponent implements OnDestroy {\n    roomForm = new FormGroup({ // (5)!\n        roomName: new FormControl('Test Room', Validators.required),\n        participantName: new FormControl('Participant' + Math.floor(Math.random() * 100), Validators.required),\n    });\n\n    room = signal<Room | undefined>(undefined); // (6)!\n    localTrack = signal<LocalVideoTrack | undefined>(undefined); // (7)!\n    remoteTracksMap = signal<Map<string, TrackInfo>>(new Map()); // (8)!\n\n    constructor(private httpClient: HttpClient) {\n        this.configureUrls();\n        addIcons({\n            logoGithub,\n            book,\n            settings,\n        });\n    }\n\n    configureUrls() {\n        const deviceMode = this.platform.is('hybrid');\n\n        // If APPLICATION_SERVER_URL is not configured and app is not launched in device mode,\n        // use default value from local development\n        if (!APPLICATION_SERVER_URL) {\n            if (deviceMode) {\n                APPLICATION_SERVER_URL = 'https://{YOUR-LAN-IP}.openvidu-local.dev:6443/';\n            } else {\n                if (window.location.hostname === 'localhost') {\n                    APPLICATION_SERVER_URL = 'http://localhost:6080/';\n                } else {\n                    APPLICATION_SERVER_URL = 'https://' + window.location.hostname + ':6443/';\n                }\n            }\n        }\n\n        // If LIVEKIT_URL is not configured and app is not launched in device mode,\n        // use default value from local development\n        if (!LIVEKIT_URL) {\n            if (deviceMode) {\n                LIVEKIT_URL = 'wss://{YOUR-LAN-IP}.openvidu-local.dev:7443/';\n            } else {\n                if (window.location.hostname === 'localhost') {\n                    LIVEKIT_URL = 'ws://localhost:7880/';\n                } else {\n                    LIVEKIT_URL = 'wss://' + window.location.hostname + ':7443/';\n                }\n            }\n        }\n    }\n
  1. TrackInfo type, which groups a track publication with the participant's identity.
  2. The URL of the application server.
  3. The URL of the LiveKit server.
  4. Angular component decorator that defines the AppComponent class and associates the HTML and CSS files with it.
  5. The roomForm object, which is a form group that contains the roomName and participantName fields. These fields are used to join a video call room.
  6. The room object, which represents the video call room.
  7. The local video track, which represents the user's camera.
  8. Map that links track SIDs with TrackInfo objects. This map is used to store remote tracks and their associated participant identities.

The app.component.ts file defines the following variables:

Configure the URLs

For local development launching the app in a web browser, leave APPLICATION_SERVER_URL and LIVEKIT_URL variables empty. The function configureUrls() will automatically configure them with default values. However, for production or when launching the app in a mobile device, you should configure these variables with the correct URLs depending on your deployment.

You can also configure these variables once the application has been launched by clicking on the settings button in the bottom right corner of the screen.

"},{"location":"docs/tutorials/application-client/ionic/#joining-a-room","title":"Joining a Room","text":"

After the user specifies their participant name and the name of the room they want to join, when they click the Join button, the joinRoom() method is called:

app.component.ts
async joinRoom() {\n    // Initialize a new Room object\n    const room = new Room();\n    this.room.set(room); // (1)!\n\n    // Specify the actions when events take place in the room\n    // On every new Track received...\n    this.room.on(\n        RoomEvent.TrackSubscribed,\n        (_track: RemoteTrack, publication: RemoteTrackPublication, participant: RemoteParticipant) => { // (2)!\n            this.remoteTracksMap.update((map) => {\n                map.set(publication.trackSid, {\n                    trackPublication: publication,\n                    participantIdentity: participant.identity,\n                });\n                return map;\n            });\n        }\n    );\n\n    // On every new Track destroyed...\n    room.on(RoomEvent.TrackUnsubscribed, (_track: RemoteTrack, publication: RemoteTrackPublication) => { // (3)!\n        this.remoteTracksMap.update((map) => {\n            map.delete(publication.trackSid);\n            return map;\n        });\n    });\n\n    try {\n        // Get the room name and participant name from the form\n        const roomName = this.roomForm.value.roomName!; // (4)!\n        const participantName = this.roomForm.value.participantName!;\n\n        // Get a token from your application server with the room name and participant name\n        const token = await this.getToken(roomName, participantName); // (5)!\n\n        // Connect to the room with the LiveKit URL and the token\n        await room.connect(LIVEKIT_URL, token); // (6)!\n\n        // Publish your camera and microphone\n        await room.localParticipant.enableCameraAndMicrophone(); // (7)!\n        this.localTrack.set(room.localParticipant.videoTrackPublications.values().next().value.videoTrack);\n    } catch (error: any) {\n        console.log(\n            'There was an error connecting to the room:',\n            error?.error?.errorMessage || error?.message || error\n        );\n        await this.leaveRoom();\n    }\n}\n
  1. Initialize a new Room object.
  2. Event handling for when a new track is received in the room.
  3. Event handling for when a track is destroyed.
  4. Get the room name and participant name from the form.
  5. Get a token from the application server with the room name and participant name.
  6. Connect to the room with the LiveKit URL and the token.
  7. Publish your camera and microphone.

The joinRoom() method performs the following actions:

  1. It creates a new Room object. This object represents the video call room.

    Info

    When the room object is defined, the HTML template is automatically updated hiding the \"Join room\" page and showing the \"Room\" layout.

  2. Event handling is configured for different scenarios within the room. These events are fired when new tracks are subscribed to and when existing tracks are unsubscribed.

    These event handlers are essential for managing the behavior of tracks within the video call. You can further extend the event handling as needed for your application.

    Take a look at all events

    You can take a look at all the events in the Livekit Documentation

  3. It retrieves the room name and participant name from the form.

  4. It requests a token from the application server using the room name and participant name. This is done by calling the getToken() method:

    app.component.ts
    /**\n * --------------------------------------------\n * GETTING A TOKEN FROM YOUR APPLICATION SERVER\n * --------------------------------------------\n * The method below request the creation of a token to\n * your application server. This prevents the need to expose\n * your LiveKit API key and secret to the client side.\n *\n * In this sample code, there is no user control at all. Anybody could\n * access your application server endpoints. In a real production\n * environment, your application server must identify the user to allow\n * access to the endpoints.\n */\nasync getToken(roomName: string, participantName: string): Promise<string> {\n    const response = await lastValueFrom(\n        this.httpClient.post<{ token: string }>(APPLICATION_SERVER_URL + 'token', { roomName, participantName })\n    );\n    return response.token;\n}\n

    This function sends a POST request using HttpClient to the application server's /token endpoint. The request body contains the room name and participant name. The server responds with a token that is used to connect to the room.

  5. It connects to the room using the LiveKit URL and the token.

  6. It publishes the camera and microphone tracks to the room using room.localParticipant.enableCameraAndMicrophone(), which asks the user for permission to access their camera and microphone at the same time. The local video track is then stored in the localTrack variable.
"},{"location":"docs/tutorials/application-client/ionic/#displaying-video-and-audio-tracks","title":"Displaying Video and Audio Tracks","text":"

In order to display participants' video and audio tracks, the app.component.html file integrates the VideoComponent and AudioComponent.

app.component.html
<div id=\"layout-container\">\n    @if (localTrack()) {\n    <video-component\n        [track]=\"localTrack()!\"\n        [participantIdentity]=\"roomForm.value.participantName!\"\n        [local]=\"true\"\n    ></video-component>\n    }\n    @for (remoteTrack of remoteTracksMap().values(); track remoteTrack.trackPublication.trackSid) {\n        @if (remoteTrack.trackPublication.kind === 'video') {\n        <video-component\n            [track]=\"remoteTrack.trackPublication.videoTrack!\"\n            [participantIdentity]=\"remoteTrack.participantIdentity\"\n        ></video-component>\n        } @else {\n        <audio-component [track]=\"remoteTrack.trackPublication.audioTrack!\" hidden></audio-component>\n        }\n    }\n</div>\n

This code snippet does the following:

Let's see now the code of the video.component.ts file:

video.component.ts
// (1)!\n@Component({\n    selector: \"video-component\",\n    standalone: true,\n    imports: [],\n    templateUrl: \"./video.component.html\",\n    styleUrl: \"./video.component.css\"\n})\nexport class VideoComponent implements AfterViewInit, OnDestroy {\n    videoElement = viewChild<ElementRef<HTMLVideoElement>>(\"videoElement\"); // (2)!\n\n    track = input.required<LocalVideoTrack | RemoteVideoTrack>(); // (3)!\n    participantIdentity = input.required<string>(); // (4)!\n    local = input(false); // (5)!\n\n    ngAfterViewInit() {\n        if (this.videoElement()) {\n            this.track().attach(this.videoElement()!.nativeElement); // (6)!\n        }\n    }\n\n    ngOnDestroy() {\n        this.track().detach(); // (7)!\n    }\n}\n
  1. Angular component decorator that defines the VideoComponent class and associates the HTML and CSS files with it.
  2. The reference to the video element in the HTML template.
  3. The video track object, which can be a LocalVideoTrack or a RemoteVideoTrack.
  4. The participant identity associated with the video track.
  5. A boolean flag that indicates whether the video track belongs to the local participant.
  6. Attach the video track to the video element when the track is set.
  7. Detach the video track when the component is destroyed.

The VideoComponent does the following:

Finally, let's see the code of the audio.component.ts file:

audio.component.ts
// (1)!\n@Component({\n    selector: \"audio-component\",\n    standalone: true,\n    imports: [],\n    templateUrl: \"./audio.component.html\",\n    styleUrl: \"./audio.component.css\"\n})\nexport class AudioComponent implements AfterViewInit, OnDestroy {\n    audioElement = viewChild<ElementRef<HTMLAudioElement>>(\"audioElement\"); // (2)!\n\n    track = input.required<LocalAudioTrack | RemoteAudioTrack>(); // (3)!\n\n    ngAfterViewInit() {\n        if (this.audioElement()) {\n            this.track().attach(this.audioElement()!.nativeElement); // (4)!\n        }\n    }\n\n    ngOnDestroy() {\n        this.track().detach(); // (5)!\n    }\n}\n
  1. Angular component decorator that defines the AudioComponent class and associates the HTML and CSS files with it.
  2. The reference to the audio element in the HTML template.
  3. The audio track object, which can be a RemoteAudioTrack or a LocalAudioTrack, although in this case, it will always be a RemoteAudioTrack.
  4. Attach the audio track to the audio element when view is initialized.
  5. Detach the audio track when the component is destroyed.

The AudioComponent class is similar to the VideoComponent class, but it is used to display audio tracks. It attaches the audio track to the audio element when view is initialized and detaches the audio track when the component is destroyed.

"},{"location":"docs/tutorials/application-client/ionic/#leaving-the-room","title":"Leaving the room","text":"

When the user wants to leave the room, they can click the Leave Room button. This action calls the leaveRoom() method:

app.component.ts
async leaveRoom() {\n    // Leave the room by calling 'disconnect' method over the Room object\n    await this.room()?.disconnect(); // (1)!\n\n    // Reset all variables\n    this.room.set(undefined); // (2)!\n    this.localTrack.set(undefined);\n    this.remoteTracksMap.set(new Map());\n}\n\nasync ngOnDestroy() { // (3)!\n    // On window closed or component destroyed, leave the room\n    await this.leaveRoom();\n}\n
  1. Disconnect the user from the room.
  2. Reset all variables.
  3. Call the leaveRoom() method when the component is destroyed.

The leaveRoom() method performs the following actions:

The ngOnDestroy() lifecycle hook is used to ensure that the user leaves the room when the component is destroyed.

"},{"location":"docs/tutorials/application-client/ionic/#specific-mobile-requirements","title":"Specific mobile requirements","text":"

In order to be able to test the application on an Android or iOS device, the application must ask for the necessary permissions to access the device's camera and microphone. These permissions are requested when the user joins the video call room.

Android iOS

The application must include the following permissions in the AndroidManifest.xml file located in the android/app/src/main/AndroidManifest.xml directory:

AndroidManifest.xml
<uses-permission android:name=\"android.permission.CAMERA\" />\n<uses-permission android:name=\"android.permission.RECORD_AUDIO\" />\n<uses-permission android:name=\"android.permission.MODIFY_AUDIO_SETTINGS\" />\n

The application must include the following permissions in the Info.plist file located in the ios/App/App/Info.plist directory:

Info.plist
<key>NSCameraUsageDescription</key>\n<string>This Application uses your camera to make video calls.</string>\n<key>NSMicrophoneUsageDescription</key>\n<string>This Application uses your microphone to make calls.</string>\n
"},{"location":"docs/tutorials/application-client/javascript/","title":"openvidu-js","text":"

Source code

This tutorial is a simple video-call application built with plain JavaScript, HTML and CSS that allows:

It uses the LiveKit JS SDK to connect to the LiveKit server and interact with the video call room.

"},{"location":"docs/tutorials/application-client/javascript/#running-this-tutorial","title":"Running this tutorial","text":""},{"location":"docs/tutorials/application-client/javascript/#1-run-openvidu-server","title":"1. Run OpenVidu Server","text":"Run OpenVidu locallyDeploy OpenVidu

  1. Download OpenVidu

    git clone https://github.com/OpenVidu/openvidu-local-deployment\n

  2. Configure the local deployment

    Windows macOS Linux 
    cd openvidu-local-deployment/community\n.\\configure_lan_private_ip_windows.bat\n
    cd openvidu-local-deployment/community\n./configure_lan_private_ip_macos.sh\n
    cd openvidu-local-deployment/community\n./configure_lan_private_ip_linux.sh\n

  3. Run OpenVidu

    docker compose up\n

To use a production-ready OpenVidu deployment, visit the official deployment guide.

"},{"location":"docs/tutorials/application-client/javascript/#2-download-the-tutorial-code","title":"2. Download the tutorial code","text":"
git clone https://github.com/OpenVidu/openvidu-livekit-tutorials.git\n
"},{"location":"docs/tutorials/application-client/javascript/#3-run-a-server-application","title":"3. Run a server application","text":"Node Go Ruby Java Python Rust PHP .NET

To run this server application, you need Node installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/node\n
  2. Install dependencies 
    npm install\n
  3. Run the application 
    npm start\n

To run this server application, you need Go installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/go\n
  2. Run the application 
    go run main.go\n

To run this server application, you need Ruby installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/ruby\n
  2. Install dependencies 
    bundle install\n
  3. Run the application 
    ruby app.rb\n

To run this server application, you need Java and Maven installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/java\n
  2. Run the application 
    mvn spring-boot:run\n

To run this server application, you need Python 3 installed on your device.

  1. Navigate into the server directory

    cd openvidu-livekit-tutorials/application-server/python\n

  2. Create a python virtual environment

    python -m venv venv\n

  3. Activate the virtual environment

    Windows macOS Linux 
    .\\venv\\Scripts\\activate\n
    . ./venv/bin/activate\n
    . ./venv/bin/activate\n

  4. Install dependencies

    pip install -r requirements.txt\n

  5. Run the application

    python app.py\n

To run this server application, you need Rust installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/rust\n
  2. Run the application 
    cargo run\n

To run this server application, you need PHP and Composer installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/php\n
  2. Install dependencies 
    composer install\n
  3. Run the application 
    composer start\n

To run this server application, you need .NET installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/dotnet\n
  2. Run the application 
    dotnet run\n

Warning

This .NET server application needs the LIVEKIT_API_SECRET env variable to be at least 32 characters long. Make sure to update it here and in your OpenVidu Server.

"},{"location":"docs/tutorials/application-client/javascript/#4-run-the-client-application","title":"4. Run the client application","text":"

To run the client application tutorial, you need an HTTP web server installed on your development computer. A great option is http-server. You can install it via NPM:

npm install -g http-server\n

  1. Navigate into the application client directory:

    cd openvidu-livekit-tutorials/application-client/openvidu-js\n

  2. Serve the application:

    http-server -p 5080 ./src\n

Once the server is up and running, you can test the application by visiting http://localhost:5080. You should see a screen like this:

Accessing your application client from other devices in your local network

One advantage of running OpenVidu locally is that you can test your application client with other devices in your local network very easily without worrying about SSL certificates.

Access your application client through https://xxx-yyy-zzz-www.openvidu-local.dev:5443, where xxx-yyy-zzz-www part of the domain is your LAN private IP address with dashes (-) instead of dots (.). For more information, see section Accessing your app from other devices in your network.

"},{"location":"docs/tutorials/application-client/javascript/#understanding-the-code","title":"Understanding the code","text":"

This application is designed to be beginner-friendly and consists of only three essential files that are located in the src directory:

To use the LiveKit JS SDK in your application, you need to include the library in your HTML file. You can do this by adding the following script tag to the <head> section of your HTML file:

index.html
<script src=\"https://cdn.jsdelivr.net/npm/livekit-client@2.1.5/dist/livekit-client.umd.js\"></script>\n

Then, you can use the LivekitClient object in your JavaScript code by referencing it from the window object under LivekitClient. When accessing symbols from the class, you will need to prefix them with LivekitClient.. For example, Room becomes LivekitClient.Room.

Now let's see the code of the app.js file:

app.js
// For local development, leave these variables empty\n// For production, configure them with correct URLs depending on your deployment\nvar APPLICATION_SERVER_URL = \"\"; // (1)!\nvar LIVEKIT_URL = \"\"; // (2)!\nconfigureUrls();\n\nconst LivekitClient = window.LivekitClient; // (3)!\nvar room; // (4)!\n\nfunction configureUrls() {\n    // If APPLICATION_SERVER_URL is not configured, use default value from local development\n    if (!APPLICATION_SERVER_URL) {\n        if (window.location.hostname === \"localhost\") {\n            APPLICATION_SERVER_URL = \"http://localhost:6080/\";\n        } else {\n            APPLICATION_SERVER_URL = \"https://\" + window.location.hostname + \":6443/\";\n        }\n    }\n\n    // If LIVEKIT_URL is not configured, use default value from local development\n    if (!LIVEKIT_URL) {\n        if (window.location.hostname === \"localhost\") {\n            LIVEKIT_URL = \"ws://localhost:7880/\";\n        } else {\n            LIVEKIT_URL = \"wss://\" + window.location.hostname + \":7443/\";\n        }\n    }\n}\n
  1. The URL of the application server.
  2. The URL of the LiveKit server.
  3. The LivekitClient object, which is the entry point to the LiveKit JS SDK.
  4. The room object, which represents the video call room.

The app.js file defines the following variables:

Configure the URLs

For local development, leave APPLICATION_SERVER_URL and LIVEKIT_URL variables empty. The function configureUrls() will automatically configure them with default values. However, for production, you should configure these variables with the correct URLs depending on your deployment.

"},{"location":"docs/tutorials/application-client/javascript/#joining-a-room","title":"Joining a Room","text":"

After the user specifies their participant name and the name of the room they want to join, when they click the Join button, the joinRoom() function is called:

app.js
async function joinRoom() {\n    // Disable 'Join' button\n    document.getElementById(\"join-button\").disabled = true;\n    document.getElementById(\"join-button\").innerText = \"Joining...\";\n\n    // Initialize a new Room object\n    room = new LivekitClient.Room(); // (1)!\n\n    // Specify the actions when events take place in the room\n    // On every new Track received...\n    room.on(LivekitClient.RoomEvent.TrackSubscribed, (track, _publication, participant) => {\n        // (2)!\n        addTrack(track, participant.identity);\n    });\n\n    // On every new Track destroyed...\n    room.on(LivekitClient.RoomEvent.TrackUnsubscribed, (track, _publication, participant) => {\n        // (3)!\n        track.detach();\n        document.getElementById(track.sid)?.remove();\n\n        if (track.kind === \"video\") {\n            removeVideoContainer(participant.identity);\n        }\n    });\n\n    try {\n        // Get the room name and participant name from the form\n        const roomName = document.getElementById(\"room-name\").value; // (4)!\n        const userName = document.getElementById(\"participant-name\").value;\n\n        // Get a token from your application server with the room name and participant name\n        const token = await getToken(roomName, userName); // (5)!\n\n        // Connect to the room with the LiveKit URL and the token\n        await room.connect(LIVEKIT_URL, token); // (6)!\n\n        // Hide the 'Join room' page and show the 'Room' page\n        document.getElementById(\"room-title\").innerText = roomName; // (7)!\n        document.getElementById(\"join\").hidden = true;\n        document.getElementById(\"room\").hidden = false;\n\n        // Publish your camera and microphone\n        await room.localParticipant.enableCameraAndMicrophone(); // (8)!\n        const localVideoTrack = this.room.localParticipant.videoTrackPublications.values().next().value.track;\n        addTrack(localVideoTrack, userName, true);\n    } catch (error) {\n        console.log(\"There was an error connecting to the room:\", error.message);\n    }\n}\n
  1. Initialize a new Room object.
  2. Event handling for when a new track is received in the room.
  3. Event handling for when a track is destroyed.
  4. Get the room name and participant name from the form.
  5. Get a token from the application server with the room name and participant name.
  6. Connect to the room with the LiveKit URL and the token.
  7. Hide the \"Join room\" page and show the \"Room\" page.
  8. Publish your camera and microphone.

The joinRoom() function performs the following actions:

  1. It creates a new Room object using LivekitClient.Room(). This object represents the video call room.

  2. Event handling is configured for different scenarios within the room. These events are fired when new tracks are subscribed to and when existing tracks are unsubscribed.

    app.js
    function addTrack(track, participantIdentity, local = false) {\n    const element = track.attach(); // (1)!\n    element.id = track.sid;\n\n    /* If the track is a video track, we create a container and append the video element to it\n    with the participant's identity */\n    if (track.kind === \"video\") {\n        const videoContainer = createVideoContainer(participantIdentity, local);\n        videoContainer.append(element);\n        appendParticipantData(videoContainer, participantIdentity + (local ? \" (You)\" : \"\"));\n    } else {\n        document.getElementById(\"layout-container\").append(element);\n    }\n}\n
    1. Attach the track to an HTML element.
    app.js
    function createVideoContainer(participantIdentity, local = false) {\n    const videoContainer = document.createElement(\"div\");\n    videoContainer.id = `camera-${participantIdentity}`;\n    videoContainer.className = \"video-container\";\n    const layoutContainer = document.getElementById(\"layout-container\");\n\n    if (local) {\n        layoutContainer.prepend(videoContainer);\n    } else {\n        layoutContainer.append(videoContainer);\n    }\n\n    return videoContainer;\n}\n\nfunction appendParticipantData(videoContainer, participantIdentity) {\n    const dataElement = document.createElement(\"div\");\n    dataElement.className = \"participant-data\";\n    dataElement.innerHTML = `<p>${participantIdentity}</p>`;\n    videoContainer.prepend(dataElement);\n}\n
    app.js
    function removeVideoContainer(participantIdentity) {\n    const videoContainer = document.getElementById(`camera-${participantIdentity}`);\n    videoContainer?.remove();\n}\n

    These event handlers are essential for managing the behavior of tracks within the video call.

    Take a look at all events

    You can take a look at all the events in the Livekit Documentation

  3. It retrieves the room name and participant name from the form.

  4. It requests a token from the application server using the room name and participant name. This is done by calling the getToken() function:

    app.js
    /**\n * --------------------------------------------\n * GETTING A TOKEN FROM YOUR APPLICATION SERVER\n * --------------------------------------------\n * The method below request the creation of a token to\n * your application server. This prevents the need to expose\n * your LiveKit API key and secret to the client side.\n *\n * In this sample code, there is no user control at all. Anybody could\n * access your application server endpoints. In a real production\n * environment, your application server must identify the user to allow\n * access to the endpoints.\n */\nasync function getToken(roomName, participantName) {\n    const response = await fetch(APPLICATION_SERVER_URL + \"token\", {\n        method: \"POST\",\n        headers: {\n            \"Content-Type\": \"application/json\"\n        },\n        body: JSON.stringify({\n            roomName,\n            participantName\n        })\n    });\n\n    if (!response.ok) {\n        const error = await response.json();\n        throw new Error(`Failed to get token: ${error.errorMessage}`);\n    }\n\n    const token = await response.json();\n    return token.token;\n}\n

    This function sends a POST request using fetch() to the application server's /token endpoint. The request body contains the room name and participant name. The server responds with a token that is used to connect to the room.

  5. It connects to the room using the LiveKit URL and the token.

  6. It updates the UI to hide the \"Join room\" page and show the \"Room\" layout.
  7. It publishes the camera and microphone tracks to the room using room.localParticipant.enableCameraAndMicrophone(), which asks the user for permission to access their camera and microphone at the same time. The local video track is then added to the layout.
"},{"location":"docs/tutorials/application-client/javascript/#leaving-the-room","title":"Leaving the Room","text":"

When the user wants to leave the room, they can click the Leave Room button. This action calls the leaveRoom() function:

app.js
async function leaveRoom() {\n    // Leave the room by calling 'disconnect' method over the Room object\n    await room.disconnect(); // (1)!\n\n    // Remove all HTML elements inside the layout container\n    removeAllLayoutElements(); // (2)!\n\n    // Back to 'Join room' page\n    document.getElementById(\"join\").hidden = false; // (3)!\n    document.getElementById(\"room\").hidden = true;\n\n    // Enable 'Join' button\n    document.getElementById(\"join-button\").disabled = false;\n    document.getElementById(\"join-button\").innerText = \"Join!\";\n}\n\n// (4)!\nwindow.onbeforeunload = () => {\n    room?.disconnect();\n};\n
  1. Disconnect the user from the room.
  2. Remove all HTML elements inside the layout container.
  3. Show the \"Join room\" page and hide the \"Room\" layout.
  4. Call the disconnect() method on the room object when the user closes the tab or navigates to another page.

The leaveRoom() function performs the following actions:

The window.onbeforeunload event is used to ensure that the user is disconnected from the room before the page is unloaded. This event is triggered when the user closes the tab or navigates to another page.

"},{"location":"docs/tutorials/application-client/react/","title":"openvidu-react","text":"

Source code

This tutorial is a simple video-call application built with React that allows:

It uses the LiveKit JS SDK to connect to the LiveKit server and interact with the video call room.

"},{"location":"docs/tutorials/application-client/react/#running-this-tutorial","title":"Running this tutorial","text":""},{"location":"docs/tutorials/application-client/react/#1-run-openvidu-server","title":"1. Run OpenVidu Server","text":"Run OpenVidu locallyDeploy OpenVidu

  1. Download OpenVidu

    git clone https://github.com/OpenVidu/openvidu-local-deployment\n

  2. Configure the local deployment

    Windows macOS Linux 
    cd openvidu-local-deployment/community\n.\\configure_lan_private_ip_windows.bat\n
    cd openvidu-local-deployment/community\n./configure_lan_private_ip_macos.sh\n
    cd openvidu-local-deployment/community\n./configure_lan_private_ip_linux.sh\n

  3. Run OpenVidu

    docker compose up\n

To use a production-ready OpenVidu deployment, visit the official deployment guide.

"},{"location":"docs/tutorials/application-client/react/#2-download-the-tutorial-code","title":"2. Download the tutorial code","text":"
git clone https://github.com/OpenVidu/openvidu-livekit-tutorials.git\n
"},{"location":"docs/tutorials/application-client/react/#3-run-a-server-application","title":"3. Run a server application","text":"Node Go Ruby Java Python Rust PHP .NET

To run this server application, you need Node installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/node\n
  2. Install dependencies 
    npm install\n
  3. Run the application 
    npm start\n

To run this server application, you need Go installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/go\n
  2. Run the application 
    go run main.go\n

To run this server application, you need Ruby installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/ruby\n
  2. Install dependencies 
    bundle install\n
  3. Run the application 
    ruby app.rb\n

To run this server application, you need Java and Maven installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/java\n
  2. Run the application 
    mvn spring-boot:run\n

To run this server application, you need Python 3 installed on your device.

  1. Navigate into the server directory

    cd openvidu-livekit-tutorials/application-server/python\n

  2. Create a python virtual environment

    python -m venv venv\n

  3. Activate the virtual environment

    Windows macOS Linux 
    .\\venv\\Scripts\\activate\n
    . ./venv/bin/activate\n
    . ./venv/bin/activate\n

  4. Install dependencies

    pip install -r requirements.txt\n

  5. Run the application

    python app.py\n

To run this server application, you need Rust installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/rust\n
  2. Run the application 
    cargo run\n

To run this server application, you need PHP and Composer installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/php\n
  2. Install dependencies 
    composer install\n
  3. Run the application 
    composer start\n

To run this server application, you need .NET installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/dotnet\n
  2. Run the application 
    dotnet run\n

Warning

This .NET server application needs the LIVEKIT_API_SECRET env variable to be at least 32 characters long. Make sure to update it here and in your OpenVidu Server.

"},{"location":"docs/tutorials/application-client/react/#4-run-the-client-application","title":"4. Run the client application","text":"

To run the client application tutorial, you need Node installed on your development computer.

  1. Navigate into the application client directory:

    cd openvidu-livekit-tutorials/application-client/openvidu-react\n

  2. Install dependencies:

    npm install\n

  3. Run the application:

    npm start\n

Once the server is up and running, you can test the application by visiting http://localhost:5080. You should see a screen like this:

Accessing your application client from other devices in your local network

One advantage of running OpenVidu locally is that you can test your application client with other devices in your local network very easily without worrying about SSL certificates.

Access your application client through https://xxx-yyy-zzz-www.openvidu-local.dev:5443, where xxx-yyy-zzz-www part of the domain is your LAN private IP address with dashes (-) instead of dots (.). For more information, see section Accessing your app from other devices in your network.

"},{"location":"docs/tutorials/application-client/react/#understanding-the-code","title":"Understanding the code","text":"

This React project has been generated using the Vite. You may come across various configuration files and other items that are not essential for this tutorial. Our focus will be on the key files located within the src/ directory:

To use the LiveKit JS SDK in a Vue application, you need to install the livekit-client package. This package provides the necessary classes and methods to interact with the LiveKit server. You can install it using the following command:

npm install livekit-client\n

Now let's see the code of the App.tsx file:

App.tsx
type TrackInfo = { // (1)!\n    trackPublication: RemoteTrackPublication;\n    participantIdentity: string;\n};\n\n// For local development, leave these variables empty\n// For production, configure them with correct URLs depending on your deployment\nlet APPLICATION_SERVER_URL = \"\"; // (2)!\nlet LIVEKIT_URL = \"\"; // (3)!\nconfigureUrls();\n\nfunction configureUrls() {\n    // If APPLICATION_SERVER_URL is not configured, use default value from local development\n    if (!APPLICATION_SERVER_URL) {\n        if (window.location.hostname === \"localhost\") {\n            APPLICATION_SERVER_URL = \"http://localhost:6080/\";\n        } else {\n            APPLICATION_SERVER_URL = \"https://\" + window.location.hostname + \":6443/\";\n        }\n    }\n\n    // If LIVEKIT_URL is not configured, use default value from local development\n    if (!LIVEKIT_URL) {\n        if (window.location.hostname === \"localhost\") {\n            LIVEKIT_URL = \"ws://localhost:7880/\";\n        } else {\n            LIVEKIT_URL = \"wss://\" + window.location.hostname + \":7443/\";\n        }\n    }\n}\n\nfunction App() {\n    const [room, setRoom] = useState<Room | undefined>(undefined); // (4)!\n    const [localTrack, setLocalTrack] = useState<LocalVideoTrack | undefined>(undefined); // (5)!\n    const [remoteTracks, setRemoteTracks] = useState<TrackInfo[]>([]); // (6)!\n\n    const [participantName, setParticipantName] = useState(\"Participant\" + Math.floor(Math.random() * 100)); // (7)!\n    const [roomName, setRoomName] = useState(\"Test Room\"); // (8)!\n
  1. TrackInfo type, which groups a track publication with the participant's identity.
  2. The URL of the application server.
  3. The URL of the LiveKit server.
  4. The room object, which represents the video call room.
  5. The local video track, which represents the user's camera.
  6. The remote tracks array.
  7. The participant's name.
  8. The room name.

The App.tsx file defines the following variables:

Configure the URLs

For local development, leave APPLICATION_SERVER_URL and LIVEKIT_URL variables empty. The function configureUrls() will automatically configure them with default values. However, for production, you should configure these variables with the correct URLs depending on your deployment.

"},{"location":"docs/tutorials/application-client/react/#joining-a-room","title":"Joining a Room","text":"

After the user specifies their participant name and the name of the room they want to join, when they click the Join button, the joinRoom() function is called:

App.tsx
async function joinRoom() {\n    // Initialize a new Room object\n    const room = new Room(); // (1)!\n    setRoom(room);\n\n    // Specify the actions when events take place in the room\n    // On every new Track received...\n    room.on(\n        RoomEvent.TrackSubscribed,\n        (_track: RemoteTrack, publication: RemoteTrackPublication, participant: RemoteParticipant) => {\n            // (2)!\n            setRemoteTracks((prev) => [\n                ...prev,\n                { trackPublication: publication, participantIdentity: participant.identity }\n            ]);\n        }\n    );\n\n    // On every Track destroyed...\n    room.on(RoomEvent.TrackUnsubscribed, (_track: RemoteTrack, publication: RemoteTrackPublication) => {\n        // (3)!\n        setRemoteTracks((prev) => prev.filter((track) => track.trackPublication.trackSid !== publication.trackSid));\n    });\n\n    try {\n        // Get a token from your application server with the room name and participant name\n        const token = await getToken(roomName, participantName); // (4)!\n\n        // Connect to the room with the LiveKit URL and the token\n        await room.connect(LIVEKIT_URL, token); // (5)!\n\n        // Publish your camera and microphone\n        await room.localParticipant.enableCameraAndMicrophone(); // (6)!\n        setLocalTrack(room.localParticipant.videoTrackPublications.values().next().value.videoTrack);\n    } catch (error) {\n        console.log(\"There was an error connecting to the room:\", (error as Error).message);\n        await leaveRoom();\n    }\n}\n
  1. Initialize a new Room object.
  2. Event handling for when a new track is received in the room.
  3. Event handling for when a track is destroyed.
  4. Get a token from the application server with the room name and participant name from the form.
  5. Connect to the room with the LiveKit URL and the token.
  6. Publish your camera and microphone.

The joinRoom() function performs the following actions:

  1. It creates a new Room object. This object represents the video call room.

    Info

    When the room object is defined, the HTML template is automatically updated hiding the \"Join room\" page and showing the \"Room\" layout.

  2. Event handling is configured for different scenarios within the room. These events are fired when new tracks are subscribed to and when existing tracks are unsubscribed.

    These event handlers are essential for managing the behavior of tracks within the video call. You can further extend the event handling as needed for your application.

    Take a look at all events

    You can take a look at all the events in the Livekit Documentation

  3. It requests a token from the application server using the room name and participant name. This is done by calling the getToken() function:

    App.tsx
    /**\n * --------------------------------------------\n * GETTING A TOKEN FROM YOUR APPLICATION SERVER\n * --------------------------------------------\n * The method below request the creation of a token to\n * your application server. This prevents the need to expose\n * your LiveKit API key and secret to the client side.\n *\n * In this sample code, there is no user control at all. Anybody could\n * access your application server endpoints. In a real production\n * environment, your application server must identify the user to allow\n * access to the endpoints.\n */\nasync function getToken(roomName: string, participantName: string) {\n    const response = await fetch(APPLICATION_SERVER_URL + \"token\", {\n        method: \"POST\",\n        headers: {\n            \"Content-Type\": \"application/json\"\n        },\n        body: JSON.stringify({\n            roomName: roomName,\n            participantName: participantName\n        })\n    });\n\n    if (!response.ok) {\n        const error = await response.json();\n        throw new Error(`Failed to get token: ${error.errorMessage}`);\n    }\n\n    const data = await response.json();\n    return data.token;\n}\n

    This function sends a POST request using fetch() to the application server's /token endpoint. The request body contains the room name and participant name. The server responds with a token that is used to connect to the room.

  4. It connects to the room using the LiveKit URL and the token.

  5. It publishes the camera and microphone tracks to the room using room.localParticipant.enableCameraAndMicrophone(), which asks the user for permission to access their camera and microphone at the same time. The local video track is then stored in the localTrack variable.
"},{"location":"docs/tutorials/application-client/react/#displaying-video-and-audio-tracks","title":"Displaying Video and Audio Tracks","text":"

In order to display participants' video and audio tracks, the main component integrates the VideoComponent and AudioComponent.

App.tsx
<div id=\"layout-container\">\n    {localTrack && (\n        <VideoComponent track={localTrack} participantIdentity={participantName} local={true} />\n    )}\n    {remoteTracks.map((remoteTrack) =>\n        remoteTrack.trackPublication.kind === \"video\" ? (\n            <VideoComponent\n                key={remoteTrack.trackPublication.trackSid}\n                track={remoteTrack.trackPublication.videoTrack!}\n                participantIdentity={remoteTrack.participantIdentity}\n            />\n        ) : (\n            <AudioComponent\n                key={remoteTrack.trackPublication.trackSid}\n                track={remoteTrack.trackPublication.audioTrack!}\n            />\n        )\n    )}\n</div>\n

This code snippet does the following:

Let's see now the code of the VideoComponent.txs file:

VideoComponent.tsx
interface VideoComponentProps {\n    track: LocalVideoTrack | RemoteVideoTrack; // (1)!\n    participantIdentity: string; // (2)!\n    local?: boolean; // (3)!\n}\n\nfunction VideoComponent({ track, participantIdentity, local = false }: VideoComponentProps) {\n    const videoElement = useRef<HTMLVideoElement | null>(null); // (4)!\n\n    useEffect(() => {\n        if (videoElement.current) {\n            track.attach(videoElement.current); // (5)!\n        }\n\n        return () => {\n            track.detach(); // (6)!\n        };\n    }, [track]);\n\n    return (\n        <div id={\"camera-\" + participantIdentity} className=\"video-container\">\n            <div className=\"participant-data\">\n                <p>{participantIdentity + (local ? \" (You)\" : \"\")}</p>\n            </div>\n            <video ref={videoElement} id={track.sid}></video>\n        </div>\n    );\n}\n
  1. The video track object, which can be a LocalVideoTrack or a RemoteVideoTrack.
  2. The participant identity associated with the video track.
  3. A boolean flag that indicates whether the video track belongs to the local participant.
  4. The reference to the video element in the HTML template.
  5. Attach the video track to the video element when the component is mounted.
  6. Detach the video track when the component is unmounted.

The VideoComponent does the following:

Finally, let's see the code of the AudioComponent.tsx file:

AudioComponent.tsx
interface AudioComponentProps {\n    track: LocalAudioTrack | RemoteAudioTrack; // (1)!\n}\n\nfunction AudioComponent({ track }: AudioComponentProps) {\n    const audioElement = useRef<HTMLAudioElement | null>(null); // (2)!\n\n    useEffect(() => {\n        if (audioElement.current) {\n            track.attach(audioElement.current); // (3)!\n        }\n\n        return () => {\n            track.detach(); // (4)!\n        };\n    }, [track]);\n\n    return <audio ref={audioElement} id={track.sid} />;\n}\n
  1. The audio track object, which can be a LocalAudioTrack or a RemoteAudioTrack, although in this case, it will always be a RemoteAudioTrack.
  2. The reference to the audio element in the HTML template.
  3. Attach the audio track to the audio element when the component is mounted.
  4. Detach the audio track when the component is unmounted.

The AudioComponent is similar to the VideoComponent but is used to display audio tracks. It defines the track property as a prop for the component and creates a reference to the audio element in the HTML template. The audio track is attached to the audio element when the component is mounted and detached when the component is unmounted.

"},{"location":"docs/tutorials/application-client/react/#leaving-the-room","title":"Leaving the Room","text":"

When the user wants to leave the room, they can click the Leave Room button. This action calls the leaveRoom() function:

App.tsx
async function leaveRoom() {\n    // Leave the room by calling 'disconnect' method over the Room object\n    await room?.disconnect(); // (1)!\n\n    // Reset the state\n    setRoom(undefined); // (2)!\n    setLocalTrack(undefined);\n    setRemoteTracks([]);\n}\n
  1. Disconnect the user from the room.
  2. Reset all variables to their initial state.

The leaveRoom() function performs the following actions:

"},{"location":"docs/tutorials/application-client/vue/","title":"openvidu-vue","text":"

Source code

This tutorial is a simple video-call application built with Vue that allows:

It uses the LiveKit JS SDK to connect to the LiveKit server and interact with the video call room.

"},{"location":"docs/tutorials/application-client/vue/#running-this-tutorial","title":"Running this tutorial","text":""},{"location":"docs/tutorials/application-client/vue/#1-run-openvidu-server","title":"1. Run OpenVidu Server","text":"Run OpenVidu locallyDeploy OpenVidu

  1. Download OpenVidu

    git clone https://github.com/OpenVidu/openvidu-local-deployment\n

  2. Configure the local deployment

    Windows macOS Linux 
    cd openvidu-local-deployment/community\n.\\configure_lan_private_ip_windows.bat\n
    cd openvidu-local-deployment/community\n./configure_lan_private_ip_macos.sh\n
    cd openvidu-local-deployment/community\n./configure_lan_private_ip_linux.sh\n

  3. Run OpenVidu

    docker compose up\n

To use a production-ready OpenVidu deployment, visit the official deployment guide.

"},{"location":"docs/tutorials/application-client/vue/#2-download-the-tutorial-code","title":"2. Download the tutorial code","text":"
git clone https://github.com/OpenVidu/openvidu-livekit-tutorials.git\n
"},{"location":"docs/tutorials/application-client/vue/#3-run-a-server-application","title":"3. Run a server application","text":"Node Go Ruby Java Python Rust PHP .NET

To run this server application, you need Node installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/node\n
  2. Install dependencies 
    npm install\n
  3. Run the application 
    npm start\n

To run this server application, you need Go installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/go\n
  2. Run the application 
    go run main.go\n

To run this server application, you need Ruby installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/ruby\n
  2. Install dependencies 
    bundle install\n
  3. Run the application 
    ruby app.rb\n

To run this server application, you need Java and Maven installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/java\n
  2. Run the application 
    mvn spring-boot:run\n

To run this server application, you need Python 3 installed on your device.

  1. Navigate into the server directory

    cd openvidu-livekit-tutorials/application-server/python\n

  2. Create a python virtual environment

    python -m venv venv\n

  3. Activate the virtual environment

    Windows macOS Linux 
    .\\venv\\Scripts\\activate\n
    . ./venv/bin/activate\n
    . ./venv/bin/activate\n

  4. Install dependencies

    pip install -r requirements.txt\n

  5. Run the application

    python app.py\n

To run this server application, you need Rust installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/rust\n
  2. Run the application 
    cargo run\n

To run this server application, you need PHP and Composer installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/php\n
  2. Install dependencies 
    composer install\n
  3. Run the application 
    composer start\n

To run this server application, you need .NET installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/dotnet\n
  2. Run the application 
    dotnet run\n

Warning

This .NET server application needs the LIVEKIT_API_SECRET env variable to be at least 32 characters long. Make sure to update it here and in your OpenVidu Server.

"},{"location":"docs/tutorials/application-client/vue/#4-run-the-client-application","title":"4. Run the client application","text":"

To run the client application tutorial, you need Node installed on your development computer.

  1. Navigate into the application client directory:

    cd openvidu-livekit-tutorials/application-client/openvidu-vue\n

  2. Install dependencies:

    npm install\n

  3. Run the application:

    npm start\n

Once the server is up and running, you can test the application by visiting http://localhost:5080. You should see a screen like this:

Accessing your application client from other devices in your local network

One advantage of running OpenVidu locally is that you can test your application client with other devices in your local network very easily without worrying about SSL certificates.

Access your application client through https://xxx-yyy-zzz-www.openvidu-local.dev:5443, where xxx-yyy-zzz-www part of the domain is your LAN private IP address with dashes (-) instead of dots (.). For more information, see section Accessing your app from other devices in your network.

"},{"location":"docs/tutorials/application-client/vue/#understanding-the-code","title":"Understanding the code","text":"

This Vue project has been generated using the Vue CLI tool. You may come across various configuration files and other items that are not essential for this tutorial. Our focus will be on the key files located within the src/ directory:

To use the LiveKit JS SDK in a Vue application, you need to install the livekit-client package. This package provides the necessary classes and methods to interact with the LiveKit server. You can install it using the following command:

npm install livekit-client\n

Now let's see the code of the App.vue file:

App.vue
type TrackInfo = {\n    // (1)!\n    trackPublication: RemoteTrackPublication;\n    participantIdentity: string;\n};\n\n// For local development, leave these variables empty\n// For production, configure them with correct URLs depending on your deployment\nlet APPLICATION_SERVER_URL = \"\"; // (2)!\nlet LIVEKIT_URL = \"\"; // (3)!\nconfigureUrls();\n\nfunction configureUrls() {\n    // If APPLICATION_SERVER_URL is not configured, use default value from local development\n    if (!APPLICATION_SERVER_URL) {\n        if (window.location.hostname === \"localhost\") {\n            APPLICATION_SERVER_URL = \"http://localhost:6080/\";\n        } else {\n            APPLICATION_SERVER_URL = \"https://\" + window.location.hostname + \":6443/\";\n        }\n    }\n\n    // If LIVEKIT_URL is not configured, use default value from local development\n    if (!LIVEKIT_URL) {\n        if (window.location.hostname === \"localhost\") {\n            LIVEKIT_URL = \"ws://localhost:7880/\";\n        } else {\n            LIVEKIT_URL = \"wss://\" + window.location.hostname + \":7443/\";\n        }\n    }\n}\n\nconst room = ref<Room>(); // (4)!\nconst localTrack = ref<LocalVideoTrack>(); // (5)!\nconst remoteTracksMap: Ref<Map<string, TrackInfo>> = ref(new Map()); // (6)!\n\nlet participantName = ref(\"Participant\" + Math.floor(Math.random() * 100)); // (7)!\nlet roomName = ref(\"Test Room\"); // (8)!\n
  1. TrackInfo type, which groups a track publication with the participant's identity.
  2. The URL of the application server.
  3. The URL of the LiveKit server.
  4. The room object, which represents the video call room.
  5. The local video track, which represents the user's camera.
  6. Map that links track SIDs with TrackInfo objects. This map is used to store remote tracks and their associated participant identities.
  7. The participant's name.
  8. The room name.

The App.vue file defines the following variables:

Configure the URLs

For local development, leave APPLICATION_SERVER_URL and LIVEKIT_URL variables empty. The function configureUrls() will automatically configure them with default values. However, for production, you should configure these variables with the correct URLs depending on your deployment.

"},{"location":"docs/tutorials/application-client/vue/#joining-a-room","title":"Joining a Room","text":"

After the user specifies their participant name and the name of the room they want to join, when they click the Join button, the joinRoom() function is called:

App.vue
async function joinRoom() {\n    // Initialize a new Room object\n    room.value = new Room(); // (1)!\n\n    // Specify the actions when events take place in the room\n    // On every new Track received...\n    room.value.on(\n        RoomEvent.TrackSubscribed,\n        (_track: RemoteTrack, publication: RemoteTrackPublication, participant: RemoteParticipant) => {\n            // (2)!\n            remoteTracksMap.value.set(publication.trackSid, {\n                trackPublication: publication,\n                participantIdentity: participant.identity\n            });\n        }\n    );\n\n    // On every Track destroyed...\n    room.value.on(RoomEvent.TrackUnsubscribed, (_track: RemoteTrack, publication: RemoteTrackPublication) => {\n        // (3)!\n        remoteTracksMap.value.delete(publication.trackSid);\n    });\n\n    try {\n        // Get a token from your application server with the room name and participant name\n        const token = await getToken(roomName.value, participantName.value); // (4)!\n\n        // Connect to the room with the LiveKit URL and the token\n        await room.value.connect(LIVEKIT_URL, token); // (5)!\n\n        // Publish your camera and microphone\n        await room.value.localParticipant.enableCameraAndMicrophone(); // (6)!\n        localTrack.value = room.value.localParticipant.videoTrackPublications.values().next().value.videoTrack;\n    } catch (error: any) {\n        console.log(\"There was an error connecting to the room:\", error.message);\n        await leaveRoom();\n    }\n\n    // Add listener for beforeunload event to leave the room when the user closes the tab\n    window.addEventListener(\"beforeunload\", leaveRoom); // (7)!\n}\n
  1. Initialize a new Room object.
  2. Event handling for when a new track is received in the room.
  3. Event handling for when a track is destroyed.
  4. Get a token from the application server with the room name and participant name from the form.
  5. Connect to the room with the LiveKit URL and the token.
  6. Publish your camera and microphone.
  7. Add a listener for the beforeunload event to leave the room when the user closes the tab.

The joinRoom() function performs the following actions:

  1. It creates a new Room object. This object represents the video call room.

    Info

    When the room object is defined, the HTML template is automatically updated hiding the \"Join room\" page and showing the \"Room\" layout.

  2. Event handling is configured for different scenarios within the room. These events are fired when new tracks are subscribed to and when existing tracks are unsubscribed.

    These event handlers are essential for managing the behavior of tracks within the video call. You can further extend the event handling as needed for your application.

    Take a look at all events

    You can take a look at all the events in the Livekit Documentation

  3. It requests a token from the application server using the room name and participant name. This is done by calling the getToken() function:

    App.vue
    /**\n * --------------------------------------------\n * GETTING A TOKEN FROM YOUR APPLICATION SERVER\n * --------------------------------------------\n * The method below request the creation of a token to\n * your application server. This prevents the need to expose\n * your LiveKit API key and secret to the client side.\n *\n * In this sample code, there is no user control at all. Anybody could\n * access your application server endpoints. In a real production\n * environment, your application server must identify the user to allow\n * access to the endpoints.\n */\nasync function getToken(roomName: string, participantName: string) {\n    const response = await fetch(APPLICATION_SERVER_URL + \"token\", {\n        method: \"POST\",\n        headers: {\n            \"Content-Type\": \"application/json\"\n        },\n        body: JSON.stringify({\n            roomName,\n            participantName\n        })\n    });\n\n    if (!response.ok) {\n        const error = await response.json();\n        throw new Error(`Failed to get token: ${error.errorMessage}`);\n    }\n\n    const data = await response.json();\n    return data.token;\n}\n

    This function sends a POST request using fetch() to the application server's /token endpoint. The request body contains the room name and participant name. The server responds with a token that is used to connect to the room.

  4. It connects to the room using the LiveKit URL and the token.

  5. It publishes the camera and microphone tracks to the room using room.localParticipant.enableCameraAndMicrophone(), which asks the user for permission to access their camera and microphone at the same time. The local video track is then stored in the localTrack variable.
  6. It adds a listener for the beforeunload event to leave the room when the user closes the tab.
"},{"location":"docs/tutorials/application-client/vue/#displaying-video-and-audio-tracks","title":"Displaying Video and Audio Tracks","text":"

In order to display participants' video and audio tracks, the main component integrates the VideoComponent and AudioComponent.

App.vue
<div id=\"layout-container\">\n    <VideoComponent v-if=\"localTrack\" :track=\"localTrack\" :participantIdentity=\"participantName\" :local=\"true\" />\n    <template v-for=\"remoteTrack of remoteTracksMap.values()\" :key=\"remoteTrack.trackPublication.trackSid\">\n        <VideoComponent\n            v-if=\"remoteTrack.trackPublication.kind === 'video'\"\n            :track=\"remoteTrack.trackPublication.videoTrack!\"\n            :participantIdentity=\"remoteTrack.participantIdentity\"\n        />\n        <AudioComponent v-else :track=\"remoteTrack.trackPublication.audioTrack!\" hidden />\n    </template>\n</div>\n

This code snippet does the following:

Let's see now the code of the VideoComponent.vue file:

VideoComponent.vue
const props = withDefaults(\n    defineProps<{\n        track: LocalVideoTrack | RemoteVideoTrack; // (1)!\n        participantIdentity: string; // (2)!\n        local?: boolean; // (3)!\n    }>(),\n    {\n        local: false\n    }\n);\n\nconst videoElement = ref<HTMLMediaElement | null>(null); // (4)!\n\nonMounted(() => {\n    if (videoElement.value) {\n        props.track.attach(videoElement.value); // (5)!\n    }\n});\n\nonUnmounted(() => {\n    props.track.detach(); // (6)!\n});\n
  1. The video track object, which can be a LocalVideoTrack or a RemoteVideoTrack.
  2. The participant identity associated with the video track.
  3. A boolean flag that indicates whether the video track belongs to the local participant.
  4. The reference to the video element in the HTML template.
  5. Attach the video track to the video element when the component is mounted.
  6. Detach the video track when the component is unmounted.

The VideoComponent does the following:

Finally, let's see the code of the AudioComponent.vue file:

AudioComponent.vue
const props = defineProps<{\n    track: LocalAudioTrack | RemoteAudioTrack; // (1)!\n}>();\nconst audioElement = ref<HTMLMediaElement | null>(null); // (2)!\n\nonMounted(() => {\n    if (audioElement.value) {\n        props.track.attach(audioElement.value); // (3)!\n    }\n});\n\nonUnmounted(() => {\n    props.track.detach(); // (4)!\n});\n
  1. The audio track object, which can be a LocalAudioTrack or a RemoteAudioTrack, although in this case, it will always be a RemoteAudioTrack.
  2. The reference to the audio element in the HTML template.
  3. Attach the audio track to the audio element when the component is mounted.
  4. Detach the audio track when the component is unmounted.

The AudioComponent is similar to the VideoComponent but is used to display audio tracks. It defines the track property using the defineProps() function and creates a reference to the audio element in the HTML template. The audio track is attached to the audio element when the component is mounted and detached when the component is unmounted.

"},{"location":"docs/tutorials/application-client/vue/#leaving-the-room","title":"Leaving the Room","text":"

When the user wants to leave the room, they can click the Leave Room button. This action calls the leaveRoom() function:

App.vue
async function leaveRoom() {\n    // Leave the room by calling 'disconnect' method over the Room object\n    await room.value?.disconnect(); // (1)!\n\n    // Empty all variables\n    room.value = undefined; // (2)!\n    localTrack.value = undefined;\n    remoteTracksMap.value.clear();\n\n    window.removeEventListener(\"beforeunload\", leaveRoom); // (3)!\n}\n\nonUnmounted(() => {\n    // (4)!\n    // On component unmount, leave the room\n    leaveRoom();\n});\n
  1. Disconnect the user from the room.
  2. Reset all variables to their initial state.
  3. Remove the beforeunload event listener.
  4. Call the leaveRoom() function when the component is unmounted.

The leaveRoom() function performs the following actions:

The leaveRoom() function is also called when the component is unmounted using the onUnmounted() lifecycle hook. This ensures that the user leaves the room when the component is no longer needed.

"},{"location":"docs/tutorials/application-server/","title":"Application server tutorials","text":"

Every application server below has two specific purposes:

To do so they all define two REST endpoints:

They use the proper LiveKit Server SDK for their language, if available.

NodeJS

Go

Ruby

Java

Python

Rust

PHP

.NET

"},{"location":"docs/tutorials/application-server/dotnet/","title":".NET","text":"

Source code

This is a minimal server application built for .NET with ASP.NET Core Minimal APIs that allows:

Unfortunately there is no .NET SDK for LiveKit available, so the application has to manually build LiveKit compatible JWT tokens using the .NET library System.IdentityModel.Tokens.Jwt, and check the validity of webhook events on its own. It is a fairly easy process.

"},{"location":"docs/tutorials/application-server/dotnet/#running-this-application","title":"Running this application","text":"

Download the tutorial code:

git clone https://github.com/OpenVidu/openvidu-livekit-tutorials.git\n

To run this server application, you need .NET installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/dotnet\n
  2. Run the application 
    dotnet run\n

Warning

This .NET server application needs the LIVEKIT_API_SECRET env variable to be at least 32 characters long. Make sure to update it here and in your OpenVidu Server.

Info

You can run any Application Client to test against this server right away.

"},{"location":"docs/tutorials/application-server/dotnet/#understanding-the-code","title":"Understanding the code","text":"

The application is a simple ASP.NET Core Minimal APIs app with a single file Program.cs that exports two endpoints:

Let's see the code Program.cs file:

Program.cs
var builder = WebApplication.CreateBuilder(args); // (1)!\nvar MyAllowSpecificOrigins = \"_myAllowSpecificOrigins\"; // (2)!\n\nIConfiguration config = new ConfigurationBuilder() // (3)!\n                .SetBasePath(Directory.GetCurrentDirectory())\n                .AddJsonFile(\"appsettings.json\")\n                .AddEnvironmentVariables().Build();\n\n// Load env variables\nvar SERVER_PORT = config.GetValue<int>(\"SERVER_PORT\"); // (4)!\nvar LIVEKIT_API_KEY = config.GetValue<string>(\"LIVEKIT_API_KEY\"); // (5)!\nvar LIVEKIT_API_SECRET = config.GetValue<string>(\"LIVEKIT_API_SECRET\"); // (6)!\n\n// Enable CORS support\nbuilder.Services.AddCors(options => // (7)!\n{\n    options.AddPolicy(name: MyAllowSpecificOrigins,\n                      builder =>\n                      {\n                          builder.WithOrigins(\"*\").AllowAnyHeader();\n                      });\n});\n\nbuilder.WebHost.UseKestrel(serverOptions => // (8)!\n{\n    serverOptions.ListenAnyIP(SERVER_PORT);\n});\n\nvar app = builder.Build(); // (9)!\napp.UseCors(MyAllowSpecificOrigins);\n
  1. A WebApplicationBuilder instance to build the application.
  2. The name of the CORS policy to be used in the application.
  3. A IConfiguration instance to load the configuration from the appsettings.json file, including the required environment variables.
  4. The port where the application will be listening.
  5. The API key of LiveKit Server.
  6. The API secret of LiveKit Server.
  7. Configure CORS support.
  8. Configure the port.
  9. Build the application and enable CORS support.

The Program.cs file imports the required dependencies and loads the necessary environment variables (defined in appsettings.json file):

Finally the application enables CORS support and the port where the application will be listening.

"},{"location":"docs/tutorials/application-server/dotnet/#create-token","title":"Create token","text":"

The endpoint /token accepts POST requests with a payload of type application/json, containing the following fields:

Program.cs
app.MapPost(\"/token\", async (HttpRequest request) =>\n{\n    var body = new StreamReader(request.Body); // (1)!\n    string postData = await body.ReadToEndAsync();\n    Dictionary<string, dynamic> bodyParams = JsonSerializer.Deserialize<Dictionary<string, dynamic>>(postData) ?? new Dictionary<string, dynamic>();\n\n    if (bodyParams.TryGetValue(\"roomName\", out var roomName) && bodyParams.TryGetValue(\"participantName\", out var participantName))\n    {\n        var token = CreateLiveKitJWT(roomName.ToString(), participantName.ToString()); // (2)!\n        return Results.Json(new { token }); // (3)!\n    }\n    else\n    {\n        return Results.BadRequest(new { errorMessage = \"roomName and participantName are required\" }); // (4)!\n    }\n});\n
  1. The endpoint obtains a Dictionary from the body request, and check if fields roomName and participantName are available.
  2. Create a new JWT token with the room and participant name.
  3. Return the token to the client.
  4. Return a 400 error if required fields are not available.

The endpoint obtains a Dictionary from the body request, and check if fields roomName and participantName are available. If not, it returns a 400 error.

If required fields are available, a new JWT token is created. Unfortunately there is no .NET SDK for LiveKit, so we need to create the JWT token manually. The CreateLiveKitJWT method is responsible for creating the LiveKit compatible JWT token:

Program.cs
string CreateLiveKitJWT(string roomName, string participantName)\n{\n    JwtHeader headers = new(new SigningCredentials(new SymmetricSecurityKey(Encoding.UTF8.GetBytes(LIVEKIT_API_SECRET)), \"HS256\")); // (1)!\n\n    var videoGrants = new Dictionary<string, object>() // (2)!\n    {\n        { \"room\", roomName },\n        { \"roomJoin\", true }\n    };\n    JwtPayload payload = new()\n    {\n        { \"exp\", new DateTimeOffset(DateTime.UtcNow.AddHours(6)).ToUnixTimeSeconds() }, // (3)!\n        { \"iss\", LIVEKIT_API_KEY }, // (4)!\n        { \"nbf\", 0 }, // (5)!\n        { \"sub\", participantName }, // (6)!\n        { \"name\", participantName },\n        { \"video\", videoGrants }\n    };\n    JwtSecurityToken token = new(headers, payload);\n    return new JwtSecurityTokenHandler().WriteToken(token); // (7)!\n}\n
  1. Create a new JwtHeader with LIVEKIT_API_SECRET as the secret key and HS256 as the encryption algorithm.
  2. Create a new Dictionary with the video grants for the participant. roomJoin allows the user to join a room and room determines the specific room. Check out all Video Grants.
  3. Set the expiration time of the token. LiveKit default's is 6 hours.
  4. Set the API key of LiveKit Server as the issuer (iss) of the token.
  5. The Not before field (nbf) sets when the token becomes valid (0 for immediately valid).
  6. Set the participant's name in the claims sub and name.
  7. Finally, the returned token is sent back to the client.

This method uses the native System.IdentityModel.Tokens.Jwt library to create a JWT token valid for LiveKit. The most important field in the JwtPayload is video, which will determine the VideoGrant permissions of the participant in the Room. You can also customize the expiration time of the token by changing the exp field, and add a metadata field for the participant. Check out all the available claims.

Finally, the returned token is sent back to the client.

"},{"location":"docs/tutorials/application-server/dotnet/#receive-webhook","title":"Receive webhook","text":"

The endpoint /livekit/webhook accepts POST requests with a payload of type application/webhook+json. This is the endpoint where LiveKit Server will send webhook events.

Program.cs
app.MapPost(\"/livekit/webhook\", async (HttpRequest request) =>\n{\n    var body = new StreamReader(request.Body);\n    string postData = await body.ReadToEndAsync(); // (1)!\n\n    var authHeader = request.Headers[\"Authorization\"]; // (2)!\n    if (authHeader.Count == 0)\n    {\n        return Results.BadRequest(\"Authorization header is required\");\n    }\n    try\n    {\n        VerifyWebhookEvent(authHeader.First(), postData); // (3)!\n    }\n    catch (Exception e)\n    {\n        Console.Error.WriteLine(\"Error validating webhook event: \" + e.Message);\n        return Results.Unauthorized();\n    }\n\n    Console.Out.WriteLine(postData); // (4)!\n    return Results.Ok(); // (5)!\n});\n
  1. The raw string body of the request contains the webhook event.
  2. The Authorization header is required to validate the webhook event.
  3. Verify the webhook event.
  4. Consume the event as you whish.
  5. Return a response to LiveKit Server to let it know that the webhook was received correctly.

The endpoint receives the incoming webhook event and validates it to ensure it is coming from our LiveKit Server. For that we need the raw string body and the Authorization header of the request. After validating it, we can consume the event (in this case, we just log it), and we must also return a 200 OK response to LiveKit Server to let it know that the webhook was received correctly.

Unfortunately there is no .NET SDK for LiveKit, so we need to manually validate the webhook event. The VerifyWebhookEvent method does that:

Program.cs
void VerifyWebhookEvent(string authHeader, string body)\n{\n    var utf8Encoding = new UTF8Encoding();\n    var tokenValidationParameters = new TokenValidationParameters()\n    {\n        ValidateIssuerSigningKey = true,\n        IssuerSigningKey = new SymmetricSecurityKey(utf8Encoding.GetBytes(LIVEKIT_API_SECRET)), // (1)!\n        ValidateIssuer = true,\n        ValidIssuer = LIVEKIT_API_KEY, // (2)!\n        ValidateAudience = false\n    };\n\n    var jwtValidator = new JwtSecurityTokenHandler();\n    var claimsPrincipal = jwtValidator.ValidateToken(authHeader, tokenValidationParameters, out SecurityToken validatedToken); // (3)!\n\n    var sha256 = SHA256.Create();\n    var hashBytes = sha256.ComputeHash(utf8Encoding.GetBytes(body));\n    var hash = Convert.ToBase64String(hashBytes); // (4)!\n\n    if (claimsPrincipal.HasClaim(c => c.Type == \"sha256\") && claimsPrincipal.FindFirstValue(\"sha256\") != hash)\n    {\n        throw new ArgumentException(\"sha256 checksum of body does not match!\");\n    }\n}\n
  1. Use the LIVEKIT_API_SECRET as the secret key to validate the token.
  2. Set the LIVEKIT_API_KEY as the issuer of the token.
  3. Validate the Authorization header with the recently created TokenValidationParameters. If the LIVEKIT_API_SECRET or LIVEKIT_API_KEY of the LiveKit Server that sent the event do not match the ones in the application, this will throw an exception.
  4. Calculate the SHA256 hash of the body and compare it with the sha256 claim in the token. If they match, it means the webhook event was not tampered and we can trust it.

We need a TokenValidationParameters object from the Microsoft.IdentityModel.Tokens namespace. We use the LIVEKIT_API_SECRET as the symmetric key, and the LIVEKIT_API_KEY as the issuer of the token.

If method JwtSecurityTokenHandler#ValidateToken does rise an exception when validating the Authorization header, it means the webhook event was sent by a LiveKit Server with different credentials.

Finally, we calculate the SHA256 hash of the body and compare it with the sha256 claim in the token. If they match, it means the webhook event was not tampered and we can definitely trust it.

"},{"location":"docs/tutorials/application-server/go/","title":"Go","text":"

Source code

This is a minimal server application built for Go with Gin that allows:

It internally uses the LiveKit Go SDK.

"},{"location":"docs/tutorials/application-server/go/#running-this-application","title":"Running this application","text":"

Download the tutorial code:

git clone https://github.com/OpenVidu/openvidu-livekit-tutorials.git\n

To run this server application, you need Go installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/go\n
  2. Run the application 
    go run main.go\n

Info

You can run any Application Client to test against this server right away.

"},{"location":"docs/tutorials/application-server/go/#understanding-the-code","title":"Understanding the code","text":"

The application is a simple Go app with a single file main.go that exports two endpoints:

Let's see the code of the main.go file:

main.go
var (\n    SERVER_PORT        = getEnv(\"SERVER_PORT\", \"6080\") // (1)!\n    LIVEKIT_API_KEY    = getEnv(\"LIVEKIT_API_KEY\", \"devkey\") // (2)!\n    LIVEKIT_API_SECRET = getEnv(\"LIVEKIT_API_SECRET\", \"secret\") // (3)!\n)\n\nfunc getEnv(key, defaultValue string) string {\n    if value, ok := os.LookupEnv(key); ok {\n        return value\n    }\n    return defaultValue\n}\n
  1. The port where the application will be listening
  2. The API key of LiveKit Server
  3. The API secret of LiveKit Server

The main.go file first loads the necessary environment variables:

Method getEnv simply load each environment variable, giving a default value if not found.

The server launch takes place in the main function at the end of the file, where we set the REST endpoints and start the server on SERVER_PORT:

main.go
func main() {\n    router := gin.Default() // (1)!\n    router.Use(cors.Default()) // (2)!\n    router.POST(\"/token\", createToken) // (3)!\n    router.POST(\"/livekit/webhook\", receiveWebhook) // (4)!\n    router.Run(\":\" + SERVER_PORT) // (5)!\n}\n
  1. Create a new Gin router
  2. Enable CORS support
  3. Create the /token endpoint
  4. Create the /livekit/webhook endpoint
  5. Start the server on the SERVER_PORT
"},{"location":"docs/tutorials/application-server/go/#create-token","title":"Create token","text":"

The endpoint /token accepts POST requests with a payload of type application/json, containing the following fields:

main.go
func createToken(context *gin.Context) {\n    var body struct {\n        RoomName        string `json:\"roomName\"`\n        ParticipantName string `json:\"participantName\"`\n    }\n\n    if err := context.BindJSON(&body); err != nil {\n        context.JSON(http.StatusBadRequest, err.Error())\n        return\n    }\n\n    if body.RoomName == \"\" || body.ParticipantName == \"\" {\n        context.JSON(http.StatusBadRequest, gin.H{\"errorMessage\": \"roomName and participantName are required\"})\n        return\n    }\n\n    at := auth.NewAccessToken(LIVEKIT_API_KEY, LIVEKIT_API_SECRET) // (1)!\n    grant := &auth.VideoGrant{\n        RoomJoin: true,\n        Room:     body.RoomName,\n    }\n    at.AddGrant(grant).SetIdentity(body.ParticipantName) // (2)!\n\n    token, err := at.ToJWT() // (3)!\n    if err != nil {\n        context.JSON(http.StatusInternalServerError, err.Error())\n        return\n    }\n\n    context.JSON(http.StatusOK, gin.H{\"token\": token}) // (4)!\n}\n
  1. A new AccessToken is created providing the LIVEKIT_API_KEY and LIVEKIT_API_SECRET.
  2. We set the video grants and identity of the participant in the AccessToken. RoomJoin allows the user to join a room and Room determines the specific room. Check out all Video Grants.
  3. We convert the AccessToken to a JWT token.
  4. Finally, the token is sent back to the client.

We first load the request body into a struct with roomName and participantName string fields. If they are not available, it returns a 400 error.

If required fields are available, a new JWT token is created. For that we use the LiveKit Go SDK:

  1. A new AccessToken is created providing the LIVEKIT_API_KEY and LIVEKIT_API_SECRET.
  2. We set the video grants and identity of the participant in the AccessToken. RoomJoin allows the user to join a room and Room determines the specific room. Check out all Video Grants.
  3. We convert the AccessToken to a JWT token and return it to the client.
  4. Finally, the token is sent back to the client.
"},{"location":"docs/tutorials/application-server/go/#receive-webhook","title":"Receive webhook","text":"

The endpoint /livekit/webhook accepts POST requests with a payload of type application/webhook+json. This is the endpoint where LiveKit Server will send webhook events.

main.go
func receiveWebhook(context *gin.Context) {\n    authProvider := auth.NewSimpleKeyProvider( // (1)!\n        LIVEKIT_API_KEY, LIVEKIT_API_SECRET,\n    )\n    event, err := webhook.ReceiveWebhookEvent(context.Request, authProvider) // (2)!\n    if err != nil {\n        fmt.Fprintf(os.Stderr, \"error validating webhook event: %v\", err)\n        return\n    }\n    fmt.Println(\"LiveKit Webhook\", event) // (3)!\n}\n
  1. Create a SimpleKeyProvider with the LIVEKIT_API_KEY and LIVEKIT_API.
  2. Receive the webhook event providing the http.Request in the Gin context and the SimpleKeyProvider we just created. This will validate and decode the incoming webhook event.
  3. Consume the event as you whish.

  1. Create a SimpleKeyProvider with the LIVEKIT_API_KEY and LIVEKIT_API.
  2. Receive the webhook event providing the http.Request in the Gin context and the SimpleKeyProvider we just created. This will validate and decode the incoming webhook event.
  3. Consume the event as you whish.

"},{"location":"docs/tutorials/application-server/java/","title":"Java","text":"

Source code

This is a minimal server application built for Java with Spring Boot that allows:

It internally uses LiveKit Kotlin SDK.

"},{"location":"docs/tutorials/application-server/java/#running-this-application","title":"Running this application","text":"

Download the tutorial code:

git clone https://github.com/OpenVidu/openvidu-livekit-tutorials.git\n

To run this server application, you need Java and Maven installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/java\n
  2. Run the application 
    mvn spring-boot:run\n

Info

You can run any Application Client to test against this server right away.

"},{"location":"docs/tutorials/application-server/java/#understanding-the-code","title":"Understanding the code","text":"

The application is a simple Spring Boot app with a single controller Controller.java that exports two endpoints:

Let's see the code of the Controller.java file:

Controller.java
@CrossOrigin(origins = \"*\") // (1)!\n@RestController // (2)!\npublic class Controller {\n\n    @Value(\"${livekit.api.key}\")\n    private String LIVEKIT_API_KEY; // (3)!\n\n    @Value(\"${livekit.api.secret}\")\n    private String LIVEKIT_API_SECRET; // (4)!\n\n    ...\n}\n
  1. Allows the application to be accessed from any domain
  2. Marks the class as a controller where every method returns a domain object instead of a view
  3. The API key of LiveKit Server
  4. The API secret of LiveKit Server

Starting by the top, the Controller class has the following annotations:

Going deeper, the Controller class has the following fields:

"},{"location":"docs/tutorials/application-server/java/#create-token","title":"Create token","text":"

The endpoint /token accepts POST requests with a payload of type application/json, containing the following fields:

Controller.java
@PostMapping(value = \"/token\")\npublic ResponseEntity<Map<String, String>> createToken(@RequestBody Map<String, String> params) {\n    String roomName = params.get(\"roomName\");\n    String participantName = params.get(\"participantName\");\n\n    if (roomName == null || participantName == null) {\n        return ResponseEntity.badRequest().body(Map.of(\"errorMessage\", \"roomName and participantName are required\"));\n    }\n\n    AccessToken token = new AccessToken(LIVEKIT_API_KEY, LIVEKIT_API_SECRET); // (1)!\n    token.setName(participantName); // (2)!\n    token.setIdentity(participantName);\n    token.addGrants(new RoomJoin(true), new RoomName(roomName)); // (3)!\n\n    return ResponseEntity.ok(Map.of(\"token\", token.toJwt())); // (4)!\n}\n
  1. A new AccessToken is created providing the LIVEKIT_API_KEY and LIVEKIT_API_SECRET.
  2. We set participant's name and identity in the AccessToken.
  3. We set the video grants in the AccessToken. RoomJoin allows the user to join a room and RoomName determines the specific room. Check out all Video Grants.
  4. Finally, the token is sent back to the client.

The endpoint first obtains the roomName and participantName parameters from the request body. If they are not available, it returns a 400 error.

If required fields are available, a new JWT token is created. For that we use the LiveKit Kotlin SDK:

  1. A new AccessToken is created providing the LIVEKIT_API_KEY and LIVEKIT_API_SECRET.
  2. We set participant's name and identity in the AccessToken.
  3. We set the video grants in the AccessToken. RoomJoin allows the user to join a room and RoomName determines the specific room. Check out all Video Grants.
  4. Finally, the token is sent back to the client.
"},{"location":"docs/tutorials/application-server/java/#receive-webhook","title":"Receive webhook","text":"

The endpoint /livekit/webhook accepts POST requests with a payload of type application/webhook+json. This is the endpoint where LiveKit Server will send webhook events.

Controller.java
@PostMapping(value = \"/livekit/webhook\", consumes = \"application/webhook+json\")\npublic ResponseEntity<String> receiveWebhook(@RequestHeader(\"Authorization\") String authHeader, @RequestBody String body) { // (1)!\n    WebhookReceiver webhookReceiver = new WebhookReceiver(LIVEKIT_API_KEY, LIVEKIT_API_SECRET); // (2)!\n    try {\n        WebhookEvent event = webhookReceiver.receive(body, authHeader); // (3)!\n        System.out.println(\"LiveKit Webhook: \" + event.toString()); // (4)!\n    } catch (Exception e) {\n        System.err.println(\"Error validating webhook event: \" + e.getMessage());\n    }\n    return ResponseEntity.ok(\"ok\");\n}\n
  1. We need the 'Authorization' header and the raw body of the HTTP request.
  2. Initialize the WebhookReceiver using the LIVEKIT_API_KEY and LIVEKIT_API_SECRET. It will help validating and decoding incoming webhook events.
  3. Obtain the WebhookEvent object using the WebhookReceiver#receive method. It takes the raw body as a String and the Authorization header of the request.
  4. Consume the event as you whish.

We declare the 'Authorization' header and the raw body of the HTTP request as parameters of the our method. We need both of them to validate and decode the incoming webhook event.

Then we initialize a WebhookReceiver object using the LIVEKIT_API_KEY and LIVEKIT_API_SECRET.

Finally we obtain a WebhookEvent object calling method WebhookReceiver#receive. It takes the raw body as a String and the Authorization header of the request. If everything is correct, you can do whatever you want with the event (in this case, we just log it).

Remember to return a 200 OK response at the end to let LiveKit Server know that the webhook was received correctly.

"},{"location":"docs/tutorials/application-server/node/","title":"Node","text":"

Source code

This is a minimal server application built for Node with Express that allows:

It internally uses LiveKit JS SDK.

"},{"location":"docs/tutorials/application-server/node/#running-this-application","title":"Running this application","text":"

Download the tutorial code:

git clone https://github.com/OpenVidu/openvidu-livekit-tutorials.git\n

To run this server application, you need Node installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/node\n
  2. Install dependencies 
    npm install\n
  3. Run the application 
    npm start\n

Info

You can run any Application Client to test against this server right away.

"},{"location":"docs/tutorials/application-server/node/#understanding-the-code","title":"Understanding the code","text":"

The application is a simple Express app with a single file index.js that exports two endpoints:

Let's see the code of the index.js file:

index.js
import \"dotenv/config\";\nimport express from \"express\";\nimport cors from \"cors\";\nimport { AccessToken, WebhookReceiver } from \"livekit-server-sdk\"; // (1)!\n\nconst SERVER_PORT = process.env.SERVER_PORT || 6080; // (2)!\nconst LIVEKIT_API_KEY = process.env.LIVEKIT_API_KEY || \"devkey\"; // (3)!\nconst LIVEKIT_API_SECRET = process.env.LIVEKIT_API_SECRET || \"secret\"; // (4)!\n\nconst app = express(); // (5)!\n\napp.use(cors()); // (6)!\napp.use(express.json()); // (7)!\napp.use(express.raw({ type: \"application/webhook+json\" })); // (8)!\n
  1. Import AccessToken from livekit-server-sdk.
  2. The port where the application will be listening.
  3. The API key of LiveKit Server.
  4. The API secret of LiveKit Server.
  5. Initialize the Express application.
  6. Enable CORS support.
  7. Enable JSON body parsing for the /token endpoint.
  8. Enable raw body parsing for the /livekit/webhook endpoint.

The index.js file imports the required dependencies and loads the necessary environment variables:

It also initializes the WebhookReceiver object that will help validating and decoding incoming webhook events.

Finally the express application is initialized. CORS is allowed, JSON body parsing is enabled for the /token endpoint and raw body parsing is enabled for the /livekit/webhook endpoint.

"},{"location":"docs/tutorials/application-server/node/#create-token","title":"Create token","text":"

The endpoint /token accepts POST requests with a payload of type application/json, containing the following fields:

index.js
app.post(\"/token\", async (req, res) => {\n  const roomName = req.body.roomName;\n  const participantName = req.body.participantName;\n\n  if (!roomName || !participantName) {\n    res.status(400).json({ errorMessage: \"roomName and participantName are required\" });\n    return;\n  }\n\n  const at = new AccessToken(LIVEKIT_API_KEY, LIVEKIT_API_SECRET, { // (1)!\n    identity: participantName,\n  });\n  at.addGrant({ roomJoin: true, room: roomName }); // (2)!\n  const token = await at.toJwt(); // (3)!\n  res.json({ token }); // (4)!\n});\n
  1. A new AccessToken is created providing the LIVEKIT_API_KEY, LIVEKIT_API_SECRET and setting the participant's identity.
  2. We set the video grants in the AccessToken. roomJoin allows the user to join a room and room determines the specific room. Check out all Video Grants.
  3. We convert the AccessToken to a JWT token.
  4. Finally, the token is sent back to the client.

The endpoint first obtains the roomName and participantName parameters from the request body. If they are not available, it returns a 400 error.

If required fields are available, a new JWT token is created. For that we use the LiveKit JS SDK:

  1. A new AccessToken is created providing the LIVEKIT_API_KEY, LIVEKIT_API_SECRET and setting the participant's identity.
  2. We set the video grants in the AccessToken. roomJoin allows the user to join a room and room determines the specific room. Check out all Video Grants.
  3. We convert the AccessToken to a JWT token.
  4. Finally, the token is sent back to the client.
"},{"location":"docs/tutorials/application-server/node/#receive-webhook","title":"Receive webhook","text":"

The endpoint /livekit/webhook accepts POST requests with a payload of type application/webhook+json. This is the endpoint where LiveKit Server will send webhook events.

index.js
const webhookReceiver = new WebhookReceiver( // (1)!\n  LIVEKIT_API_KEY,\n  LIVEKIT_API_SECRET\n);\n\napp.post(\"/livekit/webhook\", async (req, res) => {\n  try {\n    const event = await webhookReceiver.receive(\n      req.body, // (2)!\n      req.get(\"Authorization\") // (3)!\n    );\n    console.log(event); // (4)!\n  } catch (error) {\n    console.error(\"Error validating webhook event\", error);\n  }\n  res.status(200).send();\n});\n
  1. Initialize the WebhookReceiver using the LIVEKIT_API_KEY and LIVEKIT_API_SECRET. It will help validating and decoding incoming webhook events.
  2. The body of the HTTP request.
  3. The Authorization header of the HTTP request.
  4. Consume the event as you whish.

First of all we initialize the WebhookReceiver using the LIVEKIT_API_KEY and LIVEKIT_API_SECRET. This object will validate and decode the incoming webhook events.

The endpoint receives the incoming webhook with the async method WebhookReceiver#receive. It takes the body and the Authorization header of the request. If everything is correct, you can do whatever you want with the event (in this case, we just log it).

Remember to return a 200 OK response at the end to let LiveKit Server know that the webhook was received correctly.

"},{"location":"docs/tutorials/application-server/php/","title":"PHP","text":"

Source code

This is a minimal server application built for PHP that allows:

It internally uses LiveKit PHP SDK.

"},{"location":"docs/tutorials/application-server/php/#running-this-application","title":"Running this application","text":"

Download the tutorial code:

git clone https://github.com/OpenVidu/openvidu-livekit-tutorials.git\n

To run this server application, you need PHP and Composer installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/php\n
  2. Install dependencies 
    composer install\n
  3. Run the application 
    composer start\n

Info

You can run any Application Client to test against this server right away.

Warning

LiveKit PHP SDK requires library BCMath. This is available out-of-the-box in PHP for Windows, but a manual installation might be necessary in other OS. Run sudo apt install php-bcmath or sudo yum install php-bcmath

"},{"location":"docs/tutorials/application-server/php/#understanding-the-code","title":"Understanding the code","text":"

The application is a simple PHP app with a single file index.php that exports two endpoints:

Let's see the code of the index.php file:

index.php
<?php\nrequire __DIR__ . \"/vendor/autoload.php\";\n\nuse Agence104\\LiveKit\\AccessToken; // (1)!\nuse Agence104\\LiveKit\\AccessTokenOptions;\nuse Agence104\\LiveKit\\VideoGrant;\nuse Agence104\\LiveKit\\WebhookReceiver;\nuse Dotenv\\Dotenv;\n\nDotenv::createImmutable(__DIR__)->safeLoad();\n\nheader(\"Access-Control-Allow-Origin: *\"); // (2)!\nheader(\"Access-Control-Allow-Headers: Content-Type, Authorization\");\nheader(\"Content-type: application/json\");\n\n$LIVEKIT_API_KEY = $_ENV[\"LIVEKIT_API_KEY\"] ?? \"devkey\"; // (3)!\n$LIVEKIT_API_SECRET = $_ENV[\"LIVEKIT_API_SECRET\"] ?? \"secret\"; // (4)!\n
  1. Import all necessary dependencies from the PHP LiveKit library.
  2. Configure HTTP headers for the web server: enable CORS support, allow the Content-Type and Authorization headers and set the response content type to application/json.
  3. The API key of LiveKit Server.
  4. The API secret of LiveKit Server.

The index.php file imports the required dependencies, sets the HTTP headers for the web server and loads the necessary environment variables:

"},{"location":"docs/tutorials/application-server/php/#create-token","title":"Create token","text":"

The endpoint /token accepts POST requests with a payload of type application/json, containing the following fields:

index.php
<?php\nif (isset($_SERVER[\"REQUEST_METHOD\"]) && $_SERVER[\"REQUEST_METHOD\"] === \"POST\" && $_SERVER[\"PATH_INFO\"] === \"/token\") {\n    $data = json_decode(file_get_contents(\"php://input\"), true);\n\n    $roomName = $data[\"roomName\"] ?? null;\n    $participantName = $data[\"participantName\"] ?? null;\n\n    if (!$roomName || !$participantName) {\n        http_response_code(400);\n        echo json_encode([\"errorMessage\" => \"roomName and participantName are required\"]);\n        exit();\n    }\n\n    $tokenOptions = (new AccessTokenOptions()) // (1)!\n        ->setIdentity($participantName);\n    $videoGrant = (new VideoGrant()) // (2)!\n        ->setRoomJoin()\n        ->setRoomName($roomName);\n    $token = (new AccessToken($LIVEKIT_API_KEY, $LIVEKIT_API_SECRET)) // (3)!\n        ->init($tokenOptions)\n        ->setGrant($videoGrant)\n        ->toJwt();\n\n    echo json_encode([\"token\" => $token]); // (4)!\n    exit();\n}\n
  1. Create an AccessTokenOptions object with the participant's identity.
  2. Create a VideoGrant object setting the necessary video grants options. setRoomJoin allows the user to join a room and setRoomName determines the specific room. Check out all Video Grants.
  3. We create the AccessToken providing the LIVEKIT_API_KEY and LIVEKIT_API_SECRET, initialize it with the token options, set the video grants and generate the JWT token.
  4. Finally, the token is sent back to the client.

The endpoint first obtains the roomName and participantName parameters from the request body. If they are not available, it returns a 400 error.

If required fields are available, a new JWT token is created. For that we use the LiveKit PHP SDK:

  1. Create an AccessTokenOptions object with the participant's identity.
  2. Create a VideoGrant object setting the necessary video grants options. setRoomJoin allows the user to join a room and setRoomName determines the specific room. Check out all Video Grants.
  3. We create the AccessToken providing the LIVEKIT_API_KEY and LIVEKIT_API_SECRET, initialize it with the token options, set the video grants and generate the JWT token.
  4. Finally, the token is sent back to the client.
"},{"location":"docs/tutorials/application-server/php/#receive-webhook","title":"Receive webhook","text":"

The endpoint /livekit/webhook accepts POST requests with a payload of type application/webhook+json. This is the endpoint where LiveKit Server will send webhook events.

index.php
<?php\n$webhookReceiver = (new WebhookReceiver($LIVEKIT_API_KEY, $LIVEKIT_API_SECRET)); // (1)!\n\nif (isset($_SERVER[\"REQUEST_METHOD\"]) && $_SERVER[\"REQUEST_METHOD\"] === \"POST\" && $_SERVER[\"PATH_INFO\"] === \"/livekit/webhook\") {\n    $headers = getallheaders();\n    $authHeader = $headers[\"Authorization\"]; // (2)!\n    $body = file_get_contents(\"php://input\"); // (3)!\n    try {\n        $event = $webhookReceiver->receive($body, $authHeader); // (4)!\n        error_log(\"LiveKit Webhook:\");\n        error_log(print_r($event->getEvent(), true)); // (5)!\n        exit();\n    } catch (Exception $e) {\n        http_response_code(401);\n        echo \"Error validating webhook event\";\n        echo json_encode($e->getMessage());\n        exit();\n    }\n}\n
  1. Create a new WebhookReceiver object providing the LIVEKIT_API_KEY and LIVEKIT_API_SECRET. It will help validating and decoding incoming webhook events.
  2. The Authorization header of the HTTP request.
  3. The raw body of the HTTP request as a string.
  4. Obtain the WebhookEvent object using the WebhookReceiver#receive method. It takes the raw body as a String and the Authorization header of the request.
  5. Consume the event as you wish.

We first create a WebhookReceiver object using the LIVEKIT_API_KEY and LIVEKIT_API_SECRET. Then we must retrieve the Authorization header and the raw body of the HTTP request. We need both of them to validate and decode the incoming webhook event.

Finally, we obtain the WebhookEvent object using the WebhookReceiver#receive method. It takes the raw body as a String and the Authorization header of the request. We can consume the event as we wish (in this case, we just log it using the error output).

"},{"location":"docs/tutorials/application-server/python/","title":"Python","text":"

Source code

This is a minimal server application built for Python with Flask that allows:

It internally uses LiveKit Python SDK.

"},{"location":"docs/tutorials/application-server/python/#running-this-application","title":"Running this application","text":"

Download the tutorial code:

git clone https://github.com/OpenVidu/openvidu-livekit-tutorials.git\n

To run this server application, you need Python 3 installed on your device.

  1. Navigate into the server directory

    cd openvidu-livekit-tutorials/application-server/python\n

  2. Create a python virtual environment

    python -m venv venv\n

  3. Activate the virtual environment

    Windows macOS Linux 
    .\\venv\\Scripts\\activate\n
    . ./venv/bin/activate\n
    . ./venv/bin/activate\n

  4. Install dependencies

    pip install -r requirements.txt\n

  5. Run the application

    python app.py\n

Info

You can run any Application Client to test against this server right away.

"},{"location":"docs/tutorials/application-server/python/#understanding-the-code","title":"Understanding the code","text":"

The application is a simple Flask app with a single file app.py that exports two endpoints:

Let's see the code of the app.py file:

app.py
import os\nfrom flask import Flask, request\nfrom flask_cors import CORS\nfrom dotenv import load_dotenv\nfrom livekit.api import AccessToken, VideoGrants, TokenVerifier, WebhookReceiver # (1)!\n\nload_dotenv() # (2)!\n\nSERVER_PORT = os.environ.get(\"SERVER_PORT\", 6080) # (3)!\nLIVEKIT_API_KEY = os.environ.get(\"LIVEKIT_API_KEY\", \"devkey\") # (4)!\nLIVEKIT_API_SECRET = os.environ.get(\"LIVEKIT_API_SECRET\", \"secret\") # (5)!\n\napp = Flask(__name__) # (6)!\n\nCORS(app) # (7)!\n
  1. Import all necessary dependencies from livekit library
  2. Load environment variables from .env file
  3. The port where the application will be listening
  4. The API key of LiveKit Server
  5. The API secret of LiveKit Server
  6. Initialize the Flask application
  7. Enable CORS support

The app.py file imports the required dependencies and loads the necessary environment variables from .env file using dotenv library:

Finally the Flask application is initialized and CORS support is enabled.

"},{"location":"docs/tutorials/application-server/python/#create-token","title":"Create token","text":"

The endpoint /token accepts POST requests with a payload of type application/json, containing the following fields:

app.py
@app.post(\"/token\")\ndef create_token():\n    room_name = request.json.get(\"roomName\")\n    participant_name = request.json.get(\"participantName\")\n\n    if not room_name or not participant_name:\n        return {\"errorMessage\": \"roomName and participantName are required\"}, 400\n\n    token = (\n        AccessToken(LIVEKIT_API_KEY, LIVEKIT_API_SECRET) # (1)!\n        .with_identity(participant_name) # (2)!\n        .with_grants(api.VideoGrants(room_join=True, room=room_name)) # (3)!\n    )\n    return {\"token\": token.to_jwt()} # (4)!\n
  1. A new AccessToken is created providing the LIVEKIT_API_KEY and LIVEKIT_API_SECRET.
  2. We set participant's identity in the AccessToken.
  3. We set the video grants in the AccessToken. room_join allows the user to join a room and room determines the specific room. Check out all Video Grants.
  4. Finally, we convert the AccessToken to a JWT token and send it back to the client.

The endpoint first obtains the roomName and participantName parameters from the request body. If they are not available, it returns a 400 error.

If required fields are available, a new JWT token is created. For that we use the LiveKit Python SDK:

  1. A new AccessToken is created providing the LIVEKIT_API_KEY and LIVEKIT_API_SECRET.
  2. We set participant's identity in the AccessToken.
  3. We set the video grants in the AccessToken. room_join allows the user to join a room and room determines the specific room. Check out all Video Grants.
  4. Finally, we convert the AccessToken to a JWT token and send it back to the client.
"},{"location":"docs/tutorials/application-server/python/#receive-webhook","title":"Receive webhook","text":"

The endpoint /livekit/webhook accepts POST requests with a payload of type application/webhook+json. This is the endpoint where LiveKit Server will send webhook events.

app.py
token_verifier = TokenVerifier(LIVEKIT_API_KEY, LIVEKIT_API_SECRET) # (1)!\nwebhook_receiver = WebhookReceiver(token_verifier) # (2)!\n\n\n@app.post(\"/livekit/webhook\")\ndef receive_webhook():\n    auth_token = request.headers.get(\"Authorization\") # (3)!\n\n    if not auth_token:\n        return \"Authorization header is required\", 401\n\n    try:\n        event = webhook_receiver.receive(request.data.decode(\"utf-8\"), auth_token) # (4)!\n        print(\"LiveKit Webhook:\", event) # (5)!\n        return \"ok\"\n    except:\n        print(\"Authorization header is not valid\")\n        return \"Authorization header is not valid\", 401\n
  1. Initialize a TokenVerifier using the LIVEKIT_API_KEY and LIVEKIT_API_SECRET.
  2. Initialize a WebhookReceiver using the TokenVerifier. It will help validating and decoding incoming webhook events.
  3. Get the 'Authorization' header from the HTTP request.
  4. Obtain the webhook event using the WebhookReceiver#receive method. It expects the raw body of the request and the 'Authorization' header.
  5. Consume the event as you whish.

First of all, we need a WebhookReceiver for validating and decoding incoming webhook events. We initialize it with a TokenVerifier built with the LIVEKIT_API_KEY and LIVEKIT_API_SECRET.

Inside the receive_webhook handler we:

  1. Get the Authorization header from the HTTP request.
  2. Obtain the webhook event using the WebhookReceiver#receive method. It expects the raw body of the request and the Authorization header. In this way, we can validate the event to confirm it is actually coming from our LiveKit Server.
  3. If everything is ok, you can consume the event as you whish (in this case, we just log it).

"},{"location":"docs/tutorials/application-server/ruby/","title":"Ruby","text":"

Source code

This is a minimal server application built for Ruby with Sinatra that allows:

It internally uses LiveKit Ruby SDK.

"},{"location":"docs/tutorials/application-server/ruby/#running-this-application","title":"Running this application","text":"

Download the tutorial code:

git clone https://github.com/OpenVidu/openvidu-livekit-tutorials.git\n

To run this server application, you need Ruby installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/ruby\n
  2. Install dependencies 
    bundle install\n
  3. Run the application 
    ruby app.rb\n

Info

You can run any Application Client to test against this server right away.

"},{"location":"docs/tutorials/application-server/ruby/#understanding-the-code","title":"Understanding the code","text":"

The application is a simple Ruby app using the popular Sinatra web library. It has a single file app.rb that exports two endpoints:

Let's see the code of the app.rb file:

app.rb
require 'sinatra'\nrequire 'sinatra/cors'\nrequire 'sinatra/json'\nrequire 'livekit' # (1)!\nrequire './env.rb'\n\nSERVER_PORT = ENV['SERVER_PORT'] || 6080 # (2)!\nLIVEKIT_API_KEY = ENV['LIVEKIT_API_KEY'] || 'devkey' # (3)!\nLIVEKIT_API_SECRET = ENV['LIVEKIT_API_SECRET'] || 'secret' # (4)!\n\nset :port, SERVER_PORT # (5)!\n\nregister Sinatra::Cors # (6)!\nset :allow_origin, '*' # (7)!\nset :allow_methods, 'POST,OPTIONS'\nset :allow_headers, 'content-type'\nset :bind, '0.0.0.0' # (8)!\n
  1. Import livekit library
  2. The port where the application will be listening
  3. The API key of LiveKit Server
  4. The API secret of LiveKit Server
  5. Configure the port
  6. Enable CORS support
  7. Set allowed origin (any), methods and headers
  8. Listen in any available network interface of the host

The app.rb file imports the required dependencies and loads the necessary environment variables (defined in env.rb file):

Finally the application configures the port, sets the CORS configuration for Sinatra and binds the application to all available network interfaces (0.0.0.0).

"},{"location":"docs/tutorials/application-server/ruby/#create-token-endpoint","title":"Create token endpoint","text":"

The endpoint /token accepts POST requests with a payload of type application/json, containing the following fields:

app.rb
post '/token' do\n  body = JSON.parse(request.body.read)\n  room_name = body['roomName']\n  participant_name = body['participantName']\n\n  if room_name.nil? || participant_name.nil?\n    status 400\n    return json({errorMessage: 'roomName and participantName are required'})\n  end\n\n  token = LiveKit::AccessToken.new(api_key: LIVEKIT_API_KEY, api_secret: LIVEKIT_API_SECRET) # (1)!\n  token.identity = participant_name # (2)!\n  token.add_grant(roomJoin: true, room: room_name) # (3)!\n\n  return json({token: token.to_jwt}) # (4)!\nend\n
  1. A new AccessToken is created providing the LIVEKIT_API_KEY and LIVEKIT_API_SECRET.
  2. We set participant's identity in the AccessToken.
  3. We set the video grants in the AccessToken. roomJoin allows the user to join a room and room determines the specific room. Check out all Video Grants.
  4. Finally, we convert the AccessToken to a JWT token and send it back to the client.

The endpoint first obtains the roomName and participantName parameters from the request body. If they are not available, it returns a 400 error.

If required fields are available, a new JWT token is created. For that we use the LiveKit Ruby SDK:

  1. A new AccessToken is created providing the LIVEKIT_API_KEY and LIVEKIT_API_SECRET.
  2. We set participant's identity in the AccessToken.
  3. We set the video grants in the AccessToken. roomJoin allows the user to join a room and room determines the specific room. Check out all Video Grants.
  4. Finally, we convert the AccessToken to a JWT token and send it back to the client.
"},{"location":"docs/tutorials/application-server/ruby/#receive-webhook","title":"Receive webhook","text":"

The endpoint /livekit/webhook accepts POST requests with a payload of type application/webhook+json. This is the endpoint where LiveKit Server will send webhook events.

app.rb
post '/livekit/webhook' do\n  auth_header = request.env['HTTP_AUTHORIZATION'] # (1)!\n  token_verifier = LiveKit::TokenVerifier.new(api_key: LIVEKIT_API_KEY, api_secret: LIVEKIT_API_SECRET) # (2)!\n  begin\n    token_verifier.verify(auth_header) # (3)!\n    body = JSON.parse(request.body.read) # (4)!\n    puts \"LiveKit Webhook: #{body}\" # (5)!\n    return\n  rescue => e\n    puts \"Authorization header is not valid: #{e}\"\n  end\nend\n
  1. Get the Authorization header from the HTTP request.
  2. Create a new TokenVerifier instance providing the LIVEKIT_API_KEY and LIVEKIT_API_SECRET. This will validate the webhook event to confirm it is actually coming from our LiveKit Server.
  3. Verify the Authorization header with the TokenVerifier.
  4. Now that we are sure the event is valid, we can parse the request JSON body to get the actual webhook event.
  5. Consume the event as you whish.

We need to verify that the event is coming from our LiveKit Server. For that we need the Authorization header from the HTTP request and a TokenVerifier instance built with the LIVEKIT_API_KEY and LIVEKIT_API_SECRET.

If the verification is successful, we can parse the request JSON body and consume the event (in this case, we just log it).

Remember to return a 200 OK response at the end to let LiveKit Server know that the webhook was received correctly.

"},{"location":"docs/tutorials/application-server/rust/","title":"Rust","text":"

Source code

This is a minimal server application built for Rust with Axum that allows:

It internally uses the LiveKit Rust SDK.

"},{"location":"docs/tutorials/application-server/rust/#running-this-application","title":"Running this application","text":"

Download the tutorial code:

git clone https://github.com/OpenVidu/openvidu-livekit-tutorials.git\n

To run this server application, you need Rust installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/rust\n
  2. Run the application 
    cargo run\n

Info

You can run any Application Client to test against this server right away.

"},{"location":"docs/tutorials/application-server/rust/#understanding-the-code","title":"Understanding the code","text":"

The application is a simple Rust app with a single file main.rs that exports two endpoints:

Let's see the code of the main.rs file:

main.rs
use axum::http::HeaderMap;\nuse axum::{\n    extract::Json, http::header::CONTENT_TYPE, http::Method, http::StatusCode, routing::post,\n    Router,\n};\nuse dotenv::dotenv;\nuse livekit_api::access_token::AccessToken; // (1)!\nuse livekit_api::access_token::TokenVerifier;\nuse livekit_api::access_token::VideoGrants;\nuse livekit_api::webhooks::WebhookReceiver;\nuse serde_json::{json, Value};\nuse std::env;\nuse tokio::net::TcpListener;\nuse tower_http::cors::{Any, CorsLayer};\n\n#[tokio::main]\nasync fn main() {\n    dotenv().ok(); // (2)!\n\n    let server_port = env::var(\"SERVER_PORT\").unwrap_or(\"6081\".to_string());\n\n    let cors = CorsLayer::new() // (3)!\n        .allow_methods([Method::POST])\n        .allow_origin(Any)\n        .allow_headers([CONTENT_TYPE]);\n\n    let app = Router::new() // (4)!\n        .route(\"/token\", post(create_token))\n        .route(\"/livekit/webhook\", post(receive_webhook))\n        .layer(cors);\n\n    let listener = tokio::net::TcpListener::bind(\"0.0.0.0:\".to_string() + &server_port)\n        .await\n        .unwrap();\n    axum::serve(listener, app).await.unwrap(); // (5)!\n}\n
  1. Import all necessary dependencies from the Rust LiveKit library.
  2. Load environment variables from .env file.
  3. Enable CORS support.
  4. Define /token and /livekit/webhook endpoints.
  5. Start the server listening on the specified port.

The main.rs file imports the required dependencies and loads the necessary environment variables:

Then CORS support is enabled and the endpoints are defined. Finally the axum application is initialized on the specified port.

"},{"location":"docs/tutorials/application-server/rust/#create-token-endpoint","title":"Create token endpoint","text":"

The endpoint /token accepts POST requests with a payload of type application/json, containing the following fields:

main.rs
async fn create_token(payload: Option<Json<Value>>) -> (StatusCode, Json<Value>) {\n    if let Some(payload) = payload {\n        let livekit_api_key = env::var(\"LIVEKIT_API_KEY\").unwrap_or(\"devkey\".to_string());\n        let livekit_api_secret = env::var(\"LIVEKIT_API_SECRET\").unwrap_or(\"secret\".to_string());\n\n        let room_name = match payload.get(\"roomName\") {\n            Some(value) => value,\n            None => {\n                return (\n                    StatusCode::BAD_REQUEST,\n                    Json(json!({ \"errorMessage\": \"roomName is required\" })),\n                );\n            }\n        };\n        let participant_name = match payload.get(\"participantName\") {\n            Some(value) => value,\n            None => {\n                return (\n                    StatusCode::BAD_REQUEST,\n                    Json(json!({ \"errorMessage\": \"participantName is required\" })),\n                );\n            }\n        };\n\n        let token = match AccessToken::with_api_key(&livekit_api_key, &livekit_api_secret) // (1)!\n            .with_identity(&participant_name.to_string()) // (2)!\n            .with_name(&participant_name.to_string())\n            .with_grants(VideoGrants { // (3)!\n                room_join: true,\n                room: room_name.to_string(),\n                ..Default::default()\n            })\n            .to_jwt() // (4)!\n        {\n            Ok(token) => token,\n            Err(_) => {\n                return (\n                    StatusCode::INTERNAL_SERVER_ERROR,\n                    Json(json!({ \"errorMessage\": \"Error creating token\" })),\n                );\n            }\n        };\n\n        return (StatusCode::OK, Json(json!({ \"token\": token }))); // (5)!\n    } else {\n        return (\n            StatusCode::BAD_REQUEST,\n            Json(json!({ \"errorMessage\": \"roomName and participantName are required\" })),\n        );\n    }\n}\n
  1. A new AccessToken is created providing the LIVEKIT_API_KEY and LIVEKIT_API_SECRET.
  2. We set participant's name and identity in the AccessToken.
  3. We set the video grants in the AccessToken. room_join allows the user to join a room and room determines the specific room. Check out all Video Grants.
  4. We convert the AccessToken to a JWT token.
  5. Finally, the token is sent back to the client.

The endpoint first obtains the roomName and participantName parameters from the request body. If they are not available, it returns a 400 error.

If required fields are available, a new JWT token is created. For that we use the LiveKit Rust SDK:

  1. A new AccessToken is created providing the LIVEKIT_API_KEY and LIVEKIT_API_SECRET.
  2. We set participant's name and identity in the AccessToken.
  3. We set the video grants in the AccessToken. room_join allows the user to join a room and room determines the specific room. Check out all Video Grants.
  4. We convert the AccessToken to a JWT token.
  5. Finally, the token is sent back to the client.
"},{"location":"docs/tutorials/application-server/rust/#receive-webhook","title":"Receive webhook","text":"

The endpoint /livekit/webhook accepts POST requests with a payload of type application/webhook+json. This is the endpoint where LiveKit Server will send webhook events.

main.rs
async fn receive_webhook(headers: HeaderMap, body: String) -> (StatusCode, String) {\n    let livekit_api_key = env::var(\"LIVEKIT_API_KEY\").unwrap_or(\"devkey\".to_string());\n    let livekit_api_secret = env::var(\"LIVEKIT_API_SECRET\").unwrap_or(\"secret\".to_string());\n    let token_verifier = TokenVerifier::with_api_key(&livekit_api_key, &livekit_api_secret); // (1)!\n    let webhook_receiver = WebhookReceiver::new(token_verifier); // (2)!\n\n    let auth_header = match headers.get(\"Authorization\") { // (3)!\n        Some(header_value) => match header_value.to_str() {\n            Ok(header_str) => header_str,\n            Err(_) => {\n                return (\n                    StatusCode::BAD_REQUEST,\n                    \"Invalid Authorization header format\".to_string(),\n                );\n            }\n        },\n        None => {\n            return (\n                StatusCode::BAD_REQUEST,\n                \"Authorization header is required\".to_string(),\n            );\n        }\n    };\n\n    match webhook_receiver.receive(&body, auth_header) { // (4)!\n        Ok(event) => {\n            println!(\"LiveKit WebHook: {:?}\", event); // (5)!\n            return (StatusCode::OK, \"ok\".to_string());\n        }\n        Err(_) => {\n            return (\n                StatusCode::UNAUTHORIZED,\n                \"Error validating webhook event\".to_string(),\n            );\n        }\n    }\n}\n
  1. Create a TokenVerifier with the LIVEKIT_API_KEY and LIVEKIT_API_SECRET. This will validate the webhook event to confirm it is actually coming from our LiveKit Server.
  2. Create a WebhookReceiver with the TokenVerifier.
  3. Get the Authorization header from the HTTP request.
  4. Obtain the webhook event using the WebhookReceiver#receive method. It expects the raw string body of the request and the Authorization header.
  5. Consume the event as you wish.

We declare as function parameters the map of headers (headers: HeaderMap) and the raw body (body: String) of the HTTP request. We will need both of them to validate and decode the incoming webhook event. We then:

  1. Create a TokenVerifier with the LIVEKIT_API_KEY and LIVEKIT_API_SECRET. This will validate the webhook event to confirm it is actually coming from our LiveKit Server.
  2. Create a WebhookReceiver with the TokenVerifier.
  3. Get the Authorization header from the HTTP request.
  4. Obtain the webhook event using the WebhookReceiver#receive method. It expects the raw string body of the request and the Authorization header.
  5. Consume the event as you wish (in this case, we just log it).

Remember to return a 200 OK response at the end to let LiveKit Server know that the webhook was received correctly.

"},{"location":"docs/tutorials/shared/application-server-tabs/","title":"Application server tabs","text":"Node Go Ruby Java Python Rust PHP .NET

To run this server application, you need Node installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/node\n
  2. Install dependencies 
    npm install\n
  3. Run the application 
    npm start\n

To run this server application, you need Go installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/go\n
  2. Run the application 
    go run main.go\n

To run this server application, you need Ruby installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/ruby\n
  2. Install dependencies 
    bundle install\n
  3. Run the application 
    ruby app.rb\n

To run this server application, you need Java and Maven installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/java\n
  2. Run the application 
    mvn spring-boot:run\n

To run this server application, you need Python 3 installed on your device.

  1. Navigate into the server directory

    cd openvidu-livekit-tutorials/application-server/python\n

  2. Create a python virtual environment

    python -m venv venv\n

  3. Activate the virtual environment

    Windows macOS Linux 
    .\\venv\\Scripts\\activate\n
    . ./venv/bin/activate\n
    . ./venv/bin/activate\n

  4. Install dependencies

    pip install -r requirements.txt\n

  5. Run the application

    python app.py\n

To run this server application, you need Rust installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/rust\n
  2. Run the application 
    cargo run\n

To run this server application, you need PHP and Composer installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/php\n
  2. Install dependencies 
    composer install\n
  3. Run the application 
    composer start\n

To run this server application, you need .NET installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/dotnet\n
  2. Run the application 
    dotnet run\n

Warning

This .NET server application needs the LIVEKIT_API_SECRET env variable to be at least 32 characters long. Make sure to update it here and in your OpenVidu Server.

"},{"location":"docs/tutorials/shared/configure-urls/","title":"Configure urls","text":"

Configure the URLs

For local development, leave APPLICATION_SERVER_URL and LIVEKIT_URL variables empty. The function configureUrls() will automatically configure them with default values. However, for production, you should configure these variables with the correct URLs depending on your deployment.

"},{"location":"docs/tutorials/shared/dotnet/","title":"Dotnet","text":"

To run this server application, you need .NET installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/dotnet\n
  2. Run the application 
    dotnet run\n

Warning

This .NET server application needs the LIVEKIT_API_SECRET env variable to be at least 32 characters long. Make sure to update it here and in your OpenVidu Server.

"},{"location":"docs/tutorials/shared/go/","title":"Go","text":"

To run this server application, you need Go installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/go\n
  2. Run the application 
    go run main.go\n
"},{"location":"docs/tutorials/shared/java/","title":"Java","text":"

To run this server application, you need Java and Maven installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/java\n
  2. Run the application 
    mvn spring-boot:run\n
"},{"location":"docs/tutorials/shared/node/","title":"Node","text":"

To run this server application, you need Node installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/node\n
  2. Install dependencies 
    npm install\n
  3. Run the application 
    npm start\n
"},{"location":"docs/tutorials/shared/openvidu-components-files/","title":"Openvidu components files","text":"

This tutorial is an Angular project generated with Angular CLI tool. Therefore, you will see many configuration files and other components that are not the primary focus of this tutorial. We will concentrate on the following files in the src directory:

"},{"location":"docs/tutorials/shared/openvidu-components-import/","title":"Openvidu components import","text":"

In your main.ts application file, import the it and configure it as follows:

// Other imports ...\n\nimport { OpenViduComponentsModule, OpenViduComponentsConfig } from 'openvidu-components-angular';\n\nconst config: OpenViduComponentsConfig = {\n    production: true,\n};\n\nbootstrapApplication(AppComponent, {\n    providers: [\n        importProvidersFrom(\n            OpenViduComponentsModule.forRoot(config)\n            // Other imports ...\n        ),\n        provideAnimations(),\n    ],\n}).catch((err) => console.error(err));\n
"},{"location":"docs/tutorials/shared/openvidu-components-install/","title":"Openvidu components install","text":"

To use OpenVidu Components Angular in your application, you need to install the library and import the OpenViduComponentsModule in your Angular module. Let's see how to do this:

  1. Create an Angular Project (version 17 or higher)

    To begin, you will need to create a new Angular project if you haven't already. Ensure you have Node.js and the Angular CLI installed. Then, run the following command to create a new Angular project:

    ng new your-project-name\n

    Replace your-project-name with the desired name for your project.

  2. Add Angular Material to your project

    OpenVidu Components Angular needs Angular Material, which provides a range of UI components. To add Angular Material to your project, navigate to your project directory and run:

    ng add @angular/material\n

  3. Install OpenVidu Components Angular

    With your Angular project set up, it's time to add videoconferencing capabilities with OpenVidu Components Angular. Install the library using npm:

    npm install openvidu-components-angular\n

  4. Import and use OpenVidu Components Angular

    To use OpenVidu Components Angular in your application, you need to:

    1. Import the OpenViduComponentsModule in your Angular application.
    2. Configure the module with the OpenViduComponentsConfig object.
    3. Add the component to your template file.
    4. Assign the OpenVidu token and LiveKit URL to the component.
    5. Customize the appearance of the components using CSS variables.
"},{"location":"docs/tutorials/shared/openvidu-components-styles/","title":"Openvidu components styles","text":"

The OpenVidu Components Angular library provides a set of CSS variables that you can use to customize the appearance of the components. You can define these variables in your application's global styles file (e.g. styles.scss).

:root {\n    --ov-primary-color: #303030; /* Primary interface color */\n    --ov-secondary-color: #3e3f3f; /* Secondary interface color */\n    --ov-tertiary-color: #598eff; /* Tertiary accent color for elements */\n    --ov-warn-color: #eb5144; /* Warning color for alerts and notifications */\n    --ov-light-color: #e6e6e6; /* Light color for elements */\n\n    --ov-accent-color: #ffae35; /* Accent color for standout UI elements */\n\n    --ov-logo-background-color: #3a3d3d; /* Background color for the logo area */\n    --ov-text-color: #ffffff; /* Default text color */\n\n    --ov-panel-text-color: #1d1d1d; /* Text color for panel elements */\n    --ov-panel-background: #ffffff; /* Background color for panels */\n\n    --ov-buttons-radius: 50%; /* Border-radius for circular buttons */\n    --ov-leave-button-radius: 10px; /* Border-radius for the leave button */\n    --ov-video-radius: 5px; /* Border-radius for video elements */\n    --ov-panel-radius: 5px; /* Border-radius for panel elements */\n}\n
"},{"location":"docs/tutorials/shared/php/","title":"Php","text":"

To run this server application, you need PHP and Composer installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/php\n
  2. Install dependencies 
    composer install\n
  3. Run the application 
    composer start\n
"},{"location":"docs/tutorials/shared/python/","title":"Python","text":"

To run this server application, you need Python 3 installed on your device.

  1. Navigate into the server directory

    cd openvidu-livekit-tutorials/application-server/python\n

  2. Create a python virtual environment

    python -m venv venv\n

  3. Activate the virtual environment

    Windows macOS Linux 
    .\\venv\\Scripts\\activate\n
    . ./venv/bin/activate\n
    . ./venv/bin/activate\n

  4. Install dependencies

    pip install -r requirements.txt\n

  5. Run the application

    python app.py\n
"},{"location":"docs/tutorials/shared/ruby/","title":"Ruby","text":"

To run this server application, you need Ruby installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/ruby\n
  2. Install dependencies 
    bundle install\n
  3. Run the application 
    ruby app.rb\n
"},{"location":"docs/tutorials/shared/run-application-server/","title":"Run application server","text":"Node Go Ruby Java Python Rust PHP .NET

To run this server application, you need Node installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/node\n
  2. Install dependencies 
    npm install\n
  3. Run the application 
    npm start\n

To run this server application, you need Go installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/go\n
  2. Run the application 
    go run main.go\n

To run this server application, you need Ruby installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/ruby\n
  2. Install dependencies 
    bundle install\n
  3. Run the application 
    ruby app.rb\n

To run this server application, you need Java and Maven installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/java\n
  2. Run the application 
    mvn spring-boot:run\n

To run this server application, you need Python 3 installed on your device.

  1. Navigate into the server directory

    cd openvidu-livekit-tutorials/application-server/python\n

  2. Create a python virtual environment

    python -m venv venv\n

  3. Activate the virtual environment

    Windows macOS Linux 
    .\\venv\\Scripts\\activate\n
    . ./venv/bin/activate\n
    . ./venv/bin/activate\n

  4. Install dependencies

    pip install -r requirements.txt\n

  5. Run the application

    python app.py\n

To run this server application, you need Rust installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/rust\n
  2. Run the application 
    cargo run\n

To run this server application, you need PHP and Composer installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/php\n
  2. Install dependencies 
    composer install\n
  3. Run the application 
    composer start\n

To run this server application, you need .NET installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/dotnet\n
  2. Run the application 
    dotnet run\n

Warning

This .NET server application needs the LIVEKIT_API_SECRET env variable to be at least 32 characters long. Make sure to update it here and in your OpenVidu Server.

"},{"location":"docs/tutorials/shared/run-openvidu-locally/","title":"Run openvidu locally","text":"

  1. Download OpenVidu

    git clone https://github.com/OpenVidu/openvidu-local-deployment\n

  2. Configure the local deployment

    Windows macOS Linux 
    cd openvidu-local-deployment/community\n.\\configure_lan_private_ip_windows.bat\n
    cd openvidu-local-deployment/community\n./configure_lan_private_ip_macos.sh\n
    cd openvidu-local-deployment/community\n./configure_lan_private_ip_linux.sh\n

  3. Run OpenVidu

    docker compose up\n
"},{"location":"docs/tutorials/shared/run-openvidu-server/","title":"Run openvidu server","text":"Run OpenVidu locallyDeploy OpenVidu

  1. Download OpenVidu

    git clone https://github.com/OpenVidu/openvidu-local-deployment\n

  2. Configure the local deployment

    Windows macOS Linux 
    cd openvidu-local-deployment/community\n.\\configure_lan_private_ip_windows.bat\n
    cd openvidu-local-deployment/community\n./configure_lan_private_ip_macos.sh\n
    cd openvidu-local-deployment/community\n./configure_lan_private_ip_linux.sh\n

  3. Run OpenVidu

    docker compose up\n

To use a production-ready OpenVidu deployment, visit the official deployment guide.

"},{"location":"docs/tutorials/shared/rust/","title":"Rust","text":"

To run this server application, you need Rust installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/rust\n
  2. Run the application 
    cargo run\n
"},{"location":"docs/tutorials/shared/testing-other-devices/","title":"Testing other devices","text":"

Accessing your application client from other devices in your local network

One advantage of running OpenVidu locally is that you can test your application client with other devices in your local network very easily without worrying about SSL certificates.

Access your application client through https://xxx-yyy-zzz-www.openvidu-local.dev:5443, where xxx-yyy-zzz-www part of the domain is your LAN private IP address with dashes (-) instead of dots (.). For more information, see section Accessing your app from other devices in your network.

"},{"location":"docs/ui-components/angular-components/","title":"Angular Components","text":""},{"location":"docs/ui-components/angular-components/#introduction","title":"Introduction","text":"

Angular Components are the simplest way to create real-time videoconferencing apps with Angular. There's no need to manage state or low-level events; Angular Components from OpenVidu handle all the complexity for you.

This Angular library, offers developers a robust set of powerful and comprehensive videoconferencing components. These components are highly adaptable, extendable, and easily replaceable, allowing you to tailor them to your application's specific requirements.

Angular Components

The primary goal of the OpenVidu team is to minimize the developer's effort when creating videoconferencing applications. Angular Components significantly contribute to this objective for several reasons:

"},{"location":"docs/ui-components/angular-components/#how-to-use","title":"How to use","text":"

Using Angular Components in your application is straightforward. The official Angular Components Tutorials cover everything Angular Components offers, from customizing colors and branding logos to injecting new custom features.

"},{"location":"docs/ui-components/angular-components/#featured-components","title":"Featured Components","text":""},{"location":"docs/ui-components/angular-components/#prefabricated-components","title":"Prefabricated Components","text":"

Angular Components provides a wide range of prefabricated components that you can use to build your videoconferencing application in a matter of minutes. These components are designed for direct use without any extensions or modifications.

Toolbar Layout Stream ChatPanel ParticipantsPanel ParticipantPanelItem ActivitiesPanel RecordingActivity BroadcastingActivity AdminLogin AdminDashboard"},{"location":"docs/ui-components/angular-components/#directives","title":"Directives","text":"

Angular Components provides two types of directives: Structural Directives and Attribute Directives.

"},{"location":"docs/ui-components/angular-components/#events","title":"Events","text":"

Each component in Angular Components emits a set of events that you can listen to in your application to trigger specific actions.

These events are designed to provide you with the flexibility to customize your videoconferencing application according to your requirements.

You can check out all component events in the Angular Components API Reference.

"},{"location":"docs/ui-components/angular-components/#applications","title":"Applications","text":"

A practical example showcases the potential of Angular Components is our production-ready flagship application, OpenVidu Call. This application is built using Angular Components and demonstrates the power and flexibility of the library.

"},{"location":"docs/ui-components/angular-components/#references","title":"References","text":""},{"location":"docs/ui-components/react-components/","title":"React Components","text":""},{"location":"docs/ui-components/react-components/#introduction","title":"Introduction","text":"

React Components are the simplest way to create real-time audio/video applications with React. There's no need to manage state or low level events, React Components from LiveKit handle all the complexity for you.

"},{"location":"docs/ui-components/react-components/#featured-components","title":"Featured Components","text":"

A curated set of components that we believe are essential and serve as a solid foundation for most applications.

"},{"location":"docs/ui-components/react-components/#prefabricated-components","title":"Prefabricated Components","text":"

Prefabricated are constructed using components and enhanced with additional functionalities, unique styles, and practical defaults. They are designed for immediate use and are not meant to be extended.

AudioConference Chat ControlBar MediaDeviceMenu PreJoin VideoConference"},{"location":"docs/ui-components/react-components/#contexts","title":"Contexts","text":"

Contexts are used to allow child components to access parent state without having to pass it down the component tree via props

Participant Room Chat Feature Layout Pin TrackRef"},{"location":"docs/ui-components/react-components/#hooks","title":"Hooks","text":"

Hooks are functions that let you use state and other React features without writing a class. They are functions that let you \u201chook into\u201d React state and lifecycle features from function components.

React Components provides a set of hooks that you can use to interact with the components and the underlying LiveKit client.

See Reference

"},{"location":"docs/ui-components/react-components/#applications","title":"Applications","text":"

A practical example showcases the potential of React Components is the production-ready flagship application, LiveKit Meet. This application is built using React Components and demonstrates the power and flexibility of the library.

"},{"location":"docs/ui-components/react-components/#references","title":"References","text":""}]} \ No newline at end of file +{"config":{"lang":["en"],"separator":"[\\s\\-]+","pipeline":["stopWordFilter"]},"docs":[{"location":"","title":"Home","text":" Build, deploy on-premises and scale your videoconferencing or live streaming app with ease. Contact us if you need it : we are here to help! Talk to an expert"},{"location":"#get-started","title":"Create your real-time video and audio application with ease","text":""},{"location":"#get-started","title":"Self-host a production-ready live-video platform with advanced capabilities typically reserved for SaaS solutions","text":""},{"location":"#get-started","title":"All the features you need to quickly build your perfect real-time application","text":""},{"location":"account/","title":"Account","text":""},{"location":"pricing/","title":"Pricing","text":""},{"location":"pricing/#pricing","title":"Pricing","text":"OpenVidu COMMUNITY OpenVidu PRO Price Free 0.0006$ core/minuteFree while in beta! * Type of deployment OpenVidu Single Node OpenVidu Elastic OpenVidu High Availability Suitability For applications with medium user load For applications with dynamic user load that require scalability For applications where both scalability and fault tolerance are critical Features Custom LiveKit distribution with Redis, Egress, Ingress, S3 storage and observability Same benefits as OpenVidu Single Node plus 2x performance, scalability and advanced observability Same benefits as OpenVidu Single Node and OpenVidu Elastic plus fault tolerance Number of servers 1 Node 1 Master Node +N Media Nodes 4 Master Nodes +N Media Nodes Installation instructions Install Install Install

About OpenVidu Pro free beta period

"},{"location":"pricing/#how-is-openvidu-pro-priced","title":"How is OpenVidu Pro priced?There is a 15-day free trial period waiting for you!","text":"

OpenVidu Pro follows a simple pricing model based on the number of cores used by the OpenVidu Pro cluster:

$0.0006 per core per minute available for your OpenVidu PRO cluster

Taking into account the following points:

Get an OpenVidu License"},{"location":"pricing/#why-is-openvidu-pro-priced-like-this","title":"Why is OpenVidu Pro priced like this?","text":"

There are deliberate reasons for this pricing model in OpenVidu Pro:

"},{"location":"pricing/#when-and-how-are-you-charged","title":"When and how are you charged?","text":"

Users must create an OpenVidu account and get an OpenVidu License. This license will be required to deploy an OpenVidu Pro cluster (OpenVidu Elastic or OpenVidu High Availability).

When purchasing an OpenVidu License, you will have to indicate your billing address and a credit card. You will receive a 15-day free trial period during which you will not be charged at all.

After the free trial period, a monthly billing cycle will charge all your expenses to your credit card. Therefore, you will receive an invoice each month. You can review your upcoming expenses and your past invoices in your OpenVidu account page. And don't worry: we don't store any credit card data. The entire billing process is securely done via Stripe.

OpenVidu Pro clusters will automatically report their usage on a recurring basis. That's why they need outbound access to domain accounts.openvidu.io port 443. If you are behind a very restrictive corporate firewall that doesn't allow this, please contact us through commercial@openvidu.io.

"},{"location":"pricing/#pricing-examples","title":"Pricing examplesThere is a 15-day free trial period waiting for you!","text":"

As explained above, every minute of an OpenVidu Pro cluster is charged according to the number of cores available for the cluster. So let's see some actual examples, first noting the following points:

Get an OpenVidu License"},{"location":"pricing/#openvidu-elastic-with-12-cores-in-total","title":"OpenVidu Elastic with 12 cores in total","text":"

This OpenVidu Pro Elastic cluster has 1 Master Node of 4 cores and 2 Media Nodes of 4 cores each.

Number of video Tracks 2000 Number of Rooms with 8 Participants 250 8 hours $3.46 24 hours (1 day of uninterrupted use) $10.37 720 hours (1 month of uninterrupted use) $311.04"},{"location":"pricing/#openvidu-elastic-with-20-cores-in-total","title":"OpenVidu Elastic with 20 cores in total","text":"

This OpenVidu Pro Elastic cluster has 1 Master Node of 4 cores and 4 Media Nodes of 4 cores each.

Number of video Tracks 4000 Number of Rooms with 8 Participants 500 8 hours $5.76 24 hours (1 day of uninterrupted use) $17.28 720 hours (1 month of uninterrupted use) $518.40"},{"location":"pricing/#openvidu-high-availability-with-32-cores-in-total","title":"OpenVidu High Availability with 32 cores in total","text":"

This OpenVidu Pro HA cluster has 4 Master Nodes of 4 cores each and 4 Media Nodes of 4 cores each. The number of simultaneous Rooms and Tracks will be the same as in the previous example, but this cluster will provide fault tolerance thanks to the replication of the Master Nodes.

Number of video Tracks 4000 Number of Rooms with 8 Participants 500 8 hours $9.21 24 hours (1 day of uninterrupted use) $27.65 720 hours (1 month of uninterrupted use) $829.44"},{"location":"pricing/#openvidu-elastic-with-a-variable-number-of-cores","title":"OpenVidu Elastic with a variable number of cores","text":"

This OpenVidu Pro Elastic cluster takes advantage of the elasticity of the platform. It has a fixed Master Node of 4 cores, but a variable number of Media Nodes. Let's imagine a scenario where our days are divided in three phases according to the user load:

First 8 hours of the day with low demand(8 cores in total) Video Tracks1000 8x8 Rooms125Price$2.30 Next 8 hours of the day with high demand(16 cores in total) Price$4.61 Video Tracks3000 8x8 Rooms375 Last 8 hours of the day with low demand(8 cores in total) Price$2.30 Video Tracks1000 8x8 Rooms125 Total for 1 day $9.21 Total for 1 month $276.30"},{"location":"support/","title":"Support","text":"

Self-hosting your own solutions can be challenging. We have built OpenVidu to make this task as easy as possible. But of course you may encounter difficulties in the process, or your particular use case may require customized assistance. The OpenVidu team specializes in customer support. Together we will make your project a success!

"},{"location":"support/#commercial-support","title":"Commercial support","text":"

Do not hesitate to contact us at commercial@openvidu.io. We provide consultancy, prioritizing bug fixes or new features, custom app development, etc.

Let's work together and build something great!

Info

Do you need help updating from OpenVidu 2 to OpenVidu 3? Write us to pro.support.v2apps@openvidu.io and we will be happy to guide you through the process.

"},{"location":"support/#community-support","title":"Community support","text":"

The public forum is the right place to ask any questions that do not involve private information, so that the whole community can benefit from the exchange of ideas.

"},{"location":"blog/","title":"Blog","text":""},{"location":"conditions/cookie-policy/","title":"Cookie Policy","text":""},{"location":"conditions/cookie-policy/#what-are-cookies","title":"What are cookies?","text":"

TIKAL TECHNOLOGIES SL web page uses cookies, which are small files that it exchanges with the visitor's web browser for different purposes. That is done in a totally \"invisible\" and harmless way for the visitor, so your visit to the page is more fluid and you are not interrupted by some functions. The following explains which is the usage of cookies in TIKAL TECHNOLOGIES SL website and how you can disable them if you don't agree.

"},{"location":"conditions/cookie-policy/#what-kind-of-information-do-we-collect","title":"What kind of information do we collect?","text":"

TIKAL TECHNOLOGIES SL web page uses cookies for the following purposes

"},{"location":"conditions/cookie-policy/#how-are-users-able-to-change-the-cookies-configuration-in-their-browsers","title":"How are users able to change the cookies configuration in their browsers?","text":"

Any browser allows you to make adjustments on the actions to perform whenever a website asks you to store a cookie. You can:

The modification of the cookies configuration can be done in the option \"Configuration\" of the browser, in the \"Privacy\" section.

"},{"location":"conditions/privacy-policy/","title":"Privacy Policy","text":"

In accordance with the provisions of Regulation (EU) 2016/679 and the Organic Law 3/2018 of 5 December, on the protection of personal data and guarantee of digital rights, we inform you that the data you provide will be incorporated to the treatment system owned by TIKAL TECHNOLOGIES SL with CIF B85986669 and address at Calle Chile, N\u00ba 10, 28290 - Las Rozas de Madrid (Madrid), for the purpose of ELECTRONIC COMMERCE, CUSTOMER MANAGEMENT, AND OTHER PURPOSES. Your data may be processed by third parties (they will be data processors recipients of your data for contractual purposes for example, our computer maintenance company) requiring the same level of established rights, obligations and responsibilities. Your details will be kept for the time only strictly necessary. They will be deleted when a period of time has elapsed without any use being made of it. You agree to notify us of any changes in the data. You will be able to exercise your access rights, rectification, limitation of treatment, deletion, portability and opposition to processing of your personal data by addressing your request to the management or to the e-mail info@naevatec.com. You can contact the appropriate supervisory authority to make any complaint you may consider necessary.

"},{"location":"conditions/terms-of-service/","title":"Terms of Service","text":"

The purpose of the following terms and conditions is to explain our obligations as providers of the service, as well as your obligations as a client. Please read them carefully.

The aforementioned terms and conditions shall be applied from the moment TIKAL TECHNOLOGIES provides you with access to the service, thus it is understood that you have voluntarily accepted them as part of the contractual obligations between the parties involved, that is, between TIKAL TECHNOLOGIES (TIKAL form now on) and you as client. OpenVidu PRO is a service which will vary with time, so as to adapt to its clients and users\u00b4 new requirements, which in turn, will likely affect the terms and conditions so that they suit the changes and variations made to TIKAL.

TIKAL reserves the right to change the terms and conditions at any given moment, notwithstanding, it shall always endeavour to communicate these via e-mail or through the application itself; consequently, we strongly advise you to ensure that you have read and understood the terms and conditions whose most recent, updated version, is available on our website.

"},{"location":"conditions/terms-of-service/#first-definitions","title":"First. Definitions.","text":"

For the legal purposes of this contract, the following definitions will apply:

  1. Software application: a set of instructions which will be interpreted, utilized and executed by a computer system. Even when there may be many of them, the present contract may refer to them in singular, and likewise when pertaining to its backup files.
  2. Telematics application: a software application within a server which is connected to the Internet such that it can be accessed remotely through electronic networks. The assignment of the license to use the telematics application OpenVidu PRO is the subject of the present contract.
  3. Client of the telematics application: the natural or legal person who benefits from the licence to use the telematics application, thus assuming all obligations arising from the present contract.
  4. User of the telematics application: the natural person authorized by the client to use the telematics application, who in turn assumes all obligations arising from the present contract and said utilization.
  5. Parties: TIKAL and the client.
  6. Exploitation rights over the telematics application: TIKAL TECHNOLOGIES SL
  7. Third parties: any natural or legal person alien to the present contractual relation, who, for any reason, enters into a formal, legally binding agreement with either TIKAL or the client.
  8. The service, all supporting infrastructure provided by TIKAL that allows the client to register, download, provision bill, and operate its instance of the telematics application
  9. Hardware: electronic, mechanic or magnetic devices necessary for the telematics application, and its complementary parts, to work properly.
  10. Personal data: any information regarding an identified or identifiable natural person.
  11. Updates: new versions of the telematics application and/or its modules, which include new functionalities and improvements when compared to earlier versions.
  12. Telematics application modules: parts of the telematics application which manage specific functionalities, and whose licence to use them, the client must acquire separately.
"},{"location":"conditions/terms-of-service/#second-purpose","title":"Second. Purpose","text":"
  1. The purpose of the present contract is the licensing of the right to use the telematics application OpenVidu PRO by TIKAL TECHNOLOGIES SL. to the client, so that it may be use in the management of their business. Subject to the terms and conditions provided in this agreement, TIKAL hereby grants to the client a non-exclusive, non-sublicensable, non-transferable license to use the telematics application OpenVidu PRO (from now on \u201ctelematics application\u201d). Under no circumstances however, does said licence grant the client sales rights over the telematics application whose ownership remains entirely with TIKAL TECHNOLOGIES SL.
  2. The client\u00b4s rights to use the telematics application are subjected and limited by both the duration, and the terms and conditions established in the present contract.
  3. Hereby the client agrees to use the telematics application in compliance with the law, the present contract, and the good and rational will inherently present in any civilized society.
  4. The client acknowledges having examined that OpenVidu PRO features fulfil their needs, and that it has been appropriately informed by TIKAL about them.
"},{"location":"conditions/terms-of-service/#third-use-limitations-and-duty-of-care","title":"Third. Use limitations and duty of care.","text":"
  1. The client must protect and guard the telematics application; thus, it may not share any information whatsoever with third parties. It is specifically forbidden the use of the telematics application outside the business sphere for which it has been acquired, or outside any of the dispositions stipulated in this contract. The client may not sell, lease, transfer, or otherwise sublicense the telematics application or take part in any act which may result in the violation of their duty of care and protection. The client may not assign, transfer, pledge or make any other disposition of the rights acquired through this contract, of any part of the contract, or of any of the rights, claims or obligations under the contract.
  2. The client is obligated to refrain from using the telematics application for illegal purposes or any other purposes contrary to what is established in the present contract, or any action that may be injurious to TIKAL\u00b4s rights and interests, to the owner of the telematics application, as well as to any third parties involved. Said actions include, but are not limited to, any deed that may harm, overload, disrupt, or otherwise render useless the telematics application, thus preventing other clients and users from making use of it.
  3. Changes to the telematics application are strictly forbidden. These include, but are not limited to, such things as reverse engineering, decompiling, disassembling, reproducing, translating, modifying, commercializing, cloning, transforming or transmitting to any natural or legal person, partially or entirely, by any means, whether mechanic, magnetic, photocopies, etc\u2026 or to eliminate or block any proprietary notice or logos pertaining to the telematics application. The components and elements subject to the aforementioned restrictions include, but are not limited to, such things as the logical diagrams, source codes, object and/or data model; except prior, written authorization from TIKAL. These restrictions stand, even when said actions where needed for the interoperability with other computer programs or telematics applications.
  4. The client or the user must protect and safeguard, both physically and intellectually, the telematics application, namely, its contents, logical procedures, and access protocols, by establishing the necessary means in order to guarantee the non-disclosure, cloning, reproduction, altering, translation, transformation, access by third parties, or any other action that shall imply a violation of the duty of care or of any intellectual and industrial property right.
  5. The telematics application may only be used by the client or authorized user, for processing the client\u00b4s own data and their products, but under no circumstances shall it be used to process third parties \u2018data.
  6. TIKAL cannot guarantee uninterrupted access to the service throughout the entire validity period of this contract due to unforeseeable factors such as network issues, telecommunications service providers, breakdown in computers, as well as other contingencies such as repair and maintenance work, and software updates. Notwithstanding this, TIKAL reserves the right to adopt any necessary measures to limit the service, should it be considered that improper and/or irresponsible use of the telematics application is occurring, specially when said uses run counter to the terms and conditions provided in the present contract.
  7. Should the client or user breach the terms of contract, in a continuous and sustained fashion, or acting in bad faith, TIKAL shall terminate the provision of the service, without reimbursing any amount, on the grounds of abusive and improper use.
  8. Interpretation and scope. Any other right which has not been stated or directly mentioned in the present contract, remains reserved to TIKAL. Under no circumstances shall the terms and conditions of this contract be interpreted or applied in such a fashion that could be injurious to TIKAL or in any manner that runs counter to the regular exploitation framework of a telematics application.
"},{"location":"conditions/terms-of-service/#fourth-liability","title":"Fourth. Liability.","text":"
  1. TIKAL\u00b4s telematics application is access-ready in its current state and configuration. Should the application contain any deficiency attributable to TIKAL TECHNOLOGIES SL, the latter pledges to make use of all the resources available to them in order to solve the issue as promptly as possible. Nonetheless, it declines any liability and does not give any guarantee regarding violations perpetrated by third parties, marketability, satisfactory quality or suitability for a specific purpose.
  2. TIKAL shall act with due diligence and professionalism by making use of all its resources available so as to ensure the quality, reliability, and security of the telematics application. In any case, TIKAL\u00b4s assumes no liability for any damages, direct or indirect, incidental or special, including, but not limited to, such things as damages or financial loss, work disruptions, failure, breakdown, or any losses, even when the possibility of such inconveniences occurring, which include third-party complaints, were previously notified to a member of TIKAL\u00b4s staff.
  3. The client accepts, within reason, to tolerate specific, isolated disruptions in connectivity and hereby forfeits the right to claim any liability, contractual or otherwise, as well as damages owing to possible failures, slowness or access errors. TIKAL declines any liability concerning data loss, accidental or otherwise, resulting from the client\u00b4s actions or activities.
  4. The client or user is solely responsible for the provision and payment of the costs necessary to ensure compatibility between the telematics application and their equipment, including all hardware, software, electronic components, and any other component required to access the telematics application, these include, but are not limited to, such things as telecommunication services, Internet access and connectivity, operating systems, or any other program, equipment or services, required to access and use the telematics application.
  5. TIKAL declines any liability regarding any content that the client or user may host within the telematics application OpenVidu PRO, since at no moment, does TIKAL intervene in the internal processing of said content. Therefore, and in accordance with art.16 of LSSI-CE, TIKAL is not legally bound to remove any content from the server, provided there is no \u201cactual knowledge\u201d that the activity or information stored is illegal, libellous, or injurious to third-party rights or assets. In this regard, it shall be understood that \u201cactual knowledge\u201d exits, when there is a court or administrative decision, ordering to block or remove content and that the contractor (TIKAL) has been made aware of it. Notwithstanding, TIKAL reserves the right to remove this type of content out of its own volition, once it has been detected, whilst the client waives any right to claim or demand compensation. Should the application be in any way damaged due to the introduction of malign software or content (virus, trojan,\u2026) TIKAL reserves the right to automatically terminate the contract without having to pay any compensation whatsoever. On the other hand, TIKAL hereby reserves the right to demand compensation from the client or user for any damages caused to the system.
  6. The client or user shall burden all legal costs incurred when the cause is attributable to them, these include TIKAL lawyers\u2019 fees, even when a final court decision has yet to be reached.
  7. TIKAL uses information security protocols which are broadly accepted and observed by the industry such as firewalls, access-control procedures, and crypto mechanisms in order to avoid any unauthorized access to the data. For this purpose, the client hereby grants TIKAL access to data so that it can perform access-control authentication. The licensing process or any process which entails the introduction of personal data shall always conducted under a rigorous communication protocol so as to ensure no third parties have access to data transmitted electronically.
"},{"location":"conditions/terms-of-service/#fifth-intellectual-and-industrial-property-rights","title":"Fifth. Intellectual and industrial property rights.","text":"
  1. The exploitation rights of the telematics application are owned by TIKAL and protected by Spanish Intellectual Property Laws applicable in any country where it is used. The structure, organization and coding of the telematics application constitute confidential and valuable industrial and commercial secrets which belong to TIKAL. Therefore, the client must treat the telematics application in the same fashion they would when utilizing any material protected by intellectual property rights, thus copying, duplicating, or cloning the application is strictly forbidden.
  2. The present licence to use the telematics application does not imply, either explicitly or implicitly, the assignment of the intellectual and industrial rights over said application, the hardware, or the data model.
  3. Brands must be utilized in accordance with the commercial uses of brands, including acknowledging the proprietor\u2019s name of the brand. Brands may only be used in order identify those printouts produced by the telematics application. Said utilization does not imply or grant any property rights over the application.
  4. The knowledge and expertise intrinsic to the telematics application, as well as the knowledge utilized to configure it, is confidential information which belongs to the owner of the telematics application TIKAL. The client acknowledges this and assumes all liability regarding fraudulent use, or illegal copy or duplication of said application, or complementary programs, or utilization of this information by third parties, being liable for any breach of the present contract, by them or by any person or persons depending or associated with the client, or when these individuals have been granted access, directly or indirectly, to the telematics application by the client.
  5. Updates: For the entire validity period of the present contract, and in accordance with the terms and conditions stipulated in the next paragraph, the client is entitled to have access to the updates of the telematics application as they arise. The client assumes all legal liability for the updates, regarding limitations and duty of care, in the same fashion as with the original computer application. Updates to additional modules of the telematics application shall be given to those clients who have acquired from TIKAL the licence to use said modules.
  6. Hereby the client gives TIKAL consent to incorporate them as such into their business portfolio, thus allowing TIKAL to use their brand and logo on its website as well as in documents which may be given to other potential clients, for the sole purpose of said portfolio, and provided that the client does not express opposition to them being used in such a fashion.
"},{"location":"conditions/terms-of-service/#sixth-right-to-amend","title":"Sixth. Right to amend.","text":"

TIKAL reserves the right to update the telematics application to the latest version available on the market. Said updates may include, but are not limited to, such things as new functionalities, improvements, and modifications and legal updates to the telematics application, which may vary, at any moment such things as its features, performance, and configuration of the telematics application content.

TIKAL pledges to evaluate and take into consideration suggestions and requests made by clients and users of the telematics application so that they may be incorporated in the new versions of said application; however, it is TIKAL\u00b4s right, not the client\u00b4s to decide which modifications or improvements may be included in the aforementioned versions.

TIKAL reserves the right to modify, at any moment, the characteristics, features, and conditions of TIKAL for the benefit and development of the service. With this in mind, TIKAL may only have to observe the formality of having to notify the client via an on-line notice, or by modifying any clause in this contract. Notwithstanding the foregoing, TIKAL shall endeavour to promptly notify the client so that the latter may adapt them.

"},{"location":"conditions/terms-of-service/#seventh-exclusion-and-termination-of-licensing","title":"Seventh. Exclusion and termination of licensing.","text":"
  1. TIKAL reserves the right to exclude and/or terminate, temporarily or in a definite manner, the client\u00b4s right to use the telematics application, in case the following occurring:
  2. The exclusion clause, or termination of this contract, does not imply that TIKAL forfeits the right to take legal actions or file for financial compensation when the client has acted in bad faith to damage, directly or indirectly, the telematics application.
"},{"location":"conditions/terms-of-service/#eighth-communications","title":"Eighth. Communications.","text":"
  1. For the purposes of establishing a line of communication regarding the present contract both parties agree to use the place of residence which appears in it. The client pledges to keep the e-mail account provided in this licensing agreement, operational, activated and updated for the purposes of communications with TIKAL, which constitutes TIKAL\u00b4s preferred line of communication (albeit not the only one). In general terms, the client pledges to keep their personal details updated, and must communicate TIKAL, in a clear, unambiguous manner, of any changes.
  2. Should the client fail to notify said changes, notifications or notices delivered to the address(es) given by the client in the licensing agreement, shall be considered valid.
  3. The client consents that telephone conversations with TIKAL may be recorded with the intent to improve the quality and security of the service.
"},{"location":"conditions/terms-of-service/#ninth-duration","title":"Ninth. Duration.","text":"
  1. The contract shall be valid indefinitely from the moment the client requests it. The client can also put the end to the contract at any time he wishes, being obliged to pay the pending consumed service.
  2. As long as the period contract holds it is understood that the validity of the contract published on TIKAL\u00b4s website and containing all updates, prevails.
"},{"location":"conditions/terms-of-service/#tenth-terms-of-payment","title":"Tenth. Terms of payment.","text":"
  1. The price, payment method, billing and payment of the telematics application licensing, object of the present contract, is stipulated in the Current Official Rates Section published on TIKAL\u00b4s website (https://openvidu.io at the time of writing), which are considered part of a whole to all intents and purposes.
  2. The price stipulated in the aforementioned Current Official Rates Section, do not include valued added tax (VAT), nor does it include any other taxes or fees established by law whose current rates shall be applied for the provision of the service when signing the present contract. Therefore, said amounts may be increased according to current tax rates.
  3. Payment will be done monthly and will cover the whole amount of the service consumed during last month period according to the currently published rates from TIKAL.
  4. Monthly payments include both the basic rate for the provision of the service, and the corresponding rate(s) for any optional or additional service hired.
  5. Payments must be made effective by the credit or debit card that the client has agreed with TIKAL when first hiring the service. Visa and MasterCard shall be the accepted cards.
  6. Total or partial delay in payment by the client for the amount(s) TIKAL has billed them shall grant TIKAL the right to cancel or terminate all contracted obligations in accordance with the present contract. Suspension of the service provision shall be realized within the next fifteen natural days after the contract has reached its expiry date, prior notice to the client. After said fifteen natural days from the day the service was suspended, and prior notification to the client, TIKAL may terminate the contract. If the client pays the full amount owed to TIKAL during said period, the latter shall re-establish the service as promptly as possible from the moment it is notified that the debt has been settled. Notwithstanding the foregoing, TIKAL reserves the right to ask for a two-month deposit as a guarantee before re-establishing the service. The client accepts all liability for any legal costs incurred due to claims made by TIKAL regarding breach of payment after the contract has reached its expiry date, including, but not limited to, such things as the return of invoices and late-payment interest. When the client returns, for any cause alien to TIKAL, two or more direct-debit invoices, TIKAL shall be entitled to unilaterally opt for the annual hiring and billing of the service.
  7. When the client has defaulted on a payment, either totally or partially, during three months, for the amount owed to TIKAL, the latter has the right to rescind the contract between the two parties, as well as the direct and definite termination and cancellation of the service hired by the client, including the database linked to the client\u00b4s services, without prior notice from TIKAL.
  8. TIKAL shall apply upon its rates any current deals and offers existing at the time the client hires the service, provided they comply with the terms and conditions of said deals and offers so that they may benefit from them. The client acknowledges and accepts the fact they may obtain detailed information, at any given time, regarding said deals and offers on TIKAL\u00b4s website or through the habitual communication channels with which TIKAL provides its clients.
"},{"location":"conditions/terms-of-service/#eleventh-data-protection","title":"Eleventh. Data Protection.","text":"

The parties involved agree that they know, comply with, and are subject to, the Spanish and European laws and legislation regarding Personal Data Protection, thus they must give proper use and treatment to all data arising from any activity subjected to the terms and conditions of this contract.

"},{"location":"conditions/terms-of-service/#data-controller-agreement-between-the-client-and-tikal","title":"Data Controller agreement between the client and TIKAL.","text":"

In accordance with the Spanish Data Protection Laws, TIKAL\u00b4s access to the client\u00b4s personal files shall not be considered a violation of said laws, insofar as TIKAL is effectively the Data Controller and said access is necessary for the provision of the service which is the subject of this contract.

In this regard, and for the purposes of Data Protection regulation, TIKAL shall be regarded as the \u201cData Controller\u201d of the client\u00b4s data. Notwithstanding the foregoing, TIKAL pledges that it shall treat said data in conformity with the client\u00b4s instructions provided in this contract, and that under no circumstances shall it utilise them for any other purposes outside of what the parties have agreed in this contract, nor shall it transfer or communicate them to a third party, not even for back-up or storage purposes. At the same time, the duration and validity of this agreement shall correspond to the type of service hired by the client.

Once the provision of said service terminates and the data shall no longer be necessary to perform the aforementioned Data Controller role, all personal data shall be either destroyed or returned to the person, persons or entity responsible for it, as well as any storage medium, documents or files containing personal data.

In order to provide the service and what said provision entails, TIKAL shall be granted access to the following information:

  1. Contact details
  2. Company profile data
  3. Assets and billed services data
  4. Tax identification data

TIKAL\u00b4s obligations as Data Controller are described as follows:

  1. Treat all data in accordance with the instructions received by the person, persons or entity in charge of its treatment and only for the purposes provided in this contract.
  2. To not communicate or transfer any data to third parties, except prior consent by the body in charge of its treatment, or in cases provided for by the law.
  3. TIKAL may not outsource, either totally or partially, the provision of the service(s) described in the present contract, except prior authorization from the client whom shall be informed with due notice about the outsourcing entity as well as the services being outsourced. In this case, TIKAL shall draft and execute a new contract with said outsourcing entity, always in accordance with the current Data Protection laws.
  4. To not disclose any personal data to which TIKAL may have had access, even after the termination of this contract.
  5. To guarantee that the staff managing personal data pledge to keep the confidentiality which said data entails and that they comply with the proper security protocols.
  6. To assist the person or body responsible for data treatment regarding data protection.
  7. To provide the person or body responsible for data protection with support and assistance when performing an impact assessment, or when consulting the regulatory authorities, if applicable. Additionally, to provide said person or body with the necessary information so that it may prove their compliance with the rules and regulations.
  8. Notwithstanding the foregoing, said person or body has mechanisms in place so as to guarantee the confidentiality, integrity, and availability of the systems and services concerning data protection, as well as to restore the access and availability to data in case of system failure. Additionally, it is endowed with capabilities so as to regularly verify and assess the efficacy of the security protocol.

Duties of the responsible for data treatment:

  1. To guarantee, at all times, compliance with the Data Protection Laws.
  2. Make all necessary enquiries beforehand.
  3. To supervise that proper data treatment is occurring.
  4. To provide the data controller with all necessary data for the provision of the service.

TIKAL\u00b4s duties as Data Controller:

  1. To guarantee, at all times, compliance with the Data Protection Laws.
  2. Make all necessary enquiries beforehand.
  3. To supervise that proper data treatment is occurring.
  4. To provide the data controller with all necessary data for the provision of the service.
"},{"location":"conditions/terms-of-service/#twelfth-confidentiality","title":"Twelfth. Confidentiality.","text":"
  1. All data and information transmitted between the parties is strictly confidential and property of TIKAL and the client, and its protection is of the utmost importance. To this intent, both parties hereby contract the obligation to safeguard said data and information by adopting all appropriate measures to ensure that only authorized individuals shall have access to it; authorized individuals being understood as those employees which are needed by the parties involved so as to keep the provision of the service, which is the object of this contract, in good working order.
  2. In this regard, the signatory parties are hereby subject to the following confidential agreement:
"},{"location":"conditions/terms-of-service/#thirteenth-termination-rescission-nullity","title":"Thirteenth. Termination. Rescission. Nullity.","text":"
  1. The present contract shall be considered void for infringement, committed by any of the parties involved, of the Spanish Civil Code, and in particular, of the Spanish Commercial Code, and the obligations arising from the following:
  2. TIKAL pledges to destroy all data provided by the client once the contractual relation is extinguished. Likewise, TIKAL shall destroy or return any document or storage medium containing any IT-related data arising from said contractual relation. Once said contractual relation terminates, the client may request TIKAL to supply them with a hard, back-up copy of all data pertaining to and arising from said relation, to any address the client wishes, prior to a written request to do so, which must be sent within the week after the end of the contract. The client shall burden the costs incurred arising from the handling and mailing of said request.
  3. The client may cease or cancel the use of the telematics application whenever they wish to do so. Should the client or any authorized user by them request the cancellation of the service at TIKAL\u00b4s offices, it shall become effective on the same day said request was made. Therefore, it is advised to carefully observe said process to avoid any resources or data loss that the client or user may have in their TIKAL\u00b4s account. Should it not be possible for them to initiate said cancellation process at TIKAL\u00b4s offices, the client may request it by contacting TIKAL\u00b4s customer service via any of the channels provided in this contract. Said cancellation shall become effective on the day stipulated by the client, provided that the request has been made with enough time to be processed correctly.
"},{"location":"conditions/terms-of-service/#fourteenth-applicable-legislation-and-jurisdiction","title":"Fourteenth. Applicable legislation and jurisdiction.","text":"

The present is a business contract regulated by Spanish laws. The parties involved agree that any discrepancy, legal or civil action, claim or complain arising from the interpretation and execution of the present contract, shall be, directly or indirectly, taken to the Court of Madrid, thus all parties involved hereby renounce to take any matters pertaining to this agreement to any other jurisdiction.

The present document constitutes the total agreement of the parties in relation to the matters covered in this agreement, thus substitutes all previous obligations, liabilities, and agreements, both written and verbal, existing prior to the signature and execution of this contract.

The following website (www.naevatec.com) belongs to: TIKAL TECHNOLOGIES SL TAX ID: B85986669 10 Chile Rd/St 28290 \u2013 Las Rozas de Madrid (Madrid City) Spain. Registered in the Madrid\u00b4s Trade Register, volume/tome 28043. Book 0 Section 8th of the Registry Book, Page 37, Sheet M-505315.

"},{"location":"demos/basic-screenshare/","title":"Basic Screenshare","text":"

Try it now Source code

This is based in the Basic Videoconference demo but adding screen sharing capabilites. Users can freely connect to any videoconference room and share their screen with other participants. If a room does does not exist, a new one will be created.

"},{"location":"demos/basic-videoconference/","title":"Basic Videoconference","text":"

Try it now Source code

Users can freely connect to any videoconference session. If it does not exist, a new one will be created.

This demo is derived directly from the tutorials. If you want a deep understanding of the ins and outs you can check either of the following tutorials (whichever you feel most comfortable with):

"},{"location":"demos/basic-webinar/","title":"Basic Webinar","text":"

Try it now Source code

Users are identified via a login authentication system. This means users are given a certain role depending on their identity when connecting to a videoconference room. This demo wraps a simple frontend and a straightforward backend, making use of OpenVidu in a secure manner.

"},{"location":"demos/openvidu-call/","title":"OpenVidu Call","text":"

Try it now Source code

OpenVidu Call is a videoconference application that provides the features you can find in any other popular service. It allows you to join into multi-party videoconference calls, displayed in a nice and intelligent layout. Inside the calls you can mute/unmute and publish/unpublish your microphone and webcam, share your screen and chat with the rest of users. It also integrates advanced features such as recording, live broadcasting, virtual backgrounds and subtitles.

The front-end is implemented in Angular and the backend in Node.js with Express.

"},{"location":"demos/openvidu-classroom/","title":"OpenVidu Classroom","text":"

Try it now Source code

This is a fully functional application that makes use of OpenVidu to connect teachers and students in video rooms. It has a frontend built with Angular, a backend built with Spring Boot and a MySQL database. There are two types of roles: teachers and students. First ones can create/edit/remove lessons and invite students to them. Only when a teacher initialize a lesson authorized students can connect to it.

Checkout the source code TODO.

"},{"location":"demos/openvidu-getaroom/","title":"OpenVidu GetARoom","text":"

Try it now Source code

Users can create new videoconference rooms by clicking a button. Then they can share the link of the room to invite new participants.

"},{"location":"docs/comparing-openvidu/","title":"Comparing OpenVidu","text":"

This section compares OpenVidu to other videoconference/streaming solutions, to better understand what it is, what it is not, and what advantages and disadvantages it may have over them.

"},{"location":"docs/comparing-openvidu/#openvidu-vs-livekit","title":"OpenVidu vs LiveKit","text":"

First of all, and perhaps the most obvious question, how does OpenVidu differ from LiveKit, and what kind of relationship is there between them? This can be answer with four simple points:

OpenVidu is a custom fork of LiveKit, 100% compatible in terms of its API and SDKs, with the power of mediasoup at its core. This and other integrations provide improved performance, new features and facilitate the deployment and management of your cluster.

LiveKit comes in two flavors: LiveKit Open Source and LiveKit Cloud.

"},{"location":"docs/comparing-openvidu/#openvidu-community-vs-livekit-open-source","title":"OpenVidu COMMUNITY vs LiveKit Open Source","text":"

LiveKit Open Source is probably the most advanced and feature-rich open source WebRTC stack available today. It has a simple but very versatile API design, and has a large collection of SDKs to integrate into your application on both the frontend and backend. Regardless of your technology stack, there is sure to be a LiveKit Open Source SDK available for you! This is why OpenVidu is fully compatible with LiveKit protocols. You can use any LiveKit SDK to build your application, and it will work seamlessly with an OpenVidu deployment.

What does OpenVidu Community bring over LiveKit Open Source?

With OpenVidu Community you get a handful of features on top of LiveKit Open Source that will help with the development of your application:

"},{"location":"docs/comparing-openvidu/#openvidu-pro-vs-livekit-open-source","title":"OpenVidu PRO vs LiveKit Open Source","text":"

Deploying LiveKit Open Source in production requires devops/SRE experience to operate your own network of media servers, load balance between them, maintain high uptime and monitor the health of your deployment. OpenVidu Pro makes this an easy process, hiding most of the complexities of such an advanced deployment. With OpenVidu Pro you can self-host a fault-tolerant, scalable and observable cluster, while doubling the original LiveKit Open Source performance to handle twice as many media streams with the same hardware.

"},{"location":"docs/comparing-openvidu/#openvidu-pro-vs-livekit-cloud","title":"OpenVidu PRO vs LiveKit Cloud","text":"

LiveKit Cloud is the official SaaS solution for LiveKit. They manage the infrastructure, with a pricing model based on the total bandwidth consumed by your application. It offers certain advantages over LiveKit Open Source:

Where does OpenVidu Pro stand in relation to LiveKit Cloud? OpenVidu Pro aims to deliver the same advanced benefits as LiveKit Cloud, but as a self-hosted solution. We intend to provide a performant, fault tolerant, scalable and observable cluster that is easy to deploy, configure and administrate in your own infrastructure. For now, OpenVidu Pro brings:

"},{"location":"docs/comparing-openvidu/#openvidu-vs-saas-solutions","title":"OpenVidu vs SaaS solutions","text":"

This includes many services like Agora, GetStream, Daily, Vonage, Jitsi as a Service, Whereby, Zoom SDK, Dolby Millicast, Amazon Chime SDK.

The main difference between OpenVidu and these services is who owns the infrastructure, and where your users' data flows. All these SaaS solutions provide:

Using a SaaS provider is a great option for some use cases, but not all. OpenVidu is designed to be self-hosted. This allows you to have full control over your infrastructure and data, taking the most out of your own resources and complying with the most strict regulations. While having the best features provided by SaaS: scalability, fault tolerance, observability. See Production ready for more information.

"},{"location":"docs/comparing-openvidu/#openvidu-vs-sfus","title":"OpenVidu vs SFUs","text":"

This includes projects such as Kurento, mediasoup, Pion, Janus, Jitsi Videobridge or Medooze.

These are all media servers. More specifically, they fall under the umbrella of the so-called SFUs (Selective Forwarding Units): they are able to receive media streams from different clients and selectively forward them to other clients, usually without transcoding or mixing the media.

SFUs are generally low-level tools. Using them directly to implement real-time applications requires a deep understanding of signaling protocols, codecs, networking and other low-level concepts. OpenVidu is a higher-level abstraction compared to SFUs. It internally uses SFUs to rely the media streams (more specifically Pion and mediasoup), but hides all complexities to offer a simpler way to develop videoconferencing and live streaming applications.

"},{"location":"docs/comparing-openvidu/#openvidu-vs-mediasoup","title":"OpenVidu vs mediasoup","text":"

mediasoup is a WebRTC SFU. It is a minimalist media server with a super low level API that allows building custom real-time applications. Compared to other SFUs, mediasoup is well known for its outstanding performance.

OpenVidu uses mediasoup internally to transmit media streams. We have embedded mediasoup as the WebRTC engine right at the core of LiveKit Open Source, which allows OpenVidu to offer the fantastic APIs and SDKs of LiveKit while providing the cutting-edge performance of mediasoup. Learn more about mediasoup integration in section Performance.

"},{"location":"docs/comparing-openvidu/#openvidu-vs-microsoft-teams-google-meet-zoom","title":"OpenVidu vs Microsoft Teams, Google Meet, Zoom","text":"

All these well-known video conferencing tools are final applications that provide little to no customization at all. They are proprietary, closed-source apps designed to be used as-is, and they are not intended to be integrated into other systems.

OpenVidu is inherently different, as it provides a set of APIs and SDKs to integrate real-time video capabilities into your own application. In other words: with OpenVidu you can easily build your own custom Microsoft Teams, Google Meet or Zoom-like application. See Use cases for some examples of what you can build with OpenVidu.

"},{"location":"docs/getting-started/","title":"Getting started","text":""},{"location":"docs/getting-started/#what-is-openvidu","title":"What is OpenVidu?","text":"

OpenVidu is a platform that allows you to implement real-time applications. You can build your brand new OpenVidu app from scratch, but it is also very easy to integrate OpenVidu in your already existing application.

OpenVidu is based on WebRTC technology and allows developing any kind of use case you can imagine: one-to-one calls, video conference rooms, massive live streaming events, management and processing of drones and camera feeds...

OpenVidu is built on the best open source technologies: LiveKit, from which it inherits all its amazing SDKs to integrate it into your front-end and back-end applications, and mediasoup, from which it inherits the best performance and optimization for media routing.

OpenVidu is a custom fork of LiveKit, 100% compatible in terms of its API and SDKs, with the power of mediasoup at its core. This and other integrations provide improved performance, new features and facilitate the deployment and management of your self-hosted, production-grade cluster."},{"location":"docs/getting-started/#use-cases","title":"Use cases","text":"

OpenVidu is a super versatile platform that can be used to build just about any kind of real-time application you can think of. Most common use cases can be classified into one of the following categories:

"},{"location":"docs/getting-started/#video-conferencing","title":"Video conferencing","text":"

Video conferencing rooms are virtual spaces where two or more users can send video and audio and interact with each other in real-time. They can scale in size, from a simple 1-to-1 call to a massive video conference with thousands of participants. For example:

"},{"location":"docs/getting-started/#live-streaming","title":"Live streaming","text":"

Live streaming applications allow one publisher to broadcast video to many viewers. It can be a single video feed, multiple video feeds (webcam and screen share) or there could be even multiple publishers. The general rule is that the ratio of viewers to publishers is very high, in the order of thousands.

Ultra-low latency live streaming (below 300ms) allows for actual real-time interaction between the viewers and the publishers. This differs from traditional live streaming platforms where the latency is usually in the order of seconds. In this way you can build applications like:

"},{"location":"docs/getting-started/#robotics-and-embedded-systems","title":"Robotics and embedded systems","text":"

The future lies in the integration of cameras and sensors in all kinds of devices, everywhere: industry, homes, public spaces, emergency services... OpenVidu can be used to receive and process video and audio streams from these devices, and doing so in real-time. For example:

"},{"location":"docs/getting-started/#openvidu-application-architecture","title":"OpenVidu application architecture","text":"

Any OpenVidu application has 3 different parts:

"},{"location":"docs/getting-started/#basic-concepts","title":"Basic concepts","text":""},{"location":"docs/getting-started/#room","title":"Room","text":"

A Room is a virtual space where Participants can connect to send and receive media Tracks. Two Participants can only communicate if they are connected to the same Room.

"},{"location":"docs/getting-started/#participant","title":"Participant","text":"

A Participant is a user connected to a specific Room. Each Participant can publish as many video and audio Tracks as needed, and subscribe to any other Participant's Tracks, as long as they are connected to the same Room.

"},{"location":"docs/getting-started/#track","title":"Track","text":"

A Track is a data flow of audio or video. Participants create them from a local media source (a webcam, a microphone, a screen share) and publish them into a Room. Other Participants of the same Room can subscribe to them.

With these three concepts you can build any kind of real-time application you can think of. The figure below shows two simple examples.

Room \"Daily meeting\" has 2 Participants: \"Alice\" is publishing Track \"Webcam\" and \"Mic\" and is receiving Track \"Screen\" from \"Bob\". \"Bob\" is publishing Track \"Screen\" and receiving Tracks \"Webcam\" and \"Mic\" from \"Alice\".

Room \"Remote support\" has 3 Participants: Participant \"Dan\" is not publishing any Track, but receiving all Tracks in the Room. Participant \"Erin\" is only receiving Track \"Mic\" from Participant \"Carol\", but not Track \"Screen\"."},{"location":"docs/getting-started/#openvidu-editions","title":"OpenVidu Editions","text":"

OpenVidu is available in two editions:

Type of deployment OpenViduLocal (development) OpenViduSingle Node OpenViduElastic OpenViduHigh Availability OpenVidu Edition COMMUNITY PRO COMMUNITY PRO PRO Suitability For local development in your laptop For applications with medium user load For applications with dynamic user load that require scalability For applications where both scalability and fault tolerance are critical Features Friendly Docker Compose setup with Redis, Egress, Ingress, S3 storage and observability. With automatic certificate management to test across devices in your network Custom LiveKit distribution with Redis, Egress, Ingress, S3 storage and observability Same benefits as OpenVidu Single Node plus 2x performance, scalability and advanced observability Same benefits as OpenVidu Single Node and OpenVidu Elastic plus fault tolerance Number of servers Your laptop 1 Node 1 Master Node +N Media Nodes 4 Master Nodes +N Media Nodes Installation instructions Install Install Install Install"},{"location":"docs/releases/","title":"Releases","text":""},{"location":"docs/releases/#300-beta2","title":"3.0.0-beta2","text":""},{"location":"docs/releases/#changelog","title":"Changelog","text":""},{"location":"docs/releases/#known-limitations","title":"Known limitations","text":""},{"location":"docs/releases/#version-table","title":"Version table","text":"Artifact Version Info Link livekit/livekit-server v1.6.0 mediasoup 3.12.16 livekit/egress v1.8.2 livekit/ingress v1.2.0 MinIO 2024.06.13 Caddy 2.7.6 MongoDB 7.0.11 Redis 7.2.5 Grafana 10.3.3 Prometheus 2.50.1 Promtail / Loki 2.8.9 Mimir 2.11.0"},{"location":"docs/releases/#300-beta1","title":"3.0.0-beta1","text":""},{"location":"docs/releases/#version-table_1","title":"Version table","text":"Artifact Version Info Link livekit/livekit-server v1.6.0 mediasoup 3.12.16 livekit/egress v1.8.2 livekit/ingress v1.2.0 MinIO 2024.06.13 Caddy 2.7.6 MongoDB 7.0.11 Redis 7.2.5 Grafana 10.3.3 Prometheus 2.50.1 Promtail / Loki 2.8.9 Mimir 2.11.0"},{"location":"docs/developing-your-openvidu-app/","title":"Developing your OpenVidu application","text":"

Here's a high-level overview of the steps involved in building an OpenVidu application:

  1. Launch an OpenVidu deployment
  2. Use LiveKit Server SDK in your application server
  3. Build the UI of your client application
  4. Deploy OpenVidu and your application
"},{"location":"docs/developing-your-openvidu-app/#1-launch-an-openvidu-deployment","title":"1. Launch an OpenVidu deployment","text":"

The quickest way is to use OpenVidu local deployment.

"},{"location":"docs/developing-your-openvidu-app/#2-use-livekit-server-sdk-in-your-application-server","title":"2. Use LiveKit Server SDK in your application server","text":"

OpenVidu is fully compatibly with LiveKit APIs. This means that any LiveKit Server SDK can be used in your application server.

The only mandatory task to perform in your application server is:

There are also other optional tasks that you can perform from your application server, depending on your requirements:

To get you started, here is a list of all available LiveKit Server SDKs and an application server tutorial using them. These tutorials are all set up to generate access tokens and receive webhook events, so they are perfect starting points for your application server.

Node Go Ruby Java Python Rust PHP .NET Server API

Node Tutorial

Reference Docs

Go Tutorial

Reference Docs

Ruby Tutorial

GitHub Repository

Java Tutorial

GitHub Repository

Python Tutorial

GitHub Repository

Rust Tutorial

Reference Docs

PHP Tutorial

GitHub Repository

.NET Tutorial

There is no .NET SDK for LiveKit available. Visit the tutorial to learn how to create tokens and receive Webhook events directly from your .NET application server.

If your backend technology does not have its own SDK, you have two different options:

  1. Consume the Server API directly: Reference Docs

  2. Use the livekit-cli: GitHub Repository

"},{"location":"docs/developing-your-openvidu-app/#3-build-the-ui-of-your-client-application","title":"3. Build the UI of your client application","text":"

There are two main strategies to build the UI of your client application:

The table below summarizes the key differences between these two strategies to help you make an informed decision:

UI Components Low-level client SDKs What is it? Frontend libraries offering videoconferencing components to build your own application. There are Angular Components or React Components Integrate OpenVidu from scratch in your web, mobile or desktop application using LiveKit Client SDKs Pros Cons Tutorials Angular Components tutorials Application client tutorials

Whatever strategy you choose to build the UI of your application, most common steps to perform are:

Of course, depending on the use case, this may not be necessary for all users, or other additional steps may need to be taken. For example, in a live streaming application, only presenters will publish Tracks, while all other viewers will only subscribe to them. Or it is possible that users may need exchange messages through a chat. Each specific application will need to refine its use of the UI Components or client SDKs to meet its requirements.

Here is the list of all LiveKit Client SDKs: LiveKit Client SDKs. Below is a list of application client tutorials, which are perfect starting points for your client application.

JavaScript

React

Angular

Vue

Electron

Ionic

"},{"location":"docs/developing-your-openvidu-app/#4-deploy-openvidu-and-your-application","title":"4. Deploy OpenVidu and your application","text":"

You have different options to deploy OpenVidu in a production-ready environment, depending on the level of scalability, fault tolerance and observability you need. See Deployment types for more information.

"},{"location":"docs/developing-your-openvidu-app/how-to/","title":"How to","text":"

This page is a collection of the most common operations you may want to perform in your application while integrating OpenVidu. Depending on the scope of the operation, these operations will be performed on the client side using a LiveKit Client SDK, or on the server side using a LiveKit Server SDK (or directly using the HTTP server API). Consider the architecture of an OpenVidu application:

You can use this page as a cheat sheet to know at a glance how to do something, and you have links to the LiveKit reference documentation of each operation for a more detailed explanation.

All client side operations are exemplified using the LiveKit JS Client SDK. For other client SDKs, refer to the corresponding LiveKit reference documentation.

"},{"location":"docs/developing-your-openvidu-app/how-to/#generate-access-tokens","title":"Generate access tokens","text":"

The application client needs an access token to connect to a Room. This token must be generated by the application server. Visit LiveKit reference documentation to learn how to generate access tokens:

Reference docs

"},{"location":"docs/developing-your-openvidu-app/how-to/#manage-rooms","title":"Manage Rooms","text":""},{"location":"docs/developing-your-openvidu-app/how-to/#connect-to-a-room","title":"Connect to a Room","text":"

To connect to a Room you need the URL of your OpenVidu deployment (which is a WebSocket URL) and the access token generated by your application server.

import { Room } from \"livekit-client\";\n\nconst room = new Room();\nawait room.connect(wsUrl, token);\n

Reference docs

"},{"location":"docs/developing-your-openvidu-app/how-to/#disconnect-from-a-room","title":"Disconnect from a Room","text":"
await room.disconnect();\n

Reference docs

"},{"location":"docs/developing-your-openvidu-app/how-to/#publish-a-track","title":"Publish a Track","text":"

You can directly publish the default camera and microphone of the device using methods setCameraEnabled and setMicrophoneEnabled of the LocalParticipant object:

// Publish a video track from the default camera\nawait room.localParticipant.setCameraEnabled(true);\n// Publish an audio track from the default microphone\nawait room.localParticipant.setMicrophoneEnabled(true);\n

It is also possible to publish both of them at the same time using method LocalParticipant.enableCameraAndMicrophone, which has the advantage of showing a single permission dialog to the user:

// Publish both default video and audio tracks triggering a single permission dialog\nawait room.localParticipant.enableCameraAndMicrophone();\n

To craft a custom Track, you can use the LocalParticipant.createTracks method and publish them with LocalParticipant.publishTrack:

var tracks = await room.localParticipant.createTracks({\n  audio: {\n    deviceId: \"default\",\n    autoGainControl: true,\n    echoCancellation: true,\n    noiseSuppression: true\n  },\n  video: {\n    deviceId: 'frontcamera';\n    facingMode: 'user'\n  },\n});\nawait Promise.all([\n    room.localParticipant.publishTrack(tracks[0]),\n    room.localParticipant.publishTrack(tracks[1]),\n]);\n

Reference docs

"},{"location":"docs/developing-your-openvidu-app/how-to/#muteunmute-a-track","title":"Mute/Unmute a Track","text":"

To mute the default camera and microphone Tracks:

await room.localParticipant.setCameraEnabled(false);\nawait room.localParticipant.setMicrophoneEnabled(false);\n

To mute/unmute a custom Track:

// Mute the track\nawait track.mute();\n\n// Unmute the track\nawait track.unmute();\n

Reference docs

"},{"location":"docs/developing-your-openvidu-app/how-to/#unpublish-a-track","title":"Unpublish a Track","text":"

To completely stop sending a Track to the Room, you must unpublish it:

await room.localParticipant.unpublishTrack(track, true);\n

The second boolean parameter indicates if the local Track should be stopped. This usually means freeing the device capturing it (switching off the camera LED, for example).

Reference docs

"},{"location":"docs/developing-your-openvidu-app/how-to/#send-messages","title":"Send messages","text":"

You can share information between Participants of a Room in different ways.

First of all, you can set Room metadata that will be available for all clients in the Room object. You do so in your application server when calling the CreateRoom API (available for all LiveKit Server SDKs and the HTTP Server API). The Room metadata will be available in the client side like this:

console.log(room.metadata);\n

You can update the Room metadata at any time from your application server with the UpdateRoomMetadata API (available for all LiveKit Server SDKs and the HTTP Server API). The client side will be notified of the change with the roomMetadataChanged event of the Room object:

room.on('roomMetadataChanged', (metadata) => {\n  console.log('New room metadata', metadata);\n});\n

Secondly, you can also set Participant metadata. You do so when creating an access token in your application server, setting metadata field of the JWT.

Participants can also update their own metadata from the client side, if their access token was created with grant canUpdateOwnMetadata.

room.localParticipant.setMetadata('new metadata');\n

The client side will be notified of the change with the participantMetadataChanged event of the Room and/or Participant object:

// To handle all metadata changes of all participants\nroom.on(RoomEvent.ParticipantMetadataChanged, (previousMetadata: string, participant) => {\n  console.log('New metadata for participant', participant.identity, participant.metadata);\n});\n\n// To handle only metadata changes of a specific participant\nparticipant.on(ParticipantEvent.ParticipantMetadataChanged, (previousMetadata) => {\n    console.log('New metadata for participant', participant.identity, participant.metadata);\n});\n

Finally, you can send messages to Participants in the Room using the LocalParticipant.publishData method:

const data: Uint8Array = new TextEncoder().encode(JSON.stringify(''));\nroom.localParticipant.publishData(data, { reliable: true, topic: 'chat', destinationIdentities: ['participant-identity'] });\n

The DataPublishOptions allow setting the reliability of the message (depending on the nature of the message it can be sent as a reliable or lossy message), a topic to easily filter messages, and the participants that will receive the message.

The client side will be notified of the message with the dataReceived event of the Room and/or Participant object:

// To receive all messages from the Room\nroom.on(RoomEvent.DataReceived, (payload: Uint8Array, participant: Participant, kind: DataPacket_Kind) => {\n  const strData = new TextDecoder().decode(payload);\n  console.log('Received data from', participant.identity, strData);\n});\n\n// To receive messages only from a specific participant\nparticipant.on(ParticipantEvent.DataReceived, (payload: Uint8Array, kind: DataPacket_Kind) => {\n  const strData = new TextDecoder().decode(payload);\n  console.log('Received data from', participant.identity, strData);\n});\n

Reference docs

"},{"location":"docs/developing-your-openvidu-app/how-to/#from-your-application-server","title":"From your application server","text":"

Except for the generation of access tokens, it is possible for all the logic of your application to be contained entirely on the client side. Nonetheless, some use cases may require the management of the Rooms from the server side.

These operations are only available in the server SDKs, and not in the client SDKs:

You have here the complete list of the server-side operations, documented for the HTTP Server API. All the LiveKit Server SDKs have the same operations.

"},{"location":"docs/developing-your-openvidu-app/how-to/#screen-sharing","title":"Screen Sharing","text":"

To quickly publish a screen sharing Track:

await room.localParticipant.setScreenShareEnabled(true);\n

You can also create custom screen tracks, for example capturing the audio of the screen and fine-tuning the video capture options (checkout the ScreenTrackOptions interface for detailed information):

const screenTracks = await room.localParticipant.createScreenTracks({\n    audio: true,\n    contentHint: \"detail\",\n    preferCurrentTab: true,\n    video: {\n        displaySurface: \"window\"\n    }\n});\nawait Promise.all([\n    room.localParticipant.publishTrack(screenTracks[0]),\n    room.localParticipant.publishTrack(screenTracks[1]),\n]);\n

Reference docs

"},{"location":"docs/developing-your-openvidu-app/how-to/#virtual-background","title":"Virtual Background","text":"

It is possible to apply a virtual background to video tracks. In this way you can blur the background or replace it with an image.

It is necessary to install an additional dependency to use this feature:

npm add @livekit/track-processors\n

To blur the background:

import { BackgroundBlur } from '@livekit/track-processors';\n\nconst videoTrack = await createLocalVideoTrack();\nconst blur = BackgroundBlur(10);\nawait videoTrack.setProcessor(blur);\n

To replace the background with an image:

import { VirtualBackground } from '@livekit/track-processors';\n\nconst videoTrack = await createLocalVideoTrack();\nconst image = VirtualBackground('https://picsum.photos/400');\nawait videoTrack.setProcessor(image);\n

GitHub Repository

"},{"location":"docs/developing-your-openvidu-app/how-to/#recording","title":"Recording","text":"

You can record your Rooms using the Egress module. Egress allows exporting media from a Room in different formats, including

Visit the LiveKit reference documentation for a detailed explanation of Egress:

Reference docs

"},{"location":"docs/developing-your-openvidu-app/how-to/#webhooks","title":"Webhooks","text":"

Your application server may receive webhooks coming from the OpenVidu deployment. These webhooks inform about events happening in the Rooms, including when a Room is created and finished, when a Participant joins and leaves a Room, when a Track is published and unpublished, and when Egress/Ingress operations take place in a Room.

Every application server tutorial here is ready to receive webhooks: Application Server Tutorials.

Visit the LiveKit reference documentation for a detailed explanation of each webhook event:

Reference docs

"},{"location":"docs/openvidu-call/","title":"Index","text":"OpenVidu Call The videoconference application built on top of OpenVidu Features

And much more... All the features you need to quickly build your perfect real-time application

Try it

Customize it

Install it

"},{"location":"docs/openvidu-call/docs/","title":"openvidu-call","text":"

Source code

Introducing OpenVidu Call, the premier videoconference application that showcases the full potential of the OpenVidu platform. OpenVidu Call is not just any videoconferencing tool; it\u2019s the default and flagship app built with the robust and versatile OpenVidu Components.

OpenVidu Call"},{"location":"docs/openvidu-call/docs/#run-openvidu-call","title":"Run OpenVidu Call","text":""},{"location":"docs/openvidu-call/docs/#1-run-openvidu-server","title":"1. Run OpenVidu Server","text":"Run OpenVidu locallyDeploy OpenVidu

  1. Download OpenVidu

    git clone https://github.com/OpenVidu/openvidu-local-deployment\n

  2. Configure the local deployment

    Windows macOS Linux 
    cd openvidu-local-deployment/community\n.\\configure_lan_private_ip_windows.bat\n
    cd openvidu-local-deployment/community\n./configure_lan_private_ip_macos.sh\n
    cd openvidu-local-deployment/community\n./configure_lan_private_ip_linux.sh\n

  3. Run OpenVidu

    docker compose up\n

To use a production-ready OpenVidu deployment, visit the official deployment guide.

Accessible via openvidu-local-deployment

A pre-built OpenVidu Call application is launched as part of the openvidu-local-deployment and it can be accessible by visiting http://localhost:7880/openvidu-call/.

If you want to explore and run the OpenVidu Call code locally, follow the instructions below.

"},{"location":"docs/openvidu-call/docs/#2-download-openvidu-call-code","title":"2. Download OpenVidu Call code","text":"
git clone https://github.com/OpenVidu/openvidu-call.git\n
"},{"location":"docs/openvidu-call/docs/#3-run-the-openvidu-call-backend","title":"3. Run the OpenVidu Call backend","text":"

  1. Navigate to the openvidu-call-back directory:

    cd openvidu-call/openvidu-call-back\n

  2. Install the dependencies:

    npm install\n

  3. Start the application:

    npm run dev:start\n
"},{"location":"docs/openvidu-call/docs/#4-run-the-openvidu-call-frontend","title":"4. Run the OpenVidu Call frontend","text":"

Launching another terminal, under the openvidu-call directory:

  1. Navigate to the openvidu-call-front directory:

    cd openvidu-call/openvidu-call-front\n

  2. Install the dependencies:

    npm install\n

  3. Start the application:

    npm run dev:start\n

The application will be available at http://localhost:5080.

"},{"location":"docs/openvidu-call/docs/#architecture","title":"Architecture","text":"

The OpenVidu Call architecture is divided into two main components:

OpenVidu Call Architecture OpenVidu Call frontend OpenVidu Call backend

The client-side application built with Angular that provides the user interface for the videoconference. It uses the OpenVidu Components library to create the videoconference layout with ease.

The project architecture is divided into the following directories:

Additionally, the project hosts the following files:

The server-side application built with Node.js and Express that manages the communication between the OpenVidu Server and the OpenVidu Call Frontend.

It uses the LiveKit Server SDK library to interact with the OpenVidu Server and handle the authentication, videoconference rooms, recordings, broadcasts, and other features.

The project architecture is divided into the following directories:

Additionally, the project hosts the following files:

"},{"location":"docs/openvidu-call/docs/#features","title":"Features","text":""},{"location":"docs/openvidu-call/docs/#authentication","title":"Authentication","text":"

OpenVidu Call provides user authentication to ensure that only authorized users can access the videoconference rooms. The authentication process is handled by the OpenVidu Call backend, which uses Basic Authentication to verify the user credentials.

"},{"location":"docs/openvidu-call/docs/#video-conferencing","title":"Video conferencing","text":""},{"location":"docs/openvidu-call/docs/#essential-features","title":"Essential Features","text":"

OpenVidu Call offers essential features that make video conferencing simple and intuitive for users. These features include:

"},{"location":"docs/openvidu-call/docs/#advanced-features","title":"Advanced Features","text":"

The advanced features of OpenVidu Call enhance the video conferencing experience by providing additional functionalities that improve collaboration and productivity.

"},{"location":"docs/openvidu-call/docs/#admin-dashboard","title":"Admin Dashboard","text":"

An admin dashboard is integrated into OpenVidu Call to provide additional functionalities for the admin user.

"},{"location":"docs/openvidu-call/docs/#build-and-deployment","title":"Build and Deployment","text":""},{"location":"docs/openvidu-call/docs/#docker-image","title":"Docker Image","text":"

The process to build a Docker image of OpenVidu call is really easy, you just need to run the following instructions:

  1. Build the Docker image:

    cd docker\n./create_image.sh openvidu-call\n

    This script will create a Docker image with the name openvidu-call.

  2. Run the Docker container:

    docker run -p 5000:5000 \\\n-e LIVEKIT_URL=wss://your-livekit-server-url \\\n-e LIVEKIT_API_KEY=your-livekit-api-key \\\n-e LIVEKIT_API_SECRET=your-livekit-api-secret \\\nopenvidu-call\n

    Once the container is running, you can access the OpenVidu Call application by visiting http://localhost:5000.

"},{"location":"docs/openvidu-call/docs/#package-bundle","title":"Package bundle","text":"

To build the OpenVidu Call application without using Docker, you can follow the instructions:

  1. Build the frontend application:

    cd openvidu-call-front\nnpm install\nnpm run prod:build\n

  2. Build the backend application:

    cd openvidu-call-back\nnpm install\nnpm run build\n

  3. Start the backend application:

    cd dist\nnode server.js\n
"},{"location":"docs/self-hosting/deployment-types/","title":"Deployment types","text":"

OpenVidu offers user-friendly installers that facilitate quick on-premises deployments, so you can self-host your real-time solution in your own infrastructure or any cloud provider.

There are different deployment options available, depending on your needs:

Type of deployment OpenViduLocal (development) OpenViduSingle Node OpenViduElastic OpenViduHigh Availability OpenVidu Edition COMMUNITY PRO COMMUNITY PRO PRO Suitability For local development in your laptop For applications with medium user load For applications with dynamic user load that require scalability For applications where both scalability and fault tolerance are critical Features Friendly Docker Compose setup with Redis, Egress, Ingress, S3 storage and observability. With automatic certificate management to test across devices in your network Custom LiveKit distribution with Redis, Egress, Ingress, S3 storage and observability Same benefits as OpenVidu Single Node plus 2x performance, scalability and advanced observability Same benefits as OpenVidu Single Node and OpenVidu Elastic plus fault tolerance Number of servers Your laptop 1 Node 1 Master Node +N Media Nodes 4 Master Nodes +N Media Nodes Installation instructions Install Install Install Install

"},{"location":"docs/self-hosting/deployment-types/#openvidu-local-development","title":"OpenVidu Local (development)","text":"

To run OpenVidu in your local machine, this is the quickest option. It is a Docker Compose setup that includes all the necessary services to run OpenVidu in your LAN, including automated SSL certificates that will be valid across all devices in your network.

OpenVidu Local (development)"},{"location":"docs/self-hosting/deployment-types/#openvidu-single-node","title":"OpenVidu Single Node","text":"

This is the simplest production-ready OpenVidu deployment available. It provides all the features you need, but lacks scalability and fault tolerance. But make no mistake about it: it is perfectly suitable for medium-scale production deployments. For most projects OpenVidu Single Node will be enough, at least until your user load gets serious. You can host hundreds of simultaneous participants in your rooms by running OpenVidu Community on a sufficiently powerful server!

It is composed of a single OpenVidu Node hosting all the necessary services in a monolithic setup.

OpenVidu Single Node"},{"location":"docs/self-hosting/deployment-types/#openvidu-elastic","title":"OpenVidu Elastic","text":"

This is the intermediate OpenVidu deployment. It provides scalability for your video rooms. Suitable for applications with dynamic load in the media plane that require scalability.

It is composed of two different types of nodes, one of them running on a cluster of multiple servers and the other running as a single monolithic server:

OpenVidu Elastic"},{"location":"docs/self-hosting/deployment-types/#openvidu-high-availability","title":"OpenVidu High Availability","text":"

This is the most complete OpenVidu deployment. It provides scalability for your video rooms and fault tolerance in all its services. Suitable for applications where both scalability and availability are critical.

It is composed of two different types of nodes running on two separate clusters:

OpenVidu High Availability cluster"},{"location":"docs/self-hosting/deployment-types/#node-services","title":"Node services","text":"

OpenVidu is composed of several services that work together to provide a complete videoconferencing solution. Every service runs as a Docker container, coordinated with Docker Compose.

"},{"location":"docs/self-hosting/deployment-types/#master-node-services","title":"Master Node services","text":"SERVICE DESCRIPTION OpenVidu Dashboard Web application interface for managing your cluster and visualizing your Rooms. Default Application (OpenVidu Call) A fully fledged videoconference web application ready to be used out-of-the-box. OpenVidu Operator Module that supervises the high availability services and updates the loadbalancing configuration dynamically. Redis Database used to share transient information between Media Nodes and coordinate them. In OpenVidu High Availability this is an instance of a Redis Cluster. MongoDB Database used to store analytics and monitoring persistent data. In OpenVidu High Availability this is an instance of a MongoDB Replica Set. Minio S3 bucket used to store recordings and common node configurations. In OpenVidu High Availability this is an instance of a Minio Multi-Node. Caddy Reverse proxy used as a loadbalancer to distribute client connections across your nodes and automatically manage your TLS certificate. Mimir (observability) Module used to store metrics from Prometheus. Promtail (observability) Module used to collect logs from all services and send them to Loki. Loki (observability) Module used to store logs. Grafana (observability) Module used to visualize logs and metrics in dashboards."},{"location":"docs/self-hosting/deployment-types/#media-node-services","title":"Media Node services","text":"SERVICE DESCRIPTION OpenVidu Server Media server used to stream real-time video, audio and data. Based on SFUs LiveKit and mediasoup. Egress Server Module used to export media from a Room (for example, recordings or RTMP broadcasting). See Egress. Ingress Server Module used to import media into a Room (for example, an MP4 video or an RTSP stream). See Ingress. Caddy Reverse proxy used as a loadbalancer to distribute the load generated by the Media Nodes over the Minio, Mimir and Loki cluster. Prometheus (observability) Module used to collect metrics from OpenVidu Server and send them to Loki. Promtail (observability) Module used to collect logs from all services and send them to Loki."},{"location":"docs/self-hosting/faq/","title":"Installation FAQs","text":""},{"location":"docs/self-hosting/faq/#common-issues","title":"Common issues","text":""},{"location":"docs/self-hosting/faq/#everything-looks-alright-but-i-cannot-see-any-remote-video","title":"Everything looks alright, but I cannot see any remote video.","text":""},{"location":"docs/self-hosting/faq/#my-local-video-is-not-showing-up-on-the-browser","title":"My local video is not showing up on the browser","text":""},{"location":"docs/self-hosting/faq/#any-tips-to-make-easier-the-development-of-my-webrtc-application","title":"Any tips to make easier the development of my WebRTC application?","text":""},{"location":"docs/self-hosting/faq/#test-applications-in-my-network-with-multiple-devices","title":"Test applications in my network with multiple devices.","text":""},{"location":"docs/self-hosting/faq/#does-my-app-need-a-server-side","title":"Does my app need a server-side?","text":""},{"location":"docs/self-hosting/faq/#caddy-certificates-are-not-working-what-can-i-do","title":"Caddy certificates are not working. What can I do?","text":""},{"location":"docs/self-hosting/faq/#my-commercial-certificate-is-not-working-what-can-i-do","title":"My commercial certificate is not working. What can I do?","text":""},{"location":"docs/self-hosting/faq/#how-can-i-customize-the-caddy-configuration","title":"How can I customize the Caddy configuration?","text":""},{"location":"docs/self-hosting/faq/#openvidu-does-not-work-for-clients-behind-restrictive-firewalls","title":"OpenVidu does not work for clients behind restrictive firewalls.","text":""},{"location":"docs/self-hosting/faq/#fundamentals-knowledge","title":"Fundamentals Knowledge","text":""},{"location":"docs/self-hosting/faq/#what-is-a-domain-name-and-how-can-i-get-one","title":"What is a domain name and how can I get one?","text":""},{"location":"docs/self-hosting/faq/#what-is-an-aws-elastic-ip-and-how-can-i-create-one","title":"What is an AWS Elastic IP and how can I create one?","text":""},{"location":"docs/self-hosting/faq/#what-is-a-vpc-and-a-subnet-in-aws","title":"What is a VPC and a subnet in AWS?","text":""},{"location":"docs/self-hosting/faq/#what-is-a-dns-record-and-how-can-i-create-one","title":"What is a DNS record and how can I create one?","text":""},{"location":"docs/self-hosting/faq/#what-means-each-type-of-certificate-in-openvidu","title":"What means each type of certificate in OpenVidu?","text":""},{"location":"docs/self-hosting/faq/#what-is-stun-and-turn-and-why-do-i-need-them","title":"What is STUN and TURN and why do I need them?","text":""},{"location":"docs/self-hosting/faq/#what-is-a-caddy-server-and-why-is-it-used-in-openvidu","title":"What is a Caddy server and why is it used in OpenVidu?","text":""},{"location":"docs/self-hosting/faq/#what-is-the-operator-service-in-openvidu","title":"What is the \"operator\" service in OpenVidu?","text":""},{"location":"docs/self-hosting/local/","title":"Local Installation (Development)","text":"

For development purposes, we provide an easy to install local deployment based on Docker Compose which will automatically configure all the necessary services for OpenVidu to develop and test your applications seamlessly.

"},{"location":"docs/self-hosting/local/#installation-instructions","title":"Installation instructions","text":"

First, make sure you have the following prerequisites:

Windows macOS Linux

The installation consists of cloning a repository and running a script to configure your local IP address in the deployment. Then, you can start, stop, and manage your deployment with Docker Compose.

To install OpenVidu locally, follow these steps:

OpenVidu COMMUNITYOpenVidu PRO

  1. Clone the following repository:

    git clone https://github.com/OpenVidu/openvidu-local-deployment\n

    Info

    To use a specific OpenVidu version, switch to the desired tag with git checkout <version>, e.g., git checkout 3.0.0. By default, the latest version is used.

  2. Configure the local deployment

    Windows macOS Linux 
    cd openvidu-local-deployment/community\n.\\configure_lan_private_ip_windows.bat\n
    cd openvidu-local-deployment/community\n./configure_lan_private_ip_macos.sh\n
    cd openvidu-local-deployment/community\n./configure_lan_private_ip_linux.sh\n

  3. Run OpenVidu

    docker compose up\n

  1. Clone the following repository:

    git clone https://github.com/OpenVidu/openvidu-local-deployment\n

    Info

    To use a specific OpenVidu version, switch to the desired tag with git checkout <version>, e.g., git checkout 3.0.0. By default, the latest version is used.

  2. Configure the local deployment

    Windows macOS Linux 
    cd openvidu-local-deployment/pro\n.\\configure_lan_private_ip_windows.bat\n
    cd openvidu-local-deployment/pro\n./configure_lan_private_ip_macos.sh\n
    cd openvidu-local-deployment/pro\n./configure_lan_private_ip_linux.sh\n

  3. Run OpenVidu

    docker compose up\n

Info

OpenVidu PRO runs locally in evaluation mode for free for development and testing purposes. Some limits apply:

For a production environment, you need to create an OpenVidu account to get a license key. There's a 15 day free trial waiting for you!

The deployment is ready when you see the following message:

 =========================================\n \ud83c\udf89 OpenVidu is ready! \ud83c\udf89\n =========================================\n\n OpenVidu Server && LiveKit Server URLs:\n\n     - From this machine:\n\n         - http://localhost:7880\n         - ws://localhost:7880\n\n     - From other devices in your LAN:\n\n         - https://xxx-yyy-zzz-www.openvidu-local.dev:7443\n         - wss://xxx-yyy-zzz-www.openvidu-local.dev:7443\n\n =========================================\n\n OpenVidu Developer UI (services and passwords):\n\n     - http://localhost:7880\n     - https://xxx-yyy-zzz-www.openvidu-local.dev:7443\n\n =========================================\n

By visiting http://localhost:7880 you have the OpenVidu Developer UI available with a summary of the services and passwords deployed. You can access the following services:

You just need to point your OpenVidu and LiveKit applications to http://localhost:7880 or ws://localhost:7880 and start developing. Check our tutorials if you want a step-by-step guide to develop your first application using OpenVidu.

"},{"location":"docs/self-hosting/local/#configure-your-application-to-use-the-local-deployment","title":"Configure your Application to use the Local Deployment","text":"

To point your applications to your local OpenVidu Local deployment, check the credentials at http://localhost:7880 or simply check the .env file. All access credentials of all services are defined in this file.

OpenVidu COMMUNITYOpenVidu PRO

Your authentication credentials and URLs to point your applications to are:

Your authentication credentials and URLs to point your applications to are:

If you want to use the OpenVidu Local deployment from other devices on your network, follow the instructions in the next section.

"},{"location":"docs/self-hosting/local/#accessing-your-local-deployment-from-other-devices-on-your-network","title":"Accessing your local deployment from other devices on your network","text":"

Testing WebRTC applications can be challenging because devices require a secure context (HTTPS) to access the camera and microphone. When using LiveKit Open Source, this isn't an issue if you access your app from the same computer where the LiveKit Server is running, as localhost is considered a secure context even over plain HTTP. Consider the following architecture:

The simplest way to test your application is:

  1. Run LiveKit Server on your computer.
  2. Connect your app to LiveKit Server through localhost.
  3. Serve both your application client and server from the same computer.
  4. Access your app from localhost in a browser on the same computer.

This setup is straightforward, but what if you need to test your app from multiple devices simultaneously, including real mobile devices? In this case, you must use a secure context (HTTPS), which introduces two challenges:

  1. LiveKit Server open source does not natively support HTTPS. You'll need a reverse proxy to serve LiveKit Server over HTTPS.
  2. Even with HTTPS, your SSL certificate might not be valid for local network addresses. You'll need to accept it in the browser for web apps, and install it on mobile devices.

OpenVidu Local Deployment addresses these issues by providing a magic domain name openvidu-local.dev that resolves to any IP specified as a subdomain and provides a valid wildcard certificate for HTTPS. This is similar to services like nip.io, traefik.me, or localtls.

When using OpenVidu Local Deployment, you can access OpenVidu Server (which is 100% LiveKit compatible) and your app from any device on your local network with a valid HTTPS certificate. The following table shows the URLs to access the deployment and your application locally and from other devices on your network:

Local access Access from devices in your local network Usage Access only from the development machine Access from any device connected to your local network. In the URLs below, replace xxx-yyy-zzz-www with the local IP address of the development machine, replacing the dots (.) with dashes (-). You can find the configured local IP in the .env file in the LAN_PRIVATE_IP variable Application Client (frontend) http://localhost:5080 https://xxx-yyy-zzz-www.openvidu-local.dev:5443 Application Server (backend) http://localhost:6080 https://xxx-yyy-zzz-www.openvidu-local.dev:6443 OpenVidu (LiveKit Compatible) URL http://localhost:7880 https://xxx-yyy-zzz-www.openvidu-local.dev:7443

Info

Warning

If the URL isn't working because the IP address is incorrect or the installation script couldn't detect it automatically, you can update the LAN_PRIVATE_IP value in the .env file and restart the deployment with docker compose up.

When developing web applications with this deployment, you can use the following code snippet to dynamically determine the appropriate URLs for the application server and the OpenVidu server based on the browser's current location. This approach allows you to seamlessly run your application on both your development machine and other devices within your local network without needing to manually adjust the URLs in your code.

if (window.location.hostname === \"localhost\") {\n  APPLICATION_SERVER_URL = \"http://localhost:6080\";\n  OPENVIDU_URL = \"ws://localhost:7880\";\n} else {\n  APPLICATION_SERVER_URL = \"https://\" + window.location.hostname + \":6443\";\n  OPENVIDU_URL = \"wss://\" + window.location.hostname + \":7443\";\n}\n
"},{"location":"docs/self-hosting/local/#about-openvidu-localdev-domain-and-ssl-certificates","title":"About openvidu-local.dev domain and SSL certificates","text":"

This setup simplifies the configuration of local OpenVidu deployments with SSL, making it easier to develop and test your applications securely on your local network by using the openvidu-local.dev domain and a wildcard SSL certificate valid for *.openvidu-local.dev. However, it\u2019s important to note that these certificates are publicly available and do not provide an SSL certificate for production use.

The HTTPS offered by openvidu-local.dev is intended for development or testing purposes with the only goal of making your local devices trust your application (which is mandatory in WebRTC applications). For any other use case, it should be treated with the same security considerations as plain HTTP.

For production, you should consider deploying a production-grade OpenVidu deployment.

"},{"location":"docs/self-hosting/elastic/","title":"OpenVidu Elastic installation","text":"

OpenVidu Elastic is part of the PRO edition of OpenVidu. You have the following deployment options:

Once your deployment is complete, refer to the following sections for configuration and management:

"},{"location":"docs/self-hosting/elastic/aws/admin/","title":"OpenVidu Elastic: AWS Configuration and Administration","text":"

The deployment of OpenVidu Elastic on AWS is automated using AWS CloudFormation, with Media Nodes managed within an Auto Scaling Group. This group dynamically adjusts the number of instances based on a target average CPU utilization. Internally, the AWS deployment mirrors the on-premises setup, allowing you to follow the same administration and configuration guidelines provided in the On Premises Elastic documentation. However, there are specific considerations unique to the AWS environment that are worth taking into account.

"},{"location":"docs/self-hosting/elastic/aws/admin/#cluster-shutdown-and-startup","title":"Cluster Shutdown and Startup","text":"

The Master Node is an EC2 instance, while the Media Nodes are part of an Auto Scaling Group. The process for starting and stopping these components differs. The following sections detail the procedures.

Shutdown the ClusterStartup the Cluster

To shut down the cluster, you need to stop the Media Nodes first and then stop the Master Node. This way, any ongoing session will not be interrupted.

  1. Navigate to the CloudFormation Dashboard on AWS.
  2. Select the CloudFormation Stack that you used to deploy OpenVidu Elastic.
  3. In the \"Resources\" tab, locate the resource with the logical ID: OpenViduMediaNodeASG, and click on it to go to the Auto Scaling Group Dashboard with the Auto Scaling Group of the Media Nodes selected.
  4. Click on \"Actions > Edit\".
  5. Set the \"Desired capacity\", \"Min desired capacity\", and \"Max desired capacity\" to 0, and click on \"Update\".

  6. Wait until the \"Instance Management\" tab shows that there are no instances in the Auto Scaling Group.

    Warning

    It may happen that some instances are still in the \"Terminating:Wait\" lifecycle state after setting the desired capacity to 0. This is because the Auto Scaling Group waits for the instances to finish processing any ongoing room, ingress, or egress operations before terminating them. This can take a few minutes. If you want to force the termination of the instances, you can manually terminate them from the EC2 Dashboard.

  7. After confirming that all Media Node instances are terminated, go back to the CloudFormation Stack and locate the resource with the logical ID: OpenViduMasterNode. Click on it to go to the EC2 Dashboard with the Master Node instance selected.

  8. Right-click on the instance and select \"Stop instance\".

To start the cluster, we recommend starting the Master Node first and then the Media Nodes.

  1. Navigate to the CloudFormation Dashboard on AWS.
  2. Select the CloudFormation Stack that you used to deploy OpenVidu Elastic.
  3. Locate the resource with the logical ID: OpenViduMasterNode. Click on it to go to the EC2 Dashboard with the Master Node instance selected.
  4. Right-click on the instance and select \"Start instance\".
  5. Wait until the instance is running.
  6. Go back to the CloudFormation Stack and locate the resource with the logical ID: OpenViduMediaNodeASG. Click on it to go to the Auto Scaling Group Dashboard with the Auto Scaling Group of the Media Nodes selected.
  7. Click on \"Actions > Edit\".
  8. Set the \"Desired capacity\", \"Min desired capacity\", and \"Max desired capacity\" to the desired number of Media Nodes, and click on \"Update\". In this example, we set the desired capacity to 2.
  9. Wait until the \"Instance Management\" tab shows that there are the desired number of instances in the Auto Scaling Group.
"},{"location":"docs/self-hosting/elastic/aws/admin/#change-the-instance-type","title":"Change the instance type","text":"

It is possible to change the instance type of both the Master Node and the Media Nodes. However, since the Media Nodes are part of an Auto Scaling Group, the process differs. The following section details the procedures.

Master NodesMedia Nodes

Warning

This procedure requires downtime, as it involves stopping the Master Node.

  1. Shutdown the cluster.

    Info

    You can stop only the Master Node instance to change its instance type, but it is recommended to stop the whole cluster to avoid any issues.

  2. Go to the CloudFormation Stack and locate the resource with the logical ID: OpenViduMasterNode. Click on it to go to the EC2 Dashboard with the Master Node instance selected.

  3. Right-click on the instance and select \"Instance Settings > Change Instance Type\".
  4. Select the new instance type and click on \"Apply\".
  5. Start the cluster.
  1. Go to the CloudFormation Dashboard on AWS.
  2. Select the CloudFormation Stack that you used to deploy OpenVidu Elastic.
  3. Locate the resource with the logical ID: OpenViduMediaNodeLaunchTemplate. Click on it to go to the Launch Template Dashboard with the Launch Template of the Media Nodes selected.
  4. Click on \"Actions > Modify template (Create new version)\".
  5. In the \"Instance type\" section, select the new instance type and click on \"Create template version\".
  6. Go to the CloudFormation Stack and locate the resource with the logical ID: OpenViduMediaNodeASG. Click on it to go to the Auto Scaling Group Dashboard with the Auto Scaling Group of the Media Nodes selected.
  7. Click on \"Actions > Edit\".

  8. In the Launch Template section, select the new version of the launch template we just created at step 5, which is the highest version number.

    Then, click on \"Update\".

    Info

    By configuring \"Latest\" as the launch template version, you no longer need to update the Auto Scaling Group every time you modify the launch template. The Auto Scaling Group will automatically use the latest version of the launch template.

  9. Terminate the old instances manually from the EC2 Dashboard if you want to force the termination of the instances. New instances will be launched with the new instance type.

    Info

    If you want to avoid downtime, you can wait until the Auto Scaling Group replaces the old instances with the new ones. But you will need to increase the desired capacity to force the replacement of the instances and then decrease it to the desired number of instances.

"},{"location":"docs/self-hosting/elastic/aws/admin/#media-nodes-autoscaling-configuration","title":"Media Nodes Autoscaling Configuration","text":"

To configure the Auto Scaling settings for the Media Nodes, follow the steps outlined below. This configuration allows you to set the parameters that control how the Auto Scaling Group will scale based on the target average CPU utilization.

Media Nodes Autoscaling Configuration
  1. Navigate to the CloudFormation Dashboard on AWS.
  2. Select the CloudFormation Stack that you used to deploy OpenVidu Elastic.
  3. In the \"Resources\" tab, locate the resource with the logical ID: OpenViduMediaNodeASG and click on it to go to the Auto Scaling Group Dashboard.
  4. Click on \"Actions > Edit\".
  5. To configure scaling policies, navigate to the \"Automatic scaling\" tab within the Auto Scaling Group Dashboard, select the unique \"Target tracking scaling\" autoscaling policy, and click on \"Actions > Edit\".

  6. It will open a panel where you can configure multiple parameters. In this example, we set the target average CPU utilization to 30%. Then, click on \"Update\".

    Info

    OpenVidu Elastic is by default configured with a \"Target tracking scaling\" policy that scales based on the target average CPU utilization, however, you can configure different autoscaling policies according to your needs. For more information on the various types of autoscaling policies and how to implement them, refer to the AWS Auto Scaling documentation.

"},{"location":"docs/self-hosting/elastic/aws/admin/#fixed-number-of-media-nodes","title":"Fixed Number of Media Nodes","text":"

If you need to maintain a fixed number of Media Nodes instead of allowing the Auto Scaling Group to dynamically adjust based on CPU utilization, you can configure the desired capacity settings accordingly. Follow the steps below to set a fixed number of Media Nodes:

Set Fixed Number of Media Nodes
  1. Navigate to the CloudFormation Dashboard on AWS.
  2. Select the CloudFormation Stack that you used to deploy OpenVidu Elastic.
  3. In the \"Resources\" tab, locate the resource with the logical ID: OpenViduMediaNodeASG and click on it to go to the Auto Scaling Group Dashboard.
  4. Click on \"Actions > Edit\".
  5. Set the \"Desired capacity\", \"Min desired capacity\", and \"Max desired capacity\" to the fixed number of Media Nodes you require, and click on \"Update\". In this example, we set the desired capacity to 2.
  6. Wait until the \"Instance Management\" tab shows that the Auto Scaling Group has the fixed number of instances running.
"},{"location":"docs/self-hosting/elastic/aws/admin/#configuration-management","title":"Configuration Management","text":"

This section explains how to manage and update the configuration settings for your OpenVidu Elastic deployment. It is divided into three parts:

  1. Configuring CloudFormation YAML for Node Services Configuration: Details how to pre-configure settings in the CloudFormation template to avoid manual interventions post-deployment.
  2. Global Configuration: Covers parameters that affect the entire cluster when the CloudFormation stack is already deployed.
  3. Node Services Configuration: Focuses on settings specific to Master and Media Nodes services when the CloudFormation stack is already deployed.
"},{"location":"docs/self-hosting/elastic/aws/admin/#configuring-cloudformation-yaml-for-node-services-configuration","title":"Configuring CloudFormation YAML for Node Services Configuration","text":"

To avoid manual intervention after deployment, you can pre-configure the node services configuration directly in the CloudFormation YAML template. This ensures that the necessary configurations are applied automatically upon deployment.

Master NodeMedia Nodes
  1. Get the CloudFormation YAML template used to deploy OpenVidu Elastic on AWS.

  2. Locate the section defining the Launch Template for the Master Node and update the UserData property with the required configuration parameters. The section looks like this:

    OpenViduMasterNode:\n    Type: AWS::EC2::Instance\n    Properties:\n        UserData:\n            Fn::Base64: !Sub |\n                #!/bin/bash\n                ...\n                ...\n                # Install OpenVidu\n                /usr/local/bin/install.sh || { echo \"[OpenVidu] error installing OpenVidu\"; exit 1; }\n\n                ######### APPLY CUSTOM CONFIGURATIONS #########\n                # If you want to apply any modification to the configuration files\n                # of the OpenVidu services at /opt/openvidu, you can do it here.\n                # Examples:\n                #\n                # - Change minio public port\n                # yq eval '.apps.http.servers.minio.listen[0] = \":9001\"' -i /opt/openvidu/config/caddy.yaml\n                #\n                # - Disable dashboard access\n                # yq eval 'del(.apps.http.servers.public.routes[] | \\\n                #  select(.handle[]?.handler == \"subroute\" and \\\n                #  .handle[].routes[].handle[].strip_path_prefix == \"/dashboard\"))' \\\n                #  -i /opt/openvidu/config/caddy.yaml\n\n\n\n                ######### END CUSTOM CONFIGURATIONS #########\n\n                # Start OpenVidu\n                systemctl start openvidu || { echo \"[OpenVidu] error starting OpenVidu\"; exit 1; }\n                ...\n                ...\n

    The area between APPLY CUSTOM CONFIGURATIONS and END CUSTOM CONFIGURATIONS is where you can add your custom configuration commands. You can use yq to modify the configuration files of the OpenVidu services. The example shows how to change the minio public port and how to disable dashboard access in the caddy.yaml configuration file.

  3. Save the YAML file and use it to deploy your CloudFormation stack. This will apply the Master Node configuration automatically during the deployment process.

  1. Get the CloudFormation YAML template used to deploy OpenVidu Elastic on AWS.

  2. Locate the section defining the Launch Template for the Media Nodes and update the UserData property with the required configuration parameters. The section looks like this:

    OpenViduMediaNodeLaunchTemplate:\n    Type: \"AWS::EC2::LaunchTemplate\"\n    Properties:\n    LaunchTemplateData:\n        UserData:\n            Fn::Base64: !Sub |\n                #!/bin/bash\n                ...\n                ...\n                # Install OpenVidu #\n                /usr/local/bin/install.sh || { echo \"[OpenVidu] error installing OpenVidu\"; /usr/local/bin/set_as_unhealthy.sh; exit 1; }\n\n                ######### APPLY CUSTOM CONFIGURATIONS #########\n                # If you want to apply any modification to the configuration files\n                # of the OpenVidu services at /opt/openvidu, you can do it in this section.\n                # Examples:\n                #\n                # - Announce specific IP address for the Media Node\n                # yq eval '.rtc.node_ip = 1.2.3.4' -i /opt/openvidu/config/livekit.yaml\n                #\n                # - Add webhooks to livekit\n                # yq eval '.webhook.urls += [\"http://new-endpoint.example.com/webhook\"]' -i /opt/openvidu/config/livekit.yaml\n\n\n\n                ######### END CUSTOM CONFIGURATIONS #########\n\n                # Start OpenVidu\n                systemctl start openvidu || { echo \"[OpenVidu] error starting OpenVidu\"; /usr/local/bin/set_as_unhealthy.sh; exit 1; }\n

    The area between APPLY CUSTOM CONFIGURATIONS and END CUSTOM CONFIGURATIONS is where you can add your custom configuration commands. You can use yq to modify the configuration files of the OpenVidu services. The example shows how to change the rtc.node_ip parameter and how to add a webhook to the livekit.yaml configuration file.

  3. Save the YAML file and use it to deploy your CloudFormation stack. This will apply the node services configuration automatically during the deployment process.

By pre-configuring the CloudFormation template, you streamline the deployment process and reduce the need for post-deployment manual configuration.

"},{"location":"docs/self-hosting/elastic/aws/admin/#global-configuration","title":"Global Configuration","text":"

The global configuration parameters for the OpenVidu Elastic deployment are stored in a secret resource deployed by the CloudFormation stack. These parameters can affect the configuration of all the nodes in the cluster. To update any of these parameters, follow the steps below:

Update Global Configuration Parameters
  1. Navigate to the CloudFormation Dashboard on AWS.
  2. Select the CloudFormation Stack that you used to deploy OpenVidu Elastic.
  3. In the \"Resources\" tab, locate the resource with the logical ID: OpenViduSharedInfo and click on it to view the secret in AWS Secrets Manager.
  4. Click on \"Retrieve secret value\" to view the parameters.
  5. Edit the desired parameters within the secret. For example, you can change the RTC_ENGINE parameter to pion or mediasoup depending on the WebRTC engine you want to use. Just click on \"Edit\", modify the value, and click on \"Save\".
  6. To apply the changes, stop the cluster and then start it again following the procedures outlined in the Cluster Shutdown and Startup section.
"},{"location":"docs/self-hosting/elastic/aws/admin/#node-services-configuration","title":"Node Services Configuration","text":"

The configuration for individual node services can be managed through different methods depending on the node type.

Master NodeMedia Node

The Master Node's configuration can be directly modified on the internal machine since it is an EC2 instance. To update the configuration:

  1. Connect to the Master Node EC2 instance using SSH.
  2. Edit the configuration files as necessary. Check the On Premises Elastic documentation related to the Master Node configuration.

Once the changes are made, restart the OpenVidu Server to apply the new configuration.

sudo systemctl restart openvidu\n

Warning

Take into account that some changes may require modifying the Master Nodes configuration as well. Check the On Premises Elastic Advanced Configuration for more information.

Media Node configurations require changes to be made in the Launch Template \"User Data\" section. To update the configuration:

  1. Navigate to the CloudFormation Dashboard on AWS.
  2. Select the CloudFormation Stack that you used to deploy OpenVidu Elastic.
  3. Locate the resource with the logical ID: OpenViduMediaNodeLaunchTemplate. Click on it to go to the Launch Template Dashboard with the Launch Template of the Media Nodes selected.
  4. Click on \"Actions > Modify template (Create new version)\".
  5. Go to the \"Advanced details\" section and modify the \"User data\" field with the new configuration. You can modify the configuration parameters of the services running on the Media Nodes following the same script structure as the one used in the Automatic installation and configuration of nodes for the Media Nodes. When you finish, click on \"Create template version\".
  6. Go to the CloudFormation Stack and locate the resource with the logical ID: OpenViduMediaNodeASG. Click on it to go to the Auto Scaling Group Dashboard with the Auto Scaling Group of the Media Nodes selected.
  7. Click on \"Actions > Edit\".

  8. In the Launch Template section, select the new version of the launch template we just created at step 5, which is the highest version number. Then, click on \"Update\".

    Info

    By configuring \"Latest\" as the launch template version, you no longer need to update the Auto Scaling Group every time you modify the launch template. The Auto Scaling Group will automatically use the latest version of the launch template.

  9. Terminate the old instances manually from the EC2 Dashboard if you want to force the termination of the instances. New instances will be launched with the new configuration.

    Warning

    This process requires downtime, as it involves terminating the old instances and launching new ones with the updated configuration.

"},{"location":"docs/self-hosting/elastic/aws/install/","title":"OpenVidu Elastic Installation: AWS","text":"

Info

OpenVidu Elastic is part of OpenVidu PRO. Before deploying, you need to create an OpenVidu account to get your license key. There's a 15-day free trial waiting for you!

This section contains the instructions to deploy a production-ready OpenVidu Elastic deployment in AWS. Deployed services are the same as the On Premises Elastic Installation but automate the process with AWS CloudFormation.

First of all, import the template in the AWS CloudFormation console. You can click the following button...

Deploy OpenVidu Elastic in

...or access your AWS CloudFormation console and manually set this S3 URL in the Specify template section:

https://s3.eu-west-1.amazonaws.com/get.openvidu.io/pro/elastic/latest/aws/cf-openvidu-elastic.yaml\n
Architecture overview

This is how the architecture of the deployment looks:

OpenVidu Elastic AWS Architecture

"},{"location":"docs/self-hosting/elastic/aws/install/#cloudformation-parameters","title":"CloudFormation Parameters","text":"

Depending on your needs, you need to fill in the following CloudFormation parameters:

"},{"location":"docs/self-hosting/elastic/aws/install/#domain-and-ssl-certificate-configuration","title":"Domain and SSL Certificate Configuration","text":"

These are the three possible scenarios you may have to configure in this section:

Let's Encrypt Certificate (recommended)Self-Signed CertificateCustom Certificates

For a production-ready setup, this scenario is ideal when you have an FQDN (Fully Qualified Domain Name) and an Elastic IP at your disposal. It leverages the services of Let's Encrypt to automatically generate valid certificates.

First, you need to have the FQDN pointing to the Elastic IP you are going to use.

Then, you need to fill in the following parameters:

As you can see, you need to specify the DomainName with your FQDN, the PublicElasticIP with the Elastic IP that the domain points to, and the LetsEncryptEmail with your email address for Let\u2019s Encrypt notifications. These parameters are mandatory.

This is the most straightforward option for deploying OpenVidu on AWS when you do not have a Fully Qualified Domain Name (FQDN). This method allows for the immediate use of OpenVidu in AWS using CloudFormation.

However, this convenience comes with the caveat that users will need to manually accept the certificate in their web browsers. Please be aware that this configuration is solely for developmental and testing purposes and is not suitable for a production environment.

These are the parameters needed in this section to use self-signed certificates:

You don\u2019t need to specify any parameters; just select the CertificateType as self-signed. The domain name used will be an AWS-generated one.

Opt for this method if you possess your own certificate for an existing FQDN. It enables you to deploy OpenVidu on AWS using your certificates.

You need to have a Fully Qualified Domain Name (FQDN) pointing to a previously created Elastic IP.

Also, you need a temporary HTTP server hosting your private and public certificate under a specific URL. These URLs are needed for the instance to be able to download and install your certificates.

The configured parameters would look like this:

You need to specify at OwnPublicCertificate and OwnPrivateCertificate the URLs where the public and private certificates are hosted, respectively. The DomainName and PublicElasticIP are mandatory parameters.

Certificates need to be in PEM format and the URLs must be accessible from the instance.

"},{"location":"docs/self-hosting/elastic/aws/install/#openvidu-elastic-configuration","title":"OpenVidu Elastic Configuration","text":"

In this section, you need to specify some properties needed for the OpenVidu Elastic deployment.

OpenVidu Elastic Configuration

The parameters in this section might appear as follows:

Make sure to provide the OpenViduLicense parameter with the license key. If you don't have one, you can request one here.

For the RTCEngine parameter, you can choose between Pion (the engine used by LiveKit) and Mediasoup (experimental).

Warning

mediasoup integration in OpenVidu is experimental, and should not be used in production environments. There are some limitations that are currently being worked on, expected to be ironed out in the near future.

"},{"location":"docs/self-hosting/elastic/aws/install/#ec2-instance-configuration","title":"EC2 Instance Configuration","text":"

You need to specify some properties for the EC2 instances that will be created.

EC2 Instance configuration

The parameters in this section may look like this:

Simply select the type of instance you want to deploy at MasterNodeInstanceType and MediaNodeInstanceType, the SSH key you want to use to access the machine at KeyName, and the Amazon Image ID (AMI) to use at AmiId.

By default, the parameter AmiId is configured to use the latest LTS Ubuntu AMI, so ideally you don\u2019t need to modify this.

"},{"location":"docs/self-hosting/elastic/aws/install/#media-nodes-autoscaling-group-configuration","title":"Media Nodes Autoscaling Group Configuration","text":"

The number of Media Nodes can scale up or down based on the system load. You can configure the minimum and maximum number of Media Nodes and a target CPU utilization to trigger the scaling up or down.

Media Nodes Autoscaling Group Configuration

The parameters in this section may look like this:

The InitialNumberOfMediaNodes parameter specifies the initial number of Media Nodes to deploy. The MinNumberOfMediaNodes and MaxNumberOfMediaNodes parameters specify the minimum and maximum number of Media Nodes that you want to be deployed.

The ScaleTargetCPU parameter specifies the target CPU utilization to trigger the scaling up or down. The goal is to keep the CPU utilization of the Media Nodes close to this value. The autoscaling policy is based on Target Tracking Scaling Policy.

"},{"location":"docs/self-hosting/elastic/aws/install/#vpc-configuration","title":"VPC Configuration","text":"

In this section, you need to specify the VPC and Subnet configuration for the deployment.

VPC Configuration

The parameters in this section may look like this:

The OpenViduVPC parameter specifies the VPC where the deployment will be created.

The OpenViduMasterNodeSubnet and OpenViduMediaNodeSubnet parameters specify the subnets where the Master and Media Nodes will be deployed. All of them must be in the previously specified OpenViduVPC.

Warning

You must use public subnets for the Master Nodes and Media Nodes and have enabled the auto-assign public IP option.

"},{"location":"docs/self-hosting/elastic/aws/install/#optional-turn-server-configuration-with-tls","title":"(Optional) TURN server configuration with TLS","text":"

This section is optional. It is useful when your users are behind a restrictive firewall that blocks UDP traffic. This parameter will only works if you are using letsencrypt or owncert as the CertificateType parameter.

TURN server configuration with TLS

The parameters in this section may look like this:

Set the TurnDomainName parameter to the domain name you intend to use for your TURN server. It should be pointing to the PublicElasticIP specified in the previous section.

If you are using letsencrypt as the CertificateType parameter, you can leave the TurnOwnPublicCertificate and TurnOwnPrivateCertificate parameters empty. If you are using owncert, you need to specify the URLs where the public and private certificates are hosted.

"},{"location":"docs/self-hosting/elastic/aws/install/#deploying-the-stack","title":"Deploying the Stack","text":"

When you are ready with your CloudFormation parameters, just click on \"Next\", specify in \"Stack failure options\" the option \"Preserve successfully provisioned resources\" to be able to troubleshoot the deployment in case of error, click on \"Next\" again, and finally \"Submit\".

When everything is ready, you will see the following links in the \"Outputs\" section of CloudFormation:

CloudFormation Outputs

"},{"location":"docs/self-hosting/elastic/aws/install/#configure-your-application-to-use-the-deployment","title":"Configure your Application to use the Deployment","text":"

The Output Key ServicesAndCredentials of the previous section points to an AWS Secret Manager secret that contains all URLs and credentials to access the services deployed. You can access the secret by clicking on the link in the Output Value column.

Then, click on Retrieve secret value to get the JSON with all the information.

To point your applications to your OpenVidu deployment, check the values of the JSON secret. All access credentials of all services are defined in this object.

Your authentication credentials and URL to point your applications would be:

"},{"location":"docs/self-hosting/elastic/aws/install/#troubleshooting-initial-cloudformation-stack-creation","title":"Troubleshooting Initial CloudFormation Stack Creation","text":"

If something goes wrong during the initial CloudFormation stack creation, your stack may reach the CREATE_FAILED status for multiple reasons. It could be due to a misconfiguration in the parameters, a lack of permissions, or a problem with the AWS services. When this happens, the following steps can help you troubleshoot the issue and identify what went wrong:

  1. While deploying the stack, make sure at \"Stack failure options\" you have selected the option \"Preserve successfully provisioned resources\" to be able to troubleshoot the deployment in case of an error.

    Disable Rollback on failure

  2. Check if the EC2 instance or instances are running. If they are not, check the CloudFormation events for any error messages.

  3. If the EC2 instance or instances are running, SSH into the instance and check the logs of the following files:

    These logs will give you more information about the CloudFormation stack creation process.

  4. If everything seems fine, check the status and the logs of the installed OpenVidu services in the Master Node and Media Nodes.

"},{"location":"docs/self-hosting/elastic/aws/install/#configuration-and-administration","title":"Configuration and administration","text":"

When your CloudFormation stack reaches the CREATE_COMPLETE status, your OpenVidu Elastic deployment is ready to use. You can check the Configuration and Administration section to learn how to manage your OpenVidu Elastic deployment.

"},{"location":"docs/self-hosting/elastic/on-premises/admin/","title":"OpenVidu Elastic: On-premises configuration and administration","text":"

The OpenVidu installer offers an easy way to deploy OpenVidu Elastic on-premises. However, once the deployment is complete, you may need to perform administrative tasks based on your specific requirements, such as changing passwords, specifying custom configurations, and starting or stopping services.

This section provides details on configuration parameters and common administrative tasks for on-premises OpenVidu Elastic deployments.

"},{"location":"docs/self-hosting/elastic/on-premises/admin/#openvidu-configuration","title":"OpenVidu configuration","text":""},{"location":"docs/self-hosting/elastic/on-premises/admin/#directory-structure","title":"Directory structure","text":"

OpenVidu Elastic is composed of two types of nodes: Master and Media nodes. The directory structure of OpenVidu Elastic is as follows for each type of node:

Master NodeMedia Node

The OpenVidu Elastic Master Node is installed at /opt/openvidu/ and has a systemd service located at /etc/systemd/system/openvidu.service.

The directory structure of the Master Node is as follows:

|-- /opt/openvidu\n    |-- config/\n    |-- custom-layout/\n    |-- data/\n    |-- deployment-info.yaml\n    |-- docker-compose.override.yml\n    |-- docker-compose.yml\n    |-- .env\n    |-- owncert/\n    `-- recordings/\n

The OpenVidu Elastic Media Node is installed at /opt/openvidu/ and has a systemd service located at /etc/systemd/system/openvidu.service.

The directory structure of the Media Node is as follows:

|-- /opt/openvidu\n    |-- config/\n    |-- data/\n    |-- deployment-info.yaml\n    |-- docker-compose.yml\n    `-- .env\n
"},{"location":"docs/self-hosting/elastic/on-premises/admin/#services-configuration","title":"Services Configuration","text":"

Some services deployed with OpenVidu have their own configuration files located in the /opt/openvidu/config/ directory, while others are configured in the .env file. Below are the services and their respective configuration files and parameters:

Info

The installer provides default configurations that work out of the box. However, you can modify these configurations to suit your specific requirements.

"},{"location":"docs/self-hosting/elastic/on-premises/admin/#configuration-files","title":"Configuration Files","text":"Master NodeMedia Node Service Description Configuration File Location Reference documentation Caddy Server Serves OpenVidu services and handles HTTPS. /opt/openvidu/config/caddy.yaml Caddy JSON Structure Loki Service Used for log aggregation. /opt/openvidu/config/loki.yaml Loki Config Promtail Service Collects logs and sends them to Loki. /opt/openvidu/config/promtail.yaml Promtail Config Mimir Service Service for long-term prometheus storage /opt/openvidu/config/mimir.yaml Mimir Config Grafana Service Used for visualizing monitoring data. /opt/openvidu/config/grafana_config/ Grafana Config Service Description Configuration File Location Reference documentation OpenVidu Server Manages video rooms. It is compatible with LiveKit configuration and includes its own OpenVidu configuration parameters /opt/openvidu/config/livekit.yaml LiveKit Config Ingress Service Imports video from other sources into OpenVidu rooms. /opt/openvidu/config/ingress.yaml LiveKit Ingress Config Egress Service Exports video from OpenVidu rooms for recording or streaming. /opt/openvidu/config/egress.yaml LiveKit Egress Config Prometheus Service Used for monitoring. /opt/openvidu/config/prometheus.yaml Prometheus Config Promtail Service Collects logs and sends them to Loki. /opt/openvidu/config/promtail.yaml Promtail Config"},{"location":"docs/self-hosting/elastic/on-premises/admin/#environment-variables","title":"Environment variables","text":"Master NodeMedia Node Service Description Environment Variables Grafana Service Used for visualizing monitoring data. OpenVidu Dashboard Used to visualize OpenVidu Server Rooms, Ingress, and Egress services. Default App (OpenVidu Call) Default ready-to-use video conferencing app. Redis Service Used as a shared memory database for OpenVidu and Ingress/Egress services. If you need to change the Redis password after the installation, check the advanced configuration section. MinIO Service Used for storing recordings. If you need to change the MinIO access key and secret key after the installation, check the advanced configuration section. MongoDB Service Used for storing analytics and monitoring data. If you need to change the MongoDB username and password after the installation, check the advanced configuration section. OpenVidu v2 compatibility Service Used to enable compatibility with OpenVidu v2. Check the OpenVidu v2 Compatibility Configuration Parameters to see all the available parameters.

Warning

Ensure that MASTER_NODE_PRIVATE_IP and MEDIA_NODE_PRIVATE_IP are static IP addresses. If these IP addresses change after the installation, you must update the .env file and the configuration files in the Media Node.

Service Description Environment Variables OpenVidu Server Manages video rooms. Ingress Service Imports video from other sources into OpenVidu rooms. Egress Service Exports video from OpenVidu rooms for recording or streaming. Prometheus Service Used for monitoring. Promtail Service Collects logs and sends them to Loki. "},{"location":"docs/self-hosting/elastic/on-premises/admin/#openvidu-configuration-parameters","title":"OpenVidu Configuration Parameters","text":"

OpenVidu Server is built on top of LiveKit and offers extra configuration options. You can find the configuration file at /opt/openvidu/config/livekit.yaml. Additional parameters for configuring OpenVidu Server are:

openvidu:\n    license: <YOUR_OPENVIDU_PRO_LICENSE> # (1)\n    cluster_id: <YOUR_DOMAIN_NAME> # (2)\n    analytics: # (3)\n        enabled: true # (4)\n        interval: 10s # (5)\n        expiration: 768h # (6)\n        mongo_url: <MONGO_URL> # (7)\n    rtc:\n        engine: pion # (8)\n    mediasoup:\n        debug: \"\" # (9)\n        log_level: error # (10)\n        log_tags: [info, ice, rtp, rtcp, message] # (11)\n
  1. Specify your OpenVidu Pro license key. If you don't have one, you can request one here.
  2. The cluster ID for the OpenVidu deployment. It is configured by default by OpenVidu Installer with the domain name of the deployment.
  3. The analytics configuration should be defined at the openvidu level in the livekit.yaml file.
  4. This must be set to true to send analytics data to MongoDB. If set to false, no analytics data will be sent.
  5. Time interval to send analytics data to MongoDB.
  6. Time to keep the analytics data in MongoDB. In this example, it is set to 32 days.
  7. MongoDB URL. This is the connection string to the MongoDB database where the analytics data will be stored.
  8. The rtc.engine parameter is set to pion by default. This is the WebRTC engine used by OpenVidu. Depending on your requirements, you can use:
  9. Global toggle to enable debugging logs from MediaSoup. In most debugging cases, using just an asterisk (\"*\") here is enough, but this can be fine-tuned for specific log levels. More info.
  10. Logging level for logs generated by MediaSoup. More info.
  11. Comma-separated list of log tag names, for debugging. More info.
"},{"location":"docs/self-hosting/elastic/on-premises/admin/#openvidu-v2-compatibility-configuration-parameters","title":"OpenVidu v2 Compatibility Configuration Parameters","text":"

If you are using in COMPOSE_PROFILES at the .env file the v2compatibility profile, you will need to set the following parameters in the .env file for the OpenVidu V2 Compatibility service:

Parameter Description Default Value V2COMPAT_OPENVIDU_SECRET OpenVidu secret used to authenticate the OpenVidu V2 Compatibility service. In the .env file, this value is defined with LIVEKIT_API_SECRET. The value of LIVEKIT_API_SECRET in the .env file. V2COMPAT_OPENVIDU_WEBHOOK true to enable OpenVidu Webhook service. false otherwise. Valid values are true or false. false V2COMPAT_OPENVIDU_WEBHOOK_ENDPOINT HTTP(S) endpoint to send OpenVidu V2 Webhook events. Must be a valid URL. Example: V2COMPAT_OPENVIDU_WEBHOOK_ENDPOINT=http://myserver.com/webhook - V2COMPAT_OPENVIDU_WEBHOOK_HEADERS JSON Array list of headers to send in the OpenVidu V2 Webhook events. Example: V2COMPAT_OPENVIDU_WEBHOOK_HEADERS=[\"Content-Type: application/json\"] [] V2COMPAT_OPENVIDU_WEBHOOK_EVENTS Comma-separated list of OpenVidu V2 Webhook events to send. Example: V2COMPAT_OPENVIDU_WEBHOOK_EVENTS=sessionCreated,sessionDestroyed sessionCreated, sessionDestroyed, participantJoined, participantLeft, webrtcConnectionCreated, webrtcConnectionDestroyed, recordingStatusChanged, signalSent (All available events) V2COMPAT_OPENVIDU_PRO_AWS_S3_BUCKET S3 Bucket where to store recording files. openvidu V2COMPAT_OPENVIDU_PRO_AWS_S3_SERVICE_ENDPOINT S3 Endpoint where to store recording files. http://localhost:9100 V2COMPAT_OPENVIDU_PRO_AWS_ACCESS_KEY S3 Access Key of the S3 Bucket where to store recording files. - V2COMPAT_OPENVIDU_PRO_AWS_SECRET_KEY S3 Secret Key of the S3 Bucket where to store recording files. - V2COMPAT_OPENVIDU_PRO_AWS_REGION S3 Region of the S3 Bucket where to store recording files. us-east-1 V2COMPAT_OPENVIDU_RECORDING_PATH OpenVidu Recording directory used to save the OpenVidu recording videos when V2COMPAT_OPENVIDU_PRO_RECORDING_STORAGE is set to true. Change it with the folder you want to use from your host. By default, it is bound in the container to /opt/openvidu/recordings /opt/openvidu/recordings V2COMPAT_OPENVIDU_PRO_RECORDING_STORAGE Where to store recording files. Can be 'local' (local storage) or 's3' (S3 compatible storage). local"},{"location":"docs/self-hosting/elastic/on-premises/admin/#starting-stopping-and-restarting-openvidu","title":"Starting, stopping, and restarting OpenVidu","text":"

For every OpenVidu node, a systemd service is created during the installation process. This service allows you to start, stop, and restart the OpenVidu services easily.

Start OpenVidu

sudo systemctl start openvidu\n

Stop OpenVidu

sudo systemctl stop openvidu\n

Restart OpenVidu

sudo systemctl restart openvidu\n
"},{"location":"docs/self-hosting/elastic/on-premises/admin/#checking-the-status-of-services","title":"Checking the status of services","text":"

You can check the status of the OpenVidu services using the following command:

cd /opt/openvidu/\ndocker compose ps\n

Depending on the node type, you will see different services running.

Master NodeMedia Node

The services are operating correctly if you see an output similar to the following and there are no restarts from any of the services:

NAME                       IMAGE                                              COMMAND                  SERVICE                    CREATED          STATUS\napp                        docker.io/openvidu/openvidu-call                   \"docker-entrypoint.s\u2026\"   app                        12 seconds ago   Up 10 seconds\ncaddy                      docker.io/openvidu/openvidu-pro-caddy              \"/bin/caddy run --co\u2026\"   caddy                      12 seconds ago   Up 10 seconds\ndashboard                  docker.io/openvidu/openvidu-pro-dashboard          \"./openvidu-dashboard\"   dashboard                  12 seconds ago   Up 10 seconds\ngrafana                    docker.io/grafana/grafana                          \"/run.sh\"                grafana                    11 seconds ago   Up 8 seconds\nloki                       docker.io/grafana/loki                             \"/usr/bin/loki -conf\u2026\"   loki                       11 seconds ago   Up 9 seconds\nmimir                      docker.io/grafana/mimir                            \"/bin/mimir -config.\u2026\"   mimir                      11 seconds ago   Up 9 seconds\nminio                      docker.io/bitnami/minio                            \"/opt/bitnami/script\u2026\"   minio                      11 seconds ago   Up 9 seconds\nmongo                      docker.io/mongo                                    \"docker-entrypoint.s\u2026\"   mongo                      11 seconds ago   Up 9 seconds\nopenvidu-v2compatibility   docker.io/openvidu/openvidu-v2compatibility        \"/bin/server\"            openvidu-v2compatibility   12 seconds ago   Up 10 seconds\noperator                   docker.io/openvidu/openvidu-operator               \"/bin/operator\"          operator                   12 seconds ago   Up 10 seconds\npromtail                   docker.io/grafana/promtail                         \"/usr/bin/promtail -\u2026\"   promtail                   11 seconds ago   Up 9 seconds\nredis                      docker.io/redis                                    \"docker-entrypoint.s\u2026\"   redis                      12 seconds ago   Up 10 seconds\n

The services are operating correctly if you see an output similar to the following and there are no restarts from any of the services:

NAME         IMAGE                                          COMMAND                  SERVICE      CREATED          STATUS\negress       docker.io/livekit/egress                       \"/entrypoint.sh\"         egress       53 seconds ago   Up 51 seconds\ningress      docker.io/livekit/ingress                      \"ingress\"                ingress      53 seconds ago   Up 52 seconds\nopenvidu     docker.io/openvidu/openvidu-server-pro         \"/livekit-server --c\u2026\"   openvidu     53 seconds ago   Up 52 seconds\nprometheus   docker.io/prom/prometheus                      \"/bin/prometheus --c\u2026\"   prometheus   53 seconds ago   Up 51 seconds\npromtail     docker.io/grafana/promtail                     \"/usr/bin/promtail -\u2026\"   promtail     53 seconds ago   Up 52 seconds\n
"},{"location":"docs/self-hosting/elastic/on-premises/admin/#checking-logs","title":"Checking logs","text":"

If any of the services are not working as expected, you can check the logs of the services using the following command:

cd /opt/openvidu/\ndocker compose logs <service-name>\n

Replace <service-name> with the name of the service you want to check. For example, to check the logs of the OpenVidu Server, use the following command:

cd /opt/openvidu/\ndocker compose logs openvidu\n

To check the logs of all services, use the following command:

cd /opt/openvidu/\ndocker compose logs\n

You can also review your logs using the Grafana dashboard provided with OpenVidu. To access it, go to https://<your-domain.com>/grafana and use the credentials located in /opt/openvidu/.env to log in. Once inside, navigate to the \"Home\" section, select \"Dashboard\", and then click on:

"},{"location":"docs/self-hosting/elastic/on-premises/admin/#adding-media-nodes","title":"Adding Media Nodes","text":"

To add a new Media Node, simply spin up a new VM and run the OpenVidu installer script to integrate it into the existing cluster. Run the installation command on the new Media Node.

Warning

This installation command should be the same as the one you used to install the first Media Node. Make sure to use the same parameters and values as the first Media Node. In case you've changed the .env file in the Master Node, you will need to update the .env file or update the installation command with the new values.

To automate the configuration of new nodes, check this section.

"},{"location":"docs/self-hosting/elastic/on-premises/admin/#removing-media-nodes-gracefully","title":"Removing Media Nodes Gracefully","text":"

To stop a Media Node gracefully, you need to stop the containers openvidu, ingress, and egress with a SIGINT signal. Here is a simple script that you can use to stop all these containers gracefully:

#!/bin/bash\n# Stop OpenVidu, Ingress, and Egress containers gracefully (1)\ndocker container kill --signal=SIGINT openvidu || true\ndocker container kill --signal=SIGINT ingress || true\ndocker container kill --signal=SIGINT egress || true\n\n# Wait for the containers to stop (2)\nwhile [ $(docker inspect -f '{{.State.Running}}' openvidu 2>/dev/null) == \"true\" ] || \\\n    [ $(docker inspect -f '{{.State.Running}}' ingress 2>/dev/null) == \"true\" ] || \\\n    [ $(docker inspect -f '{{.State.Running}}' egress 2>/dev/null) == \"true\" ]; do\n    echo \"Waiting for containers to stop...\"\n    sleep 5\ndone\n
  1. This script stops the OpenVidu, Ingress, and Egress containers gracefully. The true at the end of each command is to avoid the script from stopping if the container is not running.
  2. This script waits for the containers to stop before exiting.

When all the containers are stopped, you can then stop the systemd service and remove the VM:

sudo systemctl stop openvidu\n
"},{"location":"docs/self-hosting/elastic/on-premises/admin/#removing-media-nodes-forcefully","title":"Removing Media Nodes Forcefully","text":"

To remove a Media Node forcefully, without considering the rooms, ingress, and egress processes running in the node, you can simply stop the OpenVidu service in the Media Node and delete the VM.

sudo systemctl stop openvidu\n
"},{"location":"docs/self-hosting/elastic/on-premises/admin/#advanced-configuration","title":"Advanced Configuration","text":"

This section addresses advanced configuration scenarios for customizing your OpenVidu Elastic deployment. It includes automating the installation with personalized settings, enabling or disabling OpenVidu modules, and modifying global parameters such as the domain name, passwords, and API keys.

"},{"location":"docs/self-hosting/elastic/on-premises/admin/#automatic-installation-and-configuration-of-nodes","title":"Automatic installation and configuration of nodes","text":"

For environments like the cloud, where instances are frequently spun up and down, automating the application of custom configurations to Master Node and Media Nodes may be useful for you.

Master NodeMedia Node

If you need to apply custom configurations to the Master Node, you can use the following script template:

# 1. First install the Master Node (1)\nsh <(curl -fsSL http://get.openvidu.io/pro/elastic/latest/install_ov_master_node.sh) \\\n    --node-role='master-node' \\\n    ... # Add the rest of the arguments (2)\n\n# 2. Add custom configurations (3)\n######### APPLY CUSTOM CONFIGURATIONS #########\n# If you want to apply any modification to the configuration files\n# of the OpenVidu services at /opt/openvidu, you can do it in this section.\n\n# Example 1: Change Minio public port\nyq eval '.apps.http.servers.minio.listen[0] = \":9001\"' \\\n    -i /opt/openvidu/config/caddy.yaml\n\n# Example 2: Disable the /dashboard route in Caddy\nyq eval 'del(.apps.http.servers.public.routes[] | \\\n    select(.handle[]?.handler == \"subroute\" and \\\n    .handle[].routes[].handle[].strip_path_prefix == \"/dashboard\"))' \\\n    -i /opt/openvidu/config/caddy.yaml\n\n######### END CUSTOM CONFIGURATIONS #########\n\n# 3. Start OpenVidu (4)\nsystemctl start openvidu\n
  1. First, install the Master Node using the OpenVidu installer. Check the installation guide for more information.
  2. Add the parameters you need to install the Master Node. You can find all the available parameters in the installation guide.
  3. Add the custom configurations you need to apply to the Master Node services. You can use yq or other tools to modify the configuration files. You can find more information about yq here.
  4. Start the Master Node.

Note

In case you want to deploy a specific version, just replace latest with the desired version. For example: 3.0.0.

Just install the Master Node first with the installer and then run some extra commands to apply the custom configurations. This way, you can automate the process of installing the Master Node and applying custom configurations.

If you need to apply custom configurations to the Media Node, you can use the following script template:

# 1. First install the Media Node (1)\nsh <(curl -fsSL http://get.openvidu.io/pro/elastic/latest/install_ov_media_node.sh) \\\n    --node-role='media-node' \\\n    ... # Add the rest of the arguments (2)\n\n# 2. Add custom configurations (3)\n######### APPLY CUSTOM CONFIGURATIONS #########\n# If you want to apply any modification to the configuration files\n# of the OpenVidu services at /opt/openvidu, you can do it in this section.\n\n# Example 1: Change the public IP address announced by OpenVidu for WebRTC connections\nyq eval '.rtc.node_ip = 1.2.3.4' \\\n    -i /opt/openvidu/config/livekit.yaml\n\n# Example 2: Add a webhook to LiveKit\nyq eval '.webhook.urls += [\"http://new-endpoint.example.com/webhook\"]' \\\n    -i /opt/openvidu/config/livekit.yaml\n\n######### END CUSTOM CONFIGURATIONS #########\n\n# 3. Start OpenVidu (4)\nsystemctl start openvidu\n
  1. First, install the Media Node using the OpenVidu installer. Check the installation guide for more information.
  2. Add the parameters you need to install the Media Node. You can find all the available parameters in the installation guide.
  3. Add the custom configurations you need to apply to the Media Node services. You can use yq or other tools to modify the configuration files. You can find more information about yq here.
  4. Start the Media Node.

Note

In case you want to deploy a specific version, just replace latest with the desired version. For example: 3.0.0.

Just install the Media Node first with the installer and then run some extra commands to apply the custom configurations. This way, you can automate the process of installing the Media Node and applying custom configurations.

"},{"location":"docs/self-hosting/elastic/on-premises/admin/#enabling-and-disabling-openvidu-modules","title":"Enabling and Disabling OpenVidu Modules","text":"

The COMPOSE_PROFILES parameter in the .env file in Master and Media Nodes allows you to enable or disable specific modules in OpenVidu. The following modules can be enabled or disabled:

Observability moduleV2 Compatibility module (Default App)App module

In case you have installed OpenVidu with the observability module, you just need to enable the observability module in the .env file in all nodes.

Otherwise, you can follow these steps to enable the observability module:

  1. Stop the Master Node, all Media Nodes, and backup the deployment

    sudo systemctl stop openvidu\nsudo cp -r /opt/openvidu/ /opt/openvidu_backup/\n

  2. In the Master Node, update the .env with the following changes:

    Add to the COMPOSE_PROFILES the observability module. Also, make sure to set up the GRAFANA_ADMIN_USERNAME and GRAFANA_ADMIN_PASSWORD parameters.

    If you have only the observability module enabled, your .env file should have the following environment variables:

    GRAFANA_ADMIN_USERNAME=\"<GRAFANA_ADMIN_USERNAME>\"\nGRAFANA_ADMIN_PASSWORD=\"<GRAFANA_ADMIN_PASSWORD>\"\n\nCOMPOSE_PROFILES=\"observability\"\n

  3. In the Media Nodes, enable the observability module:

    Add to the COMPOSE_PROFILES the observability module in the .env file. If you have only the observability module enabled, your .env file should have the following environment variable:

    COMPOSE_PROFILES=\"observability\"\n

    Then, add the following parameter in the config/livekit.yaml file:

    prometheus_port: 6789\n

  4. Start all Master Nodes and Media Nodes

    sudo systemctl start openvidu\n

Disabling the observability module

If you have the observability module enabled and you want to disable it, just remove the observability module from the COMPOSE_PROFILES parameter in the .env file of all nodes.

In case you have installed OpenVidu with the app module, you just need to enable the app module in the .env file in all nodes.

Otherwise, you can follow these steps to enable the app module:

  1. Stop the Master Node, all Media Nodes, and backup the deployment

    sudo systemctl stop openvidu\nsudo cp -r /opt/openvidu/ /opt/openvidu_backup/\n

  2. In the Master Node, update the .env with the following changes:

    Add to the COMPOSE_PROFILES the v2compatibility module.

    If you have only the v2compatibility module enabled, your .env file should have the following environment variable:

    COMPOSE_PROFILES=\"v2compatibility\"\n

  3. In the Media Nodes, update the LiveKit configuration to send webhooks to the V2 Compatibility service

    Just add the following parameter in the config/livekit.yaml file:

    webhook:\n    api_key: \"<LIVEKIT_API_KEY>\"\n    urls:\n        - http://master-node:4443/livekit/webhook\n

    Where <LIVEKIT_API_KEY> is the LIVEKIT_API_KEY parameter in the .env file.

  4. Start all Master Nodes and Media Nodes

    sudo systemctl start openvidu\n

Disabling the app module

If you have the app module enabled and you want to disable it, just remove the app module from the COMPOSE_PROFILES parameter in the .env file of all nodes.

In case you have installed OpenVidu without the app module, you just need to enable the app module in the .env file in all nodes.

Otherwise, you can follow these steps to enable the app module:

  1. Stop the Master Node, all Media Nodes, and backup the deployment

    sudo systemctl stop openvidu\nsudo cp -r /opt/openvidu/ /opt/openvidu_backup/\n

  2. In the Master Node, update the .env with the following changes:

    Add to the COMPOSE_PROFILES the app module.

    If you have only the app module enabled, your .env file should have the following environment variable:

    COMPOSE_PROFILES=\"app\"\n

  3. In the Media Nodes, update the LiveKit configuration to send webhooks to the Default App

    Just add the following parameter in the config/livekit.yaml file:

    webhook:\n    api_key: \"<LIVEKIT_API_KEY>\"\n    urls:\n        - http://master-node:6080/api/webhook\n

    Where <LIVEKIT_API_KEY> is the LIVEKIT_API_KEY parameter in the .env file.

  4. Start all Master Nodes and Media Nodes

    sudo systemctl start openvidu\n

Disabling the app module

If you have the app module enabled and you want to disable it, just remove the app module from the COMPOSE_PROFILES parameter in the .env file of all nodes.

"},{"location":"docs/self-hosting/elastic/on-premises/admin/#global-configuration-changes","title":"Global configuration changes","text":"

Some configuration parameters may require modifying multiple configuration files. Below are some examples of advanced configurations and how to apply them:

Info

Usually, this is not needed because the installer takes care of generating all of this parameters. However, it is necessary if any password, credential, or domain change is needed.

Danger

Advanced configurations should be performed with caution. Incorrect configurations can lead to service failures or unexpected behavior.

Before making any changes, make sure to back up your installation by creating a snapshot of your server or by copying the /opt/openvidu/ directory to a safe location. For example:

sudo cp -r /opt/openvidu/ /opt/openvidu_backup/\n
Changing DOMAIN_OR_PUBLIC_IPChanging REDIS_PASSWORDChanging LIVEKIT_API_KEY and LIVEKIT_API_SECRETChanging MINIO_ACCESS_KEY and MINIO_SECRET_KEYChanging MONGO_ADMIN_USERNAME and MONGO_ADMIN_PASSWORD

To change all occurrences of the domain or public IP address in the configuration files, follow these steps:

  1. Stop OpenVidu in the Master Node and all Media Nodes and back up the deployment

    sudo systemctl stop openvidu\nsudo cp -r /opt/openvidu/ /opt/openvidu_backup/\n

  2. Find the current locations of DOMAIN_OR_PUBLIC_IP in your Master Node

    With the following commands, you can find all occurrences of the current domain or public IP address in the configuration files:

    sudo su\ncd /opt/openvidu/\nCURRENT_DOMAIN_OR_PUBLIC_IP=\"$(grep '^DOMAIN_OR_PUBLIC_IP' /opt/openvidu/.env | cut -d '=' -f 2)\"\ngrep --exclude-dir=data -IHnr \"$CURRENT_DOMAIN_OR_PUBLIC_IP\" .\n

    Warning

    Keep the value of CURRENT_DOMAIN_OR_PUBLIC_IP as you will need it to update the configuration files in the Media Nodes.

    Example output

    The output should look similar to the following:

    ./.env:DOMAIN_OR_PUBLIC_IP=<CURRENT_DOMAIN_OR_PUBLIC_IP>\n./config/caddy.yaml:        - certificate: /owncert/<CURRENT_DOMAIN_OR_PUBLIC_IP>.cert\n./config/caddy.yaml:          key: /owncert/<CURRENT_DOMAIN_OR_PUBLIC_IP>.key\n./config/caddy.yaml:            - <CURRENT_DOMAIN_OR_PUBLIC_IP>\n./config/caddy.yaml:                    - <CURRENT_DOMAIN_OR_PUBLIC_IP>\n./config/caddy.yaml:                        - <CURRENT_DOMAIN_OR_PUBLIC_IP>\n./config/caddy.yaml:                    - <CURRENT_DOMAIN_OR_PUBLIC_IP>\n./config/caddy.yaml:                        - <CURRENT_DOMAIN_OR_PUBLIC_IP>\n./config/caddy.yaml:                  - <CURRENT_DOMAIN_OR_PUBLIC_IP>\n./config/promtail.yaml:          cluster_id: <CURRENT_DOMAIN_OR_PUBLIC_IP>\n

    Note

    Don't worry if some values are different in your output. It varies depending on the parameters you've used to install OpenVidu.

  3. Update the Following Files in your Master Node

    Based on the output from the previous step, update the following files with the new domain or public IP address:

  4. Verify the changes in your Master Node

    These commands will list all occurrences of the new DOMAIN_OR_PUBLIC_IP in the configuration files. The output should match the locations found in the initial search but with the new domain or public IP address.

    sudo su\ncd /opt/openvidu/\nNEW_DOMAIN_OR_PUBLIC_IP=\"<NEW_DOMAIN_OR_PUBLIC_IP>\"\ngrep --exclude-dir=data -IHnr \"$NEW_DOMAIN_OR_PUBLIC_IP\" .\n

  5. Find the current locations of CURRENT_DOMAIN_OR_PUBLIC_IP in your Media Nodes

    With the CURRENT_DOMAIN_OR_PUBLIC_IP value obtained in step 2, you can find all occurrences of the current domain or public IP address in the configuration files of the Media Nodes. To do this, connect to each Media Node and run the following command:

    sudo su\ncd /opt/openvidu/\nCURRENT_DOMAIN_OR_PUBLIC_IP=\"<CURRENT_DOMAIN_OR_PUBLIC_IP>\"\ngrep --exclude-dir=data -IHnr \"$CURRENT_DOMAIN_OR_PUBLIC_IP\" .\n
    Example output

    The output should look similar to the following:

    ./config/promtail.yaml:          cluster_id: <CURRENT_DOMAIN_OR_PUBLIC_IP>\n./config/livekit.yaml:    cluster_id: <CURRENT_DOMAIN_OR_PUBLIC_IP>\n./config/livekit.yaml:    rtmp_base_url: rtmps://<CURRENT_DOMAIN_OR_PUBLIC_IP>:1935/rtmp\n./config/livekit.yaml:    whip_base_url: https://<CURRENT_DOMAIN_OR_PUBLIC_IP>/whip\n

  6. Update the Following Files in your Media Nodes

    Based on the output from the previous step, update the following files with the new domain or public IP address:

  7. Verify the changes in your Media Nodes

    These commands will list all occurrences of the new DOMAIN_OR_PUBLIC_IP in the configuration files of the Media Nodes. The output should match the locations found in the initial search but with the new domain or public IP address.

    sudo su\ncd /opt/openvidu/\nNEW_DOMAIN_OR_PUBLIC_IP=\"<NEW_DOMAIN_OR_PUBLIC_IP>\"\ngrep --exclude-dir=data -IHnr \"$NEW_DOMAIN_OR_PUBLIC_IP\" .\n

  8. Ensure to follow from step 5 to 7 for all your Media Nodes

  9. Start all Master Nodes and Media Nodes

    sudo systemctl start openvidu\n

Some notes on changing the DOMAIN_OR_PUBLIC_IP parameter:

To change the REDIS_PASSWORD parameter, follow these steps:

  1. Stop OpenVidu in the Master Node and all Media Nodes and back up the deployment

    sudo systemctl stop openvidu\nsudo cp -r /opt/openvidu/ /opt/openvidu_backup/\n

  2. Replace at the Master Node the REDIS_PASSWORD in the .env file with your new value

    Warning

    Keep the previous value of REDIS_PASSWORD as you will need it to update the configuration files in the Media Nodes. We will refer to this value as <CURRENT_REDIS_PASSWORD>.

  3. Find the current locations of REDIS_PASSWORD in your Media Nodes

    With the CURRENT_REDIS_PASSWORD value obtained in step 2, you can find all occurrences of the current Redis password in the configuration files of the Media Nodes. To do this, connect to each Media Node and run the following command:

    sudo su\ncd /opt/openvidu/\nCURRENT_REDIS_PASSWORD=\"<CURRENT_REDIS_PASSWORD>\"\ngrep --exclude-dir=data -IHnr \"$CURRENT_REDIS_PASSWORD\" .\n
    Example output

    The output should look similar to the following:

    ./config/egress.yaml:    password: <CURRENT_REDIS_PASSWORD>\n./config/ingress.yaml:    password: <CURRENT_REDIS_PASSWORD>\n./config/livekit.yaml:    password: <CURRENT_REDIS_PASSWORD>\n

  4. Update the Following Files in your Media Nodes

    Based on the output from the previous step, update the following files with the new Redis password:

  5. Verify the changes in your Media Nodes

    These commands will list all occurrences of the new REDIS_PASSWORD in the configuration files of the Media Nodes. The output should match the locations found in the initial search but with the new Redis password.

    sudo su\ncd /opt/openvidu/\nNEW_REDIS_PASSWORD=\"<NEW_REDIS_PASSWORD>\"\ngrep --exclude-dir=data -IHnr \"$NEW_REDIS_PASSWORD\" .\n

  6. Ensure to follow from step 3 to 5 for all your Media Nodes

  7. Start all Master Nodes and Media Nodes

    sudo systemctl start openvidu\n

To change the LIVEKIT_API_KEY and LIVEKIT_API_SECRET parameters, follow these steps:

  1. Stop OpenVidu in the Master Node and all Media Nodes and back up the deployment

    sudo systemctl stop openvidu\nsudo cp -r /opt/openvidu/ /opt/openvidu_backup/\n

  2. Replace at the Master Node the LIVEKIT_API_KEY and LIVEKIT_API_SECRET in the .env file with your new values

    Warning

    Keep the previous values of LIVEKIT_API_KEY and LIVEKIT_API_SECRET as you will need them to update the configuration files in the Media Nodes. We will refer to these values as <CURRENT_LIVEKIT_API_KEY> and <CURRENT_LIVEKIT_API_SECRET>.

  3. Find the current locations of LIVEKIT_API_KEY and LIVEKIT_API_SECRET in your Media Nodes

    With the CURRENT_LIVEKIT_API_KEY and CURRENT_LIVEKIT_API_SECRET values obtained in step 2, you can find all occurrences of the current LiveKit API key and secret in the configuration files of the Media Nodes. To do this, connect to each Media Node and run the following command:

    sudo su\ncd /opt/openvidu/\nCURRENT_LIVEKIT_API_KEY=\"<CURRENT_LIVEKIT_API_KEY>\"\nCURRENT_LIVEKIT_API_SECRET=\"<CURRENT_LIVEKIT_API_SECRET>\"\ngrep --exclude-dir=data -IHnr \"$CURRENT_LIVEKIT_API_KEY\" .\ngrep --exclude-dir=data -IHnr \"$CURRENT_LIVEKIT_API_SECRET\" .\n
    Example output

    The output should look similar to the following for LIVEKIT_API_KEY:

    ./config/egress.yaml:api_key: <CURRENT_LIVEKIT_API_KEY>\n./config/ingress.yaml:api_key: <CURRENT_LIVEKIT_API_KEY>\n./config/livekit.yaml:    <CURRENT_LIVEKIT_API_KEY>: <CURRENT_LIVEKIT_API_SECRET>\n./config/livekit.yaml:    api_key: <CURRENT_LIVEKIT_API_KEY>\n

    And for LIVEKIT_API_SECRET:

    ./config/egress.yaml:8:api_secret: <CURRENT_LIVEKIT_API_SECRET>\n./config/ingress.yaml:8:api_secret: <CURRENT_LIVEKIT_API_SECRET>\n./config/livekit.yaml:48:    <CURRENT_LIVEKIT_API_KEY>: <CURRENT_LIVEKIT_API_SECRET>\n

  4. Update the Following Files in your Media Nodes

    Based on the output from the previous step, update the following files with the new values:

  5. Verify the changes in your Media Nodes

    These commands will list all occurrences of the new LIVEKIT_API_KEY and LIVEKIT_API_SECRET in the configuration files of the Media Nodes. The output should match the locations found in the initial search but with the new values.

    sudo su\ncd /opt/openvidu/\nNEW_LIVEKIT_API_KEY=\"<NEW_LIVEKIT_API_KEY>\"\nNEW_LIVEKIT_API_SECRET=\"<NEW_LIVEKIT_API_SECRET>\"\ngrep --exclude-dir=data -IHnr \"$NEW_LIVEKIT_API_KEY\" .\ngrep --exclude-dir=data -IHnr \"$NEW_LIVEKIT_API_SECRET\" .\n

  6. Ensure to follow from step 3 to 5 for all your Media Nodes

  7. Start all Master Nodes and Media Nodes

    sudo systemctl start openvidu\n

To change the MINIO_ACCESS_KEY and MINIO_SECRET_KEY parameters, follow these steps:

  1. Stop OpenVidu in the Master Node and all Media Nodes and back up the deployment

    sudo systemctl stop openvidu\nsudo cp -r /opt/openvidu/ /opt/openvidu_backup/\n

  2. Replace at the Master Node the MINIO_ACCESS_KEY and MINIO_SECRET_KEY in the .env file with your new values

    Take into account that if you are using the v2compatibility module in COMPOSE_PROFILES, you will need to change the V2COMPAT_OPENVIDU_PRO_AWS_ACCESS_KEY and V2COMPAT_OPENVIDU_PRO_AWS_SECRET_KEY parameters in the .env file.

    Warning

    Keep the previous values of MINIO_ACCESS_KEY and MINIO_SECRET_KEY as you will need them to update the configuration files in the Media Nodes. We will refer to these values as <CURRENT_MINIO_ACCESS_KEY> and <CURRENT_MINIO_SECRET_KEY>.

  3. Find the current locations of MINIO_ACCESS_KEY and MINIO_SECRET_KEY in your Media Nodes

    With the CURRENT_MINIO_ACCESS_KEY and CURRENT_MINIO_SECRET_KEY values obtained in step 2, you can find all occurrences of the current MinIO access key and secret in the configuration files of the Media Nodes. To do this, connect to each Media Node and run the following command:

    sudo su\ncd /opt/openvidu/\nCURRENT_MINIO_ACCESS_KEY=\"<CURRENT_MINIO_ACCESS_KEY>\"\nCURRENT_MINIO_SECRET_KEY=\"<CURRENT_MINIO_SECRET_KEY>\"\ngrep --exclude-dir=data -IHnr \"$CURRENT_MINIO_ACCESS_KEY\" .\ngrep --exclude-dir=data -IHnr \"$CURRENT_MINIO_SECRET_KEY\" .\n
    Example output

    The output should look similar to the following for MINIO_ACCESS_KEY:

    ./config/egress.yaml:    access_key: <CURRENT_MINIO_ACCESS_KEY>\n

    And for MINIO_SECRET_KEY:

    ./config/egress.yaml:    secret: <CURRENT_MINIO_SECRET_KEY>\n

  4. Update the Following Files in your Media Nodes

    Based on the output from the previous step, update the following files with the new values:

  5. Verify the changes in your Media Nodes

    These commands will list all occurrences of the new MINIO_ACCESS_KEY and MINIO_SECRET_KEY in the configuration files of the Media Nodes. The output should match the locations found in the initial search but with the new values.

    sudo su\ncd /opt/openvidu/\nNEW_MINIO_ACCESS_KEY=\"<NEW_MINIO_ACCESS_KEY>\"\nNEW_MINIO_SECRET_KEY=\"<NEW_MINIO_SECRET_KEY>\"\ngrep --exclude-dir=data -IHnr \"$NEW_MINIO_ACCESS_KEY\" .\ngrep --exclude-dir=data -IHnr \"$NEW_MINIO_SECRET_KEY\" .\n

  6. Ensure to follow from step 3 to 5 for all your Media Nodes

  7. Start all Master Nodes and Media Nodes

    sudo systemctl start openvidu\n

To change the MONGO_ADMIN_USERNAME and MONGO_ADMIN_PASSWORD parameters, follow these steps:

  1. Stop OpenVidu in the Master Node and all Media Nodes and back up the deployment

    sudo systemctl stop openvidu\nsudo cp -r /opt/openvidu/ /opt/openvidu_backup/\n

  2. Replace at the Master Node the MONGO_ADMIN_USERNAME and MONGO_ADMIN_PASSWORD in the .env file with your new values

    Warning

    Keep the previous values of MONGO_ADMIN_USERNAME and MONGO_ADMIN_PASSWORD as you will need them to update the configuration files in the Media Nodes. We will refer to these values as <CURRENT_MONGO_ADMIN_USERNAME> and <CURRENT_MONGO_ADMIN_PASSWORD>.

  3. Find the current locations of MONGO_ADMIN_USERNAME and MONGO_ADMIN_PASSWORD in your Media Nodes

    With the CURRENT_MONGO_ADMIN_USERNAME and CURRENT_MONGO_ADMIN_PASSWORD values obtained in step 2, you can find all occurrences of the current MongoDB admin username and password in the configuration files of the Media Nodes. To do this, connect to each Media Node and run the following command:

    sudo su\ncd /opt/openvidu/\nCURRENT_MONGO_ADMIN_USERNAME=\"<CURRENT_MONGO_ADMIN_USERNAME>\"\nCURRENT_MONGO_ADMIN_PASSWORD=\"<CURRENT_MONGO_ADMIN_PASSWORD>\"\ngrep --exclude-dir=data -IHnr \"$CURRENT_MONGO_ADMIN_USERNAME\" .\ngrep --exclude-dir=data -IHnr \"$CURRENT_MONGO_ADMIN_PASSWORD\" .\n
    Example output

    The output should look similar to the following for MONGO_ADMIN_USERNAME:

    ./config/livekit.yaml:        mongo_url: mongodb://<CURRENT_MONGO_ADMIN_USERNAME>:<CURRENT_MONGO_ADMIN_PASSWORD>@master-node:20000\n

    And for MONGO_ADMIN_PASSWORD:

    ./config/livekit.yaml:        mongo_url: mongodb://<CURRENT_MONGO_ADMIN_USERNAME>:<CURRENT_MONGO_ADMIN_PASSWORD>@master-node:20000\n

  4. Update the Following Files in your Media Nodes

    Based on the output from the previous step, update the following files with the new values:

  5. Verify the changes in your Media Nodes

    These commands will list all occurrences of the new MONGO_ADMIN_USERNAME and MONGO_ADMIN_PASSWORD in the configuration files of the Media Nodes. The output should match the locations found in the initial search but with the new values.

    sudo su\ncd /opt/openvidu/\nNEW_MONGO_ADMIN_USERNAME=\"<NEW_MONGO_ADMIN_USERNAME>\"\nNEW_MONGO_ADMIN_PASSWORD=\"<NEW_MONGO_ADMIN_PASSWORD>\"\ngrep --exclude-dir=data -IHnr \"$NEW_MONGO_ADMIN_USERNAME\" .\ngrep --exclude-dir=data -IHnr \"$NEW_MONGO_ADMIN_PASSWORD\" .\n

  6. Ensure to follow from step 3 to 5 for all your Media Nodes

  7. Start all Master Nodes and Media Nodes

    sudo systemctl start openvidu\n
"},{"location":"docs/self-hosting/elastic/on-premises/admin/#uninstalling-openvidu","title":"Uninstalling OpenVidu","text":"

To uninstall any OpenVidu Node, just execute the following commands:

sudo su\nsystemctl stop openvidu\nrm -rf /opt/openvidu/\nrm /etc/systemd/system/openvidu.service\n
"},{"location":"docs/self-hosting/elastic/on-premises/install/","title":"OpenVidu Elastic Installation: On-premises","text":"

Info

OpenVidu Elastic is part of OpenVidu PRO. Before deploying, you need to create an OpenVidu account to get your license key. There's a 15-day free trial waiting for you!

This section contains the instructions to deploy a production-ready OpenVidu Elastic deployment on-premises. The deployment requires one Master Node and any number of Media Nodes. Media Nodes are elastic and can be scaled up and down according to the workload.

Architecture overview

This is how the architecture of the deployment looks like:

OpenVidu Elastic On Premises

For the Master Node, the following services are configured:

For the Media Nodes, the following services are configured:

"},{"location":"docs/self-hosting/elastic/on-premises/install/#prerequisites","title":"Prerequisites","text":""},{"location":"docs/self-hosting/elastic/on-premises/install/#port-rules-master-node","title":"Port rules (Master Node)","text":"

Ensure all these rules are configured in your firewall, security group, or any kind of network configuration that you have in your Master Node.

Inbound port rules:

Protocol Ports Source Description TCP 80 0.0.0.0/0, ::/0 Redirect HTTP traffic to HTTPS and Let's Encrypt validation. TCP 443 0.0.0.0/0, ::/0 Allows access to the following: TCP 1935 0.0.0.0/0, ::/0 (Optional), only needed if you want to ingest RTMP streams using Ingress service. TCP 9000 0.0.0.0/0, ::/0 (Optional), only needed if you want to expose MinIO publicly. TCP 4443 Media Nodes (Optional. Only needed when 'OpenVidu v2 Compatibility' module is used) Media Nodes need access to this port to reach OpenVidu V2 compatibility service TCP 6080 Media Nodes (Optional. Only needed when 'Default App' module is used) Media Nodes need access to this port to reach OpenVidu Call (Default Application). TCP 3100 Media Nodes (Optional. Only needed when 'Observability' module is used) Media Nodes need access to this port to reach Loki. TCP 9009 Media Nodes (Optional. Only needed when 'Observability' module is used) Media Nodes need access to this port to reach Mimir. TCP 7000 Media Nodes Media Nodes need access to this port to reach Redis Service. TCP 9100 Media Nodes Media Nodes need access to this port to reach MinIO. TCP 20000 Media Nodes Media Nodes need access to this port to reach MongoDB.

Outbound port rules:

Typically, all outbound traffic is allowed.

"},{"location":"docs/self-hosting/elastic/on-premises/install/#port-rules-media-nodes","title":"Port rules (Media Nodes)","text":"

Ensure all these rules are configured in your firewall, security group, or any kind of network configuration that you have in your Media Nodes:

Inbound port rules:

Protocol Ports Source Description UDP 443 0.0.0.0/0, ::/0 STUN/TURN over UDP. TCP 7881 0.0.0.0/0, ::/0 (Optional). Only needed if you want to allow WebRTC over TCP. UDP 7885 0.0.0.0/0, ::/0 (Optional). Only needed if you want to ingest WebRTC using WHIP. UDP 50000-60000 0.0.0.0/0, ::/0 WebRTC Media traffic. TCP 1935 Master Node (Optional). Only needed if you want to ingest RTMP streams using Ingress service. Master Node needs access to this port to reach Ingress RTMP service and expose it using TLS (RTMPS). TCP 5349 Master Node (Optional). Only needed if you want to expose TURN service with TLS. Master Node needs access to this port to reach TURN service and expose it using TLS (TURNS). TCP 7880 Master Node LiveKit API. Master Node needs access to load balance LiveKit API and expose it through HTTPS. TCP 8080 Master Node (Optional). Only needed if you want to ingest WebRTC streams using WHIP. Master Node needs access to this port to reach WHIP HTTP service."},{"location":"docs/self-hosting/elastic/on-premises/install/#guided-installation","title":"Guided Installation","text":"

Before the installation, ensure that all your machines meet the prerequisites and the port rules for the Master Node and Media Nodes are correctly configured.

To install OpenVidu Elastic, begin by generating the commands required for setting up all nodes in the cluster. This is a simple and straightforward process; simply run the following command on any machine that has Docker installed:

docker run -it openvidu/openvidu-installer:latest \\\n    --deployment-type=elastic\n

Note

In case you want to deploy a specific version, just replace latest with the desired version. For example: 3.0.0.

A wizard will guide you through the installation process. You will be asked for the following information:

Info

If you don't have a license key for OpenVidu PRO, you can get a 15-day free trial license key by creating an OpenVidu account.

The rest of the parameters are secrets, usernames, and passwords. If empty, the wizard will generate random values for them.

This command will output the following instructions, which you should follow:

  1. Firewall Configuration for 'Master Node': These rules are the same as those specified in the instructions. Depending on the modules you have selected, some rules defined at Port rules (Master Node) may not appear (Optional ports). Double-check and modify it if you see something that can be enabled/disabled in your current port rules.

  2. Installation Commands for 'Master Node': This is the command needed to install your Master Node. It should look like this:

    sh <(curl -fsSL http://get.openvidu.io/pro/elastic/latest/install_ov_master_node.sh) \\\n    --no-tty --install \\\n    --deployment-type='elastic' \\\n    --node-role='master-node' \\\n...\n

    Note

    In case you want to deploy a specific version, just replace latest with the desired version. For example: 3.0.0.

    Execute that command in your Master Node to install it. When the installation process finishes, you will see the following output:

    > - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - <\n>                                                                             <\n>  \ud83c\udf89 OpenVidu Elastic 'Master Node' Installation Finished Successfully! \ud83c\udf89   <\n>                                                                             <\n> - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - <\n

    The Master Node will be installed at /opt/openvidu and configured as a systemd service. You can start the service with the following command:

    systemctl start openvidu\n

  3. Firewall Configuration for 'Media Nodes': These rules are the same as those defined previously as with the Master Node. Double-check the Port rules (Media Nodes) and modify them if you see something that can be enabled/disabled in your current port rules.

  4. Installation Commands for 'Media Nodes': This is the command needed to install your Media Nodes. It should look like this:

    sh <(curl -fsSL http://get.openvidu.io/pro/elastic/latest/install_ov_media_node.sh) \\\n    --no-tty --install \\\n    --deployment-type='elastic' \\\n    --node-role='media-node' \\\n...\n

    Note

    In case you want to deploy a specific version, just replace latest with the desired version. For example: 3.0.0.

    Execute that command on your Media Nodes to install them. When the installation process finishes, you will see the following output:

    > - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - <\n>                                                                             <\n>  \ud83c\udf89 OpenVidu Elastic 'Media Node' Installation Finished Successfully! \ud83c\udf89    <\n>                                                                             <\n> - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - <\n

    The Media Node in each machine will be installed at /opt/openvidu and configured as a systemd service. You can start the service with the following command:

    systemctl start openvidu\n

If everything goes well, all containers will be up and running without restarts, and you will be able to access any of the following services:

OpenVidu Server PRO URL (LiveKit compatible) will be available also in:

"},{"location":"docs/self-hosting/elastic/on-premises/install/#configure-your-application-to-use-the-deployment","title":"Configure your Application to use the Deployment","text":"

To point your applications to your OpenVidu deployment, check the file at /opt/openvidu/.env. All access credentials for all services are defined in this file.

Your authentication credentials and URL to point your applications would be:

"},{"location":"docs/self-hosting/elastic/on-premises/install/#non-interactive-installation","title":"Non-interactive installation","text":"

To automate the installation process, you just need to execute the specified command in the Guided Installation section and execute the generated commands.

Each installation command for each type of node looks like this:

Master NodeMedia Node

The Master Node can be configured with multiple kinds of certificates. Here are the examples for each type of certificate:

Let's Encrypt certificatesSelf-signed certificatesCustom certificates

Example using Let's Encrypt certificates:

sh <(curl -fsSL http://get.openvidu.io/pro/elastic/latest/install_ov_master_node.sh) \\\n    --node-role='master-node' \\\n    --openvidu-pro-license='xxxxx' \\\n    --domain-name-or-ip='openvidu.example.io' \\\n    --enabled-modules='observability,v2compatibility,app' \\\n    --turn-domain-name='turn.example.io' \\\n    --livekit-api-key='xxxxx' \\\n    --livekit-api-secret='xxxxx' \\\n    --dashboard-admin-user='xxxxx' \\\n    --dashboard-admin-password='xxxxx' \\\n    --redis-password='xxxxx' \\\n    --minio-access-key='xxxxx' \\\n    --minio-secret-key='xxxxx' \\\n    --mongo-admin-user='xxxxx' \\\n    --mongo-admin-password='xxxxx' \\\n    --grafana-admin-user='xxxxx' \\\n    --grafana-admin-password='xxxxx' \\\n    --default-app-user='xxxxx' \\\n    --default-app-password='xxxxx' \\\n    --default-app-admin-user='xxxxx' \\\n    --default-app-admin-password='xxxxx' \\\n    --private-ip='1.2.3.4' \\\n    --certificate-type='letsencrypt' \\\n    --letsencrypt-email='example@example.io'\n

Note

In case you want to deploy a specific version, just replace latest with the desired version. For example: 3.0.0.

Notes:

Example using self-signed certificates:

sh <(curl -fsSL http://get.openvidu.io/pro/elastic/latest/install_ov_master_node.sh) \\\n    --node-role='master-node' \\\n    --openvidu-pro-license='xxxxx' \\\n    --domain-name-or-ip='openvidu.example.io' \\\n    --enabled-modules='observability,v2compatibility,app' \\\n    --turn-domain-name='turn.example.io' \\\n    --livekit-api-key='xxxxx' \\\n    --livekit-api-secret='xxxxx' \\\n    --dashboard-admin-user='xxxxx' \\\n    --dashboard-admin-password='xxxxx' \\\n    --redis-password='xxxxx' \\\n    --minio-access-key='xxxxx' \\\n    --minio-secret-key='xxxxx' \\\n    --mongo-admin-user='xxxxx' \\\n    --mongo-admin-password='xxxxx' \\\n    --grafana-admin-user='xxxxx' \\\n    --grafana-admin-password='xxxxx' \\\n    --default-app-user='xxxxx' \\\n    --default-app-password='xxxxx' \\\n    --default-app-admin-user='xxxxx' \\\n    --default-app-admin-password='xxxxx' \\\n    --private-ip='1.2.3.4' \\\n    --certificate-type='selfsigned'\n

Note

In case you want to deploy a specific version, just replace latest with the desired version. For example: 3.0.0.

Example using custom certificates:

CERT_PRIVATE_KEY=$(cat privkey.pem | base64 -w 0)\nCERT_PUBLIC_KEY=$(cat fullchain.pem | base64 -w 0)\n\n# Optional, only if you want to enable TURN with TLS\nCERT_TURN_PRIVATE_KEY=$(cat turn-privkey.pem | base64 -w 0)\nCERT_TURN_PUBLIC_KEY=$(cat turn-fullchain.pem | base64 -w 0)\n\nsh <(curl -fsSL http://get.openvidu.io/pro/elastic/latest/install_ov_master_node.sh) \\\n    --node-role='master-node' \\\n    --openvidu-pro-license='xxxxx' \\\n    --domain-name-or-ip='openvidu.example.io' \\\n    --enabled-modules='observability,v2compatibility,app' \\\n    --turn-domain-name='turn.example.io' \\\n    --livekit-api-key='xxxxx' \\\n    --livekit-api-secret='xxxxx' \\\n    --dashboard-admin-user='xxxxx' \\\n    --dashboard-admin-password='xxxxx' \\\n    --redis-password='xxxxx' \\\n    --minio-access-key='xxxxx' \\\n    --minio-secret-key='xxxxx' \\\n    --mongo-admin-user='xxxxx' \\\n    --mongo-admin-password='xxxxx' \\\n    --grafana-admin-user='xxxxx' \\\n    --grafana-admin-password='xxxxx' \\\n    --default-app-user='xxxxx' \\\n    --default-app-password='xxxxx' \\\n    --default-app-admin-user='xxxxx' \\\n    --default-app-admin-password='xxxxx' \\\n    --private-ip='1.2.3.4' \\\n    --certificate-type='owncert' \\\n    --owncert-private-key=\"$CERT_PRIVATE_KEY\" \\\n    --owncert-public-key=\"$CERT_PUBLIC_KEY\" \\\n    --turn-owncert-private-key=\"$CERT_TURN_PRIVATE_KEY\" \\\n    --turn-owncert-public-key=\"$CERT_TURN_PUBLIC_KEY\"\n

Note

In case you want to deploy a specific version, just replace latest with the desired version. For example: 3.0.0.

To install a Media Node, you can use the following command:

sh <(curl -fsSL http://get.openvidu.io/pro/elastic/latest/install_ov_media_node.sh) \\\n    --node-role='media-node' \\\n    --openvidu-pro-license='xxxxx' \\\n    --domain-name-or-ip='openvidu.example.io' \\\n    --rtc-engine='pion' \\\n    --enabled-modules='observability,v2compatibility,app' \\\n    --turn-domain-name='turn.example.io' \\\n    --livekit-api-key='xxxxx' \\\n    --livekit-api-secret='xxxxx' \\\n    --master-node-private-ip='1.2.3.4' \\\n    --redis-password='xxxxx' \\\n    --minio-access-key='xxxxx' \\\n    --minio-secret-key='xxxxx' \\\n    --mongo-admin-user='xxxxx' \\\n    --mongo-admin-password='xxxxx'\n

Note

In case you want to deploy a specific version, just replace latest with the desired version. For example: 3.0.0.

You can run these commands in a CI/CD pipeline or in a script to automate the installation process.

Some notes about all commands:

To start each node, remember to execute the following command in each node:

systemctl start openvidu\n
"},{"location":"docs/self-hosting/elastic/on-premises/install/#configuration-and-administration","title":"Configuration and administration","text":"

Once you have OpenVidu deployed, you can check the Configuration and Administration section to learn how to manage your OpenVidu Elastic deployment.

"},{"location":"docs/self-hosting/ha/","title":"OpenVidu High Availability Installation","text":"

OpenVidu High Availability is part of the PRO edition of OpenVidu. You have the following deployment options:

Once your deployment is complete, refer to the following sections for configuration and management:

"},{"location":"docs/self-hosting/ha/aws/admin/","title":"OpenVidu High Availability: AWS Configuration and Administration","text":"

The deployment of OpenVidu High Availability on AWS is automated using AWS CloudFormation, with Master and Media Nodes managed within an Auto Scaling Group. The Auto Scaling Group of Master Nodes is fixed to 4 instances while the Auto Scaling Group of Media Nodes is configured to scale based on the target average CPU utilization.

Internally, the AWS deployment mirrors the on-premises setup, allowing you to follow the same administration and configuration guidelines provided in the On Premises High Availability documentation. However, there are specific considerations unique to the AWS environment that are worth taking into account.

"},{"location":"docs/self-hosting/ha/aws/admin/#cluster-shutdown-and-startup","title":"Cluster Shutdown and Startup","text":"

You can start and stop the OpenVidu High Availability cluster at any time. The following sections detail the procedures.

Shutdown the ClusterStartup the Cluster

To shut down the cluster, you need to stop the Media Nodes first and then stop the Master Nodes; this way, any ongoing session will not be interrupted.

  1. Navigate to the CloudFormation Dashboard on AWS.
  2. Select the CloudFormation Stack that you used to deploy OpenVidu High Availability.
  3. In the \"Resources\" tab, locate the resource with the logical ID: OpenViduMediaNodeASG, and click on it to go to the Auto Scaling Group Dashboard with the Auto Scaling Group of the Media Nodes selected.
  4. Click on \"Actions > Edit\".
  5. Set the \"Desired capacity\", \"Min desired capacity\", and \"Max desired capacity\" to 0, and click on \"Update\".

  6. Wait until the \"Instance Management\" tab shows that there are no instances in the Auto Scaling Group.

    Warning

    It may happen that some instances are still in the \"Terminating:Wait\" lifecycle state after setting the desired capacity to 0. This is because the Auto Scaling Group waits for the instances to finish processing any ongoing room, ingress, or egress operations before terminating them. This can take a few minutes. If you want to force the termination of the instances, you can manually terminate them from the EC2 Dashboard.

  7. After confirming that all Media Node instances are terminated, go back to the CloudFormation Stack and locate the resource with the logical ID: OpenViduMasterNodeASG. Click on it to go to the Auto Scaling Group Dashboard with the Auto Scaling Group of the Master Nodes selected.

  8. Click on \"Actions > Edit\".
  9. Set the \"Desired capacity\", \"Min desired capacity\", and \"Max desired capacity\" to 0, and click on \"Update\".
  10. Wait until the \"Instance Management\" tab shows that there are no instances in the Auto Scaling Group.

To start the cluster, we recommend starting the Master Node first and then the Media Nodes.

  1. Navigate to the CloudFormation Dashboard on AWS.
  2. Select the CloudFormation Stack that you used to deploy OpenVidu High Availability.
  3. Locate the resource with the logical ID: OpenViduMasterNodeASG. Click on it to go to the Auto Scaling Group Dashboard with the Auto Scaling Group of the Master Nodes selected.
  4. Click on \"Actions > Edit\".
  5. Set the \"Desired capacity\", \"Min desired capacity\", and \"Max desired capacity\" to the desired number of Media Nodes, and click on \"Update\". For the Master Nodes auto scaling group, the number of instances must be 4.
  6. Wait until the \"Instance Management\" tab shows that there are the desired number of instances in the Auto Scaling Group.
  7. Go back to the CloudFormation Stack and locate the resource with the logical ID: OpenViduMediaNodeASG. Click on it to go to the Auto Scaling Group Dashboard with the Auto Scaling Group of the Media Nodes selected.
  8. Click on \"Actions > Edit\".
  9. Set the \"Desired capacity\", \"Min desired capacity\", and \"Max desired capacity\" to the desired number of Media Nodes, and click on \"Update\". In this example, we set the desired capacity to 2.
  10. Wait until the \"Instance Management\" tab shows that there are the desired number of instances in the Auto Scaling Group.
"},{"location":"docs/self-hosting/ha/aws/admin/#change-the-instance-type","title":"Change the instance type","text":"

It is possible to change the instance type of both the Master Node and the Media Nodes. The following section details the procedures.

Master NodesMedia Nodes

Warning

This procedure requires downtime, as it involves stopping all the Master Nodes and starting them again with the new instance type.

  1. Go to the CloudFormation Dashboard on AWS.
  2. Select the CloudFormation Stack that you used to deploy OpenVidu High Availability.
  3. Locate the resource with the logical ID: OpenViduMasterLaunchTemplate. Click on it to go to the Launch Template Dashboard with the Launch Template of the Master Nodes selected.
  4. Click on \"Actions > Modify template (Create new version)\".
  5. In the \"Instance type\" section, select the new instance type and click on \"Create template version\".
  6. Go to the CloudFormation Stack and locate the resource with the logical ID: OpenViduMasterNodeASG. Click on it to go to the Auto Scaling Group Dashboard with the Auto Scaling Group of the Master Nodes selected.
  7. Click on \"Actions > Edit\".

  8. In the Launch Template section, select the new version of the launch template we just created at step 5 which is the highest version number.

    Then, click on \"Update\".

    Info

    By configuring \"Latest\" as the launch template version, you no longer need to update the Auto Scaling Group every time you modify the launch template. The Auto Scaling Group will automatically use the latest version of the launch template.

  9. Terminate the old instances manually from the EC2 Dashboard if you want to force the termination of the instances. New instances will be launched with the new instance type.

    Info

    The information at /opt/openvidu is persisted as AWS Elastic Block Store (EBS) volumes. When you terminate an instance, the EBS volume is detached and preserved. When the Auto Scaling Group launches a new instance, the EC2 instance is attached to the EBS volume, and the data is retained. This means that the data stored in the /opt/openvidu directory is not lost when you terminate an instance.

  1. Go to the CloudFormation Dashboard on AWS.
  2. Select the CloudFormation Stack that you used to deploy OpenVidu High Availability.
  3. Locate the resource with the logical ID: OpenViduMediaNodeLaunchTemplate. Click on it to go to the Launch Template Dashboard with the Launch Template of the Media Nodes selected.
  4. Click on \"Actions > Modify template (Create new version)\".
  5. In the \"Instance type\" section, select the new instance type and click on \"Create template version\".
  6. Go to the CloudFormation Stack and locate the resource with the logical ID: OpenViduMediaNodeASG. Click on it to go to the Auto Scaling Group Dashboard with the Auto Scaling Group of the Media Nodes selected.
  7. Click on \"Actions > Edit\".

  8. In the Launch Template section, select the new version of the launch template we just created at step 5 which is the highest version number.

    Then, click on \"Update\".

    Info

    By configuring \"Latest\" as the launch template version, you no longer need to update the Auto Scaling Group every time you modify the launch template. The Auto Scaling Group will automatically use the latest version of the launch template.

  9. Terminate the old instances manually from the EC2 Dashboard if you want to force the termination of the instances. New instances will be launched with the new instance type.

    Info

    If you want to avoid downtime, you can wait until the Auto Scaling Group replaces the old instances with the new ones. But you will need to increase the desired capacity to force the replacement of the instances and then decrease it to the desired number of instances.

"},{"location":"docs/self-hosting/ha/aws/admin/#media-nodes-autoscaling-configuration","title":"Media Nodes Autoscaling Configuration","text":"

To configure the Auto Scaling settings for the Media Nodes, follow the steps outlined below. This configuration allows you to set the parameters that control how the Auto Scaling Group will scale based on the target average CPU utilization.

Media Nodes Autoscaling Configuration
  1. Navigate to the CloudFormation Dashboard on AWS.
  2. Select the CloudFormation Stack that you used to deploy OpenVidu High Availability.
  3. In the \"Resources\" tab, locate the resource with the logical ID: OpenViduMediaNodeASG and click on it to go to the Auto Scaling Group Dashboard.
  4. Click on \"Actions > Edit\".
  5. To configure scaling policies, navigate to the \"Automatic scaling\" tab within the Auto Scaling Group Dashboard, select the unique \"Target tracking scaling\" autoscaling policy, and click on \"Actions > Edit\".

  6. It will open a panel where you can configure multiple parameters. In this example, we set the target average CPU utilization to 30%. Then, click on \"Update\".

    Info

    OpenVidu High Availability is by default configured with a \"Target tracking scaling\" policy that scales based on the target average CPU utilization, however, you can configure different autoscaling policies according to your needs. For more information on the various types of autoscaling policies and how to implement them, refer to the AWS Auto Scaling documentation.

"},{"location":"docs/self-hosting/ha/aws/admin/#fixed-number-of-media-nodes","title":"Fixed Number of Media Nodes","text":"

If you need to maintain a fixed number of Media Nodes instead of allowing the Auto Scaling Group to dynamically adjust based on CPU utilization, you can configure the desired capacity settings accordingly. Follow the steps below to set a fixed number of Media Nodes:

Set Fixed Number of Media Nodes
  1. Navigate to the CloudFormation Dashboard on AWS.
  2. Select the CloudFormation Stack that you used to deploy OpenVidu High Availability.
  3. In the \"Resources\" tab, locate the resource with the logical ID: OpenViduMediaNodeASG and click on it to go to the Auto Scaling Group Dashboard.
  4. Click on \"Actions > Edit\".
  5. Set the \"Desired capacity\", \"Min desired capacity\", and \"Max desired capacity\" to the fixed number of Media Nodes you require, and click on \"Update\". In this example, we set the desired capacity to 2.
  6. Wait until the \"Instance Management\" tab shows that the Auto Scaling Group has the fixed number of instances running.
"},{"location":"docs/self-hosting/ha/aws/admin/#configuration-management","title":"Configuration Management","text":"

This section explains how to manage and update the configuration settings for your OpenVidu High Availability deployment. It is divided into three parts:

  1. Configuring CloudFormation YAML for Node Services Configuration: Details how to pre-configure settings in the CloudFormation template to avoid manual interventions post-deployment.
  2. Global Configuration: Covers parameters that affect the entire cluster when the CloudFormation stack is already deployed.
  3. Node Services Configuration: Focuses on settings specific to Master and Media Nodes services when the CloudFormation stack is already deployed.
"},{"location":"docs/self-hosting/ha/aws/admin/#configuring-cloudformation-yaml-for-node-services-configuration","title":"Configuring CloudFormation YAML for Node Services Configuration","text":"

To avoid manual intervention after deployment, you can pre-configure the node services configuration directly in the CloudFormation YAML template. This ensures that the necessary configurations are applied automatically upon deployment.

Master NodeMedia Nodes
  1. Get the CloudFormation YAML template used to deploy OpenVidu High Availability on AWS.

  2. Locate the section defining the Launch Template for the Master Node and update the UserData property with the required configuration parameters. The section looks like this:

    OpenViduMasterLaunchTemplate:\n    Type: AWS::EC2::LaunchTemplate\n    Properties:\n        LaunchTemplateData:\n            UserData:\n                Fn::Base64: !Sub |\n                    #!/bin/bash\n                    ...\n                    ...\n                    # Install OpenVidu\n                    /usr/local/bin/install.sh || { /usr/local/bin/set-as-unhealthy.sh; exit 1; }\n\n                    ######### APPLY CUSTOM CONFIGURATIONS #########\n                    # If you want to apply any modification to the configuration files\n                    # of the OpenVidu services at /opt/openvidu, you can do it here.\n                    # Examples:\n                    #\n                    # - Change minio public port\n                    # yq eval '.apps.http.servers.minio.listen[0] = \":9001\"' -i /opt/openvidu/caddy.yaml\n                    #\n                    # - Disable dashboard access\n                    # yq eval 'del(.apps.http.servers.public.routes[] | \\\n                    #  select(.handle[]?.handler == \"subroute\" and \\\n                    #  .handle[].routes[].handle[].strip_path_prefix == \"/dashboard\"))' \\\n                    #  -i /opt/openvidu/caddy.yaml\n\n\n\n                    ######### END CUSTOM CONFIGURATIONS #########\n\n                    # Start OpenVidu\n                    systemctl start openvidu || { /usr/local/bin/set-as-unhealthy.sh; exit 1; }\n                    ...\n                    ...\n

    The area between APPLY CUSTOM CONFIGURATIONS and END CUSTOM CONFIGURATIONS is where you can add your custom configuration commands. You can use yq to modify the configuration files of the OpenVidu services. The example shows how to change the minio public port and how to disable dashboard access in the caddy.yaml configuration file.

  3. Save the YAML file and use it to deploy your CloudFormation stack. This will apply the Master Node configuration automatically during the deployment process.

  1. Get the CloudFormation YAML template used to deploy OpenVidu High Availability on AWS.

  2. Locate the section defining the Launch Template for the Media Nodes and update the UserData property with the required configuration parameters. The section looks like this:

    OpenViduMediaNodeLaunchTemplate:\n    Type: \"AWS::EC2::LaunchTemplate\"\n    Properties:\n        LaunchTemplateData:\n            UserData:\n                Fn::Base64: !Sub |\n                    #!/bin/bash\n                    ...\n                    ...\n                    # Install OpenVidu\n                    /usr/local/bin/install.sh || { echo \"[OpenVidu] error installing OpenVidu\"; /usr/local/bin/set_as_unhealthy.sh; exit 1; }\n\n                    ######### APPLY CUSTOM CONFIGURATIONS #########\n                    # If you want to apply any modification to the configuration files\n                    # of the OpenVidu services at /opt/openvidu, you can do it in this section.\n                    # Examples:\n                    #\n                    # - Announce specific IP address for the media node\n                    # yq eval '.rtc.node_ip = 1.2.3.4' -i /opt/openvidu/livekit.yaml\n                    #\n                    # - Add webhooks to livekit\n                    # yq eval '.webhook.urls += [\"http://new-endpoint.example.com/webhook\"]' -i /opt/openvidu/livekit.yaml\n\n\n\n                    ######### END CUSTOM CONFIGURATIONS #########\n\n                    # Start OpenVidu\n                    systemctl start openvidu || { echo \"[OpenVidu] error starting OpenVidu\"; /usr/local/bin/set_as_unhealthy.sh; exit 1; }\n

    The area between APPLY CUSTOM CONFIGURATIONS and END CUSTOM CONFIGURATIONS is where you can add your custom configuration commands. You can use yq to modify the configuration files of the OpenVidu services. The example shows how to change the rtc.node_ip parameter and how to add a webhook to the livekit.yaml configuration file.

  3. Save the YAML file and use it to deploy your CloudFormation stack. This will apply the node services configuration automatically during the deployment process.

By pre-configuring the CloudFormation template, you streamline the deployment process and reduce the need for post-deployment manual configuration.

"},{"location":"docs/self-hosting/ha/aws/admin/#global-configuration","title":"Global Configuration","text":"

The global configuration parameters for the OpenVidu High Availability deployment are stored in a secret resource deployed by the CloudFormation stack. These parameters can affect the configuration of all the nodes in the cluster. To update any of these parameters, follow the steps below:

Update Global Configuration Parameters
  1. Navigate to the CloudFormation Dashboard on AWS.
  2. Select the CloudFormation Stack that you used to deploy OpenVidu High Availability.
  3. In the \"Resources\" tab, locate the resource with the logical ID: OpenViduSharedInfo and click on it to view the secret in AWS Secrets Manager.
  4. Click on \"Retrieve secret value\" to view the parameters.
  5. Edit the desired parameters within the secret. For example, you can change the RTC_ENGINE parameter to pion or mediasoup depending on the WebRTC engine you want to use. Just click on \"Edit\", modify the value, and click on \"Save\".
  6. To apply the changes, stop the cluster and then start it again following the procedures outlined in the Cluster Shutdown and Startup section.
"},{"location":"docs/self-hosting/ha/aws/admin/#node-services-configuration","title":"Node Services Configuration","text":"

The node services configuration parameters for the OpenVidu High Availability deployment are stored in the configuration files of the services running on the Master and Media Nodes. These parameters can affect the configuration of the individual nodes in the cluster. To update any of these configuration files, follow the steps below:

Master NodeMedia Node

Master Node configurations require changes to be made in the Launch Template \"User Data\" section. To update the configuration:

  1. Navigate to the CloudFormation Dashboard on AWS.
  2. Select the CloudFormation Stack that you used to deploy OpenVidu High Availability.
  3. Locate the resource with the logical ID: OpenViduMasterLaunchTemplate. Click on it to go to the Launch Template Dashboard with the Launch Template of the Master Node selected.
  4. Click on \"Actions > Modify template (Create new version)\".
  5. Go to the \"Advanced details\" section and modify the \"User data\" field with the new configuration. You can modify the configuration parameters of the services running on the Master Node following the same script structure as the one used in the Automatic installation and configuration of nodes, for the Master Node. When you finish, click on \"Create template version\".
  6. Go to the CloudFormation Stack and locate the resource with the logical ID: OpenViduMasterNodeASG. Click on it to go to the EC2 Dashboard with the Master Node instance selected.
  7. Click on \"Actions > Edit\".

  8. In the Launch Template section, select the new version of the launch template we just created at step 5 which is the highest version number. Then, click on \"Update\".

    Info

    By configuring \"Latest\" as the launch template version, you no longer need to update the Auto Scaling Group every time you modify the launch template. The Auto Scaling Group will automatically use the latest version of the launch template.

  9. Terminate the old instances manually from the EC2 Dashboard. New instances will be launched with the new configuration.

    Warning

    This process requires downtime, as it involves terminating the old instances and launching new ones with the updated configuration.

Media Node configurations require changes to be made in the Launch Template \"User Data\" section. To update the configuration:

  1. Navigate to the CloudFormation Dashboard on AWS.
  2. Select the CloudFormation Stack that you used to deploy OpenVidu High Availability.
  3. Locate the resource with the logical ID: OpenViduMediaNodeLaunchTemplate. Click on it to go to the Launch Template Dashboard with the Launch Template of the Media Nodes selected.
  4. Click on \"Actions > Modify template (Create new version)\".
  5. Go to the \"Advanced details\" section and modify the \"User data\" field with the new configuration. You can modify the configuration parameters of the services running on the Media Nodes following the same script structure as the one used in the Automatic installation and configuration of nodes, for the Media Nodes. When you finish, click on \"Create template version\".
  6. Go to the CloudFormation Stack and locate the resource with the logical ID: OpenViduMediaNodeASG. Click on it to go to the Auto Scaling Group Dashboard with the Auto Scaling Group of the Media Nodes selected.
  7. Click on \"Actions > Edit\".

  8. In the Launch Template section, select the new version of the launch template we just created at step 5 which is the highest version number. Then, click on \"Update\".

    Info

    By configuring \"Latest\" as the launch template version, you no longer need to update the Auto Scaling Group every time you modify the launch template. The Auto Scaling Group will automatically use the latest version of the launch template.

  9. Terminate the old instances manually from the EC2 Dashboard if you want to force the termination of the instances. New instances will be launched with the new configuration.

    Warning

    This process requires downtime, as it involves terminating the old instances and launching new ones with the updated configuration.

"},{"location":"docs/self-hosting/ha/aws/install/","title":"OpenVidu High Availability Installation: AWS","text":"

Info

OpenVidu High Availability is part of OpenVidu PRO. Before deploying, you need to create an OpenVidu account to get your license key. There's a 15-day free trial waiting for you!

This section contains the instructions to deploy a production-ready OpenVidu High Availability deployment in AWS. Deployed services are the same as the On Premises High Availability Installation but automate the process with AWS CloudFormation.

First of all, import the template in the AWS CloudFormation console. You can click the following button...

Deploy OpenVidu High Availability in

...or access your AWS CloudFormation console and manually set this S3 URL in the Specify template section:

https://s3.eu-west-1.amazonaws.com/get.openvidu.io/pro/ha/latest/aws/cf-openvidu-ha.yaml\n

This is how the architecture of the deployment looks like.

Architecture overviewArchitecture overview with TURN over TLS

OpenVidu High Availability AWS Architecture

OpenVidu High Availability AWS Architecture with TURN over TLS

"},{"location":"docs/self-hosting/ha/aws/install/#cloudformation-parameters","title":"CloudFormation Parameters","text":"

Depending on your needs, you need to fill the following CloudFormation parameters:

"},{"location":"docs/self-hosting/ha/aws/install/#domain-and-load-balancer-configuration","title":"Domain and Load Balancer configuration","text":"

In this section, you need to specify the domain name and the SSL certificate to use from AWS Certificate Manager.

Domain and Load Balancer configuration

The parameters in this section might look like this:

Set the DomainName parameter to the domain name you intend to use for your OpenVidu deployment. Ensure this domain is not currently pointing to any other service; you can temporarily point it elsewhere.

For the OpenViduCertificateARN parameter, specify the ARN of the SSL certificate you wish to use. This certificate should be created in the AWS Certificate Manager and configured for the domain specified in DomainName.

"},{"location":"docs/self-hosting/ha/aws/install/#openvidu-ha-configuration","title":"OpenVidu HA Configuration","text":"

In this section, you need to specify some properties needed for the OpenVidu HA deployment.

OpenVidu Elastic Configuration

The parameters in this section might appear as follows:

Make sure to provide the OpenViduLicense parameter with the license key. If you don't have one, you can request one here.

For the RTCEngine parameter, you can choose between Pion (the engine used by LiveKit) and Mediasoup (experimental).

Warning

mediasoup integration in OpenVidu is experimental, and should not be used in production environments. There are some limitations that are currently being worked on, expected to be ironed out in the near future.

"},{"location":"docs/self-hosting/ha/aws/install/#ec2-instance-configuration","title":"EC2 Instance Configuration","text":"

You need to specify some properties for the EC2 instances that will be created.

EC2 Instance configuration

The parameters in this section may look like this:

Simply select the type of instance you want to deploy at MasterNodeInstanceType and MediaNodeInstanceType, the SSH key you want to use to access the machine at KeyName, and the Amazon Image ID (AMI) to use at AmiId.

By default, the parameter AmiId is configured to use the latest Amazon Linux AMI, so ideally you don\u2019t need to modify this.

"},{"location":"docs/self-hosting/ha/aws/install/#media-nodes-autoscaling-group-configuration","title":"Media Nodes Autoscaling Group Configuration","text":"

The number of Media Nodes can scale up or down based on the system load. You can configure the minimum and maximum number of Media Nodes and a target CPU utilization to trigger the scaling up or down.

Media Nodes Autoscaling Group Configuration

The parameters in this section may look like this:

The InitialNumberOfMediaNodes parameter specifies the initial number of Media Nodes to deploy. The MinNumberOfMediaNodes and MaxNumberOfMediaNodes parameters specify the minimum and maximum number of Media Nodes that you want to be deployed.

The ScaleTargetCPU parameter specifies the target CPU utilization to trigger the scaling up or down. The goal is to keep the CPU utilization of the Media Nodes close to this value. The autoscaling policy is based on Target Tracking Scaling Policy.

"},{"location":"docs/self-hosting/ha/aws/install/#vpc-configuration","title":"VPC Configuration","text":"

In this section, you need to specify the VPC and Subnet configuration for the deployment.

VPC Configuration

The parameters in this section may look like this:

The OpenViduVPC parameter specifies the VPC where the deployment will be created.

The OpenViduMasterNodeSubnets specifies the subnets where the Master Nodes will be deployed. You can specify a maximum of 4 subnets.

The OpenViduMediaNodeSubnets specifies the subnets where the Media Nodes will be deployed. There is no limit on the number of subnets you can specify.

Warning

"},{"location":"docs/self-hosting/ha/aws/install/#optional-turn-server-configuration-with-tls","title":"(Optional) TURN server configuration with TLS","text":"

This section is optional. It is useful when your users are behind a restrictive firewall that blocks UDP traffic.

TURN server configuration with TLS

The parameters in this section may look like this:

Set the TurnDomainName parameter to the domain name you intend to use for your TURN server. Ensure this domain is not currently pointing to any other service; you can temporarily point it elsewhere.

For the TurnCertificateARN parameter, specify the ARN of the SSL certificate you wish to use. This certificate should be created in the AWS Certificate Manager and configured for the domain specified in TurnDomainName.

"},{"location":"docs/self-hosting/ha/aws/install/#volumes-configuration","title":"Volumes Configuration","text":"

In this section, you need to specify the configuration for the EBS volumes that will be created for the Master Nodes. Master Nodes will host all the recordings and metrics data replicated across all of them. The disk size of the EBS volumes is the same for all Master Nodes.

Volumes Configuration

The parameters in this section may look like this:

The RetainVolumes parameter specifies whether the EBS volumes should be retained when the stack is deleted. If you set this parameter to true, the EBS volumes will not be deleted when the stack is deleted. This is useful if you want to keep the recordings and metrics data after deleting the stack. If you set this parameter to false, the EBS volumes will be deleted when the stack is deleted. In any case, it is recommended to create a snapshot backup policy.

The DiskSize parameter specifies the size of the EBS volumes in GB.

"},{"location":"docs/self-hosting/ha/aws/install/#deploying-the-stack","title":"Deploying the Stack","text":"

When you are ready with your CloudFormation parameters, just click on \"Next\", specify in \"Stack failure options\" the option \"Preserve successfully provisioned resources\" to be able to troubleshoot the deployment in case of error, click on \"Next\" again, and finally \"Submit\".

When everything is ready, you will see the following links in the \"Outputs\" section of CloudFormation:

CloudFormation Outputs

"},{"location":"docs/self-hosting/ha/aws/install/#configure-your-application-to-use-the-deployment","title":"Configure your Application to use the Deployment","text":"

The Output Key ServicesAndCredentials of the previous section points to an AWS Secret Manager secret that contains all URLs and credentials to access the services deployed. You can access the secret by clicking on the link in the Output Value column.

Then, click on Retrieve secret value to get the JSON with all the information.

To point your applications to your OpenVidu deployment, check the values of the JSON secret. All access credentials of all services are defined in this object.

Your authentication credentials and URL to point your applications would be:

"},{"location":"docs/self-hosting/ha/aws/install/#troubleshooting-initial-cloudformation-stack-creation","title":"Troubleshooting Initial CloudFormation Stack Creation","text":"

If something goes wrong during the initial CloudFormation stack creation, your stack may reach the CREATE_FAILED status for multiple reasons. It could be due to a misconfiguration in the parameters, a lack of permissions, or a problem with the AWS services. When this happens, the following steps can help you troubleshoot the issue and identify what went wrong:

  1. While deploying the stack, make sure at \"Stack failure options\" you have selected the option \"Preserve successfully provisioned resources\" to be able to troubleshoot the deployment in case of an error.

    Disable Rollback on failure

  2. Check if the EC2 instance or instances are running. If they are not, check the CloudFormation events for any error messages.

  3. If the EC2 instance or instances are running, SSH into the instance and check the logs of the following files:

    These logs will give you more information about the CloudFormation stack creation process.

  4. If everything seems fine, check the status and the logs of the installed OpenVidu services in all the Master Nodes and Media Nodes.

"},{"location":"docs/self-hosting/ha/aws/install/#configuration-and-administration","title":"Configuration and administration","text":"

When your CloudFormation stack reaches the CREATE_COMPLETE status, your OpenVidu High Availability deployment is ready to use. You can check the Configuration and Administration section to learn how to manage your deployment.

"},{"location":"docs/self-hosting/ha/on-premises/admin/","title":"OpenVidu High Availability: On-premises configuration and administration","text":"

The OpenVidu installer offers an easy way to deploy OpenVidu High Availability on-premises. However, once the deployment is complete, you may need to perform administrative tasks based on your specific requirements, such as changing passwords, specifying custom configurations, and starting or stopping services.

This section provides details on configuration parameters and common administrative tasks for on-premises OpenVidu High Availability deployments.

"},{"location":"docs/self-hosting/ha/on-premises/admin/#openvidu-configuration","title":"OpenVidu configuration","text":""},{"location":"docs/self-hosting/ha/on-premises/admin/#directory-structure","title":"Directory structure","text":"

OpenVidu High Availability is composed of two types of nodes, Master Nodes and Media Nodes. The directory structure is as follows for each type of node:

Master NodesMedia Node

In each Master Node, the services are installed at /opt/openvidu/ and have a systemd service located at /etc/systemd/system/openvidu.service.

The directory structure of each Master Node is as follows:

|-- /opt/openvidu\n    |-- config/\n    |-- data/\n    |-- deployment-info.yaml\n    |-- docker-compose.override.yml\n    |-- docker-compose.yml\n    |-- .env\n    `-- owncert/\n

In each Media Node, the services are installed at /opt/openvidu/ and have a systemd service located at /etc/systemd/system/openvidu.service.

The directory structure of the Media Node is as follows:

|-- /opt/openvidu\n    |-- config/\n    |-- data/\n    |-- deployment-info.yaml\n    |-- docker-compose.yml\n    `-- .env\n
"},{"location":"docs/self-hosting/ha/on-premises/admin/#services-configuration","title":"Services Configuration","text":"

Some services deployed with OpenVidu have their own configuration files located in the /opt/openvidu/config/ directory, while others are configured in the .env file. Below are the services and their respective configuration files and parameters:

Info

The installer provides default configurations that work out of the box. However, you can modify these configurations to suit your specific requirements.

"},{"location":"docs/self-hosting/ha/on-premises/admin/#configuration-files","title":"Configuration Files","text":"Master NodeMedia Node Service Description Configuration File Location Reference documentation Caddy Server Serves OpenVidu services and handles HTTPS. /opt/openvidu/config/caddy.yaml Caddy JSON Structure Loki Service Used for log aggregation. /opt/openvidu/config/loki.yaml Loki Config Promtail Service Collects logs and sends them to Loki. /opt/openvidu/config/promtail.yaml Promtail Config Mimir Service Service for long-term prometheus storage /opt/openvidu/config/mimir.yaml Mimir Config Grafana Service Used for visualizing monitoring data. /opt/openvidu/config/grafana_config/ Grafana Config Service Description Configuration File Location Reference documentation OpenVidu Server Manages video rooms. It is compatible with LiveKit configuration and includes its own OpenVidu configuration parameters /opt/openvidu/config/livekit.yaml LiveKit Config Ingress Service Imports video from other sources into OpenVidu rooms. /opt/openvidu/config/ingress.yaml LiveKit Ingress Config Egress Service Exports video from OpenVidu rooms for recording or streaming. /opt/openvidu/config/egress.yaml LiveKit Egress Config Prometheus Service Used for monitoring. /opt/openvidu/config/prometheus.yaml Prometheus Config Promtail Service Collects logs and sends them to Loki. /opt/openvidu/config/promtail.yaml Promtail Config Caddy Service Allows Media Nodes to reach Master Node services in a balanced and high-available way. /opt/openvidu/config/caddy.yaml Caddy JSON Structure"},{"location":"docs/self-hosting/ha/on-premises/admin/#environment-variables","title":"Environment variables","text":"Master NodeMedia Node

Warning

Service Description Environment Variables Grafana Service Used for visualizing monitoring data. OpenVidu Dashboard Used to visualize OpenVidu Server Rooms, Ingress, and Egress services. Default App (OpenVidu Call) Default ready-to-use video conferencing app. Redis Service Used as a shared memory database for OpenVidu and Ingress/Egress services. If you need to change the Redis password after the installation, check the advanced configuration section. MinIO Service Used for storing recordings. If you need to change the MinIO access key and secret key after the installation, check the advanced configuration section. MongoDB Service Used for storing analytics and monitoring data. If you need to change the MongoDB username and password after the installation, check the advanced configuration section. OpenVidu v2 compatibility Service Used to enable compatibility with OpenVidu v2. Check the OpenVidu v2 Compatibility Configuration Parameters to see all the available parameters.

Warning

Service Description Environment Variables OpenVidu Server Manages video rooms. Ingress Service Imports video from other sources into OpenVidu rooms. Egress Service Exports video from OpenVidu rooms for recording or streaming. Prometheus Service Used for monitoring. Promtail Service Collects logs and sends them to Loki. "},{"location":"docs/self-hosting/ha/on-premises/admin/#openvidu-configuration-parameters","title":"OpenVidu Configuration Parameters","text":"

OpenVidu Server is built on top of LiveKit and offers extra configuration options. You can find the configuration file at /opt/openvidu/config/livekit.yaml. Additional parameters for configuring OpenVidu Server are:

openvidu:\n    license: <YOUR_OPENVIDU_PRO_LICENSE> # (1)\n    cluster_id: <YOUR_DOMAIN_NAME> # (2)\n    analytics: # (3)\n        enabled: true # (4)\n        interval: 10s # (5)\n        expiration: 768h # (6)\n        mongo_url: <MONGO_URL> # (7)\n    rtc:\n        engine: pion # (8)\n    mediasoup:\n        debug: \"\" # (9)\n        log_level: error # (10)\n        log_tags: [info, ice, rtp, rtcp, message] # (11)\n
  1. Specify your OpenVidu Pro license key. If you don't have one, you can request one here.
  2. The cluster ID for the OpenVidu deployment. It is configured by default by OpenVidu Installer with the domain name of the deployment.
  3. The analytics configuration should be defined at the openvidu level in the livekit.yaml file.
  4. This must be set to true to send analytics data to MongoDB. If set to false, no analytics data will be sent.
  5. Time interval to send analytics data to MongoDB.
  6. Time to keep the analytics data in MongoDB. In this example, it is set to 32 days.
  7. MongoDB URL. This is the connection string to the MongoDB database where the analytics data will be stored.
  8. The rtc.engine parameter is set to pion by default. This is the WebRTC engine used by OpenVidu. Depending on your requirements, you can use:
  9. Global toggle to enable debugging logs from MediaSoup. In most debugging cases, using just an asterisk (\"*\") here is enough, but this can be fine-tuned for specific log levels. More info.
  10. Logging level for logs generated by MediaSoup. More info.
  11. Comma-separated list of log tag names, for debugging. More info.
"},{"location":"docs/self-hosting/ha/on-premises/admin/#openvidu-v2-compatibility-configuration-parameters","title":"OpenVidu v2 Compatibility Configuration Parameters","text":"

If you are using in COMPOSE_PROFILES at the .env file the v2compatibility profile, you will need to set the following parameters in the .env file for the OpenVidu V2 Compatibility service:

Parameter Description Default Value V2COMPAT_OPENVIDU_SECRET OpenVidu secret used to authenticate the OpenVidu V2 Compatibility service. In the .env file, this value is defined with LIVEKIT_API_SECRET. The value of LIVEKIT_API_SECRET in the .env file. V2COMPAT_OPENVIDU_WEBHOOK true to enable OpenVidu Webhook service. false otherwise. Valid values are true or false. false V2COMPAT_OPENVIDU_WEBHOOK_ENDPOINT HTTP(S) endpoint to send OpenVidu V2 Webhook events. Must be a valid URL. Example: V2COMPAT_OPENVIDU_WEBHOOK_ENDPOINT=http://myserver.com/webhook - V2COMPAT_OPENVIDU_WEBHOOK_HEADERS JSON Array list of headers to send in the OpenVidu V2 Webhook events. Example: V2COMPAT_OPENVIDU_WEBHOOK_HEADERS=[\"Content-Type: application/json\"] [] V2COMPAT_OPENVIDU_WEBHOOK_EVENTS Comma-separated list of OpenVidu V2 Webhook events to send. Example: V2COMPAT_OPENVIDU_WEBHOOK_EVENTS=sessionCreated,sessionDestroyed sessionCreated, sessionDestroyed, participantJoined, participantLeft, webrtcConnectionCreated, webrtcConnectionDestroyed, recordingStatusChanged, signalSent (All available events) V2COMPAT_OPENVIDU_PRO_AWS_S3_BUCKET S3 Bucket where to store recording files. openvidu V2COMPAT_OPENVIDU_PRO_AWS_S3_SERVICE_ENDPOINT S3 Endpoint where to store recording files. http://localhost:9100 V2COMPAT_OPENVIDU_PRO_AWS_ACCESS_KEY S3 Access Key of the S3 Bucket where to store recording files. - V2COMPAT_OPENVIDU_PRO_AWS_SECRET_KEY S3 Secret Key of the S3 Bucket where to store recording files. - V2COMPAT_OPENVIDU_PRO_AWS_REGION S3 Region of the S3 Bucket where to store recording files. us-east-1"},{"location":"docs/self-hosting/ha/on-premises/admin/#starting-stopping-and-restarting-openvidu","title":"Starting, stopping, and restarting OpenVidu","text":"

For every OpenVidu node, a systemd service is created during the installation process. This service allows you to start, stop, and restart the OpenVidu services easily.

Start OpenVidu

sudo systemctl start openvidu\n

Stop OpenVidu

sudo systemctl stop openvidu\n

Restart OpenVidu

sudo systemctl restart openvidu\n
"},{"location":"docs/self-hosting/ha/on-premises/admin/#checking-the-status-of-services","title":"Checking the status of services","text":"

You can check the status of the OpenVidu services using the following command:

cd /opt/openvidu/\ndocker compose ps\n

Depending on the node type, you will see different services running.

Master NodeMedia Node

The services are operating correctly if you see an output similar to the following and there are no restarts from any of the services:

NAME                       IMAGE                                              COMMAND                  SERVICE                    CREATED          STATUS\napp                        docker.io/openvidu/openvidu-call                   \"docker-entrypoint.s\u2026\"   app                        12 seconds ago   Up 10 seconds\ncaddy                      docker.io/openvidu/openvidu-pro-caddy              \"/bin/caddy run --co\u2026\"   caddy                      12 seconds ago   Up 10 seconds\ndashboard                  docker.io/openvidu/openvidu-pro-dashboard          \"./openvidu-dashboard\"   dashboard                  12 seconds ago   Up 10 seconds\ngrafana                    docker.io/grafana/grafana                          \"/run.sh\"                grafana                    11 seconds ago   Up 8 seconds\nloki                       docker.io/grafana/loki                             \"/usr/bin/loki -conf\u2026\"   loki                       11 seconds ago   Up 9 seconds\nmimir                      docker.io/grafana/mimir                            \"/bin/mimir -config.\u2026\"   mimir                      11 seconds ago   Up 9 seconds\nminio                      docker.io/bitnami/minio                            \"/opt/bitnami/script\u2026\"   minio                      11 seconds ago   Up 9 seconds\nmongo                      docker.io/mongo                                    \"docker-entrypoint.s\u2026\"   mongo                      11 seconds ago   Up 9 seconds\nopenvidu-v2compatibility   docker.io/openvidu/openvidu-v2compatibility        \"/bin/server\"            openvidu-v2compatibility   12 seconds ago   Up 10 seconds\noperator                   docker.io/openvidu/openvidu-operator               \"/bin/operator\"          operator                   12 seconds ago   Up 10 seconds\npromtail                   docker.io/grafana/promtail                         \"/usr/bin/promtail -\u2026\"   promtail                   11 seconds ago   Up 9 seconds\nredis-sentinel             docker.io/redis                                    \"docker-entrypoint.s\u2026\"   redis-sentinel             10 seconds ago   Up 10 seconds\nredis-server               docker.io/redis                                    \"docker-entrypoint.s\u2026\"   redis-server               10 seconds ago   Up 10 seconds\n

The services are operating correctly if you see an output similar to the following and there are no restarts from any of the services:

NAME         IMAGE                                          COMMAND                  SERVICE      CREATED          STATUS\ncaddy        docker.io/openvidu/openvidu-caddy:main         \"/bin/caddy run --co\u2026\"   caddy        53 seconds ago   Up 53 seconds\negress       docker.io/livekit/egress                       \"/entrypoint.sh\"         egress       53 seconds ago   Up 51 seconds\ningress      docker.io/livekit/ingress                      \"ingress\"                ingress      53 seconds ago   Up 52 seconds\nopenvidu     docker.io/openvidu/openvidu-server-pro         \"/livekit-server --c\u2026\"   openvidu     53 seconds ago   Up 52 seconds\nprometheus   docker.io/prom/prometheus                      \"/bin/prometheus --c\u2026\"   prometheus   53 seconds ago   Up 51 seconds\npromtail     docker.io/grafana/promtail                     \"/usr/bin/promtail -\u2026\"   promtail     53 seconds ago   Up 52 seconds\n
"},{"location":"docs/self-hosting/ha/on-premises/admin/#checking-logs","title":"Checking logs","text":"

If any of the services are not working as expected, you can check the logs of the services using the following command:

cd /opt/openvidu/\ndocker compose logs <service-name>\n

Replace <service-name> with the name of the service you want to check. For example, to check the logs of the OpenVidu Server, use the following command:

cd /opt/openvidu/\ndocker compose logs openvidu\n

To check the logs of all services, use the following command:

cd /opt/openvidu/\ndocker compose logs\n

You can also review your logs using the Grafana dashboard provided with OpenVidu. To access it, go to https://<your-domain.com>/grafana and use the credentials located in /opt/openvidu/.env to log in. Once inside, navigate to the \"Home\" section, select \"Dashboard\", and then click on:

"},{"location":"docs/self-hosting/ha/on-premises/admin/#adding-and-removing-media-nodes","title":"Adding and Removing Media Nodes","text":"

Adding and removing Media Nodes is straightforward. You can add new Media Nodes to the cluster to increase the capacity of your OpenVidu deployment. Similarly, you can remove Media Nodes to reduce the capacity of your deployment.

"},{"location":"docs/self-hosting/ha/on-premises/admin/#adding-media-nodes","title":"Adding Media Nodes","text":"

To add a new Media Node, simply spin up a new VM and run the OpenVidu installer script to integrate it into the existing cluster. Run the installation command on the new Media Node.

Warning

This installation command should be the same as the one you used to install the first Media Node. Make sure to use the same parameters and values as the first Media Node. In case you've changed the .env file in the Master Nodes, you will need to update the .env file or update the installation command with the new values.

To automate the configuration of new nodes, check this section.

"},{"location":"docs/self-hosting/ha/on-premises/admin/#removing-media-nodes-gracefully","title":"Removing Media Nodes Gracefully","text":"

To stop a Media Node gracefully, you need to stop the containers openvidu, ingress, and egress with a SIGINT signal. Here is a simple script that you can use to stop all these containers gracefully:

#!/bin/bash\n# Stop OpenVidu, Ingress, and Egress containers gracefully (1)\ndocker container kill --signal=SIGINT openvidu || true\ndocker container kill --signal=SIGINT ingress || true\ndocker container kill --signal=SIGINT egress || true\n\n# Wait for the containers to stop (2)\nwhile [ $(docker inspect -f '{{.State.Running}}' openvidu 2>/dev/null) == \"true\" ] || \\\n    [ $(docker inspect -f '{{.State.Running}}' ingress 2>/dev/null) == \"true\" ] || \\\n    [ $(docker inspect -f '{{.State.Running}}' egress 2>/dev/null) == \"true\" ]; do\n    echo \"Waiting for containers to stop...\"\n    sleep 5\ndone\n
  1. This script stops the OpenVidu, Ingress, and Egress containers gracefully. The true at the end of each command is to avoid the script from stopping if the container is not running.
  2. This script waits for the containers to stop before exiting.

When all the containers are stopped, you can then stop the systemd service and remove the VM:

sudo systemctl stop openvidu\n
"},{"location":"docs/self-hosting/ha/on-premises/admin/#removing-media-nodes-forcefully","title":"Removing Media Nodes Forcefully","text":"

To remove a Media Node forcefully, without considering the rooms, ingress, and egress processes running in the node, you can simply stop the OpenVidu service in the Media Node and delete the VM.

sudo systemctl stop openvidu\n
"},{"location":"docs/self-hosting/ha/on-premises/admin/#advanced-configuration","title":"Advanced Configuration","text":"

This section addresses advanced configuration scenarios for customizing your OpenVidu High Availability deployment. It includes automating the installation with personalized settings, enabling or disabling OpenVidu modules, and modifying global parameters such as the domain name, passwords, and API keys.

"},{"location":"docs/self-hosting/ha/on-premises/admin/#automatic-installation-and-configuration-of-nodes","title":"Automatic installation and configuration of nodes","text":"

For environments like the cloud, where instances are frequently spun up and down, automating the application of custom configurations to Master Nodes and Media Nodes may be useful for you.

Master NodeMedia Node

If you need to apply custom configurations to your Master Nodes, you can use the following script template:

# 1. First install the Master Node (1)\nsh <(curl -fsSL http://get.openvidu.io/pro/ha/latest/install_ov_master_node.sh) \\\n    --node-role='master-node' \\\n    ... # Add the rest of the arguments (2)\n\n# 2. Add custom configurations (3)\n######### APPLY CUSTOM CONFIGURATIONS #########\n# If you want to apply any modification to the configuration files\n# of the OpenVidu services at /opt/openvidu, you can do it here.\n\n# Example 1: Change Minio public port\nyq eval '.apps.http.servers.minio.listen[0] = \":9001\"' -i /opt/openvidu/config/caddy.yaml\n\n# Example 2: Disable the /dashboard route in Caddy\nyq eval 'del(.apps.http.servers.public.routes[] | \\\n  select(.handle[]?.handler == \"subroute\" and \\\n  .handle[].routes[].handle[].strip_path_prefix == \"/dashboard\"))' \\\n  -i /opt/openvidu/config/caddy.yaml\n\n######### END CUSTOM CONFIGURATIONS #########\n\n# 3. Start OpenVidu (4)\nsystemctl start openvidu\n
  1. First, install the Master Node using the OpenVidu installer. Check the installation guide for more information.
  2. Add the parameters you need to install the Master Node. You can find all the available parameters in the installation guide.
  3. Add the custom configurations you need to apply to the Master Node services. You can use yq or other tools to modify the configuration files. You can find more information about yq here.
  4. Start the Master Node.

Note

In case you want to deploy a specific version, just replace latest with the desired version. For example: 3.0.0.

Just install the Master Node first with the installer and then run some extra commands to apply the custom configurations. This way, you can automate the process of installing the Master Node and applying custom configurations.

If you need to apply custom configurations to the Media Node, you can use the following script template:

# 1. First install the Media Node (1)\nsh <(curl -fsSL http://get.openvidu.io/pro/ha/latest/install_ov_media_node.sh) \\\n    --node-role='media-node' \\\n    ... # Add the rest of the arguments (2)\n\n# 2. Add custom configurations (3)\n######### APPLY CUSTOM CONFIGURATIONS #########\n# If you want to apply any modification to the configuration files\n# of the OpenVidu services at /opt/openvidu, you can do it in this section.\n\n# Example 1: Change public IP address announced by OpenVidu for WebRTC connections\nyq eval '.rtc.node_ip = 1.2.3.4' \\\n    -i /opt/openvidu/config/livekit.yaml\n\n# Example 2: Add a webhook to LiveKit\nyq eval '.webhook.urls += [\"http://new-endpoint.example.com/webhook\"]' \\\n    -i /opt/openvidu/config/livekit.yaml\n\n######### END CUSTOM CONFIGURATIONS #########\n\n# 3. Start OpenVidu (4)\nsystemctl start openvidu\n
  1. First, install the Media Node using the OpenVidu installer. Check the installation guide for more information.
  2. Add the parameters you need to install the Media Node. You can find all the available parameters in the installation guide.
  3. Add the custom configurations you need to apply to the Media Node services. You can use yq or other tools to modify the configuration files. You can find more information about yq here.
  4. Start the Media Node.

Note

In case you want to deploy a specific version, just replace latest with the desired version. For example: 3.0.0.

Just install the Media Node first with the installer and then run some extra commands to apply the custom configurations. This way, you can automate the process of installing the Media Node and applying custom configurations.

"},{"location":"docs/self-hosting/ha/on-premises/admin/#enabling-and-disabling-openvidu-modules","title":"Enabling and Disabling OpenVidu Modules","text":"

The COMPOSE_PROFILES parameter in the .env file in Master and Media Nodes allows you to enable or disable specific modules in OpenVidu. The following modules can be enabled or disabled:

Observability moduleV2 Compatibility moduleApp module (Default App)

In case you have installed OpenVidu with the observability module, you just need to enable the observability module in the .env file in all nodes.

Otherwise, you can follow these steps to enable the observability module:

  1. Stop all Master Nodes and all Media Nodes, and backup the deployment

    sudo systemctl stop openvidu\nsudo cp -r /opt/openvidu/ /opt/openvidu_backup/\n

  2. In the Master Nodes, update the .env with the following changes:

    Add to the COMPOSE_PROFILES the observability module. Also, make sure to set up the GRAFANA_ADMIN_USERNAME and GRAFANA_ADMIN_PASSWORD parameters.

    If you have only the observability module enabled, your .env file should have the following environment variables:

    GRAFANA_ADMIN_USERNAME=\"<GRAFANA_ADMIN_USERNAME>\"\nGRAFANA_ADMIN_PASSWORD=\"<GRAFANA_ADMIN_PASSWORD>\"\n\nCOMPOSE_PROFILES=\"observability\"\n

  3. In the Media Nodes, enable the observability module:

    Add to the COMPOSE_PROFILES the observability module in the .env file. If you have only the observability module enabled, your .env file should have the following environment variable:

    COMPOSE_PROFILES=\"observability\"\n

    Then, add the following parameter in the config/livekit.yaml file:

    prometheus_port: 6789\n

  4. Start all Master Nodes and Media Nodes

    sudo systemctl start openvidu\n

Disabling the observability module

If you have the observability module enabled, and you want to disable it, just remove the observability module from the COMPOSE_PROFILES parameter in the .env file of all nodes.

In case you have installed OpenVidu with the v2compatibility module, you just need to enable the v2compatibility module in the .env file in all nodes.

Otherwise, you can follow these steps to enable the v2compatibility module:

  1. Stop all Master Nodes, all Media Nodes, and backup the deployment

    sudo systemctl stop openvidu\nsudo cp -r /opt/openvidu/ /opt/openvidu_backup/\n

  2. In the Master Nodes, update the .env with the following changes:

    Add to the COMPOSE_PROFILES the v2compatibility module.

    If you have only the v2compatibility module enabled, your .env file should have the following environment variable:

    COMPOSE_PROFILES=\"v2compatibility\"\n

  3. In the Media Nodes, update the LiveKit configuration to send webhooks to the V2 Compatibility service

    Just add the following parameter in the config/livekit.yaml file:

    webhook:\n    api_key: \"<LIVEKIT_API_KEY>\"\n    urls:\n        - http://localhost:4443/livekit/webhook\n

    Where <LIVEKIT_API_KEY> is the LIVEKIT_API_KEY parameter in the .env file.

    Note that the URL is http://localhost:4443 because an internal caddy proxy will balance the requests to all the V2 Compatibility services running in the Master Nodes.

  4. Start all Master Nodes and Media Nodes

    sudo systemctl start openvidu\n

Disabling the v2compatibility module

If you have the v2compatibility module enabled, and you want to disable it, just remove the v2compatibility module from the COMPOSE_PROFILES parameter in the .env file of all nodes.

In case you have installed OpenVidu without the app module, you just need to enable the app module in the .env file in all nodes.

Otherwise, you can follow these steps to enable the app module:

  1. Stop all Master Nodes, all Media Nodes, and backup the deployment

    sudo systemctl stop openvidu\nsudo cp -r /opt/openvidu/ /opt/openvidu_backup/\n

  2. In all Master Nodes, update the .env with the following changes:

    Add to the COMPOSE_PROFILES the app module.

    If you have only the app module enabled, your .env file should have the following environment variable:

    COMPOSE_PROFILES=\"app\"\n

  3. In the Media Nodes, update the LiveKit configuration to send webhooks to the Default App

    Just add the following parameter in the config/livekit.yaml file:

    webhook:\n    api_key: \"<LIVEKIT_API_KEY>\"\n    urls:\n        - http://localhost:6080/api/webhook\n

    Where <LIVEKIT_API_KEY> is the LIVEKIT_API_KEY parameter in the .env file.

    Note that the URL is http://localhost:6080 because an internal caddy proxy will balance the requests to all the Default App services running in the Master Nodes.

  4. Start all Master Nodes and Media Nodes

    sudo systemctl start openvidu\n

Disabling the app module

If you have the app module enabled, and you want to disable it, just remove the app module from the COMPOSE_PROFILES parameter in the .env file of all nodes.

"},{"location":"docs/self-hosting/ha/on-premises/admin/#global-configuration-changes","title":"Global configuration changes","text":"

Some configuration parameters may require modifying multiple configuration files. Below are some examples of advanced configurations and how to apply them:

Info

Usually, this is not needed because the installer takes care of generating all of this parameters. However, it is necessary if any password, credential, or domain change is needed.

Danger

Advanced configurations should be performed with caution. Incorrect configurations can lead to service failures or unexpected behavior.

Before making any changes, make sure to back up your installation by creating a snapshot of your server or by copying the /opt/openvidu/ directory to a safe location. For example:

sudo cp -r /opt/openvidu/ /opt/openvidu_backup/\n
Changing DOMAIN_OR_PUBLIC_IPChanging REDIS_PASSWORDChanging LIVEKIT_API_KEY and LIVEKIT_API_SECRETChanging MINIO_ACCESS_KEY and MINIO_SECRET_KEYChanging MONGO_ADMIN_USERNAME and MONGO_ADMIN_PASSWORD

To change all occurrences of the domain or public IP address in the configuration files, follow these steps:

  1. Stop OpenVidu in all Master Nodes and all Media Nodes and backup the deployment

    sudo systemctl stop openvidu\nsudo cp -r /opt/openvidu/ /opt/openvidu_backup/\n

  2. Find the current locations of DOMAIN_OR_PUBLIC_IP in your Master Nodes

    With the following commands, you can find all occurrences of the current domain or public IP address in the configuration files:

    sudo su\ncd /opt/openvidu/\nCURRENT_DOMAIN_OR_PUBLIC_IP=\"$(grep '^DOMAIN_OR_PUBLIC_IP' /opt/openvidu/.env | cut -d '=' -f 2)\"\ngrep --exclude-dir=data -IHnr \"$CURRENT_DOMAIN_OR_PUBLIC_IP\" .\n

    Warning

    Keep the value of CURRENT_DOMAIN_OR_PUBLIC_IP as you will need it to update the configuration files in the Media Nodes.

    Example output

    The output should look similar to the following:

    ./.env:DOMAIN_OR_PUBLIC_IP=<CURRENT_DOMAIN_OR_PUBLIC_IP>\n./config/caddy.yaml:        - certificate: /owncert/<CURRENT_DOMAIN_OR_PUBLIC_IP>.cert\n./config/caddy.yaml:          key: /owncert/<CURRENT_DOMAIN_OR_PUBLIC_IP>.key\n./config/caddy.yaml:            - <CURRENT_DOMAIN_OR_PUBLIC_IP>\n./config/caddy.yaml:                    - <CURRENT_DOMAIN_OR_PUBLIC_IP>\n./config/caddy.yaml:                        - <CURRENT_DOMAIN_OR_PUBLIC_IP>\n./config/caddy.yaml:                    - <CURRENT_DOMAIN_OR_PUBLIC_IP>\n./config/caddy.yaml:                        - <CURRENT_DOMAIN_OR_PUBLIC_IP>\n./config/caddy.yaml:                  - <CURRENT_DOMAIN_OR_PUBLIC_IP>\n./config/promtail.yaml:          cluster_id: <CURRENT_DOMAIN_OR_PUBLIC_IP>\n

    Note

    Don't worry if some values are different in your output. It varies depending on the parameters you've used to install OpenVidu.

  3. Update the Following Files in all your Master Nodes

    Based on the output from the previous step, update the following files with the new domain or public IP address:

  4. Verify the changes in all your Master Nodes

    These commands will list all occurrences of the new DOMAIN_OR_PUBLIC_IP in the configuration files. The output should match the locations found in the initial search but with the new domain or public IP address.

    sudo su\ncd /opt/openvidu/\nNEW_DOMAIN_OR_PUBLIC_IP=\"<NEW_DOMAIN_OR_PUBLIC_IP>\"\ngrep --exclude-dir=data -IHnr \"$NEW_DOMAIN_OR_PUBLIC_IP\" .\n

  5. Ensure to follow from step 2 to 4 for all your Master Nodes

  6. Find the current locations of CURRENT_DOMAIN_OR_PUBLIC_IP in your Media Nodes

    With the CURRENT_DOMAIN_OR_PUBLIC_IP value obtained in step 2, you can find all occurrences of the current domain or public IP address in the configuration files of the Media Nodes. To do this, connect to each Media Node and run the following command:

    sudo su\ncd /opt/openvidu/\nCURRENT_DOMAIN_OR_PUBLIC_IP=\"<CURRENT_DOMAIN_OR_PUBLIC_IP>\"\ngrep --exclude-dir=data -IHnr \"$CURRENT_DOMAIN_OR_PUBLIC_IP\" .\n
    Example output

    The output should look similar to the following:

    ./config/promtail.yaml:          cluster_id: <CURRENT_DOMAIN_OR_PUBLIC_IP>\n./config/livekit.yaml:    cluster_id: <CURRENT_DOMAIN_OR_PUBLIC_IP>\n./config/livekit.yaml:    rtmp_base_url: rtmps://<CURRENT_DOMAIN_OR_PUBLIC_IP>:1935/rtmp\n./config/livekit.yaml:    whip_base_url: https://<CURRENT_DOMAIN_OR_PUBLIC_IP>/whip\n

  7. Update the Following Files in your Media Nodes

    Based on the output from the previous step, update the following files with the new domain or public IP address:

  8. Verify the changes in your Media Nodes

    These commands will list all occurrences of the new DOMAIN_OR_PUBLIC_IP in the configuration files of the Media Nodes. The output should match the locations found in the initial search but with the new domain or public IP address.

    sudo su\ncd /opt/openvidu/\nNEW_DOMAIN_OR_PUBLIC_IP=\"<NEW_DOMAIN_OR_PUBLIC_IP>\"\ngrep --exclude-dir=data -IHnr \"$NEW_DOMAIN_OR_PUBLIC_IP\" .\n

  9. Ensure to follow from step 5 to 7 for all your Media Nodes

  10. Start all Master Nodes and Media Nodes

    sudo systemctl start openvidu\n

Some notes on changing the DOMAIN_OR_PUBLIC_IP parameter:

To change the REDIS_PASSWORD parameter, follow these steps:

  1. Stop OpenVidu in all the Master Nodes and all Media Nodes and backup the deployment

    sudo systemctl stop openvidu\nsudo cp -r /opt/openvidu/ /opt/openvidu_backup/\n

  2. Replace in all Master Nodes the REDIS_PASSWORD in the .env file with your new value

    Warning

    Keep the previous value of REDIS_PASSWORD as you will need it to update the configuration files in the Media Nodes. We will refer to this value as <CURRENT_REDIS_PASSWORD>.

  3. Ensure to replace the REDIS_PASSWORD in the .env file of all your Master Nodes

  4. Find the current locations of REDIS_PASSWORD in your Media Nodes

    With the CURRENT_REDIS_PASSWORD value obtained in step 2, you can find all occurrences of the current Redis password in the configuration files of the Media Nodes. To do this, connect to each Media Node and run the following command:

    sudo su\ncd /opt/openvidu/\nCURRENT_REDIS_PASSWORD=\"<CURRENT_REDIS_PASSWORD>\"\ngrep --exclude-dir=data -IHnr \"$CURRENT_REDIS_PASSWORD\" .\n
    Example output

    The output should look similar to the following:

    ./config/egress.yaml:    password: <CURRENT_REDIS_PASSWORD>\n./config/ingress.yaml:    password: <CURRENT_REDIS_PASSWORD>\n./config/livekit.yaml:    password: <CURRENT_REDIS_PASSWORD>\n

  5. Update the Following Files in your Media Nodes

    Based on the output from the previous step, update the following files with the new Redis password:

  6. Verify the changes in your Media Nodes

    These commands will list all occurrences of the new REDIS_PASSWORD in the configuration files of the Media Nodes. The output should match the locations found in the initial search but with the new Redis password.

    sudo su\ncd /opt/openvidu/\nNEW_REDIS_PASSWORD=\"<NEW_REDIS_PASSWORD>\"\ngrep --exclude-dir=data -IHnr \"$NEW_REDIS_PASSWORD\" .\n

  7. Ensure to follow from step 3 to 5 for all your Media Nodes

  8. Start all Master Nodes and Media Nodes

    sudo systemctl start openvidu\n

To change the LIVEKIT_API_KEY and LIVEKIT_API_SECRET parameters, follow these steps:

  1. Stop OpenVidu in all Master Nodes and all Media Nodes and backup the deployment

    sudo systemctl stop openvidu\nsudo cp -r /opt/openvidu/ /opt/openvidu_backup/\n

  2. Replace at the Master Nodes the LIVEKIT_API_KEY and LIVEKIT_API_SECRET in the .env file with your new values

    Warning

    Keep the previous values of LIVEKIT_API_KEY and LIVEKIT_API_SECRET as you will need them to update the configuration files in the Media Nodes. We will refer to these values as <CURRENT_LIVEKIT_API_KEY> and <CURRENT_LIVEKIT_API_SECRET>.

  3. Ensure to replace the LIVEKIT_API_KEY and LIVEKIT_API_SECRET in the .env file of all your Master Nodes

  4. Find the current locations of LIVEKIT_API_KEY and LIVEKIT_API_SECRET in your Media Nodes

    With the CURRENT_LIVEKIT_API_KEY and CURRENT_LIVEKIT_API_SECRET values obtained in step 2, you can find all occurrences of the current LiveKit API key and secret in the configuration files of the Media Nodes. To do this, connect to each Media Node and run the following command:

    sudo su\ncd /opt/openvidu/\nCURRENT_LIVEKIT_API_KEY=\"<CURRENT_LIVEKIT_API_KEY>\"\nCURRENT_LIVEKIT_API_SECRET=\"<CURRENT_LIVEKIT_API_SECRET>\"\ngrep --exclude-dir=data -IHnr \"$CURRENT_LIVEKIT_API_KEY\" .\ngrep --exclude-dir=data -IHnr \"$CURRENT_LIVEKIT_API_SECRET\" .\n
    Example output

    The output should look similar to the following for LIVEKIT_API_KEY:

    ./config/egress.yaml:api_key: <CURRENT_LIVEKIT_API_KEY>\n./config/ingress.yaml:api_key: <CURRENT_LIVEKIT_API_KEY>\n./config/livekit.yaml:    <CURRENT_LIVEKIT_API_KEY>: <CURRENT_LIVEKIT_API_SECRET>\n./config/livekit.yaml:    api_key: <CURRENT_LIVEKIT_API_KEY>\n

    And for LIVEKIT_API_SECRET:

    ./config/egress.yaml:api_secret: <CURRENT_LIVEKIT_API_SECRET>\n./config/ingress.yaml:api_secret: <CURRENT_LIVEKIT_API_SECRET>\n./config/livekit.yaml:    <CURRENT_LIVEKIT_API_KEY>: <CURRENT_LIVEKIT_API_SECRET>\n

  5. Update the Following Files in your Media Nodes

    Based on the output from the previous step, update the following files with the new values:

  6. Verify the changes in your Media Nodes

    These commands will list all occurrences of the new LIVEKIT_API_KEY and LIVEKIT_API_SECRET in the configuration files of the Media Nodes. The output should match the locations found in the initial search but with the new values.

    sudo su\ncd /opt/openvidu/\nNEW_LIVEKIT_API_KEY=\"<NEW_LIVEKIT_API_KEY>\"\nNEW_LIVEKIT_API_SECRET=\"<NEW_LIVEKIT_API_SECRET>\"\ngrep --exclude-dir=data -IHnr \"$NEW_LIVEKIT_API_KEY\" .\ngrep --exclude-dir=data -IHnr \"$NEW_LIVEKIT_API_SECRET\" .\n

  7. Ensure to follow from step 3 to 5 for all your Media Nodes

  8. Start all Master Nodes and Media Nodes

    sudo systemctl start openvidu\n

To change the MINIO_ACCESS_KEY and MINIO_SECRET_KEY parameters, follow these steps:

  1. Stop OpenVidu in all the Master Nodes and all Media Nodes and backup the deployment

    sudo systemctl stop openvidu\nsudo cp -r /opt/openvidu/ /opt/openvidu_backup/\n

  2. Replace in all the Master Nodes the MINIO_ACCESS_KEY and MINIO_SECRET_KEY in the .env file with your new values

    Take into account that if you are using the v2compatibility module in COMPOSE_PROFILES, you will need to change the V2COMPAT_OPENVIDU_PRO_AWS_ACCESS_KEY and V2COMPAT_OPENVIDU_PRO_AWS_SECRET_KEY parameters in the .env file.

    Warning

    Keep the previous values of MINIO_ACCESS_KEY and MINIO_SECRET_KEY as you will need them to update the configuration files in the Media Nodes. We will refer to these values as <CURRENT_MINIO_ACCESS_KEY> and <CURRENT_MINIO_SECRET_KEY>.

  3. Ensure to apply the changes in the .env file of all your Master Nodes

  4. Find the current locations of MINIO_ACCESS_KEY and MINIO_SECRET_KEY in your Media Nodes

    With the CURRENT_MINIO_ACCESS_KEY and CURRENT_MINIO_SECRET_KEY values obtained in step 2, you can find all occurrences of the current MinIO access key and secret in the configuration files of the Media Nodes. To do this, connect to each Media Node and run the following command:

    sudo su\ncd /opt/openvidu/\nCURRENT_MINIO_ACCESS_KEY=\"<CURRENT_MINIO_ACCESS_KEY>\"\nCURRENT_MINIO_SECRET_KEY=\"<CURRENT_MINIO_SECRET_KEY>\"\ngrep --exclude-dir=data -IHnr \"$CURRENT_MINIO_ACCESS_KEY\" .\ngrep --exclude-dir=data -IHnr \"$CURRENT_MINIO_SECRET_KEY\" .\n
    Example output

    The output should look similar to the following for MINIO_ACCESS_KEY:

    ./config/egress.yaml:access_key: <CURRENT_MINIO_ACCESS_KEY>\n

    And for MINIO_SECRET_KEY:

    ./config/egress.yaml:secret: <CURRENT_MINIO_SECRET_KEY>\n

  5. Update the Following Files in your Media Nodes

    Based on the output from the previous step, update the following files with the new values:

  6. Verify the changes in your Media Nodes

    These commands will list all occurrences of the new MINIO_ACCESS_KEY and MINIO_SECRET_KEY in the configuration files of the Media Nodes. The output should match the locations found in the initial search but with the new values.

    sudo su\ncd /opt/openvidu/\nNEW_MINIO_ACCESS_KEY=\"<NEW_MINIO_ACCESS_KEY>\"\nNEW_MINIO_SECRET_KEY=\"<NEW_MINIO_SECRET_KEY>\"\ngrep --exclude-dir=data -IHnr \"$NEW_MINIO_ACCESS_KEY\" .\ngrep --exclude-dir=data -IHnr \"$NEW_MINIO_SECRET_KEY\" .\n

  7. Ensure to follow from step 3 to 5 for all your Media Nodes

  8. Start all the Master Nodes and all the Media Nodes

    sudo systemctl start openvidu\n

To change the MONGO_ADMIN_USERNAME and MONGO_ADMIN_PASSWORD parameters, follow these steps:

  1. Stop OpenVidu in all the Master Nodes and all the Media Nodes and backup the deployment

    sudo systemctl stop openvidu\nsudo cp -r /opt/openvidu/ /opt/openvidu_backup/\n

  2. Replace in all the Master Nodes the MONGO_ADMIN_USERNAME and MONGO_ADMIN_PASSWORD in the .env file with your new values

    Warning

    Keep the previous values of MONGO_ADMIN_USERNAME and MONGO_ADMIN_PASSWORD as you will need them to update the configuration files in the Media Nodes. We will refer to these values as <CURRENT_MONGO_ADMIN_USERNAME> and <CURRENT_MONGO_ADMIN_PASSWORD>.

  3. Ensure to replace the MONGO_ADMIN_USERNAME and MONGO_ADMIN_PASSWORD in the .env file of all your Master Nodes

  4. Find the current locations of MONGO_ADMIN_USERNAME and MONGO_ADMIN_PASSWORD in your Media Nodes

    With the CURRENT_MONGO_ADMIN_USERNAME and CURRENT_MONGO_ADMIN_PASSWORD values obtained in step 2, you can find all occurrences of the current MongoDB admin username and password in the configuration files of the Media Nodes. To do this, connect to each Media Node and run the following command:

    sudo su\ncd /opt/openvidu/\nCURRENT_MONGO_ADMIN_USERNAME=\"<CURRENT_MONGO_ADMIN_USERNAME>\"\nCURRENT_MONGO_ADMIN_PASSWORD=\"<CURRENT_MONGO_ADMIN_PASSWORD>\"\ngrep --exclude-dir=data -IHnr \"$CURRENT_MONGO_ADMIN_USERNAME\" .\ngrep --exclude-dir=data -IHnr \"$CURRENT_MONGO_ADMIN_PASSWORD\" .\n
    Example output

    The output should look similar to the following for MONGO_ADMIN_USERNAME:

    ./config/livekit.yaml:mongo_url: <MONGO_URL>\n

    And for MONGO_ADMIN_PASSWORD:

    ./config/livekit.yaml:mongo_url: <MONGO_URL>\n

  5. Update the Following Files in your Media Nodes

    Based on the output from the previous step, update the following files with the new values:

  6. Verify the changes in your Media Nodes

    These commands will list all occurrences of the new MONGO_ADMIN_USERNAME and MONGO_ADMIN_PASSWORD in the configuration files of the Media Nodes. The output should match the locations found in the initial search but with the new values.

    sudo su\ncd /opt/openvidu/\nNEW_MONGO_ADMIN_USERNAME=\"<NEW_MONGO_ADMIN_USERNAME>\"\nNEW_MONGO_ADMIN_PASSWORD=\"<NEW_MONGO_ADMIN_PASSWORD>\"\ngrep --exclude-dir=data -IHnr \"$NEW_MONGO_ADMIN_USERNAME\" .\ngrep --exclude-dir=data -IHnr \"$NEW_MONGO_ADMIN_PASSWORD\" .\n

  7. Ensure to follow from step 3 to 5 for all your Media Nodes

  8. Start all the Master Nodes and all the Media Nodes

    sudo systemctl start openvidu\n
"},{"location":"docs/self-hosting/ha/on-premises/admin/#uninstalling-openvidu","title":"Uninstalling OpenVidu","text":"

To uninstall any OpenVidu Node, just execute the following commands:

sudo su\nsystemctl stop openvidu\nrm -rf /opt/openvidu/\nrm /etc/systemd/system/openvidu.service\n
"},{"location":"docs/self-hosting/ha/on-premises/install-dlb/","title":"OpenVidu High Availability Installation: On-premises with DNS Load Balancing","text":"

Info

OpenVidu High Availability is part of OpenVidu PRO. Before deploying, you need to create an OpenVidu account to get your license key. There's a 15-day free trial waiting for you!

This section provides instructions for deploying a production-ready OpenVidu High Availability setup on-premises, utilizing DNS for load balancing traffic. DNS allows multiple records, even of the same kind, to be registered, enabling the listing of multiple hosts under the same domain name. Such a mechanism allows for the distribution of traffic among the Master Nodes, offering an alternative to Network Load Balancers.

Advantages of DNS Load Balancing:

Disadvantages of DNS Load Balancing:

Architecture overview

This is how the architecture of the deployment looks like:

OpenVidu High Availability Architecture with DNS Load Balancing

For the Master Node, the following services are configured:

For the Media Nodes, the following services are configured:

"},{"location":"docs/self-hosting/ha/on-premises/install-dlb/#prerequisites","title":"Prerequisites","text":""},{"location":"docs/self-hosting/ha/on-premises/install-dlb/#port-rules-master-nodes","title":"Port rules (Master Nodes)","text":"

Ensure all these rules are configured in your firewall, security group, or any kind of network configuration that you have in your Master Nodes:

Inbound port rules:

Protocol Ports Source Description TCP 80 0.0.0.0/0, ::/0 Redirect HTTP to HTTPS and Let's Encrypt validation. TCP 443 0.0.0.0/0, ::/0 Allows access to the following: TCP 1935 0.0.0.0/0, ::/0 (Optional) For ingesting RTMP streams using Ingress service. TCP 9000 0.0.0.0/0, ::/0 (Optional) To expose MinIO publicly. TCP 3000 Master Nodes (Optional) For load balancing requests to Grafana (Observability module). TCP 8080 Master Nodes For load balancing requests to OpenVidu Dashboard. TCP 9101 Master Nodes For load balancing requests to MinIO Console. TCP 7946-7947 Master Nodes (Optional) For Mimir and Loki cluster communication (Observability module). TCP 9095-9096 Master Nodes (Optional) For Mimir and Loki cluster communication (Observability module). TCP 3100 Media Nodes (Optional) For Loki (Observability module). TCP 9009 Media Nodes (Optional) For Mimir (Observability module). TCP 4443 Master Nodes, Media Nodes (Optional) For OpenVidu V2 compatibility service. TCP 6080 Master Nodes, Media Nodes (Optional) For OpenVidu Call (Default Application). TCP 7000-7001 Master Nodes, Media Nodes For internal Redis communication TCP 9100 Master Nodes, Media Nodes For internal MinIO communication TCP 20000 Master Nodes, Media Nodes For internal Mongo communication

Outbound port rules:

Typically, all outbound traffic is allowed.

"},{"location":"docs/self-hosting/ha/on-premises/install-dlb/#port-rules-media-nodes","title":"Port rules (Media Nodes)","text":"

Ensure all these rules are configured in your firewall, security group, or any kind of network configuration that you have in your Media Nodes:

Inbound port rules:

Protocol Ports Source Description UDP 443 0.0.0.0/0, ::/0 STUN/TURN over UDP. TCP 7881 0.0.0.0/0, ::/0 (Optional), only needed if you want to allow WebRTC over TCP. UDP 7885 0.0.0.0/0, ::/0 (Optional). Only needed if you want to ingest WebRTC using WHIP. UDP 50000-60000 0.0.0.0/0, ::/0 WebRTC Media traffic. TCP 1935 Master Nodes (Optional). Only needed if you want to ingest RTMP streams using Ingress service. Master Nodes need access to this port to reach Ingress RTMP service and expose it using TLS (RTMPS). TCP 5349 Master Nodes (Optional). Only needed if you want to expose TURN service with TLS. Master Nodes need access to this port to reach TURN service and expose it using TLS (TURNS). TCP 7880 Master Nodes LiveKit API. Master Nodes need access to load balance LiveKit API and expose it through HTTPS. TCP 8080 Master Nodes (Optional). Only needed if you want to ingest WebRTC streams using WHIP. Master Nodes need access to this port to reach WHIP HTTP service."},{"location":"docs/self-hosting/ha/on-premises/install-dlb/#guided-installation","title":"Guided Installation","text":"

Before the installation, ensure that all your machines meet the prerequisites and the port rules for the Master Nodes and Media Nodes are correctly configured.

To install OpenVidu High Availability, begin by generating the commands required for setting up all nodes in the cluster. This is a simple and straightforward process; simply run the following command on any machine that has Docker installed:

docker run -it openvidu/openvidu-installer:latest \\\n    --deployment-type=ha\n

Note

In case you want to deploy a specific version, just replace latest with the desired version. For example: 3.0.0.

A wizard will guide you through the installation process. You will be asked for the following information:

Info

If you don't have a license key for OpenVidu PRO, you can get a 15-day free trial license key by creating an OpenVidu account.

The rest of the parameters are secrets, usernames, and passwords. If empty, the wizard will generate random values for them.

This command will output the following instructions, which you should follow:

  1. Firewall Configuration for 'Master Nodes': These rules are the same as the ones specified in the instructions. Depending on the modules you have selected, some rules defined at Port rules (Master Nodes) may not appear (Optional ports). Double-check them and modify them if you see something that can be enabled/disabled in your current port rules.

  2. Installation Commands for 'Master Nodes': This is the command needed to install your Master Node. It should look like this:

    sh <(curl -fsSL http://get.openvidu.io/pro/ha/latest/install_ov_master_node.sh) \\\n    --no-tty --install \\\n    --deployment-type='ha' \\\n    --node-role='master-node' \\\n...\n

    Note

    In case you want to deploy a specific version, just replace latest with the desired version. For example: 3.0.0.

    Execute that command on all your Master Nodes to install them. When the installation process finishes, you will see the following output:

    > - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - <\n>                                                                             <\n>  \ud83c\udf89\ud83c\udf89 OpenVidu HA 'Master Node' Installation Finished Successfully! \ud83c\udf89\ud83c\udf89    <\n>                                                                             <\n> - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - <\n

    The Master Node will be installed in /opt/openvidu and configured as a systemd service. To start the service, use the following command:

    systemctl start openvidu\n

    Your Master Nodes will be ready once all of them have been started.

  3. Firewall Configuration for 'Media Nodes': These rules are the same as the ones defined previously as with Master Nodes. Double-check the Port rules (Media Nodes) and modify them if you see something that can be enabled/disabled in your current port rules.

  4. Installation Commands for 'Media Nodes': This is the command needed to install your Media Nodes. It should look like this:

    sh <(curl -fsSL http://get.openvidu.io/pro/ha/latest/install_ov_media_node.sh) \\\n    --no-tty --install \\\n    --deployment-type='ha' \\\n    --node-role='media-node' \\\n...\n

    Note

    In case you want to deploy a specific version, just replace latest with the desired version. For example: 3.0.0.

    Execute that command on your Media Nodes to install them. When the installation process finishes, you will see the following output:

    > - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - <\n>                                                                             <\n>  \ud83c\udf89 OpenVidu HA 'Media Node' Installation Finished Successfully! \ud83c\udf89         <\n>                                                                             <\n> - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - <\n

    The Media Node on each machine will be installed at /opt/openvidu and configured as a systemd service. You can start the service with the following command:

    systemctl start openvidu\n

If everything goes well, all containers will be up and running without restarts, and you will be able to access any of the following services:

OpenVidu Server PRO URL (LiveKit compatible) will be available also in:

"},{"location":"docs/self-hosting/ha/on-premises/install-dlb/#configure-your-application-to-use-the-deployment","title":"Configure your Application to use the Deployment","text":"

To point your applications to your OpenVidu deployment, check the file at /opt/openvidu/.env of any Master Node. All access credentials of all services are defined in this file.

Your authentication credentials and URL to point your applications would be:

"},{"location":"docs/self-hosting/ha/on-premises/install-dlb/#non-interactive-installation","title":"Non-interactive installation","text":"

To automate the installation process, you just need to execute the specified command in the Guided Installation section and execute the generated commands.

Each installation command for each type of node looks like this:

Master NodeMedia Node

The Master Node can be configured with multiple kinds of certificates. Here are the examples for each type of certificate:

Let's Encrypt certificatesSelf-signed certificatesCustom certificates

Example using Let's Encrypt certificates:

sh <(curl -fsSL http://get.openvidu.io/pro/ha/latest/install_ov_master_node.sh) \\\n    --node-role='master-node' \\\n    --master-node-private-ip-list='10.5.0.1,10.5.0.2,10.5.0.3,10.5.0.4' \\\n    --openvidu-pro-license='xxxxx' \\\n    --domain-name-or-ip='openvidu.example.io' \\\n    --enabled-modules='observability,v2compatibility,app' \\\n    --turn-domain-name='turn.example.io' \\\n    --livekit-api-key='xxxxx' \\\n    --livekit-api-secret='xxxxx' \\\n    --dashboard-admin-user='xxxxx' \\\n    --dashboard-admin-password='xxxxx' \\\n    --redis-password='xxxxx' \\\n    --minio-access-key='xxxxx' \\\n    --minio-secret-key='xxxxx' \\\n    --mongo-admin-user='xxxxx' \\\n    --mongo-admin-password='xxxxx' \\\n    --mongo-replica-set-key='xxxxx' \\\n    --grafana-admin-user='xxxxx' \\\n    --grafana-admin-password='xxxxx' \\\n    --default-app-user='xxxxx' \\\n    --default-app-password='xxxxx' \\\n    --default-app-admin-user='xxxxx' \\\n    --default-app-admin-password='xxxxx' \\\n    --certificate-type='letsencrypt' \\\n    --letsencrypt-email='example@example.io'\n

Note

In case you want to deploy a specific version, just replace latest with the desired version. For example: 3.0.0.

Notes:

Example using self-signed certificates:

sh <(curl -fsSL http://get.openvidu.io/pro/ha/latest/install_ov_master_node.sh) \\\n    --node-role='master-node' \\\n    --master-node-private-ip-list='10.5.0.1,10.5.0.2,10.5.0.3,10.5.0.4' \\\n    --openvidu-pro-license='xxxxx' \\\n    --domain-name-or-ip='openvidu.example.io' \\\n    --enabled-modules='observability,v2compatibility,app' \\\n    --turn-domain-name='turn.example.io' \\\n    --livekit-api-key='xxxxx' \\\n    --livekit-api-secret='xxxxx' \\\n    --dashboard-admin-user='xxxxx' \\\n    --dashboard-admin-password='xxxxx' \\\n    --redis-password='xxxxx' \\\n    --minio-access-key='xxxxx' \\\n    --minio-secret-key='xxxxx' \\\n    --mongo-admin-user='xxxxx' \\\n    --mongo-admin-password='xxxxx' \\\n    --mongo-replica-set-key='xxxxx' \\\n    --grafana-admin-user='xxxxx' \\\n    --grafana-admin-password='xxxxx' \\\n    --default-app-user='xxxxx' \\\n    --default-app-password='xxxxx' \\\n    --default-app-admin-user='xxxxx' \\\n    --default-app-admin-password='xxxxx' \\\n    --certificate-type='selfsigned'\n

Note

In case you want to deploy a specific version, just replace latest with the desired version. For example: 3.0.0.

Example using custom certificates:

CERT_PRIVATE_KEY=$(cat privkey.pem | base64 -w 0)\nCERT_PUBLIC_KEY=$(cat fullchain.pem | base64 -w 0)\n\n# Optional, only if you want to enable TURN with TLS\nCERT_TURN_PRIVATE_KEY=$(cat turn-privkey.pem | base64 -w 0)\nCERT_TURN_PUBLIC_KEY=$(cat turn-fullchain.pem | base64 -w 0)\n\nsh <(curl -fsSL http://get.openvidu.io/pro/ha/latest/install_ov_master_node.sh) \\\n    --node-role='master-node' \\\n    --master-node-private-ip-list='10.5.0.1,10.5.0.2,10.5.0.3,10.5.0.4' \\\n    --openvidu-pro-license='xxxxx' \\\n    --domain-name-or-ip='openvidu.example.io' \\\n    --enabled-modules='observability,v2compatibility,app' \\\n    --turn-domain-name='turn.example.io' \\\n    --livekit-api-key='xxxxx' \\\n    --livekit-api-secret='xxxxx' \\\n    --dashboard-admin-user='xxxxx' \\\n    --dashboard-admin-password='xxxxx' \\\n    --redis-password='xxxxx' \\\n    --minio-access-key='xxxxx' \\\n    --minio-secret-key='xxxxx' \\\n    --mongo-admin-user='xxxxx' \\\n    --mongo-admin-password='xxxxx' \\\n    --mongo-replica-set-key='xxxxx' \\\n    --grafana-admin-user='xxxxx' \\\n    --grafana-admin-password='xxxxx' \\\n    --default-app-user='xxxxx' \\\n    --default-app-password='xxxxx' \\\n    --default-app-admin-user='xxxxx' \\\n    --default-app-admin-password='xxxxx' \\\n    --certificate-type='owncert' \\\n    --owncert-private-key=\"$CERT_PRIVATE_KEY\" \\\n    --owncert-public-key=\"$CERT_PUBLIC_KEY\" \\\n    --turn-owncert-private-key=\"$CERT_TURN_PRIVATE_KEY\" \\\n    --turn-owncert-public-key=\"$CERT_TURN_PUBLIC_KEY\"\n

Note

In case you want to deploy a specific version, just replace latest with the desired version. For example: 3.0.0.

To install a Media Node, you can use the following command:

sh <(curl -fsSL http://get.openvidu.io/pro/ha/latest/install_ov_media_node.sh) \\\n    --node-role='media-node' \\\n    --domain-name-or-ip='openvidu.example.io' \\\n    --master-node-private-ip-list='10.5.0.1,10.5.0.2,10.5.0.3,10.5.0.4' \\\n    --openvidu-pro-license='xxxxx' \\\n    --rtc-engine='pion' \\\n    --enabled-modules='observability,v2compatibility,app' \\\n    --turn-domain-name='openvidu.example.io' \\\n    --livekit-api-key='xxxxx' \\\n    --livekit-api-secret='xxxxx' \\\n    --redis-password='xxxxx' \\\n    --minio-access-key='xxxxx' \\\n    --minio-secret-key='xxxxx' \\\n    --mongo-admin-user='xxxxx' \\\n    --mongo-admin-password='xxxxx'\n

Note

In case you want to deploy a specific version, just replace latest with the desired version. For example: 3.0.0.

You can run these commands in a CI/CD pipeline or in a script to automate the installation process.

Some general notes about all commands:

To start each node, remember to execute the following command in each node:

systemctl start openvidu\n
"},{"location":"docs/self-hosting/ha/on-premises/install-dlb/#configuration-and-administration","title":"Configuration and administration","text":"

Once you have OpenVidu deployed, you can check the Configuration and Administration section to learn how to manage your OpenVidu High Availability deployment.

"},{"location":"docs/self-hosting/ha/on-premises/install-nlb/","title":"OpenVidu High Availability Installation: On-premises with Network Load Balancer","text":"

Info

OpenVidu High Availability is part of OpenVidu PRO. Before deploying, you need to create an OpenVidu account to get your license key. There's a 15-day free trial waiting for you!

This section provides instructions for deploying a production-ready OpenVidu High Availability setup on-premises, utilizing a Network Load Balancer in front of the cluster. Network Load Balancing is a method of distributing incoming network traffic across multiple servers. It is a highly available, scalable, and fault-tolerant solution that ensures your OpenVidu deployment is always up and running. Compared to DNS Load Balancing, Network Load Balancing is more reliable for health checks and ensures that traffic is evenly distributed across all nodes.

Advantages of Network Load Balancing:

Disadvantages of Network Load Balancing:

Architecture overview

This is how the architecture of the deployment looks:

OpenVidu High Availability Architecture with Network Load Balancer

For the Master Node, the following services are configured:

For the Media Nodes, the following services are configured:

"},{"location":"docs/self-hosting/ha/on-premises/install-nlb/#prerequisites","title":"Prerequisites","text":""},{"location":"docs/self-hosting/ha/on-premises/install-nlb/#port-rules-master-nodes","title":"Port rules (Master Nodes)","text":"

Ensure all these rules are configured in your firewall, security group, or any kind of network configuration that you have in your Master Nodes:

Inbound port rules:

Protocol Ports Source Description TCP 7880 Load Balancer Allows access to the following to the Load Balancer: TCP 7946-7947 Master Nodes (Optional) For Mimir and Loki cluster communication (Observability module). TCP 9095-9096 Master Nodes (Optional) For Mimir and Loki cluster communication (Observability module). TCP 3100 Media Nodes (Optional) For Loki (Observability module). TCP 9009 Media Nodes (Optional) For Mimir (Observability module). TCP 4443 Media Nodes (Optional) For OpenVidu V2 compatibility service. TCP 6080 Media Nodes (Optional) For OpenVidu Call (Default Application). TCP 7000-7001 Master Nodes, Media Nodes For internal Redis communication TCP 9100 Master Nodes, Media Nodes For internal Minio communication TCP 20000 Master Nodes, Media Nodes For internal Mongo communication

Outbound port rules:

Typically, all outbound traffic is allowed.

"},{"location":"docs/self-hosting/ha/on-premises/install-nlb/#port-rules-media-nodes","title":"Port rules (Media Nodes)","text":"

Ensure all these rules are configured in your firewall, security group, or any kind of network configuration that you have in your Media Nodes:

Inbound port rules:

Protocol Ports Source Description UDP 443 0.0.0.0/0, ::/0 STUN/TURN over UDP. TCP 7881 0.0.0.0/0, ::/0 (Optional), only needed if you want to allow WebRTC over TCP. UDP 7885 0.0.0.0/0, ::/0 (Optional). Only needed if you want to ingest WebRTC using WHIP. UDP 50000-60000 0.0.0.0/0, ::/0 WebRTC Media traffic. TCP 1935 Load Balancer (Optional). Only needed if you want to ingest RTMP streams using Ingress service. Master Nodes need access to this port to reach Ingress RTMP service and expose it using TLS (RTMPS). TCP 5349 Load Balancer (Optional). Only needed if you want to expose TURN service with TLS. Master Nodes need access to this port to reach TURN service and expose it using TLS (TURNS). TCP 7880 Master Nodes LiveKit API. Master Nodes need access to load balance LiveKit API and expose it through HTTPS. TCP 8080 Master Nodes (Optional). Only needed if you want to ingest WebRTC streams using WHIP. Master Nodes need access to this port to reach WHIP HTTP service."},{"location":"docs/self-hosting/ha/on-premises/install-nlb/#guided-installation","title":"Guided Installation","text":"

Before the installation, ensure that all your machines meet the prerequisites and the port rules for the Master Nodes and Media Nodes are correctly configured.

To install OpenVidu High Availability, begin by generating the commands required for setting up all nodes in the cluster. This is a simple and straightforward process; simply run the following command on any machine that has Docker installed:

docker run -it openvidu/openvidu-installer:latest \\\n    --deployment-type=ha\n

Note

In case you want to deploy a specific version, just replace latest with the desired version. For example: 3.0.0.

A wizard will guide you through the installation process. You will be asked for the following information:

Info

If you don't have a license key for OpenVidu PRO, you can get a 15-day free trial license key by creating an OpenVidu account.

The rest of the parameters are secrets, usernames, and passwords. If empty, the wizard will generate random values for them.

This command will output the following instructions, which you should follow:

  1. Firewall Configuration for 'Master Nodes': These rules are the same as the ones specified in the instructions. Depending on the modules you have selected, some rules defined at Port rules (Master Nodes) may not appear (Optional ports). Double-check and modify them if you see something that can be enabled/disabled in your current port rules.

  2. Installation Commands for 'Master Nodes': This is the command needed to install your Master Node. It should look like this:

    sh <(curl -fsSL http://get.openvidu.io/pro/ha/latest/install_ov_master_node.sh) \\\n    --no-tty --install \\\n    --deployment-type='ha' \\\n    --node-role='master-node' \\\n...\n

    Note

    In case you want to deploy a specific version, just replace latest with the desired version. For example: 3.0.0.

    Execute that command on all your Master Nodes to install them. When the installation process finishes, you will see the following output:

    > - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - <\n>                                                                             <\n>  \ud83c\udf89\ud83c\udf89 OpenVidu HA 'Master Node' Installation Finished Successfully! \ud83c\udf89\ud83c\udf89    <\n>                                                                             <\n> - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - <\n

    The Master Node will be installed in /opt/openvidu and configured as a systemd service. To start the service, use the following command:

    systemctl start openvidu\n

    Your Master Nodes will be ready once all of them have been started.

  3. Firewall Configuration for 'Media Nodes': These rules are the same as the ones defined previously as with Master Nodes. Double-check the Port rules (Media Nodes) and modify them if you see something that can be enabled/disabled in your current port rules.

  4. Installation Commands for 'Media Nodes': This is the command needed to install your Media Nodes. It should look like this:

    sh <(curl -fsSL http://get.openvidu.io/pro/ha/latest/install_ov_media_node.sh) \\\n    --no-tty --install \\\n    --deployment-type='ha' \\\n    --node-role='media-node' \\\n...\n

    Note

    In case you want to deploy a specific version, just replace latest with the desired version. For example: 3.0.0.

    Execute that command on your Media Nodes to install them. When the installation process finishes, you will see the following output:

    > - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - <\n>                                                                             <\n>  \ud83c\udf89 OpenVidu HA 'Media Node' Installation Finished Successfully! \ud83c\udf89         <\n>                                                                             <\n> - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - <\n

    The Media Node in each machine will be installed at /opt/openvidu and configured as a systemd service. You can start the service with the following command:

    systemctl start openvidu\n

If everything goes well, all containers will be up and running without restarts, and you will be able to access any of the following services:

OpenVidu Server PRO URL (LiveKit compatible) will be available also in:

"},{"location":"docs/self-hosting/ha/on-premises/install-nlb/#load-balancer-configuration","title":"Load Balancer Configuration","text":"

To configure the Load Balancer, you must create a new TCP listener for each port that the Master Nodes use. The Load Balancer should be set up to distribute traffic evenly across all Master Nodes, targeting their private IP addresses. Additionally, optional features like RTMP and TURN with TLS should be directed to use the private IP addresses of the Media Nodes. This ensures that traffic for these services is properly routed to the Media Nodes.

Below is an example using NGINX as a Load Balancer:

NGINX Load Balancer ConfigurationNGINX Load Balancer Configuration (With TLS for TURN)

Example configuration for NGINX Load Balancer:

events {\n    worker_connections 10240;\n}\n\nstream {\n\n    upstream openvidu_master_nodes {\n        server <MASTER_NODE_IP_1>:7880;\n        server <MASTER_NODE_IP_2>:7880;\n        server <MASTER_NODE_IP_3>:7880;\n        server <MASTER_NODE_IP_4>:7880;\n    }\n\n    # Optional: Only if you want to ingest RTMP\n    upstream openvidu_media_nodes_rtmp {\n        server <MEDIA_NODE_IP_1>:1935;\n        server <MEDIA_NODE_IP_2>:1935;\n        # Add more media nodes if needed\n    }\n\n    server {\n        listen 443 ssl;\n        server_name openvidu.example.com;\n        ssl_protocols       TLSv1.2 TLSv1.3;\n        ssl_certificate     /etc/nginx/ssl/openvidu-cert.pem;\n        ssl_certificate_key /etc/nginx/ssl/openvidu-key.pem;\n\n        proxy_connect_timeout 10s;\n        proxy_timeout 30s;\n\n        proxy_pass openvidu_master_nodes;\n    }\n\n    # Optional: Only if you want to ingest RTMP\n    server {\n        listen 1935 ssl;\n        server_name openvidu.example.com;\n        ssl_protocols       TLSv1.2 TLSv1.3;\n        ssl_certificate     /etc/nginx/ssl/openvidu-cert.pem;\n        ssl_certificate_key /etc/nginx/ssl/openvidu-key.pem;\n\n        proxy_connect_timeout 10s;\n        proxy_timeout 30s;\n\n        proxy_pass openvidu_media_nodes_rtmp;\n    }\n\n}\n

Example configuration for NGINX Load Balancer:

events {\n    worker_connections 10240;\n}\n\nstream {\n\n    upstream openvidu_master_nodes {\n        server <MASTER_NODE_IP_1>:7880;\n        server <MASTER_NODE_IP_2>:7880;\n        server <MASTER_NODE_IP_3>:7880;\n        server <MASTER_NODE_IP_4>:7880;\n    }\n\n    # Optional: Only if you want to ingest RTMP\n    upstream openvidu_media_nodes_rtmp {\n        server <MEDIA_NODE_IP_1>:1935;\n        server <MEDIA_NODE_IP_2>:1935;\n        # Add more media nodes if needed\n    }\n\n    upstream turn_tls {\n        server <MEDIA_NODE_IP_1>:5349;\n        server <MEDIA_NODE_IP_2>:5349;\n        # Add more media nodes if needed\n    }\n\n    map $ssl_server_name $targetBackend {\n        openvidu.example.com openvidu_master_nodes;\n        turn.example.com turn_tls;\n    }\n\n    map $ssl_server_name $targetCert {\n        openvidu.example.com /etc/nginx/ssl/openvidu-cert.pem;\n        turn.example.com /etc/nginx/ssl/turn-cert.pem;\n    }\n\n    map $ssl_server_name $targetCertKey {\n        openvidu.example.com /etc/nginx/ssl/openvidu-key.pem;\n        turn.example.com /etc/nginx/ssl/turn-key.pem;\n    }\n\n    server {\n        listen 443 ssl;\n        ssl_protocols       TLSv1.2 TLSv1.3;\n        ssl_certificate     $targetCert;\n        ssl_certificate_key $targetCertKey;\n\n        proxy_connect_timeout 10s;\n        proxy_timeout 30s;\n\n        proxy_pass $targetBackend;\n    }\n\n    # Optional: Only if you want to ingest RTMP\n    server {\n        listen 1935 ssl;\n        ssl_protocols       TLSv1.2 TLSv1.3;\n        ssl_certificate     $targetCert;\n        ssl_certificate_key $targetCertKey;\n\n        proxy_connect_timeout 10s;\n        proxy_timeout 30s;\n\n        proxy_pass openvidu_media_nodes_rtmp;\n    }\n\n}\n
"},{"location":"docs/self-hosting/ha/on-premises/install-nlb/#configure-your-application-to-use-the-deployment","title":"Configure your Application to use the Deployment","text":"

To point your applications to your OpenVidu deployment, check the file at /opt/openvidu/.env of any Master Node. All access credentials of all services are defined in this file.

Your authentication credentials and URL to point your applications would be:

"},{"location":"docs/self-hosting/ha/on-premises/install-nlb/#non-interactive-installation","title":"Non-interactive installation","text":"

To automate the installation process, you just need to execute the specified command in the Guided Installation section and execute the generated commands.

Each installation command for each type of node looks like this:

Master NodeMedia Node

To install a Master Node, you can use the following command:

sh <(curl -fsSL http://get.openvidu.io/pro/ha/latest/install_ov_master_node.sh) \\\n    --node-role='master-node' \\\n    --master-node-private-ip-list='10.5.0.1,10.5.0.2,10.5.0.3,10.5.0.4' \\\n    --openvidu-pro-license='xxxxx' \\\n    --domain-name-or-ip='openvidu.example.io' \\\n    --enabled-modules='observability,v2compatibility,app' \\\n    --turn-domain-name='turn.example.io' \\\n    --livekit-api-key='xxxxx' \\\n    --livekit-api-secret='xxxxx' \\\n    --dashboard-admin-user='xxxxx' \\\n    --dashboard-admin-password='xxxxx' \\\n    --redis-password='xxxxx' \\\n    --minio-access-key='xxxxx' \\\n    --minio-secret-key='xxxxx' \\\n    --mongo-admin-user='xxxxx' \\\n    --mongo-admin-password='xxxxx' \\\n    --mongo-replica-set-key='xxxxx' \\\n    --grafana-admin-user='xxxxx' \\\n    --grafana-admin-password='xxxxx' \\\n    --default-app-user='xxxxx' \\\n    --default-app-password='xxxxx' \\\n    --default-app-admin-user='xxxxx' \\\n    --default-app-admin-password='xxxxx' \\\n    --external-load-balancer\n

Note

In case you want to deploy a specific version, just replace latest with the desired version. For example: 3.0.0.

Notes:

To install a Media Node, you can use the following command:

sh <(curl -fsSL http://get.openvidu.io/pro/ha/latest/install_ov_media_node.sh) \\\n    --node-role='media-node' \\\n    --domain-name-or-ip='openvidu.example.io' \\\n    --master-node-private-ip-list='10.5.0.1,10.5.0.2,10.5.0.3,10.5.0.4' \\\n    --openvidu-pro-license='xxxxx' \\\n    --rtc-engine='pion' \\\n    --enabled-modules='observability,v2compatibility,app' \\\n    --turn-domain-name='openvidu.example.io' \\\n    --livekit-api-key='xxxxx' \\\n    --livekit-api-secret='xxxxx' \\\n    --redis-password='xxxxx' \\\n    --minio-access-key='xxxxx' \\\n    --minio-secret-key='xxxxx' \\\n    --mongo-admin-user='xxxxx' \\\n    --mongo-admin-password='xxxxx'\n

Note

In case you want to deploy a specific version, just replace latest with the desired version. For example: 3.0.0.

You can run these commands in a CI/CD pipeline or in a script to automate the installation process.

Some general notes about all commands:

To start each node, remember to execute the following command in each node:

systemctl start openvidu\n
"},{"location":"docs/self-hosting/ha/on-premises/install-nlb/#configuration-and-administration","title":"Configuration and administration","text":"

Once you have OpenVidu deployed, you can check the Configuration and Administration section to learn how to manage your OpenVidu High Availability deployment.

"},{"location":"docs/self-hosting/production-ready/","title":"Production ready","text":"

OpenVidu is designed to be self-hosted, whether it is on premises or in a cloud provider. It brings to your own managed service advanced capabilities usually reserved only for SaaS solutions. There are two main reasons why you may need to self-host the real-time solution yourself:

It is important to mention that when we talk about self-hosting OpenVidu, we don't just mean installing it in bare-metal servers or private VPCs. OpenVidu also supports deployments in the most popular cloud providers, using their native services when possible. AWS is now supported, and others are coming soon. You can learn more about the different options to deploy OpenVidu in the deployment types section.

One of OpenVidu's main goals is offering a self-hosted, production-ready live-video platform with all the advanced capabilities typically reserved for SaaS solutions. This includes outstanding performance, scalability, fault tolerance and observability:

"},{"location":"docs/self-hosting/production-ready/fault-tolerance/","title":"Fault Tolerance","text":"

Real-time media is particularly sensitive to downtime events, as they directly affect the user experience in a very disruptive way. OpenVidu is designed from the ground up to be fault tolerant in all its services in case of node downtime, especially in its High Availability deployment.

The extent of fault tolerance depends on the OpenVidu deployment type:

"},{"location":"docs/self-hosting/production-ready/fault-tolerance/#fault-tolerance-in-openvidu-elastic","title":"Fault tolerance in OpenVidu Elastic","text":""},{"location":"docs/self-hosting/production-ready/fault-tolerance/#master-node","title":"Master Node","text":"

An OpenVidu Elastic deployment has a single Master Node, so a failure on this node is fatal and any ongoing video Rooms will be interrupted. The service won't be restored until the Master Node is recovered.

"},{"location":"docs/self-hosting/production-ready/fault-tolerance/#media-nodes","title":"Media Nodes","text":"

You can have any number of Media Nodes in an OpenVidu Elastic deployment. Media Nodes are stateless, meaning that they do not store critical information about the Rooms, Egress or Ingress processes they are handling. This means that they can be easily replicated in any other Media Node in case of a failure.

In the event of a Media Node failure, there are 3 services affected with the following behaviors:

"},{"location":"docs/self-hosting/production-ready/fault-tolerance/#fault-tolerance-in-openvidu-high-availability","title":"Fault tolerance in OpenVidu High Availability","text":"

OpenVidu High Availability delivers the highest possible degree of fault tolerance. This is achieved by running all of the services in the Master Nodes and the Media Nodes in their High Availability flavour.

An OpenVidu High Availability deployment runs Master Nodes and Media Nodes in separated groups. Let's see the extent of fault tolerance for each node group:

"},{"location":"docs/self-hosting/production-ready/fault-tolerance/#master-nodes","title":"Master Nodes","text":"

The number of Master Nodes in an OpenVidu High Availability deployment is 4. This minimum number of nodes ensures that every service running in the Master Nodes is fault tolerant.

If one Master Node fails, the service won't be affected. Some users may trigger event Reconnecting closely followed by Reconnected, but the service will remain fully operational.

When two or more Master Nodes fail simultaneously, there can be some degradation of the service:

In the event of Master Node failures, the service will be automatically restored as soon as the failed node(s) are recovered.

"},{"location":"docs/self-hosting/production-ready/fault-tolerance/#media-nodes_1","title":"Media Nodes","text":"

Fault tolerance of Media Nodes in OpenVidu Elastic behaves the same as in OpenVidu High Availability.

"},{"location":"docs/self-hosting/production-ready/fault-tolerance/#recovering-egress-from-node-failures","title":"Recovering Egress from node failures","text":"

Egress processes can be affected by the crash of a Master Node or a Media Node. To recover Egress from...

"},{"location":"docs/self-hosting/production-ready/fault-tolerance/#from-master-node-failures","title":"From Master Node failures","text":"

This only applies to OpenVidu High Availability

If 2 Master Nodes crash, the Egress process won't be able to use the Minio storage. This has different consequences depending on the configured outputs for your Egress process:

In both cases, files are not lost and can be recovered. They will be available in the Egress backup path of the Media Node hosting the Egress process (by default /opt/openvidu/egress_data/home/egress/backup_storage).

"},{"location":"docs/self-hosting/production-ready/fault-tolerance/#from-a-media-node-failure","title":"From a Media Node failure","text":"

This applies to both OpenVidu High Availability and OpenVidu Elastic

If the Media Node hosting an ongoing Egress process crashes, then the Egress process will be immediately interrupted. But as long as the disk of the crashed Media Node is still accessible, you may recover the output files. They will be available in the Media Node at path /opt/openvidu/egress_data/home/egress/tmp.

It is possible that if the crashed Egress had MP4 as configured output (which is an option available for Room Composite and Track Composite) the recovered file may not be directly playable and it may require a repair process.

"},{"location":"docs/self-hosting/production-ready/performance/","title":"Performance","text":"

Warning

mediasoup integration in OpenVidu is experimental, and should not be used in production environments. There are some limitations that are currently being worked on, expected to be ironed out in the near future.

OpenVidu is able to handle up to 2x the load in a single server, doubling the amount of media Tracks that can be transmitted compared to base LiveKit. By not only building upon the giant Open-Source shoulders of LiveKit, but also pushing the bar further, OpenVidu uses the best-in-class technologies to bring considerable performance improvements to the table.

The key element of any WebRTC server solution is the ability to exchange media between participants of a room, in the so-called WebRTC SFU. LiveKit implements its own SFU, and that's where OpenVidu makes a different choice by using mediasoup.

The key points of how this works are:

"},{"location":"docs/self-hosting/production-ready/performance/#about-mediasoup-integration","title":"About mediasoup integration","text":""},{"location":"docs/self-hosting/production-ready/performance/#architecture","title":"Architecture","text":"

LiveKit created its own WebRTC SFU, based on the Pion library to route media between participants:

OpenVidu is built by a team of expert WebRTC developers who know all the ins and outs of low-level WebRTC development, so it was possible to replace LiveKit's own implementation with an alternative, and mediasoup was the clear best choice given its fantastic performance characteristics:

This means that applications built on top of LiveKit will continue to work exactly the same, while the internal WebRTC engine inside the server can be swapped at will and applications can benefit from that change, without having to be rebuilt.

In terms of the signaling protocol, API and SDKs, OpenVidu maintains the original LiveKit implementation. LiveKit's API is very well designed, with a simple but powerful set of concepts, and the amount of SDKs available is very large.

"},{"location":"docs/self-hosting/production-ready/performance/#choice-of-technology","title":"Choice of technology","text":"

Both LiveKit and Pion are written in the Go programming language, and this has some implications for speed and efficiency. While Go is popular for its simplicity, readability, and approach to concurrency, when it comes to performance other alternatives rank higher in common benchmarks.

First and foremost, the two most defining limitations of Go is that it requires a quite heavy runtime that is able to handle all of the low-level features of the language, such as goroutines and memory allocations. Also, speaking of memory management, Go requires a Garbage Collector, which knowledgeable readers will recognize as a hindrance for performance-critical applications.

mediasoup, on the other hand, focuses all of its efforts on maximum efficiency. It is written in C++, and it is ultra-optimized for the specific task of routing media packets. C++ is a language that provides fully manual management of all resources, and direct access to the hardware, with the benefit of software that is as fast as it can be on any machine.

We believe that by combining the best of the LiveKit stack with a top-notch WebRTC engine like mediasoup, OpenVidu is the best option for those who need a self-hosted and high-performance real-time solution.

"},{"location":"docs/self-hosting/production-ready/performance/#limitations","title":"Limitations","text":"

OpenVidu developers are hard at work with integrating mediasoup as a WebRTC engine within LiveKit, aiming to provide feature parity with the original Pion engine.

There are, for now, some limitations that are expected to be ironed out over time:

"},{"location":"docs/self-hosting/production-ready/performance/#benchmarking","title":"Benchmarking","text":"

Numerous load tests have been performed to determine the true capabilities of OpenVidu on different hardware. To do so we have developed the tool Openvidu LoadTest: an in development project that aims to improve the precision of load and performance tests in WebRTC systems.

We have compared OpenVidu using the original Pion WebRTC engine (this is the default LiveKit Open Source implementation) and using mediasoup as WebRTC engine. We tested the performance for both cases in the scenario below.

"},{"location":"docs/self-hosting/production-ready/performance/#results-conference-rooms","title":"Results: Conference rooms","text":"

This tests increasingly adds Rooms of 8 Participants each, every one sending 1 video Track and 1 audio Track, and subscribing to all remote Tracks.

The following plot shows the number of Participants that can be added to a Room in OpenVidu using Pion and using mediasoup as WebRTC engines:

The conclusion is that for multiple Rooms, mediasoup performs much better than Pion, almost doubling the total number of Participants (and Tracks) that fit in the server.

Below there is the deatiled connection progression for each Participant in each test.

The X axis reflects the point of time in seconds. For each Participant there is a bar indicating its connection status:

CPU load of the server is also shown with a black marked plot (from 0 to 1, representing 0% to 100% CPU load).

Progression of the connection of each Participant through the test execution. Benchmark test for Rooms with 8 Participants using OpenVidu with Pion

Progression of the connection of each Participant through the test execution. Benchmark test for Rooms with 8 Participants using OpenVidu with mediasoup"},{"location":"docs/self-hosting/production-ready/performance/#benchmarking-technical-details","title":"Benchmarking technical details","text":""},{"location":"docs/self-hosting/production-ready/performance/#benchmarking-methodology","title":"Benchmarking methodology","text":"

Each test begins with no participants on the media server. First, the test controller creates EC2 instances to host the browsers. The controller then sends a request to create a number of participants (this number is known as the batch size). After each browser sends confirmation to the controller that it is connected, the controller sends another request to add more participants (as many participants as the batch size specifies). A participant is considered connected to the room if:

The test stops when it determines that no more users can be added to a room. This happens when a user has 5 failed connections. A connection is considered to have failed when it terminates with a fatal error (in LiveKit this is captured when a Disconnected event occurs) or when the connection times out. A failure in connection can occur when trying to join a room (ending usually in timeout) or during the connection (a Disconnected event is thrown). Each time a failure is communicated to the controller, it will kill that browser and restart it again, effectively restarting the connection (up to 5 times, as mentioned before).

"},{"location":"docs/self-hosting/production-ready/performance/#about-openvidu-loadtest","title":"About OpenVidu LoadTest","text":"

Tools like livekit-cli simulate participants directly using WebRTC SDKs, but we found out that browsers add significant more load that these kind of systems. This makes Openvidu LoadTest give results that are closer to real-world scenarios, as it uses real browsers. Using real browsers also allows for the collection of useful data related to connections, events and WebRTC statistics. On the other hand, tests performed with Openvidu LoadTest are more expensive, as they require real instances to host the browsers.

"},{"location":"docs/self-hosting/production-ready/scalability/","title":"Scalability","text":"

Scalability is a very broad term with implications on many levels. In the case of real-time applications, it usually refers to the number of simultaneous Rooms you can host and the maximum number of participants in each Room, or more accurately, the number of media tracks sent and received in each Room.

OpenVidu offers scalability out-of-the-box for typical videoconferencing use cases, but also for large low-latency live streams with hundreds of viewers. With OpenVidu Elastic and OpenVidu High Availability you can easily scale your deployment to host many simultaneous videoconferences and live streams. And it is also possible to scale automatically with our autoscaling feature, so you can truly adapt your resources to the demand.

"},{"location":"docs/self-hosting/production-ready/scalability/#scalability-depending-on-the-use-case","title":"Scalability depending on the use case","text":""},{"location":"docs/self-hosting/production-ready/scalability/#small-and-medium-videoconferences","title":"Small and medium videoconferences","text":"

OpenVidu allows you to host multiple small and medium videoconferences (up to 10 participants). The number of simultaneous rooms depends on the deployment used and the power of machines.

"},{"location":"docs/self-hosting/production-ready/scalability/#big-live-streams","title":"Big live streams","text":"

Live streaming is different from a video conference. In a videoconference, usually all participants can publish audio and video. Instead, in a live stream, only one participant can publish audio and video (known as the publisher) and others can view it (known as viewers).

OpenVidu is able to manage live streams with up to XXX viewers (1 publisher and XXX subscribers) in a single Room hosted in a server with 4 CPUs. To manage more than one live stream simultaneously, an Elastic or High Availability deployment is needed with several media servers.

"},{"location":"docs/self-hosting/production-ready/scalability/#big-videoconferences-and-massive-live-streams-working-on-it","title":"Big videoconferences and massive live streams (Working on it! )","text":"

For big videoconferences with many participants (in the order of 100- or even 1000-) and massive live streams with few publishers and thousands of viewers, OpenVidu will offer in the near future two distinct strategies:

"},{"location":"docs/self-hosting/production-ready/scalability/#autoscaling","title":"Autoscaling","text":"

OpenVidu Elastic and OpenVidu High Availability have multiple Media Nodes to handle the load.

When deploying on AWS, OpenVidu will automatically add and remove Media Nodes according to load, thanks to Auto Scaling Groups. When deploying On Premises you are responsible of monitoring the load of your Media Nodes and triggering the addition of new Media Nodes or removal of existing Media Nodes.

"},{"location":"docs/self-hosting/production-ready/observability/","title":"Observability","text":"

Any production software needs to be observable. But in real-time applications this becomes an absolute priority. You must be able to:

OpenVidu brings everything you need to fulfill these requirements. We collect events, metrics and logs from your deployment and provide OpenVidu Dashboard and a Grafana stack to navigate them.

"},{"location":"docs/self-hosting/production-ready/observability/grafana-stack/","title":"Grafana stack","text":""},{"location":"docs/self-hosting/production-ready/observability/grafana-stack/#grafana-stack","title":"Grafana Stack","text":"

OpenVidu also provides different Grafana dashboards to monitor metrics from OpenVidu Server and logs from your cluster.

Grafana is available at https://your.domain/grafana/ and can be accessed using your Grafana admin credentials.

Dashboards can be found in the OpenVidu folder at https://your.domain/grafana/dashboards/f/openvidu-dashboards/openvidu.

"},{"location":"docs/self-hosting/production-ready/observability/grafana-stack/#services","title":"Services","text":"

The Grafana stack that comes with OpenVidu is composed of the following services:

"},{"location":"docs/self-hosting/production-ready/observability/grafana-stack/#dashboards","title":"Dashboards","text":""},{"location":"docs/self-hosting/production-ready/observability/grafana-stack/#openvidu-server-metrics","title":"OpenVidu Server Metrics","text":"

This dashboard provides metrics about OpenVidu Server. It includes charts about active rooms, active participants, published tracks, subscribed tracks, send/receive bytes, packet loss percentage and quality score.

In case you are using OpenVidu PRO and you have more than one Media Node deployed, you will see all metrics from all nodes combined in the same chart.

"},{"location":"docs/self-hosting/production-ready/observability/grafana-stack/#openvidu-media-nodes-server-metrics","title":"OpenVidu Media Nodes Server Metrics","text":"

This dashboard is part of OpenVidu PRO edition.

This dashboard provides the same metrics as the OpenVidu Server Metrics dashboard, but grouped by Media Node.

You can select the Media Node you want to see metrics from in the media_node dropdown. You will see different charts in the same panel according to the selected Media Nodes.

Info

If you add new Media Nodes to your OpenVidu deployment, you will have to refresh the page in order to see the new Media Nodes in the dropdown.

"},{"location":"docs/self-hosting/production-ready/observability/grafana-stack/#openvidu-logs","title":"OpenVidu Logs","text":"

In case you are using OpenVidu COMMUNITY, this dashboard provides different visualizations for logs from your OpenVidu Single Node deployment.

There is a panel showing all containers logs,

another panel to filter logs by room_id and participant_id,

and one row for each selected service, containing all logs, warnings and errors from that service.

You can also filter logs containing a specific text by using the filter search box.

"},{"location":"docs/self-hosting/production-ready/observability/grafana-stack/#openvidu-cluster-nodes-logs","title":"OpenVidu Cluster Nodes Logs","text":"

This dashboard is part of OpenVidu PRO edition.

In case you are using OpenVidu PRO, this dashboard provides different visualizations for logs from your OpenVidu Elastic or OpenVidu High Availability cluster, grouped by node.

First of all, there is a panel showing all containers logs from all nodes.

Then, there is a row for each selected node, containing all logs, warnings and errors from that node. Besides, each row contains a panel for each selected container, showing all its logs.

Info

Note that some panels have no data. This is because some containers are running in Master Nodes and others in Media Nodes.

You can also filter logs containing a specific text by using the filter search box.

"},{"location":"docs/self-hosting/production-ready/observability/grafana-stack/#openvidu-cluster-services-logs","title":"OpenVidu Cluster Services Logs","text":"

This dashboard is part of OpenVidu PRO edition.

In case you are using OpenVidu PRO, this dashboard provides different visualizations for logs from your OpenVidu Elastic or OpenVidu High Availability cluster, grouped by service.

First of all, there is a panel to filter logs by room_id and participant_id.

Then, there is a row for each selected service, containing all logs, warnings and errors from that service.

"},{"location":"docs/self-hosting/production-ready/observability/grafana-stack/#limitations","title":"Limitations","text":"

For now, in OpenVidu High Availability deployments, we have decided to not implement Grafana in High Availability (HA) mode. This decision is based on the fact that Grafana needs a configured HA MySQL or PostgreSQL database to work in HA mode, and we want to keep the deployment as simple as possible.

There are 4 instances of Grafana in an OpenVidu High Availability deployment, one for each Master Node, but they are not synchronized between them. Therefore, if you make any change (change your admin password, create a new dashboard...) in one Grafana instance and the Master Node suddenly goes down, you will be redirected to another Grafana instance where the changes will not be reflected. That is the reason why we disable user signups and saving dashboard or datasource modifications in Grafana.

However, all metrics and logs from all nodes are available in all Grafana instances, so you can monitor your OpenVidu cluster without any problem.

"},{"location":"docs/self-hosting/production-ready/observability/openvidu-dashboard/","title":"OpenVidu Dashboard","text":"

It is a web application designed to provide OpenVidu administrators with a comprehensive view of usage statistics and real-time monitoring of video Rooms. OpenVidu Dashboard is included by default in any OpenVidu deployment.

To access OpenVidu Dashboard, go to https://your.domain/dashboard/ and log in using your admin credentials.

"},{"location":"docs/self-hosting/production-ready/observability/openvidu-dashboard/#views","title":"Views","text":""},{"location":"docs/self-hosting/production-ready/observability/openvidu-dashboard/#analytics","title":"Analytics","text":"

Display graphical analytics for client SDKs, connection types, bandwidth usage, unique participants, rooms and egresses created over different time periods (last 24 hours, last 7 days, last 28 days or current month).

"},{"location":"docs/self-hosting/production-ready/observability/openvidu-dashboard/#rooms","title":"Rooms","text":"

Review the total count of active rooms and active participants, along with a roster of currently active rooms and a history of closed rooms within the last 28 days. Detailed information on each room is accessible by clicking on the respective row.

"},{"location":"docs/self-hosting/production-ready/observability/openvidu-dashboard/#room-details","title":"Room Details","text":"

This view is part of OpenVidu PRO edition.

Retrieve in-depth information about a specific room, including its duration, bandwidth consumption, participants and related events. A chart illustrating the active participants count over time is also provided.

"},{"location":"docs/self-hosting/production-ready/observability/openvidu-dashboard/#participant-details","title":"Participant Details","text":"

This view is part of OpenVidu PRO edition.

Obtain detailed insights into each participant, covering their duration, bandwidth usage, average audio and video quality score, information about the client they are connecting with, connection stats, published tracks and related events.

A participant may connect and disconnect from a room multiple times while it remains open. Each instance of connection using the same participant identity is referred to as a participant session. If multiple sessions occur, we will aggregate all participant sessions together and organize them into a timeline at the top of the participant details view. You can easily switch between participant sessions by clicking on each corresponding row:

"},{"location":"docs/self-hosting/production-ready/observability/openvidu-dashboard/#egress-ingress","title":"Egress-Ingress","text":"

Review an overview of all egresses and ingresses, including their duration and status. Detailed information for each egress or ingress can be accessed by clicking on the respective row.

"},{"location":"docs/self-hosting/production-ready/observability/openvidu-dashboard/#egress-details","title":"Egress Details","text":"

This view is part of OpenVidu PRO edition.

Access comprehensive details about a specific egress, including its duration, current status, type, associated room, destinations, status timeline and request information.

"},{"location":"docs/self-hosting/production-ready/observability/openvidu-dashboard/#ingress-details","title":"Ingress Details","text":"

This view is part of OpenVidu PRO edition.

Explore detailed information about a specific ingress, including its total duration, status and a list of all associated rooms.

"},{"location":"docs/self-hosting/shared/aws-ssl-domain/","title":"Aws ssl domain","text":""},{"location":"docs/self-hosting/shared/aws-ssl-domain/#domain-and-ssl-certificate-configuration","title":"Domain and SSL Certificate Configuration","text":"

These are the three possible scenarios you may have to configure in this section:

Let's Encrypt Certificate (recommended)Self-Signed CertificateCustom Certificates

For a production-ready setup, this scenario is ideal when you have an FQDN (Fully Qualified Domain Name) and an Elastic IP at your disposal. It leverages the services of Let's Encrypt to automatically generate valid certificates.

First, you need to have the FQDN pointing to the Elastic IP you are going to use.

Then, you need to fill in the following parameters:

As you can see, you need to specify the DomainName with your FQDN, the PublicElasticIP with the Elastic IP that the domain points to, and the LetsEncryptEmail with your email address for Let\u2019s Encrypt notifications. These parameters are mandatory.

This is the most straightforward option for deploying OpenVidu on AWS when you do not have a Fully Qualified Domain Name (FQDN). This method allows for the immediate use of OpenVidu in AWS using CloudFormation.

However, this convenience comes with the caveat that users will need to manually accept the certificate in their web browsers. Please be aware that this configuration is solely for developmental and testing purposes and is not suitable for a production environment.

These are the parameters needed in this section to use self-signed certificates:

You don\u2019t need to specify any parameters; just select the CertificateType as self-signed. The domain name used will be an AWS-generated one.

Opt for this method if you possess your own certificate for an existing FQDN. It enables you to deploy OpenVidu on AWS using your certificates.

You need to have a Fully Qualified Domain Name (FQDN) pointing to a previously created Elastic IP.

Also, you need a temporary HTTP server hosting your private and public certificate under a specific URL. These URLs are needed for the instance to be able to download and install your certificates.

The configured parameters would look like this:

You need to specify at OwnPublicCertificate and OwnPrivateCertificate the URLs where the public and private certificates are hosted, respectively. The DomainName and PublicElasticIP are mandatory parameters.

Certificates need to be in PEM format and the URLs must be accessible from the instance.

"},{"location":"docs/self-hosting/shared/aws-troubleshooting/","title":"Aws troubleshooting","text":"

If something goes wrong during the initial CloudFormation stack creation, your stack may reach the CREATE_FAILED status for multiple reasons. It could be due to a misconfiguration in the parameters, a lack of permissions, or a problem with the AWS services. When this happens, the following steps can help you troubleshoot the issue and identify what went wrong:

  1. While deploying the stack, make sure at \"Stack failure options\" you have selected the option \"Preserve successfully provisioned resources\" to be able to troubleshoot the deployment in case of an error.

    Disable Rollback on failure

  2. Check if the EC2 instance or instances are running. If they are not, check the CloudFormation events for any error messages.

  3. If the EC2 instance or instances are running, SSH into the instance and check the logs of the following files:

    These logs will give you more information about the CloudFormation stack creation process.

"},{"location":"docs/self-hosting/shared/aws-turn-domain/","title":"Aws turn domain","text":""},{"location":"docs/self-hosting/shared/aws-turn-domain/#optional-turn-server-configuration-with-tls","title":"(Optional) TURN server configuration with TLS","text":"

This section is optional. It is useful when your users are behind a restrictive firewall that blocks UDP traffic. This parameter will only works if you are using letsencrypt or owncert as the CertificateType parameter.

TURN server configuration with TLS

The parameters in this section may look like this:

Set the TurnDomainName parameter to the domain name you intend to use for your TURN server. It should be pointing to the PublicElasticIP specified in the previous section.

If you are using letsencrypt as the CertificateType parameter, you can leave the TurnOwnPublicCertificate and TurnOwnPrivateCertificate parameters empty. If you are using owncert, you need to specify the URLs where the public and private certificates are hosted.

"},{"location":"docs/self-hosting/shared/install-version/","title":"Install version","text":"

Note

In case you want to deploy a specific version, just replace latest with the desired version. For example: 3.0.0.

"},{"location":"docs/self-hosting/shared/mediasoup-warning/","title":"Mediasoup warning","text":"

Warning

mediasoup integration in OpenVidu is experimental, and should not be used in production environments. There are some limitations that are currently being worked on, expected to be ironed out in the near future.

"},{"location":"docs/self-hosting/shared/openvidu-pro-checking-logs/","title":"Openvidu pro checking logs","text":""},{"location":"docs/self-hosting/shared/openvidu-pro-checking-logs/#checking-logs","title":"Checking logs","text":"

If any of the services are not working as expected, you can check the logs of the services using the following command:

cd /opt/openvidu/\ndocker compose logs <service-name>\n

Replace <service-name> with the name of the service you want to check. For example, to check the logs of the OpenVidu Server, use the following command:

cd /opt/openvidu/\ndocker compose logs openvidu\n

To check the logs of all services, use the following command:

cd /opt/openvidu/\ndocker compose logs\n

You can also review your logs using the Grafana dashboard provided with OpenVidu. To access it, go to https://<your-domain.com>/grafana and use the credentials located in /opt/openvidu/.env to log in. Once inside, navigate to the \"Home\" section, select \"Dashboard\", and then click on:

"},{"location":"docs/self-hosting/shared/openvidu-pro-configuration-parameters/","title":"Openvidu pro configuration parameters","text":""},{"location":"docs/self-hosting/shared/openvidu-pro-configuration-parameters/#openvidu-configuration-parameters","title":"OpenVidu Configuration Parameters","text":"

OpenVidu Server is built on top of LiveKit and offers extra configuration options. You can find the configuration file at /opt/openvidu/config/livekit.yaml. Additional parameters for configuring OpenVidu Server are:

openvidu:\n    license: <YOUR_OPENVIDU_PRO_LICENSE> # (1)\n    cluster_id: <YOUR_DOMAIN_NAME> # (2)\n    analytics: # (3)\n        enabled: true # (4)\n        interval: 10s # (5)\n        expiration: 768h # (6)\n        mongo_url: <MONGO_URL> # (7)\n    rtc:\n        engine: pion # (8)\n    mediasoup:\n        debug: \"\" # (9)\n        log_level: error # (10)\n        log_tags: [info, ice, rtp, rtcp, message] # (11)\n
  1. Specify your OpenVidu Pro license key. If you don't have one, you can request one here.
  2. The cluster ID for the OpenVidu deployment. It is configured by default by OpenVidu Installer with the domain name of the deployment.
  3. The analytics configuration should be defined at the openvidu level in the livekit.yaml file.
  4. This must be set to true to send analytics data to MongoDB. If set to false, no analytics data will be sent.
  5. Time interval to send analytics data to MongoDB.
  6. Time to keep the analytics data in MongoDB. In this example, it is set to 32 days.
  7. MongoDB URL. This is the connection string to the MongoDB database where the analytics data will be stored.
  8. The rtc.engine parameter is set to pion by default. This is the WebRTC engine used by OpenVidu. Depending on your requirements, you can use:
  9. Global toggle to enable debugging logs from MediaSoup. In most debugging cases, using just an asterisk (\"*\") here is enough, but this can be fine-tuned for specific log levels. More info.
  10. Logging level for logs generated by MediaSoup. More info.
  11. Comma-separated list of log tag names, for debugging. More info.
"},{"location":"docs/self-hosting/shared/openvidu-pro-removing-media-nodes/","title":"Openvidu pro removing media nodes","text":""},{"location":"docs/self-hosting/shared/openvidu-pro-removing-media-nodes/#removing-media-nodes-gracefully","title":"Removing Media Nodes Gracefully","text":"

To stop a Media Node gracefully, you need to stop the containers openvidu, ingress, and egress with a SIGINT signal. Here is a simple script that you can use to stop all these containers gracefully:

#!/bin/bash\n# Stop OpenVidu, Ingress, and Egress containers gracefully (1)\ndocker container kill --signal=SIGINT openvidu || true\ndocker container kill --signal=SIGINT ingress || true\ndocker container kill --signal=SIGINT egress || true\n\n# Wait for the containers to stop (2)\nwhile [ $(docker inspect -f '{{.State.Running}}' openvidu 2>/dev/null) == \"true\" ] || \\\n    [ $(docker inspect -f '{{.State.Running}}' ingress 2>/dev/null) == \"true\" ] || \\\n    [ $(docker inspect -f '{{.State.Running}}' egress 2>/dev/null) == \"true\" ]; do\n    echo \"Waiting for containers to stop...\"\n    sleep 5\ndone\n
  1. This script stops the OpenVidu, Ingress, and Egress containers gracefully. The true at the end of each command is to avoid the script from stopping if the container is not running.
  2. This script waits for the containers to stop before exiting.

When all the containers are stopped, you can then stop the systemd service and remove the VM:

sudo systemctl stop openvidu\n
"},{"location":"docs/self-hosting/shared/openvidu-pro-removing-media-nodes/#removing-media-nodes-forcefully","title":"Removing Media Nodes Forcefully","text":"

To remove a Media Node forcefully, without considering the rooms, ingress, and egress processes running in the node, you can simply stop the OpenVidu service in the Media Node and delete the VM.

sudo systemctl stop openvidu\n
"},{"location":"docs/self-hosting/shared/openvidu-pro-start-stop-restart/","title":"Openvidu pro start stop restart","text":""},{"location":"docs/self-hosting/shared/openvidu-pro-start-stop-restart/#starting-stopping-and-restarting-openvidu","title":"Starting, stopping, and restarting OpenVidu","text":"

For every OpenVidu node, a systemd service is created during the installation process. This service allows you to start, stop, and restart the OpenVidu services easily.

Start OpenVidu

sudo systemctl start openvidu\n

Stop OpenVidu

sudo systemctl stop openvidu\n

Restart OpenVidu

sudo systemctl restart openvidu\n
"},{"location":"docs/self-hosting/shared/openvidu-pro-uninstall/","title":"Openvidu pro uninstall","text":""},{"location":"docs/self-hosting/shared/openvidu-pro-uninstall/#uninstalling-openvidu","title":"Uninstalling OpenVidu","text":"

To uninstall any OpenVidu Node, just execute the following commands:

sudo su\nsystemctl stop openvidu\nrm -rf /opt/openvidu/\nrm /etc/systemd/system/openvidu.service\n
"},{"location":"docs/self-hosting/shared/openvidu-pro-v2-compatibility-common/","title":"Openvidu pro v2 compatibility common","text":"

If you are using in COMPOSE_PROFILES at the .env file the v2compatibility profile, you will need to set the following parameters in the .env file for the OpenVidu V2 Compatibility service:

Parameter Description Default Value V2COMPAT_OPENVIDU_SECRET OpenVidu secret used to authenticate the OpenVidu V2 Compatibility service. In the .env file, this value is defined with LIVEKIT_API_SECRET. The value of LIVEKIT_API_SECRET in the .env file. V2COMPAT_OPENVIDU_WEBHOOK true to enable OpenVidu Webhook service. false otherwise. Valid values are true or false. false V2COMPAT_OPENVIDU_WEBHOOK_ENDPOINT HTTP(S) endpoint to send OpenVidu V2 Webhook events. Must be a valid URL. Example: V2COMPAT_OPENVIDU_WEBHOOK_ENDPOINT=http://myserver.com/webhook - V2COMPAT_OPENVIDU_WEBHOOK_HEADERS JSON Array list of headers to send in the OpenVidu V2 Webhook events. Example: V2COMPAT_OPENVIDU_WEBHOOK_HEADERS=[\"Content-Type: application/json\"] [] V2COMPAT_OPENVIDU_WEBHOOK_EVENTS Comma-separated list of OpenVidu V2 Webhook events to send. Example: V2COMPAT_OPENVIDU_WEBHOOK_EVENTS=sessionCreated,sessionDestroyed sessionCreated, sessionDestroyed, participantJoined, participantLeft, webrtcConnectionCreated, webrtcConnectionDestroyed, recordingStatusChanged, signalSent (All available events) V2COMPAT_OPENVIDU_PRO_AWS_S3_BUCKET S3 Bucket where to store recording files. openvidu V2COMPAT_OPENVIDU_PRO_AWS_S3_SERVICE_ENDPOINT S3 Endpoint where to store recording files. http://localhost:9100 V2COMPAT_OPENVIDU_PRO_AWS_ACCESS_KEY S3 Access Key of the S3 Bucket where to store recording files. - V2COMPAT_OPENVIDU_PRO_AWS_SECRET_KEY S3 Secret Key of the S3 Bucket where to store recording files. - V2COMPAT_OPENVIDU_PRO_AWS_REGION S3 Region of the S3 Bucket where to store recording files. us-east-1"},{"location":"docs/self-hosting/single-node/","title":"OpenVidu Single Node installation.","text":"

OpenVidu Single Node is part of the COMMUNITY edition of OpenVidu. You have the following deployment options:

Once your deployment is complete, refer to the following sections for configuration and management:

"},{"location":"docs/self-hosting/single-node/aws/admin/","title":"OpenVidu Single Node: AWS configuration and administration","text":"

AWS deployment of OpenVidu Single Node is internally identical to the on-premises deployment, so you can follow the same instructions from the On Premises Single Node for administration and configuration. The only difference is that the deployment is automated with AWS CloudFormation.

However, there are certain things worth mentioning:

"},{"location":"docs/self-hosting/single-node/aws/admin/#start-and-stop-openvidu-through-aws-console","title":"Start and stop OpenVidu through AWS Console","text":"

You can start and stop all services as explained in the On Premises Single Node section. But you can also start and stop the EC2 instance directly from the AWS Console. This will stop all services running in the instance and reduce AWS costs.

Stop OpenVidu Single NodeStart OpenVidu Single Node
  1. Go to the EC2 Dashboard of AWS.
  2. Right-click on the instance you want to start and select \"Stop instance\".

  1. Go to the EC2 Dashboard of AWS.
  2. Right-click on the instance you want to start and select \"Start instance\".

"},{"location":"docs/self-hosting/single-node/aws/admin/#change-the-instance-type","title":"Change the instance type","text":"

You can change the instance type of the OpenVidu Single Node instance to adapt it to your needs. To do this, follow these steps:

  1. Stop the instance.

  2. Right-click on the instance and select \"Instance Settings > Change Instance Type\".

    Change instance type

  3. Select the new instance type and click on \"Apply\".

"},{"location":"docs/self-hosting/single-node/aws/install/","title":"OpenVidu Single Node Installation: AWS","text":"

Regarding OpenVidu v2 compatibility

OpenVidu Single Node is not compatible with OpenVidu v2 API. For having compatibility with OpenVidu v2 applications, you must use OpenVidu Elastic or OpenVidu High Availability.

This section contains the instructions to deploy a production-ready OpenVidu Single Node deployment in AWS. Deployed services are the same as the On Premises Single Node Installation but automate the process with AWS CloudFormation.

First of all, import the template in the AWS CloudFormation console. You can click the following button...

Deploy OpenVidu Single Node in

...or access your AWS CloudFormation console and manually set this S3 URL in the Specify template section:

https://s3.eu-west-1.amazonaws.com/get.openvidu.io/community/singlenode/latest/aws/cf-openvidu-singlenode.yaml\n
Architecture overview

This is how the architecture of the deployment looks like:

OpenVidu Single Node AWS Architecture

"},{"location":"docs/self-hosting/single-node/aws/install/#cloudformation-parameters","title":"CloudFormation Parameters","text":"

Depending on your needs, you need to fill the following CloudFormation parameters:

"},{"location":"docs/self-hosting/single-node/aws/install/#domain-and-ssl-certificate-configuration","title":"Domain and SSL Certificate Configuration","text":"

These are the three possible scenarios you may have to configure in this section:

Let's Encrypt Certificate (recommended)Self-Signed CertificateCustom Certificates

For a production-ready setup, this scenario is ideal when you have an FQDN (Fully Qualified Domain Name) and an Elastic IP at your disposal. It leverages the services of Let's Encrypt to automatically generate valid certificates.

First, you need to have the FQDN pointing to the Elastic IP you are going to use.

Then, you need to fill in the following parameters:

As you can see, you need to specify the DomainName with your FQDN, the PublicElasticIP with the Elastic IP that the domain points to, and the LetsEncryptEmail with your email address for Let\u2019s Encrypt notifications. These parameters are mandatory.

This is the most straightforward option for deploying OpenVidu on AWS when you do not have a Fully Qualified Domain Name (FQDN). This method allows for the immediate use of OpenVidu in AWS using CloudFormation.

However, this convenience comes with the caveat that users will need to manually accept the certificate in their web browsers. Please be aware that this configuration is solely for developmental and testing purposes and is not suitable for a production environment.

These are the parameters needed in this section to use self-signed certificates:

You don\u2019t need to specify any parameters; just select the CertificateType as self-signed. The domain name used will be an AWS-generated one.

Opt for this method if you possess your own certificate for an existing FQDN. It enables you to deploy OpenVidu on AWS using your certificates.

You need to have a Fully Qualified Domain Name (FQDN) pointing to a previously created Elastic IP.

Also, you need a temporary HTTP server hosting your private and public certificate under a specific URL. These URLs are needed for the instance to be able to download and install your certificates.

The configured parameters would look like this:

You need to specify at OwnPublicCertificate and OwnPrivateCertificate the URLs where the public and private certificates are hosted, respectively. The DomainName and PublicElasticIP are mandatory parameters.

Certificates need to be in PEM format and the URLs must be accessible from the instance.

"},{"location":"docs/self-hosting/single-node/aws/install/#ec2-instance-configuration","title":"EC2 Instance Configuration","text":"

You need to specify some properties for the EC2 instance that will be created.

EC2 Instance configuration

The parameters in this section may look like this:

Simply select the type of instance you want to deploy at InstanceType, the SSH key you want to use to access the machine at KeyName, and the Amazon Image ID (AMI) to use at AmiId.

By default, the parameter AmiId is configured to use the latest LTS Ubuntu AMI, so ideally you don\u2019t need to modify this.

"},{"location":"docs/self-hosting/single-node/aws/install/#optional-turn-server-configuration-with-tls","title":"(Optional) TURN server configuration with TLS","text":"

This section is optional. It is useful when your users are behind a restrictive firewall that blocks UDP traffic. This parameter will only works if you are using letsencrypt or owncert as the CertificateType parameter.

TURN server configuration with TLS

The parameters in this section may look like this:

Set the TurnDomainName parameter to the domain name you intend to use for your TURN server. It should be pointing to the PublicElasticIP specified in the previous section.

If you are using letsencrypt as the CertificateType parameter, you can leave the TurnOwnPublicCertificate and TurnOwnPrivateCertificate parameters empty. If you are using owncert, you need to specify the URLs where the public and private certificates are hosted.

"},{"location":"docs/self-hosting/single-node/aws/install/#deploying-the-stack","title":"Deploying the Stack","text":"

When you are ready with your CloudFormation parameters, just click on \"Next\", specify in \"Stack failure options\" the option \"Preserve successfully provisioned resources\" to be able to troubleshoot the deployment in case of error, click on \"Next\" again, and finally \"Submit\".

When everything is ready, you will see the following links in the \"Outputs\" section of CloudFormation with all deployed services.

CloudFormation Outputs

"},{"location":"docs/self-hosting/single-node/aws/install/#configure-your-application-to-use-the-deployment","title":"Configure your Application to use the Deployment","text":"

To point your applications to your OpenVidu deployment, check the file of the EC2 instance /opt/openvidu/.env. All access credentials of all services are defined in this file.

Your authentication credentials and URLs to point your applications to are:

"},{"location":"docs/self-hosting/single-node/aws/install/#troubleshooting-initial-cloudformation-stack-creation","title":"Troubleshooting Initial CloudFormation Stack Creation","text":"

If something goes wrong during the initial CloudFormation stack creation, your stack may reach the CREATE_FAILED status for multiple reasons. It could be due to a misconfiguration in the parameters, a lack of permissions, or a problem with the AWS services. When this happens, the following steps can help you troubleshoot the issue and identify what went wrong:

  1. While deploying the stack, make sure at \"Stack failure options\" you have selected the option \"Preserve successfully provisioned resources\" to be able to troubleshoot the deployment in case of an error.

    Disable Rollback on failure

  2. Check if the EC2 instance or instances are running. If they are not, check the CloudFormation events for any error messages.

  3. If the EC2 instance or instances are running, SSH into the instance and check the logs of the following files:

    These logs will give you more information about the CloudFormation stack creation process.

  4. If everything seems fine, check the status and the logs of the installed OpenVidu services.

"},{"location":"docs/self-hosting/single-node/aws/install/#configuration-and-administration","title":"Configuration and administration","text":"

When your CloudFormation stack reaches the CREATE_COMPLETE status, your OpenVidu Single Node deployment is ready to use. You can check the Configuration and Administration section to learn how to manage your deployment.

"},{"location":"docs/self-hosting/single-node/on-premises/admin/","title":"OpenVidu Single Node: On-premises configuration and administration","text":"

The OpenVidu installer offers an easy way to deploy OpenVidu Single Node on-premises. However, once the deployment is complete, you may need to perform administrative tasks based on your specific requirements, such as changing passwords, specifying custom configurations, and starting or stopping services.

This section provides details on configuration parameters and common administrative tasks for on-premises OpenVidu Single Node deployments.

"},{"location":"docs/self-hosting/single-node/on-premises/admin/#openvidu-configuration","title":"OpenVidu configuration","text":""},{"location":"docs/self-hosting/single-node/on-premises/admin/#directory-structure","title":"Directory structure","text":"

OpenVidu is installed at /opt/openvidu/ and has a systemd service located at /etc/systemd/system/openvidu.service.

The directory structure of OpenVidu is as follows:

|-- /opt/openvidu\n    |-- config/\n    |-- custom-layout/\n    |-- data/\n    |-- deployment-info.yaml\n    |-- docker-compose.override.yml\n    |-- docker-compose.yml\n    |-- .env\n    `-- owncert/\n
"},{"location":"docs/self-hosting/single-node/on-premises/admin/#services-configuration","title":"Services Configuration","text":"

Some services deployed with OpenVidu have their own configuration files located in the /opt/openvidu/config/ directory, while others are configured in the .env file. Below are the services and their respective configuration files and parameters:

Info

The installer provides default configurations that work out of the box. However, you can modify these configurations to suit your specific requirements.

"},{"location":"docs/self-hosting/single-node/on-premises/admin/#configuration-files","title":"Configuration Files","text":"Service Description Configuration File Location Reference documentation OpenVidu Server Manages video rooms. It is compatible with LiveKit configuration and includes its own OpenVidu configuration parameters /opt/openvidu/config/livekit.yaml LiveKit Config Ingress Service Imports video from other sources into OpenVidu rooms. /opt/openvidu/config/ingress.yaml LiveKit Ingress Config Egress Service Exports video from OpenVidu rooms for recording or streaming. /opt/openvidu/config/egress.yaml LiveKit Egress Config Caddy Server Serves OpenVidu services and handles HTTPS. /opt/openvidu/config/caddy.yaml Caddy JSON Structure Prometheus Service Used for monitoring. /opt/openvidu/config/prometheus.yaml Prometheus Config Loki Service Used for log aggregation. /opt/openvidu/config/loki.yaml Loki Config Promtail Service Collects logs and sends them to Loki. /opt/openvidu/config/promtail.yaml Promtail Config Grafana Service Used for visualizing monitoring data. /opt/openvidu/config/grafana_config/ Grafana Config"},{"location":"docs/self-hosting/single-node/on-premises/admin/#environment-variables","title":"Environment Variables","text":"Service Description Environment Variables OpenVidu Server Manages video rooms. If you need to change the LiveKit API key and secret after the installation, check the advanced configuration section. Grafana Service Used for visualizing monitoring data. OpenVidu Dashboard Used to visualize OpenVidu Server Rooms, Ingress, and Egress services. Default App (OpenVidu Call) Default ready-to-use video conferencing app. Redis Service Used as a shared memory database for OpenVidu and Ingress/Egress services. If you need to change the Redis password after the installation, check the advanced configuration section. MinIO Service Used for storing recordings. If you need to change the MinIO access key and secret key after the installation, check the advanced configuration section. MongoDB Service Used for storing analytics and monitoring data. If you need to change the MongoDB username and password after the installation, check the advanced configuration section."},{"location":"docs/self-hosting/single-node/on-premises/admin/#openvidu-configuration-parameters","title":"OpenVidu Configuration Parameters","text":"

OpenVidu Server is built on top of LiveKit and offers extra configuration options. You can find the configuration file at /opt/openvidu/config/livekit.yaml. The additional parameters for configuring the OpenVidu Server are:

openvidu:\n    analytics: # (1)\n        enabled: true # (2)\n        mongo_url: mongodb://<MONGO_ADMIN_USERNAME>:<MONGO_ADMIN_PASSWORD>@localhost:20000/ # (3)\n        interval: 10s # (4)\n        expiration: 768h # (5)\n
  1. The analytics configuration should be defined at the openvidu level in the livekit.yaml file.
  2. This must be set to true to send analytics data to MongoDB. If set to false, no analytics data will be sent.
  3. MongoDB connection string. In OpenVidu Single Node, the MongoDB service is running on the same machine, so you can use localhost as the hostname. The default port in OpenVidu for MongoDB is 20000. MONGO_ADMIN_USERNAME and MONGO_ADMIN_PASSWORD are the credentials to access the MongoDB database.
  4. Time interval to send analytics data to MongoDB.
  5. Time to keep the analytics data in MongoDB. In this example, it is set to 32 days.
"},{"location":"docs/self-hosting/single-node/on-premises/admin/#starting-stopping-and-restarting-openvidu","title":"Starting, stopping, and restarting OpenVidu","text":"

You can start, stop, and restart the OpenVidu services using the following commands:

Start OpenVidu

sudo systemctl start openvidu\n

Stop OpenVidu

sudo systemctl stop openvidu\n

Restart OpenVidu

sudo systemctl restart openvidu\n
"},{"location":"docs/self-hosting/single-node/on-premises/admin/#checking-the-status-of-services","title":"Checking the status of services","text":"

You can check the status of the OpenVidu services using the following command:

cd /opt/openvidu/\ndocker compose ps\n

The services are operating correctly if you see an output similar to the following and there are no restarts from any of the services:

NAME         IMAGE                                        COMMAND                  SERVICE      CREATED          STATUS\napp          docker.io/openvidu/openvidu-call             \"docker-entrypoint.s\u2026\"   app          19 seconds ago   Up 16 seconds\ncaddy        docker.io/openvidu/openvidu-caddy            \"/bin/caddy run --co\u2026\"   caddy        19 seconds ago   Up 16 seconds\ndashboard    docker.io/openvidu/openvidu-dashboard        \"./openvidu-dashboard\"   dashboard    19 seconds ago   Up 16 seconds\negress       docker.io/livekit/egress                     \"/entrypoint.sh\"         egress       18 seconds ago   Up 14 seconds\ngrafana      docker.io/grafana/grafana                    \"/run.sh\"                grafana      18 seconds ago   Up 13 seconds\ningress      docker.io/livekit/ingress                    \"ingress\"                ingress      19 seconds ago   Up 14 seconds\nloki         docker.io/grafana/loki                       \"/usr/bin/loki -conf\u2026\"   loki         18 seconds ago   Up 14 seconds\nminio        docker.io/bitnami/minio                      \"/opt/bitnami/script\u2026\"   minio        18 seconds ago   Up 14 seconds\nmongo        docker.io/mongo                              \"docker-entrypoint.s\u2026\"   mongo        18 seconds ago   Up 15 seconds\nopenvidu     docker.io/openvidu/openvidu-server           \"/livekit-server --c\u2026\"   openvidu     19 seconds ago   Up 14 seconds\nprometheus   docker.io/prom/prometheus                    \"/bin/prometheus --c\u2026\"   prometheus   18 seconds ago   Up 14 seconds\npromtail     docker.io/grafana/promtail                   \"/usr/bin/promtail -\u2026\"   promtail     18 seconds ago   Up 14 seconds\nredis        docker.io/redis                              \"docker-entrypoint.s\u2026\"   redis        19 seconds ago   Up 15 seconds\n
"},{"location":"docs/self-hosting/single-node/on-premises/admin/#checking-logs","title":"Checking logs","text":"

If any of the services are not working as expected, you can check the logs of the services using the following command:

cd /opt/openvidu/\ndocker compose logs <service-name>\n

Replace <service-name> with the name of the service you want to check. For example, to check the logs of the OpenVidu Server, use the following command:

cd /opt/openvidu/\ndocker compose logs openvidu\n

To check the logs of all services, use the following command:

cd /opt/openvidu/\ndocker compose logs\n

You can also review your logs using the Grafana dashboard provided with OpenVidu. To access it, go to https://<your-domain.com>/grafana and use the credentials located in /opt/openvidu/.env to log in. Once inside, navigate to the \"Home\" section, select \"Dashboard\", and then click on \"OpenVidu > OpenVidu Logs\". All the logs will be displayed there.

"},{"location":"docs/self-hosting/single-node/on-premises/admin/#advanced-configuration","title":"Advanced Configuration","text":"

This section addresses advanced configuration scenarios for customizing your OpenVidu Single Node deployment. It includes automating the installation with personalized settings, enabling or disabling OpenVidu modules, and modifying global parameters such as the domain name, passwords, and API keys.

"},{"location":"docs/self-hosting/single-node/on-premises/admin/#automatic-installation-and-configuration","title":"Automatic installation and configuration","text":"

For environments like the cloud, where instances are frequently spun up and down, automating the application of custom configurations to OpenVidu may be useful for you.

If you need to automate these configuration changes, you can use the following script template as an example:

# 1. First install OpenVidu (1)\nsh <(curl -fsSL http://get.openvidu.io/community/singlenode/latest/install.sh) \\\n    --domain-name-or-ip='openvidu.example.io' \\\n    ... # Add the rest of the arguments\n\n# 2. Add custom configurations (2)\n######### APPLY CUSTOM CONFIGURATIONS #########\n# If you want to apply any modification to the configuration files\n# of the OpenVidu services at /opt/openvidu, you can do it in this section.\n\n# Example 1: Change public IP address announced by OpenVidu for WebRTC connections\nyq eval '.rtc.node_ip = 1.2.3.4' \\\n    -i /opt/openvidu/config/livekit.yaml\n\n# Example 2: Add a webhook to LiveKit\nyq eval '.webhook.urls += [\"http://new-endpoint.example.com/webhook\"]' \\\n    -i /opt/openvidu/config/livekit.yaml\n\n######### END CUSTOM CONFIGURATIONS #########\n\n# 3. Start OpenVidu # (3)\nsystemctl start openvidu\n
  1. First, install OpenVidu using the OpenVidu installer. Check the installation guide for more information.
  2. Add the custom configurations you need to apply to the OpenVidu services. You can use yq or other tools to modify the configuration files. You can find more information about yq here.
  3. Start OpenVidu to apply the changes.

Note

In case you want to deploy a specific version, just replace latest with the desired version. For example: 3.0.0.

Just install OpenVidu first with the installer and then run some extra commands to apply the custom configurations. This way, you can automate the process of installing OpenVidu and applying custom configurations.

"},{"location":"docs/self-hosting/single-node/on-premises/admin/#enabling-and-disabling-openvidu-modules","title":"Enabling and disabling OpenVidu modules","text":"

The COMPOSE_PROFILES parameter in the .env file allows you to enable or disable specific modules in OpenVidu. The following modules can be enabled or disabled:

Observability moduleApp module (Default App)

Enabling the observability module

In case you have installed OpenVidu with the observability module, you just need to enable the observability module in the .env file.

Otherwise, you can follow these steps to enable the observability module:

  1. Stop OpenVidu and backup the deployment

    sudo systemctl stop openvidu\nsudo cp -r /opt/openvidu/ /opt/openvidu_backup/\n

  2. Update the .env file

    Add to the COMPOSE_PROFILES the observability module. Also make sure to set up the GRAFANA_ADMIN_USERNAME and GRAFANA_ADMIN_PASSWORD parameters.

    If you have only the observability module enabled, your .env file should have the following environment variables:

    GRAFANA_ADMIN_USERNAME=\"<GRAFANA_ADMIN_USERNAME>\"\nGRAFANA_ADMIN_PASSWORD=\"<GRAFANA_ADMIN_PASSWORD>\"\n\nCOMPOSE_PROFILES=\"observability\"\n

  3. Enable Prometheus port in LiveKit

    Just add the following parameter in the config/livekit.yaml file:

    prometheus_port: 6789\n

Disabling the observability module

If you have the observability module enabled, and you want to disable it, just remove the observability module from the COMPOSE_PROFILES parameter in the .env file.

Enabling the app module

In case you have installed OpenVidu with the app module, you just need to enable the app module in the .env file.

Otherwise, you can follow these steps to enable the app module:

  1. Stop OpenVidu and backup the deployment

    sudo systemctl stop openvidu\nsudo cp -r /opt/openvidu/ /opt/openvidu_backup/\n

  2. Update the .env file

    Add to the COMPOSE_PROFILES the app module.

    If you have only the app module enabled, your .env file should have the following environment variable:

    COMPOSE_PROFILES=\"app\"\n

  3. Enable LiveKit webhooks for the Default App

    Just add the following parameter in the config/livekit.yaml file:

    webhook:\n    api_key: \"<LIVEKIT_API_KEY>\"\n    urls:\n        - http://localhost:6080/api/webhook\n

    Where <LIVEKIT_API_KEY> is the LIVEKIT_API_KEY parameter in the .env file.

Disabling the app module

If you have the app module enabled, and you want to disable it, just remove the app module from the COMPOSE_PROFILES parameter in the .env file.

"},{"location":"docs/self-hosting/single-node/on-premises/admin/#global-configuration-changes","title":"Global configuration changes","text":"

Some configuration parameters may require modifying multiple configuration files. Below are some examples of advanced configurations and how to apply them:

Info

Usually, this is not needed because the installer takes care of generating all of this parameters. However, it is necessary if any password, credential, or domain change is needed.

Danger

Advanced configurations should be performed with caution. Incorrect configurations can lead to service failures or unexpected behavior.

Before making any changes, make sure to back up your installation by creating a snapshot of your server or by copying the /opt/openvidu/ directory to a safe location. For example:

sudo cp -r /opt/openvidu/ /opt/openvidu_backup/\n
Changing DOMAIN_OR_PUBLIC_IPChanging REDIS_PASSWORDChanging LIVEKIT_API_KEY and LIVEKIT_API_SECRETChanging MINIO_ACCESS_KEY and MINIO_SECRET_KEYChanging MONGO_ADMIN_USERNAME and MONGO_ADMIN_PASSWORD

To change all occurrences of the domain or public IP address in the configuration files, follow these steps:

  1. Stop OpenVidu and back up the deployment

    sudo systemctl stop openvidu\nsudo cp -r /opt/openvidu/ /opt/openvidu_backup/\n

  2. Find the current locations of DOMAIN_OR_PUBLIC_IP

    With the following commands, you can find all occurrences of the current domain or public IP address in the configuration files:

    sudo su\ncd /opt/openvidu/\nCURRENT_DOMAIN_OR_PUBLIC_IP=\"$(grep '^DOMAIN_OR_PUBLIC_IP' /opt/openvidu/.env | cut -d '=' -f 2)\"\ngrep --exclude-dir=data -IHnr \"$CURRENT_DOMAIN_OR_PUBLIC_IP\" .\n
    Example output

    The output should look similar to the following:

    ./.env:DOMAIN_OR_PUBLIC_IP=<CURRENT_DOMAIN_OR_PUBLIC_IP>\n./config/caddy.yaml:        - certificate: /owncert/<CURRENT_DOMAIN_OR_PUBLIC_IP>.cert\n./config/caddy.yaml:          key: /owncert/<CURRENT_DOMAIN_OR_PUBLIC_IP>.key\n./config/caddy.yaml:            - <CURRENT_DOMAIN_OR_PUBLIC_IP>\n./config/caddy.yaml:                    - <CURRENT_DOMAIN_OR_PUBLIC_IP>\n./config/caddy.yaml:                        - <CURRENT_DOMAIN_OR_PUBLIC_IP>\n./config/caddy.yaml:                    - <CURRENT_DOMAIN_OR_PUBLIC_IP>\n./config/caddy.yaml:                        - <CURRENT_DOMAIN_OR_PUBLIC_IP>\n./config/caddy.yaml:                  - <CURRENT_DOMAIN_OR_PUBLIC_IP>\n./config/promtail.yaml:          cluster_id: <CURRENT_DOMAIN_OR_PUBLIC_IP>\n./config/livekit.yaml:    rtmp_base_url: rtmps://<CURRENT_DOMAIN_OR_PUBLIC_IP>:1935/rtmp\n./config/livekit.yaml:    whip_base_url: https://<CURRENT_DOMAIN_OR_PUBLIC_IP>/whip\n

    Note

    Don't worry if some values are different in your output. It may vary depending on the parameters you've used to install OpenVidu.

  3. Update the Following Files:

    Based on the output from the previous step, update the following files with the new domain or public IP address:

  4. Verify the changes

    These commands will list all occurrences of the new DOMAIN_OR_PUBLIC_IP in the configuration files. The output should match the locations found in the initial search but with the new domain or public IP address.

    sudo su\ncd /opt/openvidu/\nNEW_DOMAIN_OR_PUBLIC_IP=\"<NEW_DOMAIN_OR_PUBLIC_IP>\"\ngrep --exclude-dir=data -IHnr \"$NEW_DOMAIN_OR_PUBLIC_IP\" .\n

  5. Start OpenVidu

    sudo systemctl start openvidu\n

Some notes on changing the DOMAIN_OR_PUBLIC_IP parameter:

To change the REDIS_PASSWORD parameter, follow these steps:

  1. Stop OpenVidu and back up the deployment

    sudo systemctl stop openvidu\nsudo cp -r /opt/openvidu/ /opt/openvidu_backup/\n

  2. Find the current locations of REDIS_PASSWORD

    With the following command, you can find all occurrences of the current REDIS_PASSWORD in the configuration files:

    sudo su\ncd /opt/openvidu/\nCURRENT_REDIS_PASSWORD=\"$(grep REDIS_PASSWORD /opt/openvidu/.env | cut -d '=' -f 2)\"\ngrep --exclude-dir=data -IHnr \"$CURRENT_REDIS_PASSWORD\" .\n
    Example output

    The output should look similar to the following:

    ./.env:REDIS_PASSWORD=<CURRENT_REDIS_PASSWORD>\n./config/egress.yaml:    password: <CURRENT_REDIS_PASSWORD>\n./config/ingress.yaml:    password: <CURRENT_REDIS_PASSWORD>\n./config/livekit.yaml:    password: <CURRENT_REDIS_PASSWORD>\n

  3. Update the Following Files:

    Based on the output from the previous step, update the following files with the new value:

  4. Verify the changes

    These commands will list all occurrences of the new REDIS_PASSWORD in the configuration files. The output should match the locations found in the initial search but with the new value.

    sudo su\ncd /opt/openvidu/\nNEW_REDIS_PASSWORD=\"<NEW_REDIS_PASSWORD>\"\ngrep --exclude-dir=data -IHnr \"$NEW_REDIS_PASSWORD\" .\n

  5. Start OpenVidu

    sudo systemctl start openvidu\n

To change the LIVEKIT_API_KEY and LIVEKIT_API_SECRET parameters, follow these steps:

  1. Stop OpenVidu and back up the deployment

    sudo systemctl stop openvidu\nsudo cp -r /opt/openvidu/ /opt/openvidu_backup/\n

  2. Find the current locations of LIVEKIT_API_KEY and LIVEKIT_API_SECRET

    With the following commands, you can find all occurrences of the current LIVEKIT_API_KEY and LIVEKIT_API_SECRET in the configuration files:

    sudo su\ncd /opt/openvidu/\nCURRENT_LIVEKIT_API_KEY=\"$(grep LIVEKIT_API_KEY /opt/openvidu/.env | cut -d '=' -f 2)\"\nCURRENT_LIVEKIT_API_SECRET=\"$(grep LIVEKIT_API_SECRET /opt/openvidu/.env | cut -d '=' -f 2)\"\ngrep --exclude-dir=data -IHnr \"$CURRENT_LIVEKIT_API_KEY\" .\ngrep --exclude-dir=data -IHnr \"$CURRENT_LIVEKIT_API_SECRET\" .\n
    Example output

    The output should look similar to the following for LIVEKIT_API_KEY:

    ./.env:LIVEKIT_API_KEY=<CURRENT_LIVEKIT_API_KEY>\n./config/egress.yaml:api_key: <CURRENT_LIVEKIT_API_KEY>\n./config/ingress.yaml:api_key:<CURRENT_LIVEKIT_API_KEY>\n./config/livekit.yaml:    <CURRENT_LIVEKIT_API_KEY>: <CURRENT_LIVEKIT_API_SECRET>\n./config/livekit.yaml:    api_key: <CURRENT_LIVEKIT_API_KEY>\n

    And for LIVEKIT_API_SECRET:

    ./.env:LIVEKIT_API_SECRET=<CURRENT_LIVEKIT_API_SECRET>\n./config/egress.yaml:api_secret: <CURRENT_LIVEKIT_API_SECRET>\n./config/ingress.yaml:api_secret: <CURRENT_LIVEKIT_API_SECRET>\n./config/livekit.yaml:    <CURRENT_LIVEKIT_API_KEY>: <CURRENT_LIVEKIT_API_SECRET>\n

  3. Update the Following Files:

    Based on the output from the previous step, update the following files with the new values:

  4. Verify the changes

    These commands will list all occurrences of the new LIVEKIT_API_KEY and LIVEKIT_API_SECRET in the configuration files. The output should match the locations found in the initial search but with the new values.

    sudo su\ncd /opt/openvidu/\nNEW_LIVEKIT_API_KEY=\"<NEW_LIVEKIT_API_KEY>\"\nNEW_LIVEKIT_API_SECRET=\"<NEW_LIVEKIT_API_SECRET>\"\ngrep --exclude-dir=data -IHnr \"$NEW_LIVEKIT_API_KEY\" .\ngrep --exclude-dir=data -IHnr \"$NEW_LIVEKIT_API_SECRET\" .\n

  5. Start OpenVidu

    sudo systemctl start openvidu\n

To change the MINIO_ACCESS_KEY and MINIO_SECRET_KEY parameters, follow these steps:

  1. Stop OpenVidu and back up the deployment

    sudo systemctl stop openvidu\nsudo cp -r /opt/openvidu/ /opt/openvidu_backup/\n

  2. Find the current locations of MINIO_ACCESS_KEY and MINIO_SECRET_KEY

    With the following commands, you can find all occurrences of the current MINIO_ACCESS_KEY and MINIO_SECRET_KEY in the configuration files:

    sudo su\ncd /opt/openvidu/\nCURRENT_MINIO_ACCESS_KEY=\"$(grep MINIO_ACCESS_KEY /opt/openvidu/.env | cut -d '=' -f 2)\"\nCURRENT_MINIO_SECRET_KEY=\"$(grep MINIO_SECRET_KEY /opt/openvidu/.env | cut -d '=' -f 2)\"\ngrep --exclude-dir=data -IHnr \"$CURRENT_MINIO_ACCESS_KEY\" .\ngrep --exclude-dir=data -IHnr \"$CURRENT_MINIO_SECRET_KEY\" .\n
    Example output

    The output should look similar to the following for MINIO_ACCESS_KEY:

    ./.env:MINIO_ACCESS_KEY=<CURRENT_MINIO_ACCESS_KEY>\n./config/egress.yaml:    access_key: <CURRENT_MINIO_ACCESS_KEY>\n

    And for MINIO_SECRET_KEY:

    ./.env:MINIO_SECRET_KEY=<CURRENT_MINIO_SECRET_KEY>\n./config/egress.yaml:    secret: <CURRENT_MINIO_SECRET_KEY>\n

  3. Update the Following Files:

    Based on the output from the previous step, update the following files with the new values:

  4. Verify the changes

    These commands will list all occurrences of the new MINIO_ACCESS_KEY and MINIO_SECRET_KEY in the configuration files. The output should match the locations found in the initial search but with the new values.

    sudo su\ncd /opt/openvidu/\nNEW_MINIO_ACCESS_KEY=\"<NEW_MINIO_ACCESS_KEY>\"\nNEW_MINIO_SECRET_KEY=\"<NEW_MINIO_SECRET_KEY>\"\ngrep --exclude-dir=data -IHnr \"$NEW_MINIO_ACCESS_KEY\" .\ngrep --exclude-dir=data -IHnr \"$NEW_MINIO_SECRET_KEY\" .\n

  5. Start OpenVidu

    sudo systemctl start openvidu\n

To change the MONGO_ADMIN_USERNAME and MONGO_ADMIN_PASSWORD parameters, follow these steps:

  1. Stop OpenVidu and back up the deployment

    sudo systemctl stop openvidu\nsudo cp -r /opt/openvidu/ /opt/openvidu_backup/\n

  2. Change the password through the MongoDB shell

    With OpenVidu running, change the password with the following commands:

    sudo su\ncd /opt/openvidu/\nCURRENT_MONGO_ADMIN_USERNAME=\"$(grep MONGO_ADMIN_USERNAME /opt/openvidu/.env | cut -d '=' -f 2)\"\nCURRENT_MONGO_ADMIN_PASSWORD=\"$(grep MONGO_ADMIN_PASSWORD /opt/openvidu/.env | cut -d '=' -f 2)\"\nNEW_MONGO_ADMIN_USERNAME=\"<NEW_MONGO_ADMIN_USERNAME>\"\nNEW_MONGO_ADMIN_PASSWORD=\"<NEW_MONGO_ADMIN_PASSWORD>\"\n\n# Change username\ndocker exec -it mongo \\\n    mongosh admin \\\n    --port 20000 \\\n    --username \"$CURRENT_MONGO_ADMIN_USERNAME\" \\\n    --password \"$CURRENT_MONGO_ADMIN_PASSWORD\" \\\n    --eval \"db.system.users.updateOne({user: '$CURRENT_MONGO_ADMIN_USERNAME'}, {\\$set: {user: '$NEW_MONGO_ADMIN_USERNAME'}})\"\n\n# Change password\ndocker exec -it mongo \\\n    mongosh admin \\\n    --port 20000 \\\n    --username \"$NEW_MONGO_ADMIN_USERNAME\" \\\n    --password \"$CURRENT_MONGO_ADMIN_PASSWORD\" \\\n    --eval \"db.changeUserPassword('$NEW_MONGO_ADMIN_USERNAME', '$NEW_MONGO_ADMIN_PASSWORD')\"\n

    After running these commands, the new username and password will be updated in the MongoDB database, but you still need to change the configuration files.

  3. Stop OpenVidu

    sudo systemctl stop openvidu\n

  4. Find the current locations of MONGO_ADMIN_USERNAME and MONGO_ADMIN_PASSWORD

    With the following commands, you can find all occurrences of the current MONGO_ADMIN_USERNAME and MONGO_ADMIN_PASSWORD in the configuration files:

    sudo su\ncd /opt/openvidu/\nCURRENT_MONGO_ADMIN_USERNAME=\"$(grep MONGO_ADMIN_USERNAME /opt/openvidu/.env | cut -d '=' -f 2)\"\nCURRENT_MONGO_ADMIN_PASSWORD=\"$(grep MONGO_ADMIN_PASSWORD /opt/openvidu/.env | cut -d '=' -f 2)\"\ngrep --exclude-dir=data -IHnr \"$CURRENT_MONGO_ADMIN_USERNAME\" .\ngrep --exclude-dir=data -IHnr \"$CURRENT_MONGO_ADMIN_PASSWORD\" .\n
    Example output

    The output should look similar to the following for MONGO_ADMIN_USERNAME:

    ./.env:MONGO_ADMIN_USERNAME=<CURRENT_MONGO_ADMIN_USERNAME>\n./config/livekit.yaml:        mongo_url: mongodb://<CURRENT_MONGO_ADMIN_USERNAME>:<CURRENT_MONGO_ADMIN_PASSWORD>@127.0.0.1:20000\n

    And for MONGO_ADMIN_PASSWORD:

    ./.env:MONGO_ADMIN_PASSWORD=<CURRENT_MONGO_ADMIN_PASSWORD>\n./config/livekit.yaml:        mongo_url: mongodb://<CURRENT_MONGO_ADMIN_USERNAME>:<CURRENT_MONGO_ADMIN_PASSWORD>@127.0.0.1:20000\n

  5. Update the Following Files:

    Based on the output from the previous step, update the following files with the new values:

  6. Verify the changes

    These commands will list all occurrences of the new MONGO_ADMIN_USERNAME and MONGO_ADMIN_PASSWORD in the configuration files. The output should match the locations found in the initial search but with the new values.

    sudo su\ncd /opt/openvidu/\nNEW_MONGO_ADMIN_USERNAME=\"<NEW_MONGO_ADMIN_USERNAME>\"\nNEW_MONGO_ADMIN_PASSWORD=\"<NEW_MONGO_ADMIN_PASSWORD>\"\ngrep --exclude-dir=data -IHnr \"$NEW_MONGO_ADMIN_USERNAME\" .\ngrep --exclude-dir=data -IHnr \"$NEW_MONGO_ADMIN_PASSWORD\" .\n

  7. Start OpenVidu

    sudo systemctl start openvidu\n
"},{"location":"docs/self-hosting/single-node/on-premises/admin/#uninstalling-openvidu","title":"Uninstalling OpenVidu","text":"

To uninstall OpenVidu, just execute the following commands:

sudo su\nsystemctl stop openvidu\nrm -rf /opt/openvidu/\nrm /etc/systemd/system/openvidu.service\n
"},{"location":"docs/self-hosting/single-node/on-premises/install/","title":"OpenVidu Single Node Installation: On-premises","text":"

Regarding OpenVidu v2 compatibility

OpenVidu Single Node is not compatible with OpenVidu v2 API. For having compatibility with OpenVidu v2 applications, you must use OpenVidu Elastic or OpenVidu High Availability.

This section contains the instructions to deploy a production-ready OpenVidu Single Node deployment on-premises. It is a deployment based on Docker and Docker Compose, which will automatically configure all the necessary services for OpenVidu to work properly.

Architecture overview

This is how the architecture of the deployment looks like:

OpenVidu Single Node On Premises Architecture

All services are deployed on a single machine, which includes:

"},{"location":"docs/self-hosting/single-node/on-premises/install/#prerequisites","title":"Prerequisites","text":"

Before starting the installation process, make sure you have the following prerequisites:

"},{"location":"docs/self-hosting/single-node/on-premises/install/#port-rules","title":"Port rules","text":"

Ensure all these rules are configured in your firewall, security group, or any kind of network configuration that you have in your machine.

Inbound port rules:

Protocol Ports Source Description TCP 80 0.0.0.0/0, ::/0 Redirect HTTP traffic to HTTPS and Let's Encrypt validation. TCP 443 0.0.0.0/0, ::/0 Allows access to the following: UDP 443 0.0.0.0/0, ::/0 STUN/TURN server over UDP. TCP 1935 0.0.0.0/0, ::/0 (Optional), only needed if you want to ingest RTMP streams using Ingress service. TCP 7881 0.0.0.0/0, ::/0 (Optional), only needed if you want to allow WebRTC over TCP. UDP 7885 0.0.0.0/0, ::/0 (Optional), only needed if you want to ingest WebRTC using WHIP protocol. TCP 9000 0.0.0.0/0, ::/0 (Optional), only needed if you want to expose MinIO publicly. UDP 50000 - 60000 0.0.0.0/0, ::/0 WebRTC Media traffic.

Outbound port rules:

Typically, all outbound traffic is allowed.

"},{"location":"docs/self-hosting/single-node/on-premises/install/#guided-installation","title":"Guided Installation","text":"

Before the installation, ensure that your machine meets the prerequisites and the port rules. Then, execute the following command on the machine where you want to deploy OpenVidu:

sh <(curl -fsSL http://get.openvidu.io/community/singlenode/latest/install.sh)\n

Note

In case you want to deploy a specific version, just replace latest with the desired version. For example: 3.0.0.

A wizard will guide you through the installation process. You will be asked for the following information:

The rest of the parameters are secrets, usernames, and passwords. If empty, the wizard will generate random values for them.

When the installation process finishes, you will see the following message:

> - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - <\n>                                                                             <\n>  \ud83c\udf89 OpenVidu Community Installation Finished Successfully! \ud83c\udf89               <\n>                                                                             <\n> - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - <\n

OpenVidu will be installed at /opt/openvidu and configured as a systemd service. You can start the service with the following command:

systemctl start openvidu\n

If everything goes well, all containers will be up and running without restarts, and you will be able to access any of the following services:

"},{"location":"docs/self-hosting/single-node/on-premises/install/#configure-your-application-to-use-the-deployment","title":"Configure your Application to use the Deployment","text":"

To point your applications to your OpenVidu deployment, check the file at /opt/openvidu/.env. All access credentials of all services are defined in this file.

Your authentication credentials and URLs to point your applications to are:

"},{"location":"docs/self-hosting/single-node/on-premises/install/#non-interactive-installation","title":"Non-interactive installation","text":"

If you want to automate the installation process, you can generate a command with all the parameters needed to install OpenVidu by answering the wizard questions. You can do this by running the following command:

docker run -it openvidu/openvidu-installer:latest \\\n    --deployment-type=single_node\n

Note

In case you want to deploy a specific version, just replace latest with the desired version. For example: 3.0.0.

This is going to generate a command like this, but it may vary depending on the answers you provide. Here are three examples of the command you can run depending on the certificate type you choose:

Let's Encrypt certificatesSelf-signed certificatesCustom certificates

Example using Let's Encrypt certificates:

sh <(curl -fsSL http://get.openvidu.io/community/singlenode/latest/install.sh) \\\n    --domain-name-or-ip='openvidu.example.io' \\\n    --enabled-modules='observability,app' \\\n    --turn-domain-name='turn.example.io' \\\n    --livekit-api-key='xxxxx' \\\n    --livekit-api-secret='xxxxx' \\\n    --dashboard-admin-user='xxxxx' \\\n    --dashboard-admin-password='xxxxx' \\\n    --redis-password='xxxxx' \\\n    --minio-access-key='xxxxx' \\\n    --minio-secret-key='xxxxx' \\\n    --mongo-admin-user='xxxxx' \\\n    --mongo-admin-password='xxxxx' \\\n    --grafana-admin-user='xxxxx' \\\n    --grafana-admin-password='xxxxx' \\\n    --default-app-user='xxxxx' \\\n    --default-app-password='xxxxx' \\\n    --default-app-admin-user='xxxxx' \\\n    --default-app-admin-password='xxxxx' \\\n    --certificate-type='letsencrypt' \\\n    --letsencrypt-email='example@example.io'\n

Note

In case you want to deploy a specific version, just replace latest with the desired version. For example: 3.0.0.

Example using self-signed certificates:

sh <(curl -fsSL http://get.openvidu.io/community/singlenode/latest/install.sh) \\\n    --domain-name-or-ip='openvidu.example.io' \\\n    --enabled-modules='observability,app' \\\n    --turn-domain-name='turn.example.io' \\\n    --livekit-api-key='xxxxx' \\\n    --livekit-api-secret='xxxxx' \\\n    --dashboard-admin-user='xxxxx' \\\n    --dashboard-admin-password='xxxxx' \\\n    --redis-password='xxxxx' \\\n    --minio-access-key='xxxxx' \\\n    --minio-secret-key='xxxxx' \\\n    --mongo-admin-user='xxxxx' \\\n    --mongo-admin-password='xxxxx' \\\n    --grafana-admin-user='xxxxx' \\\n    --grafana-admin-password='xxxxx' \\\n    --default-app-user='xxxxx' \\\n    --default-app-password='xxxxx' \\\n    --default-app-admin-user='xxxxx' \\\n    --default-app-admin-password='xxxxx' \\\n    --certificate-type='selfsigned' \\\n    --letsencrypt-email='example@example.io'\n

Note

In case you want to deploy a specific version, just replace latest with the desired version. For example: 3.0.0.

Example using custom certificates:

CERT_PRIVATE_KEY=$(cat privkey.pem | base64 -w 0)\nCERT_PUBLIC_KEY=$(cat fullchain.pem | base64 -w 0)\n\n# Optional, only if you want to enable TURN with TLS\nCERT_TURN_PRIVATE_KEY=$(cat turn-privkey.pem | base64 -w 0)\nCERT_TURN_PUBLIC_KEY=$(cat turn-fullchain.pem | base64 -w 0)\n\nsh <(curl -fsSL http://get.openvidu.io/community/singlenode/latest/install.sh) \\\n    --domain-name-or-ip='openvidu.example.io' \\\n    --enabled-modules='observability,app' \\\n    --turn-domain-name='turn.example.io' \\\n    --livekit-api-key='xxxxx' \\\n    --livekit-api-secret='xxxxx' \\\n    --dashboard-admin-user='xxxxx' \\\n    --dashboard-admin-password='xxxxx' \\\n    --redis-password='xxxxx' \\\n    --minio-access-key='xxxxx' \\\n    --minio-secret-key='xxxxx' \\\n    --mongo-admin-user='xxxxx' \\\n    --mongo-admin-password='xxxxx' \\\n    --grafana-admin-user='xxxxx' \\\n    --grafana-admin-password='xxxxx' \\\n    --default-app-user='xxxxx' \\\n    --default-app-password='xxxxx' \\\n    --default-app-admin-user='xxxxx' \\\n    --default-app-admin-password='xxxxx' \\\n    --certificate-type='owncert' \\\n    --owncert-private-key=\"$CERT_PRIVATE_KEY\" \\\n    --owncert-public-key=\"$CERT_PUBLIC_KEY\" \\\n    --turn-owncert-private-key=\"$CERT_TURN_PRIVATE_KEY\" \\\n    --turn-owncert-public-key=\"$CERT_TURN_PUBLIC_KEY\"\n

Note

In case you want to deploy a specific version, just replace latest with the desired version. For example: 3.0.0.

You can run that command in a CI/CD pipeline or in a script to automate the installation process.

Some notes about the command:

To start OpenVidu, remember to run:

systemctl start openvidu\n
"},{"location":"docs/self-hosting/single-node/on-premises/install/#configuration-and-administration","title":"Configuration and administration","text":"

Once you have OpenVidu deployed, you can check the Configuration and Administration section to learn how to manage your OpenVidu Single Node deployment.

"},{"location":"docs/self-hosting/single-node/shared/v2compat-warning/","title":"V2compat warning","text":"

Regarding OpenVidu v2 compatibility

OpenVidu Single Node is not compatible with OpenVidu v2 API. For having compatibility with OpenVidu v2 applications, you must use OpenVidu Elastic or OpenVidu High Availability.

"},{"location":"docs/tutorials/angular-components/","title":"Angular Components tutorials","text":"Angular Components

In the following tutorials you can learn how to use each one of the available Angular Components to build your application UI tailored to your needs:

"},{"location":"docs/tutorials/angular-components/openvidu-additional-panels/","title":"openvidu-additional-panels","text":"

Source code

The openvidu-additional-panels tutorial demonstrates how to add new panels to the videoconference, providing a more tailored user experience.

Adding new videoconference panels is made simple with the AdditionalPanelsDirective, which offers a straightforward way to replace and adapt the PanelComponent to your needs.

OpenVidu Components - Additional Panel

This tutorial combines the use of the ToolbarAdditionalPanelButtonsDirective and the AdditionalPanelsDirective to add new buttons to the toolbar and new panels to the videoconference. If you want to learn how to add new buttons to the toolbar, you can check the openvidu-toolbar-panel-buttons tutorial.

"},{"location":"docs/tutorials/angular-components/openvidu-additional-panels/#running-this-tutorial","title":"Running this tutorial","text":""},{"location":"docs/tutorials/angular-components/openvidu-additional-panels/#1-run-openvidu-server","title":"1. Run OpenVidu Server","text":"Run OpenVidu locallyDeploy OpenVidu

  1. Download OpenVidu

    git clone https://github.com/OpenVidu/openvidu-local-deployment\n

  2. Configure the local deployment

    Windows macOS Linux 
    cd openvidu-local-deployment/community\n.\\configure_lan_private_ip_windows.bat\n
    cd openvidu-local-deployment/community\n./configure_lan_private_ip_macos.sh\n
    cd openvidu-local-deployment/community\n./configure_lan_private_ip_linux.sh\n

  3. Run OpenVidu

    docker compose up\n

To use a production-ready OpenVidu deployment, visit the official deployment guide.

"},{"location":"docs/tutorials/angular-components/openvidu-additional-panels/#2-download-the-tutorial-code","title":"2. Download the tutorial code","text":"
git clone https://github.com/OpenVidu/openvidu-livekit-tutorials.git\ngit clone https://github.com/OpenVidu/openvidu-tutorials.git\n
"},{"location":"docs/tutorials/angular-components/openvidu-additional-panels/#3-run-the-server-application","title":"3. Run the server application","text":"Node Go Ruby Java Python Rust PHP .NET

To run this server application, you need Node installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/node\n
  2. Install dependencies 
    npm install\n
  3. Run the application 
    npm start\n

To run this server application, you need Go installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/go\n
  2. Run the application 
    go run main.go\n

To run this server application, you need Ruby installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/ruby\n
  2. Install dependencies 
    bundle install\n
  3. Run the application 
    ruby app.rb\n

To run this server application, you need Java and Maven installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/java\n
  2. Run the application 
    mvn spring-boot:run\n

To run this server application, you need Python 3 installed on your device.

  1. Navigate into the server directory

    cd openvidu-livekit-tutorials/application-server/python\n

  2. Create a python virtual environment

    python -m venv venv\n

  3. Activate the virtual environment

    Windows macOS Linux 
    .\\venv\\Scripts\\activate\n
    . ./venv/bin/activate\n
    . ./venv/bin/activate\n

  4. Install dependencies

    pip install -r requirements.txt\n

  5. Run the application

    python app.py\n

To run this server application, you need Rust installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/rust\n
  2. Run the application 
    cargo run\n

To run this server application, you need PHP and Composer installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/php\n
  2. Install dependencies 
    composer install\n
  3. Run the application 
    composer start\n

To run this server application, you need .NET installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/dotnet\n
  2. Run the application 
    dotnet run\n

Warning

This .NET server application needs the LIVEKIT_API_SECRET env variable to be at least 32 characters long. Make sure to update it here and in your OpenVidu Server.

"},{"location":"docs/tutorials/angular-components/openvidu-additional-panels/#4-run-the-openvidu-additional-panels-tutorial","title":"4. Run the openvidu-additional-panels tutorial","text":"

To run the client application tutorial, you need Node installed on your development computer.

  1. Navigate into the application client directory:

      cd openvidu-tutorials/openvidu-components/openvidu-additional-panels\n

  2. Install the required dependencies:

      npm install\n

  3. Serve the application:

      npm start\n

Once the server is up and running, you can test the application by visiting http://localhost:5080.

Accessing your application client from other devices in your local network

One advantage of running OpenVidu locally is that you can test your application client with other devices in your local network very easily without worrying about SSL certificates.

Access your application client through https://xxx-yyy-zzz-www.openvidu-local.dev:5443, where xxx-yyy-zzz-www part of the domain is your LAN private IP address with dashes (-) instead of dots (.). For more information, see section Accessing your app from other devices in your network.

"},{"location":"docs/tutorials/angular-components/openvidu-additional-panels/#understanding-the-code","title":"Understanding the code","text":"

This tutorial is an Angular project generated with Angular CLI tool. Therefore, you will see many configuration files and other components that are not the primary focus of this tutorial. We will concentrate on the following files in the src directory:

To use OpenVidu Components Angular in your application, you need to install the library and import the OpenViduComponentsModule in your Angular module. Let's see how to do this:

  1. Create an Angular Project (version 17 or higher)

    To begin, you will need to create a new Angular project if you haven't already. Ensure you have Node.js and the Angular CLI installed. Then, run the following command to create a new Angular project:

    ng new your-project-name\n

    Replace your-project-name with the desired name for your project.

  2. Add Angular Material to your project

    OpenVidu Components Angular needs Angular Material, which provides a range of UI components. To add Angular Material to your project, navigate to your project directory and run:

    ng add @angular/material\n

  3. Install OpenVidu Components Angular

    With your Angular project set up, it's time to add videoconferencing capabilities with OpenVidu Components Angular. Install the library using npm:

    npm install openvidu-components-angular\n

  4. Import and use OpenVidu Components Angular

    To use OpenVidu Components Angular in your application, you need to:

    1. Import the OpenViduComponentsModule in your Angular application.
    2. Configure the module with the OpenViduComponentsConfig object.
    3. Add the component to your template file.
    4. Assign the OpenVidu token and LiveKit URL to the component.
    5. Customize the appearance of the components using CSS variables.
main.tsapp.component.tsstyles.scss

In your main.ts application file, import the it and configure it as follows:

// Other imports ...\n\nimport { OpenViduComponentsModule, OpenViduComponentsConfig } from 'openvidu-components-angular';\n\nconst config: OpenViduComponentsConfig = {\n    production: true,\n};\n\nbootstrapApplication(AppComponent, {\n    providers: [\n        importProvidersFrom(\n            OpenViduComponentsModule.forRoot(config)\n            // Other imports ...\n        ),\n        provideAnimations(),\n    ],\n}).catch((err) => console.error(err));\n

Use the ov-videoconference component to create a videoconference. This component requires a token to connect to the OpenVidu Room. The AppComponent class is responsible for requesting the token and passing it to the ov-videoconference component.

import { OpenViduComponentsModule } from 'openvidu-components-angular';\n\n@Component({\n  selector: 'app-root',\n  template:`\n    <!-- OpenVidu Video Conference Component -->\n    <ov-videoconference\n      [token]=\"token\"\n      [livekitUrl]=\"LIVEKIT_URL\"\n      (onTokenRequested)=\"onTokenRequested($event)\"\n    >\n      <!-- Additional Toolbar Buttons -->\n      <div *ovToolbarAdditionalPanelButtons style=\"text-align: center;\">\n        <button mat-icon-button (click)=\"toggleMyPanel('my-panel1')\">\n          <mat-icon>360</mat-icon>\n        </button>\n        <button mat-icon-button (click)=\"toggleMyPanel('my-panel2')\">\n          <mat-icon>star</mat-icon>\n        </button>\n      </div>\n\n      <!-- Additional Panels -->\n      <div *ovAdditionalPanels id=\"my-panels\">\n        @if (showExternalPanel) {\n        <div id=\"my-panel1\">\n          <h2>NEW PANEL 1</h2>\n          <p>This is my new additional panel</p>\n        </div>\n        } @if (showExternalPanel2) {\n        <div id=\"my-panel2\">\n          <h2>NEW PANEL 2</h2>\n          <p>This is another new panel</p>\n        </div>\n        }\n      </div>\n    </ov-videoconference>\n  `,\n  styles: [''],\n  standalone: true,\n  imports: [OpenViduComponentsModule, MatIconButton, MatIcon],\n})\nexport class AppComponent {\n  // For local development, leave these variables empty\n  // For production, configure them with correct URLs depending on your deployment\n\n  APPLICATION_SERVER_URL = '';  // (1)!\n  LIVEKIT_URL = ''; // (2)!\n\n  // The name of the room to join.\n  roomName = 'openvidu-additional-panels';  // (3)!\n\n  // The token used to join the room.\n  token!: string; // (4)!\n\n  // Flags to control the visibility of external panels\n  showExternalPanel: boolean = false; // (5)!\n  showExternalPanel2: boolean = false; // (6)!\n\n  constructor(private httpClient: HttpClient) {\n    this.configureUrls();\n  }\n\n  private configureUrls() {\n    // If APPLICATION_SERVER_URL is not configured, use default value from local development\n    if (!this.APPLICATION_SERVER_URL) {\n      if (window.location.hostname === 'localhost') {\n        this.APPLICATION_SERVER_URL = 'http://localhost:6080/';\n      } else {\n        this.APPLICATION_SERVER_URL =\n          'https://' + window.location.hostname + ':6443/';\n      }\n    }\n\n    // If LIVEKIT_URL is not configured, use default value from local development\n    if (!this.LIVEKIT_URL) {\n      if (window.location.hostname === 'localhost') {\n        this.LIVEKIT_URL = 'ws://localhost:7880/';\n      } else {\n        this.LIVEKIT_URL = 'wss://' + window.location.hostname + ':7443/';\n      }\n    }\n  }\n\n  ngOnInit() {\n    this.subscribeToPanelToggling(); // (7)!\n  }\n\n  // Requests a token to join the room with the given participant name.\n  async onTokenRequested(participantName: string) { // (8)!\n    const { token } = await this.getToken(this.roomName, participantName);\n    this.token = token;\n  }\n\n  // Subscribe to panel toggling events\n  subscribeToPanelToggling() {\n    this.panelService.panelStatusObs.subscribe((ev: PanelStatusInfo) => { // (9)!\n      this.showExternalPanel = ev.isOpened && ev.panelType === 'my-panel1';\n      this.showExternalPanel2 = ev.isOpened && ev.panelType === 'my-panel2';\n    });\n  }\n\n  // Toggle the visibility of external panels\n  toggleMyPanel(type: string) { // (10)!\n    this.panelService.togglePanel(type);\n  }\n\n  // Retrieves a token to join the room with the given name and participant name.\n  getToken(roomName: string, participantName: string): Promise<any> { // (11)!\n    // Requesting token to the server application\n  }\n}\n
  1. APPLICATION_SERVER_URL: URL to communicate the client application with the server application to request OpenVidu tokens.
  2. LIVEKIT_URL: URL to communicate the client application with the LiveKit server.
  3. roomName: OpenVidu Room identifier. This is the room where the VideoconferenceComponent will connect.
  4. token: OpenVidu Token used to connect to the OpenVidu Room.
  5. showExternalPanel: Flag to control the visibility of the first external panel.
  6. showExternalPanel2: Flag to control the visibility of the second external panel.
  7. subscribeToPanelToggling method that subscribes to panel toggling events.
  8. onTokenRequested method that fires when the VideoconferenceComponent requests a token to connect to the OpenVidu Room.
  9. panelService.panelStatusObs observable that listens to panel toggling events.
  10. toggleMyPanel method that toggles the visibility of external panels.
  11. getToken method that requests a token to the server application.

The app.component.ts file declares the following properties and methods:

Configure the URLs

For local development, leave APPLICATION_SERVER_URL and LIVEKIT_URL variables empty. The function configureUrls() will automatically configure them with default values. However, for production, you should configure these variables with the correct URLs depending on your deployment.

The OpenVidu Components Angular library provides a set of CSS variables that you can use to customize the appearance of the components. You can define these variables in your application's global styles file (e.g. styles.scss).

:root {\n    --ov-primary-color: #303030; /* Primary interface color */\n    --ov-secondary-color: #3e3f3f; /* Secondary interface color */\n    --ov-tertiary-color: #598eff; /* Tertiary accent color for elements */\n    --ov-warn-color: #eb5144; /* Warning color for alerts and notifications */\n    --ov-light-color: #e6e6e6; /* Light color for elements */\n\n    --ov-accent-color: #ffae35; /* Accent color for standout UI elements */\n\n    --ov-logo-background-color: #3a3d3d; /* Background color for the logo area */\n    --ov-text-color: #ffffff; /* Default text color */\n\n    --ov-panel-text-color: #1d1d1d; /* Text color for panel elements */\n    --ov-panel-background: #ffffff; /* Background color for panels */\n\n    --ov-buttons-radius: 50%; /* Border-radius for circular buttons */\n    --ov-leave-button-radius: 10px; /* Border-radius for the leave button */\n    --ov-video-radius: 5px; /* Border-radius for video elements */\n    --ov-panel-radius: 5px; /* Border-radius for panel elements */\n}\n
"},{"location":"docs/tutorials/angular-components/openvidu-additional-panels/#adding-new-panels","title":"Adding new panels","text":"

The *ovPanel directive is used to replace the default videoconference panels with a custom ones. In the app.component.ts file, you can see the following code snippet:

@Component({\n    selector: 'app-root',\n    template: `\n        <!-- OpenVidu Video Conference Component -->\n        <ov-videoconference\n            [token]=\"token\"\n            [livekitUrl]=\"LIVEKIT_URL\"\n            [toolbarDisplayRoomName]=\"false\"\n            (onTokenRequested)=\"onTokenRequested($event)\"\n        >\n            <!-- Additional Toolbar Buttons -->\n            <div *ovToolbarAdditionalPanelButtons style=\"text-align: center;\">\n                <button mat-icon-button (click)=\"toggleMyPanel('my-panel1')\">\n                    <mat-icon>360</mat-icon>\n                </button>\n                <button mat-icon-button (click)=\"toggleMyPanel('my-panel2')\">\n                    <mat-icon>star</mat-icon>\n                </button>\n            </div>\n\n            <!-- Additional Panels -->\n            <div *ovAdditionalPanels id=\"my-panels\">\n                @if (showExternalPanel) {\n                <div id=\"my-panel1\">\n                    <h2>NEW PANEL 1</h2>\n                    <p>This is my new additional panel</p>\n                </div>\n                } @if (showExternalPanel2) {\n                <div id=\"my-panel2\">\n                    <h2>NEW PANEL 2</h2>\n                    <p>This is another new panel</p>\n                </div>\n                }\n            </div>\n        </ov-videoconference>\n    `,\n    styles: [''],\n    standalone: true,\n    imports: [OpenViduComponentsModule, MatIconButton, MatIcon],\n})\nexport class AppComponent {\n    // ...\n}\n

In this code snippet, the *ovToolbarAdditionalPanelButtons directive is used to add new buttons to the toolbar and the *ovAdditionalPanels directive is used to add new panels to the videoconference.

When the user clicks on the buttons, the toggleMyPanel method is called to toggle the visibility of the new panels. These new panels are handled by the showExternalPanel and showExternalPanel2 flags.

"},{"location":"docs/tutorials/angular-components/openvidu-admin-dashboard/","title":"openvidu-admin-dashboard","text":"

Source code

The openvidu-admin-dashboard tutorial demonstrates how to create an admin dashboard to manage the recordings of a videoconference using the OpenVidu Components Angular library.

OpenVidu Components - Admin Login

OpenVidu Components - Admin Dashboard"},{"location":"docs/tutorials/angular-components/openvidu-admin-dashboard/#running-this-tutorial","title":"Running this tutorial","text":""},{"location":"docs/tutorials/angular-components/openvidu-admin-dashboard/#1-run-openvidu-server","title":"1. Run OpenVidu Server","text":"Run OpenVidu locallyDeploy OpenVidu

  1. Download OpenVidu

    git clone https://github.com/OpenVidu/openvidu-local-deployment\n

  2. Configure the local deployment

    Windows macOS Linux 
    cd openvidu-local-deployment/community\n.\\configure_lan_private_ip_windows.bat\n
    cd openvidu-local-deployment/community\n./configure_lan_private_ip_macos.sh\n
    cd openvidu-local-deployment/community\n./configure_lan_private_ip_linux.sh\n

  3. Run OpenVidu

    docker compose up\n

To use a production-ready OpenVidu deployment, visit the official deployment guide.

"},{"location":"docs/tutorials/angular-components/openvidu-admin-dashboard/#2-download-the-tutorial-code","title":"2. Download the tutorial code","text":"
git clone https://github.com/OpenVidu/openvidu-livekit-tutorials.git\ngit clone https://github.com/OpenVidu/openvidu-tutorials.git\n
"},{"location":"docs/tutorials/angular-components/openvidu-admin-dashboard/#3-run-the-server-application","title":"3. Run the server application","text":"Node Go Ruby Java Python Rust PHP .NET

To run this server application, you need Node installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/node\n
  2. Install dependencies 
    npm install\n
  3. Run the application 
    npm start\n

To run this server application, you need Go installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/go\n
  2. Run the application 
    go run main.go\n

To run this server application, you need Ruby installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/ruby\n
  2. Install dependencies 
    bundle install\n
  3. Run the application 
    ruby app.rb\n

To run this server application, you need Java and Maven installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/java\n
  2. Run the application 
    mvn spring-boot:run\n

To run this server application, you need Python 3 installed on your device.

  1. Navigate into the server directory

    cd openvidu-livekit-tutorials/application-server/python\n

  2. Create a python virtual environment

    python -m venv venv\n

  3. Activate the virtual environment

    Windows macOS Linux 
    .\\venv\\Scripts\\activate\n
    . ./venv/bin/activate\n
    . ./venv/bin/activate\n

  4. Install dependencies

    pip install -r requirements.txt\n

  5. Run the application

    python app.py\n

To run this server application, you need Rust installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/rust\n
  2. Run the application 
    cargo run\n

To run this server application, you need PHP and Composer installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/php\n
  2. Install dependencies 
    composer install\n
  3. Run the application 
    composer start\n

To run this server application, you need .NET installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/dotnet\n
  2. Run the application 
    dotnet run\n

Warning

This .NET server application needs the LIVEKIT_API_SECRET env variable to be at least 32 characters long. Make sure to update it here and in your OpenVidu Server.

"},{"location":"docs/tutorials/angular-components/openvidu-admin-dashboard/#4-run-the-openvidu-admin-dashboard-tutorial","title":"4. Run the openvidu-admin-dashboard tutorial","text":"

To run the client application tutorial, you need Node installed on your development computer.

  1. Navigate into the application client directory:

      cd openvidu-tutorials/openvidu-components/openvidu-admin-dashboard\n

  2. Install the required dependencies:

      npm install\n

  3. Serve the application:

      npm start\n

Once the server is up and running, you can test the application by visiting http://localhost:5080.

Accessing your application client from other devices in your local network

One advantage of running OpenVidu locally is that you can test your application client with other devices in your local network very easily without worrying about SSL certificates.

Access your application client through https://xxx-yyy-zzz-www.openvidu-local.dev:5443, where xxx-yyy-zzz-www part of the domain is your LAN private IP address with dashes (-) instead of dots (.). For more information, see section Accessing your app from other devices in your network.

"},{"location":"docs/tutorials/angular-components/openvidu-admin-dashboard/#understanding-the-code","title":"Understanding the code","text":"

This tutorial is an Angular project generated with Angular CLI tool. Therefore, you will see many configuration files and other components that are not the primary focus of this tutorial. We will concentrate on the following files in the src directory:

To use OpenVidu Components Angular in your application, you need to install the library and import the OpenViduComponentsModule in your Angular module. Let's see how to do this:

  1. Create an Angular Project (version 17 or higher)

    To begin, you will need to create a new Angular project if you haven't already. Ensure you have Node.js and the Angular CLI installed. Then, run the following command to create a new Angular project:

    ng new your-project-name\n

    Replace your-project-name with the desired name for your project.

  2. Add Angular Material to your project

    OpenVidu Components Angular needs Angular Material, which provides a range of UI components. To add Angular Material to your project, navigate to your project directory and run:

    ng add @angular/material\n

  3. Install OpenVidu Components Angular

    With your Angular project set up, it's time to add videoconferencing capabilities with OpenVidu Components Angular. Install the library using npm:

    npm install openvidu-components-angular\n

  4. Import and use OpenVidu Components Angular

    To use OpenVidu Components Angular in your application, you need to:

    1. Import the OpenViduComponentsModule in your Angular application.
    2. Configure the module with the OpenViduComponentsConfig object.
    3. Add the component to your template file.
    4. Assign the OpenVidu token and LiveKit URL to the component.
    5. Customize the appearance of the components using CSS variables.
main.tsapp.component.tsstyles.scss

In your main.ts application file, import the it and configure it as follows:

// Other imports ...\n\nimport { OpenViduComponentsModule, OpenViduComponentsConfig } from 'openvidu-components-angular';\n\nconst config: OpenViduComponentsConfig = {\n    production: true,\n};\n\nbootstrapApplication(AppComponent, {\n    providers: [\n        importProvidersFrom(\n            OpenViduComponentsModule.forRoot(config)\n            // Other imports ...\n        ),\n        provideAnimations(),\n    ],\n}).catch((err) => console.error(err));\n

Use the ov-admin-login component to create a login form and the ov-admin-dashboard component to create the admin dashboard.

import { OpenViduComponentsModule } from 'openvidu-components-angular';\n\n@Component({\n  selector: 'app-root',\n  template:`\n    @if (logged) {\n    <ov-admin-dashboard\n      [recordingsList]=\"recordings()\"\n      (onLogoutRequested)=\"onLogoutRequested()\"\n      (onRefreshRecordingsRequested)=\"onRefreshRecordingsRequested()\"\n      (onLoadMoreRecordingsRequested)=\"onLoadMoreRecordingsRequested()\"\n      (onRecordingDeleteRequested)=\"onRecordingDeleteRequested($event)\"\n    ></ov-admin-dashboard>\n    } @else {\n    <ov-admin-login (onLoginRequested)=\"onLoginRequested($event)\">\n    </ov-admin-login>\n    }\n  `,\n  styles: [''],\n  standalone: true,\n  imports: [OpenViduComponentsModule],\n})\nexport class AppComponent {\n\n  roomName = 'openvidu-admin-dashboard'; // (1)!\n\n  logged: boolean = false; // (2)!\n\n  // Recordings list to show in the dashboard\n  // This is a dummy list, you should replace it with your own list from the server\n  recordings: WritableSignal<RecordingInfo[]> = signal([ // (3)!\n    {\n      id: 'recording1',\n      roomName: this.roomName,\n      roomId: 'roomId1',\n      outputMode: RecordingOutputMode.COMPOSED,\n      status: RecordingStatus.READY,\n      filename: 'sampleRecording.mp4',\n      startedAt: new Date().getTime(),\n      endedAt: new Date().getTime(),\n      duration: 0,\n      size: 100,\n      location: 'http://localhost:8080/recordings/recording1',\n    }\n  ]);\n\n  constructor() {}\n\n  onLoginRequested(credentials: { username: string; password: string }) { // (4)!\n    console.log(`Login button clicked ${credentials}`);\n    /**\n     * WARNING! This code is developed for didactic purposes only.\n     * The authentication process should be done in the server side.\n     **/\n    this.logged = true;\n  }\n\n  onLogoutRequested() { // (5)!\n    console.log('Logout button clicked');\n    /**\n     * WARNING! This code is developed for didactic purposes only.\n     * The authentication process should be done in the server side.\n     **/\n    this.logged = false;\n  }\n\n  onRefreshRecordingsRequested() { // (6)!\n    console.log('Refresh recording clicked');\n    /**\n     * WARNING! This code is developed for didactic purposes only.\n     * The authentication process should be done in the server side.\n     **/\n    // Getting the recordings from the server\n    this.recordings.update(() => [\n      {\n        id: 'recording1',\n        roomName: this.title,\n        roomId: 'roomId1',\n        outputMode: RecordingOutputMode.COMPOSED,\n        status: RecordingStatus.READY,\n        filename: 'sampleRecording1.mp4',\n        startedAt: new Date().getTime(),\n        endedAt: new Date().getTime(),\n        duration: 0,\n        size: 100,\n        location: 'http://localhost:8080/recordings/recording1',\n      },\n    ]);\n  }\n\n  onLoadMoreRecordingsRequested() { // (7)!\n    console.log('Load more recordings clicked');\n  }\n\n  onRecordingDeleteRequested(recording: RecordingDeleteRequestedEvent) { // (8)!\n    console.log(`Delete recording clicked ${recording.recordingId}`);\n    /**\n     * WARNING! This code is developed for didactic purposes only.\n     * The authentication process should be done in the server side.\n     **/\n    // Deleting the recording from the server\n    this.recordings.update((recordings) =>\n      recordings.filter((rec) => rec.id !== recording.recordingId)\n    );\n\n    console.log(this.recordings());\n  }\n}\n
  1. roomName: OpenVidu Room name.
  2. logged: Boolean that indicates if the user is logged in.
  3. recordings: Dummy list of recordings to show in the dashboard. You should replace it with your own list from the server from the server.
  4. onLoginRequested method that fires when the login button is clicked.
  5. onLogoutRequested method that fires when the logout button is clicked.
  6. onRefreshRecordingsRequested method that fires when the refresh recordings button is clicked.
  7. onLoadMoreRecordingsRequested method that fires when the load more recordings button is clicked.
  8. onRecordingDeleteRequested method that fires when the delete recording button is clicked.

The app.component.ts file declares the following properties and methods:

Configure the URLs

For local development, leave APPLICATION_SERVER_URL and LIVEKIT_URL variables empty. The function configureUrls() will automatically configure them with default values. However, for production, you should configure these variables with the correct URLs depending on your deployment.

The OpenVidu Components Angular library provides a set of CSS variables that you can use to customize the appearance of the components. You can define these variables in your application's global styles file (e.g. styles.scss).

:root {\n    --ov-primary-color: #303030; /* Primary interface color */\n    --ov-secondary-color: #3e3f3f; /* Secondary interface color */\n    --ov-tertiary-color: #598eff; /* Tertiary accent color for elements */\n    --ov-warn-color: #eb5144; /* Warning color for alerts and notifications */\n    --ov-light-color: #e6e6e6; /* Light color for elements */\n\n    --ov-accent-color: #ffae35; /* Accent color for standout UI elements */\n\n    --ov-logo-background-color: #3a3d3d; /* Background color for the logo area */\n    --ov-text-color: #ffffff; /* Default text color */\n\n    --ov-panel-text-color: #1d1d1d; /* Text color for panel elements */\n    --ov-panel-background: #ffffff; /* Background color for panels */\n\n    --ov-buttons-radius: 50%; /* Border-radius for circular buttons */\n    --ov-leave-button-radius: 10px; /* Border-radius for the leave button */\n    --ov-video-radius: 5px; /* Border-radius for video elements */\n    --ov-panel-radius: 5px; /* Border-radius for panel elements */\n}\n
"},{"location":"docs/tutorials/angular-components/openvidu-custom-activities-panel/","title":"openvidu-custom-activities-panel","text":"

Source code

The openvidu-custom-activities-panel tutorial demonstrates how to customize the activities panel, providing a more tailored user experience.

Replacing the default activities panel is made simple with the ActivitiesPanelDirective, which offers a straightforward way to replace and adapt the ActivitiesPanelComponent to your needs.

OpenVidu Components - Custom Activities Panel"},{"location":"docs/tutorials/angular-components/openvidu-custom-activities-panel/#running-this-tutorial","title":"Running this tutorial","text":""},{"location":"docs/tutorials/angular-components/openvidu-custom-activities-panel/#1-run-openvidu-server","title":"1. Run OpenVidu Server","text":"Run OpenVidu locallyDeploy OpenVidu

  1. Download OpenVidu

    git clone https://github.com/OpenVidu/openvidu-local-deployment\n

  2. Configure the local deployment

    Windows macOS Linux 
    cd openvidu-local-deployment/community\n.\\configure_lan_private_ip_windows.bat\n
    cd openvidu-local-deployment/community\n./configure_lan_private_ip_macos.sh\n
    cd openvidu-local-deployment/community\n./configure_lan_private_ip_linux.sh\n

  3. Run OpenVidu

    docker compose up\n

To use a production-ready OpenVidu deployment, visit the official deployment guide.

"},{"location":"docs/tutorials/angular-components/openvidu-custom-activities-panel/#2-download-the-tutorial-code","title":"2. Download the tutorial code","text":"
git clone https://github.com/OpenVidu/openvidu-livekit-tutorials.git\ngit clone https://github.com/OpenVidu/openvidu-tutorials.git\n
"},{"location":"docs/tutorials/angular-components/openvidu-custom-activities-panel/#3-run-the-server-application","title":"3. Run the server application","text":"Node Go Ruby Java Python Rust PHP .NET

To run this server application, you need Node installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/node\n
  2. Install dependencies 
    npm install\n
  3. Run the application 
    npm start\n

To run this server application, you need Go installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/go\n
  2. Run the application 
    go run main.go\n

To run this server application, you need Ruby installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/ruby\n
  2. Install dependencies 
    bundle install\n
  3. Run the application 
    ruby app.rb\n

To run this server application, you need Java and Maven installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/java\n
  2. Run the application 
    mvn spring-boot:run\n

To run this server application, you need Python 3 installed on your device.

  1. Navigate into the server directory

    cd openvidu-livekit-tutorials/application-server/python\n

  2. Create a python virtual environment

    python -m venv venv\n

  3. Activate the virtual environment

    Windows macOS Linux 
    .\\venv\\Scripts\\activate\n
    . ./venv/bin/activate\n
    . ./venv/bin/activate\n

  4. Install dependencies

    pip install -r requirements.txt\n

  5. Run the application

    python app.py\n

To run this server application, you need Rust installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/rust\n
  2. Run the application 
    cargo run\n

To run this server application, you need PHP and Composer installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/php\n
  2. Install dependencies 
    composer install\n
  3. Run the application 
    composer start\n

To run this server application, you need .NET installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/dotnet\n
  2. Run the application 
    dotnet run\n

Warning

This .NET server application needs the LIVEKIT_API_SECRET env variable to be at least 32 characters long. Make sure to update it here and in your OpenVidu Server.

"},{"location":"docs/tutorials/angular-components/openvidu-custom-activities-panel/#4-run-the-openvidu-custom-activities-panel-tutorial","title":"4. Run the openvidu-custom-activities-panel tutorial","text":"

To run the client application tutorial, you need Node installed on your development computer.

  1. Navigate into the application client directory:

      cd openvidu-tutorials/openvidu-components/openvidu-custom-activities-panel\n

  2. Install the required dependencies:

      npm install\n

  3. Serve the application:

      npm start\n

Once the server is up and running, you can test the application by visiting http://localhost:5080.

Accessing your application client from other devices in your local network

One advantage of running OpenVidu locally is that you can test your application client with other devices in your local network very easily without worrying about SSL certificates.

Access your application client through https://xxx-yyy-zzz-www.openvidu-local.dev:5443, where xxx-yyy-zzz-www part of the domain is your LAN private IP address with dashes (-) instead of dots (.). For more information, see section Accessing your app from other devices in your network.

"},{"location":"docs/tutorials/angular-components/openvidu-custom-activities-panel/#understanding-the-code","title":"Understanding the code","text":"

This tutorial is an Angular project generated with Angular CLI tool. Therefore, you will see many configuration files and other components that are not the primary focus of this tutorial. We will concentrate on the following files in the src directory:

To use OpenVidu Components Angular in your application, you need to install the library and import the OpenViduComponentsModule in your Angular module. Let's see how to do this:

  1. Create an Angular Project (version 17 or higher)

    To begin, you will need to create a new Angular project if you haven't already. Ensure you have Node.js and the Angular CLI installed. Then, run the following command to create a new Angular project:

    ng new your-project-name\n

    Replace your-project-name with the desired name for your project.

  2. Add Angular Material to your project

    OpenVidu Components Angular needs Angular Material, which provides a range of UI components. To add Angular Material to your project, navigate to your project directory and run:

    ng add @angular/material\n

  3. Install OpenVidu Components Angular

    With your Angular project set up, it's time to add videoconferencing capabilities with OpenVidu Components Angular. Install the library using npm:

    npm install openvidu-components-angular\n

  4. Import and use OpenVidu Components Angular

    To use OpenVidu Components Angular in your application, you need to:

    1. Import the OpenViduComponentsModule in your Angular application.
    2. Configure the module with the OpenViduComponentsConfig object.
    3. Add the component to your template file.
    4. Assign the OpenVidu token and LiveKit URL to the component.
    5. Customize the appearance of the components using CSS variables.
main.tsapp.component.tsstyles.scss

In your main.ts application file, import the it and configure it as follows:

// Other imports ...\n\nimport { OpenViduComponentsModule, OpenViduComponentsConfig } from 'openvidu-components-angular';\n\nconst config: OpenViduComponentsConfig = {\n    production: true,\n};\n\nbootstrapApplication(AppComponent, {\n    providers: [\n        importProvidersFrom(\n            OpenViduComponentsModule.forRoot(config)\n            // Other imports ...\n        ),\n        provideAnimations(),\n    ],\n}).catch((err) => console.error(err));\n

Use the ov-videoconference component to create a videoconference. This component requires a token to connect to the OpenVidu Room. The AppComponent class is responsible for requesting the token and passing it to the ov-videoconference component.

import { OpenViduComponentsModule } from 'openvidu-components-angular';\n\n@Component({\n  selector: 'app-root',\n  template:`\n    <!-- OpenVidu Video Conference Component -->\n    <ov-videoconference\n        [token]=\"token\"\n        [livekitUrl]=\"LIVEKIT_URL\"\n        (onTokenRequested)=\"onTokenRequested($event)\"\n    >\n        <!-- Custom activities panel -->\n        <div *ovActivitiesPanel id=\"my-panel\">\n            <h3>ACTIVITIES</h3>\n            <div>CUSTOM ACTIVITIES</div>\n        </div>\n    </ov-videoconference>\n  `,\n  styles: [''],\n  standalone: true,\n  imports: [OpenViduComponentsModule],\n})\nexport class AppComponent {\n  // For local development, leave these variables empty\n  // For production, configure them with correct URLs depending on your deployment\n\n  APPLICATION_SERVER_URL = '';  // (1)!\n  LIVEKIT_URL = ''; // (2)!\n\n  // The name of the room to join.\n  roomName = 'openvidu-custom-activities-panel';  // (3)!\n\n  // The token used to join the room.\n  token!: string; // (4)!\n\n  constructor(private httpClient: HttpClient) {\n    this.configureUrls();\n  }\n\n  private configureUrls() {\n    // If APPLICATION_SERVER_URL is not configured, use default value from local development\n    if (!this.APPLICATION_SERVER_URL) {\n      if (window.location.hostname === 'localhost') {\n        this.APPLICATION_SERVER_URL = 'http://localhost:6080/';\n      } else {\n        this.APPLICATION_SERVER_URL =\n          'https://' + window.location.hostname + ':6443/';\n      }\n    }\n\n    // If LIVEKIT_URL is not configured, use default value from local development\n    if (!this.LIVEKIT_URL) {\n      if (window.location.hostname === 'localhost') {\n        this.LIVEKIT_URL = 'ws://localhost:7880/';\n      } else {\n        this.LIVEKIT_URL = 'wss://' + window.location.hostname + ':7443/';\n      }\n    }\n  }\n\n  // Requests a token to join the room with the given participant name.\n  async onTokenRequested(participantName: string) { // (5)!\n    const { token } = await this.getToken(this.roomName, participantName);\n    this.token = token;\n  }\n\n  // Retrieves a token to join the room with the given name and participant name.\n  getToken(roomName: string, participantName: string): Promise<any> { // (6)!\n    // Requesting token to the server application\n  }\n}\n
  1. APPLICATION_SERVER_URL: URL to communicate the client application with the server application to request OpenVidu tokens.
  2. LIVEKIT_URL: URL to communicate the client application with the LiveKit server.
  3. roomName: OpenVidu Room identifier. This is the room where the VideoconferenceComponent will connect.
  4. token: OpenVidu Token used to connect to the OpenVidu Room.
  5. onTokenRequested method that fires when the VideoconferenceComponent requests a token to connect to the OpenVidu Room.
  6. getToken method that requests a token to the server application.

The app.component.ts file declares the following properties and methods:

Configure the URLs

For local development, leave APPLICATION_SERVER_URL and LIVEKIT_URL variables empty. The function configureUrls() will automatically configure them with default values. However, for production, you should configure these variables with the correct URLs depending on your deployment.

The OpenVidu Components Angular library provides a set of CSS variables that you can use to customize the appearance of the components. You can define these variables in your application's global styles file (e.g. styles.scss).

:root {\n    --ov-primary-color: #303030; /* Primary interface color */\n    --ov-secondary-color: #3e3f3f; /* Secondary interface color */\n    --ov-tertiary-color: #598eff; /* Tertiary accent color for elements */\n    --ov-warn-color: #eb5144; /* Warning color for alerts and notifications */\n    --ov-light-color: #e6e6e6; /* Light color for elements */\n\n    --ov-accent-color: #ffae35; /* Accent color for standout UI elements */\n\n    --ov-logo-background-color: #3a3d3d; /* Background color for the logo area */\n    --ov-text-color: #ffffff; /* Default text color */\n\n    --ov-panel-text-color: #1d1d1d; /* Text color for panel elements */\n    --ov-panel-background: #ffffff; /* Background color for panels */\n\n    --ov-buttons-radius: 50%; /* Border-radius for circular buttons */\n    --ov-leave-button-radius: 10px; /* Border-radius for the leave button */\n    --ov-video-radius: 5px; /* Border-radius for video elements */\n    --ov-panel-radius: 5px; /* Border-radius for panel elements */\n}\n
"},{"location":"docs/tutorials/angular-components/openvidu-custom-activities-panel/#customizing-chat-panel","title":"Customizing chat panel","text":"

This tutorial uses the *ovActivitiesPanel directive with the aim of replacing the default activities panel with a custom one.

In the app.component.ts file, you can see the following code snippet:

@Component({\n    selector: 'app-root',\n    template: `\n        <!-- OpenVidu Video Conference Component -->\n        <ov-videoconference\n            [token]=\"token\"\n            [livekitUrl]=\"LIVEKIT_URL\"\n            (onTokenRequested)=\"onTokenRequested($event)\"\n        >\n            <!-- Custom activities panel -->\n            <div *ovActivitiesPanel id=\"my-panel\">\n                <h3>ACTIVITIES</h3>\n                <div>CUSTOM ACTIVITIES</div>\n            </div>\n        </ov-videoconference>\n    `,\n    styles: [''],\n    standalone: true,\n    imports: [OpenViduComponentsModule],\n})\nexport class AppComponent {\n    // ...\n}\n
"},{"location":"docs/tutorials/angular-components/openvidu-custom-chat-panel/","title":"openvidu-custom-chat-panel","text":"

Source code

The openvidu-custom-chat-panel tutorial demonstrates how to customize the chat panel, providing a more tailored user experience.

Replacing the default chat panel is made simple with the ChatPanelDirective, which offers a straightforward way to replace and adapt the ChatPanelComponent to your needs.

OpenVidu Components - Custom Chat Panel"},{"location":"docs/tutorials/angular-components/openvidu-custom-chat-panel/#running-this-tutorial","title":"Running this tutorial","text":""},{"location":"docs/tutorials/angular-components/openvidu-custom-chat-panel/#1-run-openvidu-server","title":"1. Run OpenVidu Server","text":"Run OpenVidu locallyDeploy OpenVidu

  1. Download OpenVidu

    git clone https://github.com/OpenVidu/openvidu-local-deployment\n

  2. Configure the local deployment

    Windows macOS Linux 
    cd openvidu-local-deployment/community\n.\\configure_lan_private_ip_windows.bat\n
    cd openvidu-local-deployment/community\n./configure_lan_private_ip_macos.sh\n
    cd openvidu-local-deployment/community\n./configure_lan_private_ip_linux.sh\n

  3. Run OpenVidu

    docker compose up\n

To use a production-ready OpenVidu deployment, visit the official deployment guide.

"},{"location":"docs/tutorials/angular-components/openvidu-custom-chat-panel/#2-download-the-tutorial-code","title":"2. Download the tutorial code","text":"
git clone https://github.com/OpenVidu/openvidu-livekit-tutorials.git\ngit clone https://github.com/OpenVidu/openvidu-tutorials.git\n
"},{"location":"docs/tutorials/angular-components/openvidu-custom-chat-panel/#3-run-the-server-application","title":"3. Run the server application","text":"Node Go Ruby Java Python Rust PHP .NET

To run this server application, you need Node installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/node\n
  2. Install dependencies 
    npm install\n
  3. Run the application 
    npm start\n

To run this server application, you need Go installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/go\n
  2. Run the application 
    go run main.go\n

To run this server application, you need Ruby installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/ruby\n
  2. Install dependencies 
    bundle install\n
  3. Run the application 
    ruby app.rb\n

To run this server application, you need Java and Maven installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/java\n
  2. Run the application 
    mvn spring-boot:run\n

To run this server application, you need Python 3 installed on your device.

  1. Navigate into the server directory

    cd openvidu-livekit-tutorials/application-server/python\n

  2. Create a python virtual environment

    python -m venv venv\n

  3. Activate the virtual environment

    Windows macOS Linux 
    .\\venv\\Scripts\\activate\n
    . ./venv/bin/activate\n
    . ./venv/bin/activate\n

  4. Install dependencies

    pip install -r requirements.txt\n

  5. Run the application

    python app.py\n

To run this server application, you need Rust installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/rust\n
  2. Run the application 
    cargo run\n

To run this server application, you need PHP and Composer installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/php\n
  2. Install dependencies 
    composer install\n
  3. Run the application 
    composer start\n

To run this server application, you need .NET installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/dotnet\n
  2. Run the application 
    dotnet run\n

Warning

This .NET server application needs the LIVEKIT_API_SECRET env variable to be at least 32 characters long. Make sure to update it here and in your OpenVidu Server.

"},{"location":"docs/tutorials/angular-components/openvidu-custom-chat-panel/#4-run-the-openvidu-custom-chat-panel-tutorial","title":"4. Run the openvidu-custom-chat-panel tutorial","text":"

To run the client application tutorial, you need Node installed on your development computer.

  1. Navigate into the application client directory:

      cd openvidu-tutorials/openvidu-components/openvidu-custom-chat-panel\n

  2. Install the required dependencies:

      npm install\n

  3. Serve the application:

      npm start\n

Once the server is up and running, you can test the application by visiting http://localhost:5080.

Accessing your application client from other devices in your local network

One advantage of running OpenVidu locally is that you can test your application client with other devices in your local network very easily without worrying about SSL certificates.

Access your application client through https://xxx-yyy-zzz-www.openvidu-local.dev:5443, where xxx-yyy-zzz-www part of the domain is your LAN private IP address with dashes (-) instead of dots (.). For more information, see section Accessing your app from other devices in your network.

"},{"location":"docs/tutorials/angular-components/openvidu-custom-chat-panel/#understanding-the-code","title":"Understanding the code","text":"

This tutorial is an Angular project generated with Angular CLI tool. Therefore, you will see many configuration files and other components that are not the primary focus of this tutorial. We will concentrate on the following files in the src directory:

To use OpenVidu Components Angular in your application, you need to install the library and import the OpenViduComponentsModule in your Angular module. Let's see how to do this:

  1. Create an Angular Project (version 17 or higher)

    To begin, you will need to create a new Angular project if you haven't already. Ensure you have Node.js and the Angular CLI installed. Then, run the following command to create a new Angular project:

    ng new your-project-name\n

    Replace your-project-name with the desired name for your project.

  2. Add Angular Material to your project

    OpenVidu Components Angular needs Angular Material, which provides a range of UI components. To add Angular Material to your project, navigate to your project directory and run:

    ng add @angular/material\n

  3. Install OpenVidu Components Angular

    With your Angular project set up, it's time to add videoconferencing capabilities with OpenVidu Components Angular. Install the library using npm:

    npm install openvidu-components-angular\n

  4. Import and use OpenVidu Components Angular

    To use OpenVidu Components Angular in your application, you need to:

    1. Import the OpenViduComponentsModule in your Angular application.
    2. Configure the module with the OpenViduComponentsConfig object.
    3. Add the component to your template file.
    4. Assign the OpenVidu token and LiveKit URL to the component.
    5. Customize the appearance of the components using CSS variables.
main.tsapp.component.tsstyles.scss

In your main.ts application file, import the it and configure it as follows:

// Other imports ...\n\nimport { OpenViduComponentsModule, OpenViduComponentsConfig } from 'openvidu-components-angular';\n\nconst config: OpenViduComponentsConfig = {\n    production: true,\n};\n\nbootstrapApplication(AppComponent, {\n    providers: [\n        importProvidersFrom(\n            OpenViduComponentsModule.forRoot(config)\n            // Other imports ...\n        ),\n        provideAnimations(),\n    ],\n}).catch((err) => console.error(err));\n

Use the ov-videoconference component to create a videoconference. This component requires a token to connect to the OpenVidu Room. The AppComponent class is responsible for requesting the token and passing it to the ov-videoconference component.

import {\n  DataPacket_Kind,\n  DataPublishOptions,\n  DataTopic,\n  ParticipantService,\n  RemoteParticipant,\n  Room,\n  RoomEvent,\n  OpenViduComponentsModule,\n} from 'openvidu-components-angular';\n\n@Component({\n  selector: 'app-root',\n  template:`\n    <!-- OpenVidu Video Conference Component -->\n    <ov-videoconference\n      [token]=\"token\"\n      [livekitUrl]=\"LIVEKIT_URL\"\n      [toolbarDisplayRoomName]=\"false\"\n      (onTokenRequested)=\"onTokenRequested($event)\"\n      (onRoomCreated)=\"onRoomCreated($event)\"\n    >\n      <!-- Chat Panel -->\n      <div *ovChatPanel id=\"my-panel\">\n        <h3>Chat</h3>\n        <div>\n          <ul>\n            @for (msg of messages; track msg) {\n            <li>{{ msg }}</li>\n            }\n          </ul>\n        </div>\n        <input value=\"Hello\" #input />\n        <button (click)=\"send(input.value)\">Send</button>\n      </div>\n    </ov-videoconference>\n  `,\n  styles: [''],\n  standalone: true,\n  imports: [OpenViduComponentsModule],\n})\nexport class AppComponent {\n  // For local development, leave these variables empty\n  // For production, configure them with correct URLs depending on your deployment\n\n  APPLICATION_SERVER_URL = '';  // (1)!\n  LIVEKIT_URL = ''; // (2)!\n\n  // The name of the room to join.\n  roomName = 'openvidu-custom-chat-panel';  // (3)!\n\n  // The token used to join the room.\n  token!: string; // (4)!\n\n  messages: string[] = []; // (5)!\n\n  constructor(private httpClient: HttpClient, private participantService: ParticipantService) {\n    this.configureUrls();\n  }\n\n  private configureUrls() {\n    // If APPLICATION_SERVER_URL is not configured, use default value from local development\n    if (!this.APPLICATION_SERVER_URL) {\n      if (window.location.hostname === 'localhost') {\n        this.APPLICATION_SERVER_URL = 'http://localhost:6080/';\n      } else {\n        this.APPLICATION_SERVER_URL =\n          'https://' + window.location.hostname + ':6443/';\n      }\n    }\n\n    // If LIVEKIT_URL is not configured, use default value from local development\n    if (!this.LIVEKIT_URL) {\n      if (window.location.hostname === 'localhost') {\n        this.LIVEKIT_URL = 'ws://localhost:7880/';\n      } else {\n        this.LIVEKIT_URL = 'wss://' + window.location.hostname + ':7443/';\n      }\n    }\n  }\n\n  // Requests a token to join the room with the given participant name.\n  async onTokenRequested(participantName: string) { // (6)!\n    const { token } = await this.getToken(this.roomName, participantName);\n    this.token = token;\n  }\n\n  /**\n   * Handles the creation of a new room and sets up an event listener for receiving data.\n   *\n   * @param room - The Room object that was created.\n   */\n  onRoomCreated(room: Room) { // (7)!\n    // Set up an event listener for the RoomEvent.DataReceived event.\n    room.on(RoomEvent.DataReceived, ( // (8)!\n      payload: Uint8Array,\n      participant?: RemoteParticipant,\n      _?: DataPacket_Kind,\n      topic?: string\n    ) => {\n      // Check if the received data topic is related to chat messages.\n      if (topic === DataTopic.CHAT) {\n        // Decode the payload from Uint8Array to a string and parse it as JSON.\n        const { message } = JSON.parse(new TextDecoder().decode(payload));\n\n        // Get the participant's name or default to 'Unknown' if not available.\n        const participantName = participant?.name || 'Unknown';\n\n        // Add the received message to the messages array.\n        this.messages.push(message);\n\n        // Log the received message and the participant's name to the console.\n        console.log(`Message received from ${participantName}:`, message);\n      }\n    });\n  }\n\n  // Function to send a chat message\n  async send(message: string): Promise<void> { // (9)!\n    const strData = JSON.stringify({ message });\n    const data: Uint8Array = new TextEncoder().encode(strData);\n    const options: DataPublishOptions = { topic: DataTopic.CHAT };\n    await this.participantService.publishData(data, options);\n    this.messages.push(message);\n  }\n\n  // Retrieves a token to join the room with the given name and participant name.\n  getToken(roomName: string, participantName: string): Promise<any> { // (10)!\n    // Requesting token to the server application\n  }\n}\n
  1. APPLICATION_SERVER_URL: URL to communicate the client application with the server application to request OpenVidu tokens.
  2. LIVEKIT_URL: URL to communicate the client application with the LiveKit server.
  3. roomName: OpenVidu Room identifier. This is the room where the VideoconferenceComponent will connect.
  4. token: OpenVidu Token used to connect to the OpenVidu Room.
  5. messages array that stores the chat messages.
  6. onTokenRequested method that fires when the VideoconferenceComponent requests a token to connect to the OpenVidu Room.
  7. onRoomCreated method that handles the creation of a new room and sets up an event listener for receiving data.
  8. Event listener for the RoomEvent.DataReceived event that listens to chat messages.
  9. send method that sends a chat message.
  10. getToken method that requests a token to the server application.

The app.component.ts file declares the following properties and methods:

Configure the URLs

For local development, leave APPLICATION_SERVER_URL and LIVEKIT_URL variables empty. The function configureUrls() will automatically configure them with default values. However, for production, you should configure these variables with the correct URLs depending on your deployment.

The OpenVidu Components Angular library provides a set of CSS variables that you can use to customize the appearance of the components. You can define these variables in your application's global styles file (e.g. styles.scss).

:root {\n    --ov-primary-color: #303030; /* Primary interface color */\n    --ov-secondary-color: #3e3f3f; /* Secondary interface color */\n    --ov-tertiary-color: #598eff; /* Tertiary accent color for elements */\n    --ov-warn-color: #eb5144; /* Warning color for alerts and notifications */\n    --ov-light-color: #e6e6e6; /* Light color for elements */\n\n    --ov-accent-color: #ffae35; /* Accent color for standout UI elements */\n\n    --ov-logo-background-color: #3a3d3d; /* Background color for the logo area */\n    --ov-text-color: #ffffff; /* Default text color */\n\n    --ov-panel-text-color: #1d1d1d; /* Text color for panel elements */\n    --ov-panel-background: #ffffff; /* Background color for panels */\n\n    --ov-buttons-radius: 50%; /* Border-radius for circular buttons */\n    --ov-leave-button-radius: 10px; /* Border-radius for the leave button */\n    --ov-video-radius: 5px; /* Border-radius for video elements */\n    --ov-panel-radius: 5px; /* Border-radius for panel elements */\n}\n
"},{"location":"docs/tutorials/angular-components/openvidu-custom-chat-panel/#customizing-chat-panel","title":"Customizing chat panel","text":"

This tutorial uses the *ovChatPanel directive with the aim of replacing the default chat panel with a custom one.

In the app.component.ts file, you can see the following code snippet:

@Component({\n    selector: 'app-root',\n    template: `\n        <!-- OpenVidu Video Conference Component -->\n        <ov-videoconference\n            [token]=\"token\"\n            [livekitUrl]=\"LIVEKIT_URL\"\n            (onTokenRequested)=\"onTokenRequested($event)\"\n            (onRoomCreated)=\"onRoomCreated($event)\"\n        >\n            <!-- Chat Panel -->\n            <div *ovChatPanel id=\"my-panel\">\n                <h3>Chat</h3>\n                <div>\n                    <ul>\n                        @for (msg of messages; track msg) {\n                        <li>{{ msg }}</li>\n                        }\n                    </ul>\n                </div>\n                <input value=\"Hello\" #input />\n                <button (click)=\"send(input.value)\">Send</button>\n            </div>\n        </ov-videoconference>\n    `,\n    styles: [''],\n    standalone: true,\n    imports: [OpenViduComponentsModule],\n})\nexport class AppComponent {\n    // ...\n}\n
"},{"location":"docs/tutorials/angular-components/openvidu-custom-layout/","title":"openvidu-custom-layout","text":"

Source code

The openvidu-custom-layout tutorial demonstrates how to replace the default layout of the OpenVidu Components Angular library with a custom layout.

Replacing the default layout is made simple with the LayoutDirective, which offers a straightforward way to customize the LayoutComponent.

OpenVidu Components - Custom Layout"},{"location":"docs/tutorials/angular-components/openvidu-custom-layout/#running-this-tutorial","title":"Running this tutorial","text":""},{"location":"docs/tutorials/angular-components/openvidu-custom-layout/#1-run-openvidu-server","title":"1. Run OpenVidu Server","text":"Run OpenVidu locallyDeploy OpenVidu

  1. Download OpenVidu

    git clone https://github.com/OpenVidu/openvidu-local-deployment\n

  2. Configure the local deployment

    Windows macOS Linux 
    cd openvidu-local-deployment/community\n.\\configure_lan_private_ip_windows.bat\n
    cd openvidu-local-deployment/community\n./configure_lan_private_ip_macos.sh\n
    cd openvidu-local-deployment/community\n./configure_lan_private_ip_linux.sh\n

  3. Run OpenVidu

    docker compose up\n

To use a production-ready OpenVidu deployment, visit the official deployment guide.

"},{"location":"docs/tutorials/angular-components/openvidu-custom-layout/#2-download-the-tutorial-code","title":"2. Download the tutorial code","text":"
git clone https://github.com/OpenVidu/openvidu-livekit-tutorials.git\ngit clone https://github.com/OpenVidu/openvidu-tutorials.git\n
"},{"location":"docs/tutorials/angular-components/openvidu-custom-layout/#3-run-the-server-application","title":"3. Run the server application","text":"Node Go Ruby Java Python Rust PHP .NET

To run this server application, you need Node installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/node\n
  2. Install dependencies 
    npm install\n
  3. Run the application 
    npm start\n

To run this server application, you need Go installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/go\n
  2. Run the application 
    go run main.go\n

To run this server application, you need Ruby installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/ruby\n
  2. Install dependencies 
    bundle install\n
  3. Run the application 
    ruby app.rb\n

To run this server application, you need Java and Maven installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/java\n
  2. Run the application 
    mvn spring-boot:run\n

To run this server application, you need Python 3 installed on your device.

  1. Navigate into the server directory

    cd openvidu-livekit-tutorials/application-server/python\n

  2. Create a python virtual environment

    python -m venv venv\n

  3. Activate the virtual environment

    Windows macOS Linux 
    .\\venv\\Scripts\\activate\n
    . ./venv/bin/activate\n
    . ./venv/bin/activate\n

  4. Install dependencies

    pip install -r requirements.txt\n

  5. Run the application

    python app.py\n

To run this server application, you need Rust installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/rust\n
  2. Run the application 
    cargo run\n

To run this server application, you need PHP and Composer installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/php\n
  2. Install dependencies 
    composer install\n
  3. Run the application 
    composer start\n

To run this server application, you need .NET installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/dotnet\n
  2. Run the application 
    dotnet run\n

Warning

This .NET server application needs the LIVEKIT_API_SECRET env variable to be at least 32 characters long. Make sure to update it here and in your OpenVidu Server.

"},{"location":"docs/tutorials/angular-components/openvidu-custom-layout/#4-run-the-openvidu-custom-layout-tutorial","title":"4. Run the openvidu-custom-layout tutorial","text":"

To run the client application tutorial, you need Node installed on your development computer.

  1. Navigate into the application client directory:

      cd openvidu-tutorials/openvidu-components/openvidu-custom-layout\n

  2. Install the required dependencies:

      npm install\n

  3. Serve the application:

      npm start\n

Once the server is up and running, you can test the application by visiting http://localhost:5080.

Accessing your application client from other devices in your local network

One advantage of running OpenVidu locally is that you can test your application client with other devices in your local network very easily without worrying about SSL certificates.

Access your application client through https://xxx-yyy-zzz-www.openvidu-local.dev:5443, where xxx-yyy-zzz-www part of the domain is your LAN private IP address with dashes (-) instead of dots (.). For more information, see section Accessing your app from other devices in your network.

"},{"location":"docs/tutorials/angular-components/openvidu-custom-layout/#understanding-the-code","title":"Understanding the code","text":"

This tutorial is an Angular project generated with Angular CLI tool. Therefore, you will see many configuration files and other components that are not the primary focus of this tutorial. We will concentrate on the following files in the src directory:

To use OpenVidu Components Angular in your application, you need to install the library and import the OpenViduComponentsModule in your Angular module. Let's see how to do this:

  1. Create an Angular Project (version 17 or higher)

    To begin, you will need to create a new Angular project if you haven't already. Ensure you have Node.js and the Angular CLI installed. Then, run the following command to create a new Angular project:

    ng new your-project-name\n

    Replace your-project-name with the desired name for your project.

  2. Add Angular Material to your project

    OpenVidu Components Angular needs Angular Material, which provides a range of UI components. To add Angular Material to your project, navigate to your project directory and run:

    ng add @angular/material\n

  3. Install OpenVidu Components Angular

    With your Angular project set up, it's time to add videoconferencing capabilities with OpenVidu Components Angular. Install the library using npm:

    npm install openvidu-components-angular\n

  4. Import and use OpenVidu Components Angular

    To use OpenVidu Components Angular in your application, you need to:

    1. Import the OpenViduComponentsModule in your Angular application.
    2. Configure the module with the OpenViduComponentsConfig object.
    3. Add the component to your template file.
    4. Assign the OpenVidu token and LiveKit URL to the component.
    5. Customize the appearance of the components using CSS variables.
main.tsapp.component.tsstyles.scss

In your main.ts application file, import the it and configure it as follows:

// Other imports ...\n\nimport { OpenViduComponentsModule, OpenViduComponentsConfig } from 'openvidu-components-angular';\n\nconst config: OpenViduComponentsConfig = {\n    production: true,\n};\n\nbootstrapApplication(AppComponent, {\n    providers: [\n        importProvidersFrom(\n            OpenViduComponentsModule.forRoot(config)\n            // Other imports ...\n        ),\n        provideAnimations(),\n    ],\n}).catch((err) => console.error(err));\n

Use the ov-videoconference component to create a videoconference. This component requires a token to connect to the OpenVidu Room. The AppComponent class is responsible for requesting the token and passing it to the ov-videoconference component.

import { OpenViduComponentsModule, ParticipantModel, ParticipantService } from 'openvidu-components-angular';\n\n@Component({\n  selector: 'app-root',\n  template:`\n      <!-- OpenVidu Video Conference Component -->\n      <ov-videoconference\n        [token]=\"token\"\n        [livekitUrl]=\"LIVEKIT_URL\"\n        (onTokenRequested)=\"onTokenRequested($event)\"\n      >\n        <!-- Custom Layout for Video Streams -->\n        <div *ovLayout>\n          <div class=\"container\">\n            <!-- Local Participant's Tracks -->\n            @for (track of localParticipant.tracks; track track) {\n            <div\n              class=\"item\"\n              [ngClass]=\"{\n                hidden:\n                  track.isAudioTrack && !track.participant.onlyHasAudioTracks\n              }\"\n            >\n              <ov-stream [track]=\"track\"></ov-stream>\n            </div>\n            }\n\n            <!-- Remote Participants' Tracks -->\n            @for (track of remoteParticipants | tracks; track track) {\n            <div\n              class=\"item\"\n              [ngClass]=\"{\n                hidden:\n                  track.isAudioTrack && !track.participant.onlyHasAudioTracks\n              }\"\n            >\n              <ov-stream [track]=\"track\"></ov-stream>\n            </div>\n            }\n          </div>\n        </div>\n      </ov-videoconference>\n  `,\n  styles: `\n    /* css styles */\n  `,\n  standalone: true,\n    imports: [OpenViduComponentsModule, NgClass],\n})\nexport class AppComponent implements OnInit, OnDestroy {\n  // For local development, leave these variables empty\n  // For production, configure them with correct URLs depending on your deployment\n\n  APPLICATION_SERVER_URL = '';  // (1)!\n  LIVEKIT_URL = ''; // (2)!\n\n  // The name of the room to join.\n  roomName = 'openvidu-custom-layout';  // (3)!\n\n  // The token used to join the room.\n  token!: string; // (4)!\n\n  // Participant-related properties\n  localParticipant!: ParticipantModel; // (5)!\n  remoteParticipants!: ParticipantModel[]; // (6)!\n  localParticipantSubs!: Subscription; // (7)!\n  remoteParticipantsSubs!: Subscription; // (8)!\n\n  constructor(private httpClient: HttpClient,   private participantService: ParticipantService) {\n    this.configureUrls();\n  }\n\n  private configureUrls() {\n    // If APPLICATION_SERVER_URL is not configured, use default value from local development\n    if (!this.APPLICATION_SERVER_URL) {\n      if (window.location.hostname === 'localhost') {\n        this.APPLICATION_SERVER_URL = 'http://localhost:6080/';\n      } else {\n        this.APPLICATION_SERVER_URL =\n          'https://' + window.location.hostname + ':6443/';\n      }\n    }\n\n    // If LIVEKIT_URL is not configured, use default value from local development\n    if (!this.LIVEKIT_URL) {\n      if (window.location.hostname === 'localhost') {\n        this.LIVEKIT_URL = 'ws://localhost:7880/';\n      } else {\n        this.LIVEKIT_URL = 'wss://' + window.location.hostname + ':7443/';\n      }\n    }\n  }\n\n  ngOnInit() {\n    // Subscribe to participants' updates\n    this.subscribeToParticipants();\n  }\n\n  ngOnDestroy() {\n    // Unsubscribe from participant updates to prevent memory leaks\n    this.localParticipantSubs?.unsubscribe();\n    this.remoteParticipantsSubs?.unsubscribe();\n  }\n\n  // Requests a token to join the room with the given participant name.\n  async onTokenRequested(participantName: string) { // (9)!\n    const { token } = await this.getToken(this.roomName, participantName);\n    this.token = token;\n  }\n\n  // Subscribe to updates for local and remote participants\n  private subscribeToParticipants() { // (10)!\n    this.localParticipantSubs = this.participantService.localParticipant$.subscribe((p) => {\n      if (p) this.localParticipant = p;\n    });\n\n    this.remoteParticipantsSubs = this.participantService.remoteParticipants$.subscribe((participants) => {\n      this.remoteParticipants = participants;\n    });\n  }\n\n  // Retrieves a token to join the room with the given name and participant name.\n  getToken(roomName: string, participantName: string): Promise<any> { // (11)!\n    // Requesting token to the server application\n  }\n}\n
  1. APPLICATION_SERVER_URL: URL to communicate the client application with the server application to request OpenVidu tokens.
  2. LIVEKIT_URL: URL to communicate the client application with the LiveKit server.
  3. roomName: OpenVidu Room identifier. This is the room where the VideoconferenceComponent will connect.
  4. token: OpenVidu Token used to connect to the OpenVidu Room.
  5. localParticipant: Local participant model.
  6. remoteParticipants: Remote participants model.
  7. localParticipantSubs: Subscription to the local participant updates.
  8. remoteParticipantsSubs: Subscription to the remote participants updates.
  9. onTokenRequested method that fires when the VideoconferenceComponent requests a token to connect to the OpenVidu Room.
  10. subscribeToParticipants method that subscribes to updates for local and remote participants.
  11. getToken method that requests a token to the server application.

The app.component.ts file declares the following properties and methods:

Configure the URLs

For local development, leave APPLICATION_SERVER_URL and LIVEKIT_URL variables empty. The function configureUrls() will automatically configure them with default values. However, for production, you should configure these variables with the correct URLs depending on your deployment.

The OpenVidu Components Angular library provides a set of CSS variables that you can use to customize the appearance of the components. You can define these variables in your application's global styles file (e.g. styles.scss).

:root {\n    --ov-primary-color: #303030; /* Primary interface color */\n    --ov-secondary-color: #3e3f3f; /* Secondary interface color */\n    --ov-tertiary-color: #598eff; /* Tertiary accent color for elements */\n    --ov-warn-color: #eb5144; /* Warning color for alerts and notifications */\n    --ov-light-color: #e6e6e6; /* Light color for elements */\n\n    --ov-accent-color: #ffae35; /* Accent color for standout UI elements */\n\n    --ov-logo-background-color: #3a3d3d; /* Background color for the logo area */\n    --ov-text-color: #ffffff; /* Default text color */\n\n    --ov-panel-text-color: #1d1d1d; /* Text color for panel elements */\n    --ov-panel-background: #ffffff; /* Background color for panels */\n\n    --ov-buttons-radius: 50%; /* Border-radius for circular buttons */\n    --ov-leave-button-radius: 10px; /* Border-radius for the leave button */\n    --ov-video-radius: 5px; /* Border-radius for video elements */\n    --ov-panel-radius: 5px; /* Border-radius for panel elements */\n}\n
"},{"location":"docs/tutorials/angular-components/openvidu-custom-layout/#adding-custom-buttons-to-the-toolbar","title":"Adding custom buttons to the toolbar","text":"

OpenVidu Components Angular provides a directive called *ovLayout that allows you to customize the default layout of the videoconference. In this tutorial, we are creating a very basic layout just for demonstration purposes.

@Component({\n    selector: 'app-root',\n    template: `\n        <!-- OpenVidu Video Conference Component -->\n        <ov-videoconference\n            [token]=\"token\"\n            [livekitUrl]=\"LIVEKIT_URL\"\n            (onTokenRequested)=\"onTokenRequested($event)\"\n        >\n            <!-- Custom Layout for Video Streams -->\n            <div *ovLayout>\n                <div class=\"container\">\n                    <!-- Local Participant's Tracks -->\n                    @for (track of localParticipant.tracks; track track) {\n                    <div\n                        class=\"item\"\n                        [ngClass]=\"{\n                            hidden:\n                                track.isAudioTrack && !track.participant.onlyHasAudioTracks\n                        }\"\n                    >\n                        <ov-stream [track]=\"track\"></ov-stream>\n                    </div>\n                    }\n\n                    <!-- Remote Participants' Tracks -->\n                    @for (track of remoteParticipants | tracks; track track) {\n                    <div\n                        class=\"item\"\n                        [ngClass]=\"{\n                            hidden:\n                                track.isAudioTrack && !track.participant.onlyHasAudioTracks\n                        }\"\n                    >\n                        <ov-stream [track]=\"track\"></ov-stream>\n                    </div>\n                    }\n                </div>\n            </div>\n        </ov-videoconference>\n    `,\n    styles: [''],\n    standalone: true,\n    imports: [OpenViduComponentsModule, MatIconButton, MatIcon],\n})\nexport class AppComponent implements OnInit, OnDestroy {\n    // ...\n}\n

In this code snippet, the *ovLayout directive is used to customize the layout of the videoconference. The layout is divided into two sections: one for the local participant's tracks and another for the remote participants' tracks.

The repeater directive @for is used to iterate over the tracks of the local participant and the remote participants and display them in the layout using the ov-stream component.

"},{"location":"docs/tutorials/angular-components/openvidu-custom-panels/","title":"openvidu-custom-panels","text":"

Source code

The openvidu-custom-panels tutorial demonstrates how to replace the default panels with a custom ones, providing a more tailored user experience.

Customizing the videoconference panels is made simple with the PanelDirective, which offers a straightforward way to replace and adapt the PanelComponent to your needs.

OpenVidu Components - Custom Panels"},{"location":"docs/tutorials/angular-components/openvidu-custom-panels/#running-this-tutorial","title":"Running this tutorial","text":""},{"location":"docs/tutorials/angular-components/openvidu-custom-panels/#1-run-openvidu-server","title":"1. Run OpenVidu Server","text":"Run OpenVidu locallyDeploy OpenVidu

  1. Download OpenVidu

    git clone https://github.com/OpenVidu/openvidu-local-deployment\n

  2. Configure the local deployment

    Windows macOS Linux 
    cd openvidu-local-deployment/community\n.\\configure_lan_private_ip_windows.bat\n
    cd openvidu-local-deployment/community\n./configure_lan_private_ip_macos.sh\n
    cd openvidu-local-deployment/community\n./configure_lan_private_ip_linux.sh\n

  3. Run OpenVidu

    docker compose up\n

To use a production-ready OpenVidu deployment, visit the official deployment guide.

"},{"location":"docs/tutorials/angular-components/openvidu-custom-panels/#2-download-the-tutorial-code","title":"2. Download the tutorial code","text":"
git clone https://github.com/OpenVidu/openvidu-livekit-tutorials.git\ngit clone https://github.com/OpenVidu/openvidu-tutorials.git\n
"},{"location":"docs/tutorials/angular-components/openvidu-custom-panels/#3-run-the-server-application","title":"3. Run the server application","text":"Node Go Ruby Java Python Rust PHP .NET

To run this server application, you need Node installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/node\n
  2. Install dependencies 
    npm install\n
  3. Run the application 
    npm start\n

To run this server application, you need Go installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/go\n
  2. Run the application 
    go run main.go\n

To run this server application, you need Ruby installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/ruby\n
  2. Install dependencies 
    bundle install\n
  3. Run the application 
    ruby app.rb\n

To run this server application, you need Java and Maven installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/java\n
  2. Run the application 
    mvn spring-boot:run\n

To run this server application, you need Python 3 installed on your device.

  1. Navigate into the server directory

    cd openvidu-livekit-tutorials/application-server/python\n

  2. Create a python virtual environment

    python -m venv venv\n

  3. Activate the virtual environment

    Windows macOS Linux 
    .\\venv\\Scripts\\activate\n
    . ./venv/bin/activate\n
    . ./venv/bin/activate\n

  4. Install dependencies

    pip install -r requirements.txt\n

  5. Run the application

    python app.py\n

To run this server application, you need Rust installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/rust\n
  2. Run the application 
    cargo run\n

To run this server application, you need PHP and Composer installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/php\n
  2. Install dependencies 
    composer install\n
  3. Run the application 
    composer start\n

To run this server application, you need .NET installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/dotnet\n
  2. Run the application 
    dotnet run\n

Warning

This .NET server application needs the LIVEKIT_API_SECRET env variable to be at least 32 characters long. Make sure to update it here and in your OpenVidu Server.

"},{"location":"docs/tutorials/angular-components/openvidu-custom-panels/#4-run-the-openvidu-custom-panels-tutorial","title":"4. Run the openvidu-custom-panels tutorial","text":"

To run the client application tutorial, you need Node installed on your development computer.

  1. Navigate into the application client directory:

      cd openvidu-tutorials/openvidu-components/openvidu-custom-panels\n

  2. Install the required dependencies:

      npm install\n

  3. Serve the application:

      npm start\n

Once the server is up and running, you can test the application by visiting http://localhost:5080.

Accessing your application client from other devices in your local network

One advantage of running OpenVidu locally is that you can test your application client with other devices in your local network very easily without worrying about SSL certificates.

Access your application client through https://xxx-yyy-zzz-www.openvidu-local.dev:5443, where xxx-yyy-zzz-www part of the domain is your LAN private IP address with dashes (-) instead of dots (.). For more information, see section Accessing your app from other devices in your network.

"},{"location":"docs/tutorials/angular-components/openvidu-custom-panels/#understanding-the-code","title":"Understanding the code","text":"

This tutorial is an Angular project generated with Angular CLI tool. Therefore, you will see many configuration files and other components that are not the primary focus of this tutorial. We will concentrate on the following files in the src directory:

To use OpenVidu Components Angular in your application, you need to install the library and import the OpenViduComponentsModule in your Angular module. Let's see how to do this:

  1. Create an Angular Project (version 17 or higher)

    To begin, you will need to create a new Angular project if you haven't already. Ensure you have Node.js and the Angular CLI installed. Then, run the following command to create a new Angular project:

    ng new your-project-name\n

    Replace your-project-name with the desired name for your project.

  2. Add Angular Material to your project

    OpenVidu Components Angular needs Angular Material, which provides a range of UI components. To add Angular Material to your project, navigate to your project directory and run:

    ng add @angular/material\n

  3. Install OpenVidu Components Angular

    With your Angular project set up, it's time to add videoconferencing capabilities with OpenVidu Components Angular. Install the library using npm:

    npm install openvidu-components-angular\n

  4. Import and use OpenVidu Components Angular

    To use OpenVidu Components Angular in your application, you need to:

    1. Import the OpenViduComponentsModule in your Angular application.
    2. Configure the module with the OpenViduComponentsConfig object.
    3. Add the component to your template file.
    4. Assign the OpenVidu token and LiveKit URL to the component.
    5. Customize the appearance of the components using CSS variables.
main.tsapp.component.tsstyles.scss

In your main.ts application file, import the it and configure it as follows:

// Other imports ...\n\nimport { OpenViduComponentsModule, OpenViduComponentsConfig } from 'openvidu-components-angular';\n\nconst config: OpenViduComponentsConfig = {\n    production: true,\n};\n\nbootstrapApplication(AppComponent, {\n    providers: [\n        importProvidersFrom(\n            OpenViduComponentsModule.forRoot(config)\n            // Other imports ...\n        ),\n        provideAnimations(),\n    ],\n}).catch((err) => console.error(err));\n

Use the ov-videoconference component to create a videoconference. This component requires a token to connect to the OpenVidu Room. The AppComponent class is responsible for requesting the token and passing it to the ov-videoconference component.

import { OpenViduComponentsModule } from 'openvidu-components-angular';\n\n@Component({\n  selector: 'app-root',\n  template:`\n      <!-- OpenVidu Video Conference Component -->\n      <ov-videoconference\n        [token]=\"token\"\n        [livekitUrl]=\"LIVEKIT_URL\"\n        (onTokenRequested)=\"onTokenRequested($event)\"\n      >\n        <!-- Custom Panels -->\n        <ov-panel *ovPanel>\n          <!-- Custom Chat Panel -->\n          <div *ovChatPanel id=\"my-chat-panel\">This is my custom chat panel</div>\n\n          <!-- Custom Participants Panel -->\n          <div *ovParticipantsPanel id=\"my-participants-panel\">\n            This is my custom participants panel\n          </div>\n\n          <!-- Custom Activities Panel -->\n          <div *ovActivitiesPanel id=\"my-activities-panel\">\n            This is my custom activities panel\n          </div>\n        </ov-panel>\n      </ov-videoconference>\n  `,\n  styles: [''],\n  standalone: true,\n  imports: [OpenViduComponentsModule],\n})\nexport class AppComponent {\n  // For local development, leave these variables empty\n  // For production, configure them with correct URLs depending on your deployment\n\n  APPLICATION_SERVER_URL = '';  // (1)!\n  LIVEKIT_URL = ''; // (2)!\n\n  // The name of the room to join.\n  roomName = 'openvidu-custom-panels';  // (3)!\n\n  // The token used to join the room.\n  token!: string; // (4)!\n\n  constructor(private httpClient: HttpClient) {\n    this.configureUrls();\n  }\n\n  private configureUrls() {\n    // If APPLICATION_SERVER_URL is not configured, use default value from local development\n    if (!this.APPLICATION_SERVER_URL) {\n      if (window.location.hostname === 'localhost') {\n        this.APPLICATION_SERVER_URL = 'http://localhost:6080/';\n      } else {\n        this.APPLICATION_SERVER_URL =\n          'https://' + window.location.hostname + ':6443/';\n      }\n    }\n\n    // If LIVEKIT_URL is not configured, use default value from local development\n    if (!this.LIVEKIT_URL) {\n      if (window.location.hostname === 'localhost') {\n        this.LIVEKIT_URL = 'ws://localhost:7880/';\n      } else {\n        this.LIVEKIT_URL = 'wss://' + window.location.hostname + ':7443/';\n      }\n    }\n  }\n\n  // Requests a token to join the room with the given participant name.\n  async onTokenRequested(participantName: string) { // (5)!\n    const { token } = await this.getToken(this.roomName, participantName);\n    this.token = token;\n  }\n\n  // Retrieves a token to join the room with the given name and participant name.\n  getToken(roomName: string, participantName: string): Promise<any> { // (6)!\n    // Requesting token to the server application\n  }\n}\n
  1. APPLICATION_SERVER_URL: URL to communicate the client application with the server application to request OpenVidu tokens.
  2. LIVEKIT_URL: URL to communicate the client application with the LiveKit server.
  3. roomName: OpenVidu Room identifier. This is the room where the VideoconferenceComponent will connect.
  4. token: OpenVidu Token used to connect to the OpenVidu Room.
  5. onTokenRequested method that fires when the VideoconferenceComponent requests a token to connect to the OpenVidu Room.
  6. getToken method that requests a token to the server application.

The app.component.ts file declares the following properties and methods:

Configure the URLs

For local development, leave APPLICATION_SERVER_URL and LIVEKIT_URL variables empty. The function configureUrls() will automatically configure them with default values. However, for production, you should configure these variables with the correct URLs depending on your deployment.

The OpenVidu Components Angular library provides a set of CSS variables that you can use to customize the appearance of the components. You can define these variables in your application's global styles file (e.g. styles.scss).

:root {\n    --ov-primary-color: #303030; /* Primary interface color */\n    --ov-secondary-color: #3e3f3f; /* Secondary interface color */\n    --ov-tertiary-color: #598eff; /* Tertiary accent color for elements */\n    --ov-warn-color: #eb5144; /* Warning color for alerts and notifications */\n    --ov-light-color: #e6e6e6; /* Light color for elements */\n\n    --ov-accent-color: #ffae35; /* Accent color for standout UI elements */\n\n    --ov-logo-background-color: #3a3d3d; /* Background color for the logo area */\n    --ov-text-color: #ffffff; /* Default text color */\n\n    --ov-panel-text-color: #1d1d1d; /* Text color for panel elements */\n    --ov-panel-background: #ffffff; /* Background color for panels */\n\n    --ov-buttons-radius: 50%; /* Border-radius for circular buttons */\n    --ov-leave-button-radius: 10px; /* Border-radius for the leave button */\n    --ov-video-radius: 5px; /* Border-radius for video elements */\n    --ov-panel-radius: 5px; /* Border-radius for panel elements */\n}\n
"},{"location":"docs/tutorials/angular-components/openvidu-custom-panels/#customizing-the-panels","title":"Customizing the panels","text":"

The *ovPanel directive is used to replace the default videoconference panels with a custom ones. In the app.component.ts file, you can see the following code snippet:

@Component({\n    selector: 'app-root',\n    template: `\n        <!-- OpenVidu Video Conference Component -->\n        <ov-videoconference\n            [token]=\"token\"\n            [livekitUrl]=\"LIVEKIT_URL\"\n            (onTokenRequested)=\"onTokenRequested($event)\"\n        >\n            <!-- Custom Panels -->\n            <ov-panel *ovPanel>\n                <!-- Custom Chat Panel -->\n                <div *ovChatPanel id=\"my-chat-panel\">This is my custom chat panel</div>\n\n                <!-- Custom Participants Panel -->\n                <div *ovParticipantsPanel id=\"my-participants-panel\">\n                    This is my custom participants panel\n                </div>\n\n                <!-- Custom Activities Panel -->\n                <div *ovActivitiesPanel id=\"my-activities-panel\">\n                    This is my custom activities panel\n                </div>\n            </ov-panel>\n        </ov-videoconference>\n    `,\n    styles: [''],\n    standalone: true,\n    imports: [OpenViduComponentsModule],\n})\nexport class AppComponent {\n    // ...\n}\n

In this code snippet, the *ovPanel directive is used to replace the default videoconference panels with custom ones. The *ovChatPanel, *ovParticipantsPanel, and *ovActivitiesPanel directives are used to replace the default chat, participants, and activities panels with custom ones.

"},{"location":"docs/tutorials/angular-components/openvidu-custom-participant-panel-item-element/","title":"openvidu-custom-participant-panel-item-element","text":"

Source code

The openvidu-custom-participant-panel-item-element tutorial demonstrates how to replace the default participant item element inside of the participants panel with a custom one, providing a more tailored user experience.

Replacing the default participant item element is made simple with the ParticipantsPanelItemElementsDirective, which offers a straightforward way to replace and adapt the ParticipantsPanelItemComponent to your needs.

OpenVidu Components - Custom Participants Panel Item Element"},{"location":"docs/tutorials/angular-components/openvidu-custom-participant-panel-item-element/#running-this-tutorial","title":"Running this tutorial","text":""},{"location":"docs/tutorials/angular-components/openvidu-custom-participant-panel-item-element/#1-run-openvidu-server","title":"1. Run OpenVidu Server","text":"Run OpenVidu locallyDeploy OpenVidu

  1. Download OpenVidu

    git clone https://github.com/OpenVidu/openvidu-local-deployment\n

  2. Configure the local deployment

    Windows macOS Linux 
    cd openvidu-local-deployment/community\n.\\configure_lan_private_ip_windows.bat\n
    cd openvidu-local-deployment/community\n./configure_lan_private_ip_macos.sh\n
    cd openvidu-local-deployment/community\n./configure_lan_private_ip_linux.sh\n

  3. Run OpenVidu

    docker compose up\n

To use a production-ready OpenVidu deployment, visit the official deployment guide.

"},{"location":"docs/tutorials/angular-components/openvidu-custom-participant-panel-item-element/#2-download-the-tutorial-code","title":"2. Download the tutorial code","text":"
git clone https://github.com/OpenVidu/openvidu-livekit-tutorials.git\ngit clone https://github.com/OpenVidu/openvidu-tutorials.git\n
"},{"location":"docs/tutorials/angular-components/openvidu-custom-participant-panel-item-element/#3-run-the-server-application","title":"3. Run the server application","text":"Node Go Ruby Java Python Rust PHP .NET

To run this server application, you need Node installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/node\n
  2. Install dependencies 
    npm install\n
  3. Run the application 
    npm start\n

To run this server application, you need Go installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/go\n
  2. Run the application 
    go run main.go\n

To run this server application, you need Ruby installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/ruby\n
  2. Install dependencies 
    bundle install\n
  3. Run the application 
    ruby app.rb\n

To run this server application, you need Java and Maven installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/java\n
  2. Run the application 
    mvn spring-boot:run\n

To run this server application, you need Python 3 installed on your device.

  1. Navigate into the server directory

    cd openvidu-livekit-tutorials/application-server/python\n

  2. Create a python virtual environment

    python -m venv venv\n

  3. Activate the virtual environment

    Windows macOS Linux 
    .\\venv\\Scripts\\activate\n
    . ./venv/bin/activate\n
    . ./venv/bin/activate\n

  4. Install dependencies

    pip install -r requirements.txt\n

  5. Run the application

    python app.py\n

To run this server application, you need Rust installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/rust\n
  2. Run the application 
    cargo run\n

To run this server application, you need PHP and Composer installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/php\n
  2. Install dependencies 
    composer install\n
  3. Run the application 
    composer start\n

To run this server application, you need .NET installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/dotnet\n
  2. Run the application 
    dotnet run\n

Warning

This .NET server application needs the LIVEKIT_API_SECRET env variable to be at least 32 characters long. Make sure to update it here and in your OpenVidu Server.

"},{"location":"docs/tutorials/angular-components/openvidu-custom-participant-panel-item-element/#4-run-the-openvidu-custom-participant-panel-item-element-tutorial","title":"4. Run the openvidu-custom-participant-panel-item-element tutorial","text":"

To run the client application tutorial, you need Node installed on your development computer.

  1. Navigate into the application client directory:

      cd openvidu-tutorials/openvidu-components/openvidu-custom-participant-panel-item-element\n

  2. Install the required dependencies:

      npm install\n

  3. Serve the application:

      npm start\n

Once the server is up and running, you can test the application by visiting http://localhost:5080.

Accessing your application client from other devices in your local network

One advantage of running OpenVidu locally is that you can test your application client with other devices in your local network very easily without worrying about SSL certificates.

Access your application client through https://xxx-yyy-zzz-www.openvidu-local.dev:5443, where xxx-yyy-zzz-www part of the domain is your LAN private IP address with dashes (-) instead of dots (.). For more information, see section Accessing your app from other devices in your network.

"},{"location":"docs/tutorials/angular-components/openvidu-custom-participant-panel-item-element/#understanding-the-code","title":"Understanding the code","text":"

This tutorial is an Angular project generated with Angular CLI tool. Therefore, you will see many configuration files and other components that are not the primary focus of this tutorial. We will concentrate on the following files in the src directory:

To use OpenVidu Components Angular in your application, you need to install the library and import the OpenViduComponentsModule in your Angular module. Let's see how to do this:

  1. Create an Angular Project (version 17 or higher)

    To begin, you will need to create a new Angular project if you haven't already. Ensure you have Node.js and the Angular CLI installed. Then, run the following command to create a new Angular project:

    ng new your-project-name\n

    Replace your-project-name with the desired name for your project.

  2. Add Angular Material to your project

    OpenVidu Components Angular needs Angular Material, which provides a range of UI components. To add Angular Material to your project, navigate to your project directory and run:

    ng add @angular/material\n

  3. Install OpenVidu Components Angular

    With your Angular project set up, it's time to add videoconferencing capabilities with OpenVidu Components Angular. Install the library using npm:

    npm install openvidu-components-angular\n

  4. Import and use OpenVidu Components Angular

    To use OpenVidu Components Angular in your application, you need to:

    1. Import the OpenViduComponentsModule in your Angular application.
    2. Configure the module with the OpenViduComponentsConfig object.
    3. Add the component to your template file.
    4. Assign the OpenVidu token and LiveKit URL to the component.
    5. Customize the appearance of the components using CSS variables.
main.tsapp.component.tsstyles.scss

In your main.ts application file, import the it and configure it as follows:

// Other imports ...\n\nimport { OpenViduComponentsModule, OpenViduComponentsConfig } from 'openvidu-components-angular';\n\nconst config: OpenViduComponentsConfig = {\n    production: true,\n};\n\nbootstrapApplication(AppComponent, {\n    providers: [\n        importProvidersFrom(\n            OpenViduComponentsModule.forRoot(config)\n            // Other imports ...\n        ),\n        provideAnimations(),\n    ],\n}).catch((err) => console.error(err));\n

Use the ov-videoconference component to create a videoconference. This component requires a token to connect to the OpenVidu Room. The AppComponent class is responsible for requesting the token and passing it to the ov-videoconference component.

import {\n  ParticipantModel,\n    ParticipantService,\n  OpenViduComponentsModule\n} from 'openvidu-components-angular';\n\n@Component({\n  selector: 'app-root',\n  template:`\n    <!-- OpenVidu Video Conference Component -->\n    <ov-videoconference\n      [token]=\"token\"\n      [livekitUrl]=\"LIVEKIT_URL\"\n      (onTokenRequested)=\"onTokenRequested($event)\"\n    >\n      <!-- Participant Panel Item Elements -->\n      <div *ovParticipantPanelItemElements=\"let participant\">\n        <!-- Leave Button for Local Participant -->\n        @if (participant.isLocal) {\n        <button (click)=\"leaveSession()\">Leave</button>\n        }\n      </div>\n    </ov-videoconference>\n  `,\n  styles: [''],\n  standalone: true,\n  imports: [OpenViduComponentsModule],\n})\nexport class AppComponent {\n  // For local development, leave these variables empty\n  // For production, configure them with correct URLs depending on your deployment\n\n  APPLICATION_SERVER_URL = '';  // (1)!\n  LIVEKIT_URL = ''; // (2)!\n\n  // The name of the room to join.\n  roomName = 'openvidu-custom-participant-panel-item-element';  // (3)!\n\n  // The token used to join the room.\n  token!: string; // (4)!\n\n  constructor(private httpClient: HttpClient) {\n    this.configureUrls();\n  }\n\n  private configureUrls() {\n    // If APPLICATION_SERVER_URL is not configured, use default value from local development\n    if (!this.APPLICATION_SERVER_URL) {\n      if (window.location.hostname === 'localhost') {\n        this.APPLICATION_SERVER_URL = 'http://localhost:6080/';\n      } else {\n        this.APPLICATION_SERVER_URL =\n          'https://' + window.location.hostname + ':6443/';\n      }\n    }\n\n    // If LIVEKIT_URL is not configured, use default value from local development\n    if (!this.LIVEKIT_URL) {\n      if (window.location.hostname === 'localhost') {\n        this.LIVEKIT_URL = 'ws://localhost:7880/';\n      } else {\n        this.LIVEKIT_URL = 'wss://' + window.location.hostname + ':7443/';\n      }\n    }\n  }\n\n  // Requests a token to join the room with the given participant name.\n  async onTokenRequested(participantName: string) { // (5)!\n    const { token } = await this.getToken(this.roomName, participantName);\n    this.token = token;\n  }\n\n  // Function to leave the session\n  async leaveSession() { // (6)!\n    await this.openviduService.disconnectRoom();\n  }\n\n  // Retrieves a token to join the room with the given name and participant name.\n  getToken(roomName: string, participantName: string): Promise<any> { // (7)!\n    // Requesting token to the server application\n  }\n}\n
  1. APPLICATION_SERVER_URL: URL to communicate the client application with the server application to request OpenVidu tokens.
  2. LIVEKIT_URL: URL to communicate the client application with the LiveKit server.
  3. roomName: OpenVidu Room identifier. This is the room where the VideoconferenceComponent will connect.
  4. token: OpenVidu Token used to connect to the OpenVidu Room.
  5. onTokenRequested method that fires when the VideoconferenceComponent requests a token to connect to the OpenVidu Room.
  6. leaveSession method that disconnects the client from the OpenVidu Room.
  7. getToken method that requests a token to the server application.

The app.component.ts file declares the following properties and methods:

Configure the URLs

For local development, leave APPLICATION_SERVER_URL and LIVEKIT_URL variables empty. The function configureUrls() will automatically configure them with default values. However, for production, you should configure these variables with the correct URLs depending on your deployment.

The OpenVidu Components Angular library provides a set of CSS variables that you can use to customize the appearance of the components. You can define these variables in your application's global styles file (e.g. styles.scss).

:root {\n    --ov-primary-color: #303030; /* Primary interface color */\n    --ov-secondary-color: #3e3f3f; /* Secondary interface color */\n    --ov-tertiary-color: #598eff; /* Tertiary accent color for elements */\n    --ov-warn-color: #eb5144; /* Warning color for alerts and notifications */\n    --ov-light-color: #e6e6e6; /* Light color for elements */\n\n    --ov-accent-color: #ffae35; /* Accent color for standout UI elements */\n\n    --ov-logo-background-color: #3a3d3d; /* Background color for the logo area */\n    --ov-text-color: #ffffff; /* Default text color */\n\n    --ov-panel-text-color: #1d1d1d; /* Text color for panel elements */\n    --ov-panel-background: #ffffff; /* Background color for panels */\n\n    --ov-buttons-radius: 50%; /* Border-radius for circular buttons */\n    --ov-leave-button-radius: 10px; /* Border-radius for the leave button */\n    --ov-video-radius: 5px; /* Border-radius for video elements */\n    --ov-panel-radius: 5px; /* Border-radius for panel elements */\n}\n
"},{"location":"docs/tutorials/angular-components/openvidu-custom-participant-panel-item-element/#customizing-participant-item-element","title":"Customizing participant item element","text":"

This tutorial uses the *ovParticipantPanelItem directive with the aim of replacing the default participant item, inside of the participants panel, with a custom one.

In the app.component.ts file, you can see the following code snippet:

@Component({\n    selector: 'app-root',\n    template: `\n        <!-- OpenVidu Video Conference Component -->\n        <ov-videoconference\n            [token]=\"token\"\n            [livekitUrl]=\"LIVEKIT_URL\"\n            (onTokenRequested)=\"onTokenRequested($event)\"\n        >\n            <!-- Participant Panel Item Elements -->\n            <div *ovParticipantPanelItemElements=\"let participant\">\n                <!-- Leave Button for Local Participant -->\n                @if (participant.isLocal) {\n                <button (click)=\"leaveSession()\">Leave</button>\n                }\n            </div>\n        </ov-videoconference>\n    `,\n    styles: [''],\n    standalone: true,\n    imports: [OpenViduComponentsModule],\n})\nexport class AppComponent {\n    // ...\n}\n

In this code snippet, the *ovParticipantPanelItemElements directive is used to replace the default participant item element, inside of the participants panel, with a custom one.

The *ovParticipantPanelItemElements directive provides a way to access the participant object and customize the participant item component to your needs.

"},{"location":"docs/tutorials/angular-components/openvidu-custom-participant-panel-item/","title":"openvidu-custom-participant-panel-item","text":"

Source code

The openvidu-custom-participant-panel-item tutorial demonstrates how to replace the default participant item inside of the participants panel with a custom one, providing a more tailored user experience.

Replacing the default participant item is made simple with the ParticipantsPanelItemDirective, which offers a straightforward way to replace and adapt the ParticipantsPanelItemComponent to your needs.

OpenVidu Components - Custom Participants Panel Item"},{"location":"docs/tutorials/angular-components/openvidu-custom-participant-panel-item/#running-this-tutorial","title":"Running this tutorial","text":""},{"location":"docs/tutorials/angular-components/openvidu-custom-participant-panel-item/#1-run-openvidu-server","title":"1. Run OpenVidu Server","text":"Run OpenVidu locallyDeploy OpenVidu

  1. Download OpenVidu

    git clone https://github.com/OpenVidu/openvidu-local-deployment\n

  2. Configure the local deployment

    Windows macOS Linux 
    cd openvidu-local-deployment/community\n.\\configure_lan_private_ip_windows.bat\n
    cd openvidu-local-deployment/community\n./configure_lan_private_ip_macos.sh\n
    cd openvidu-local-deployment/community\n./configure_lan_private_ip_linux.sh\n

  3. Run OpenVidu

    docker compose up\n

To use a production-ready OpenVidu deployment, visit the official deployment guide.

"},{"location":"docs/tutorials/angular-components/openvidu-custom-participant-panel-item/#2-download-the-tutorial-code","title":"2. Download the tutorial code","text":"
git clone https://github.com/OpenVidu/openvidu-livekit-tutorials.git\ngit clone https://github.com/OpenVidu/openvidu-tutorials.git\n
"},{"location":"docs/tutorials/angular-components/openvidu-custom-participant-panel-item/#3-run-the-server-application","title":"3. Run the server application","text":"Node Go Ruby Java Python Rust PHP .NET

To run this server application, you need Node installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/node\n
  2. Install dependencies 
    npm install\n
  3. Run the application 
    npm start\n

To run this server application, you need Go installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/go\n
  2. Run the application 
    go run main.go\n

To run this server application, you need Ruby installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/ruby\n
  2. Install dependencies 
    bundle install\n
  3. Run the application 
    ruby app.rb\n

To run this server application, you need Java and Maven installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/java\n
  2. Run the application 
    mvn spring-boot:run\n

To run this server application, you need Python 3 installed on your device.

  1. Navigate into the server directory

    cd openvidu-livekit-tutorials/application-server/python\n

  2. Create a python virtual environment

    python -m venv venv\n

  3. Activate the virtual environment

    Windows macOS Linux 
    .\\venv\\Scripts\\activate\n
    . ./venv/bin/activate\n
    . ./venv/bin/activate\n

  4. Install dependencies

    pip install -r requirements.txt\n

  5. Run the application

    python app.py\n

To run this server application, you need Rust installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/rust\n
  2. Run the application 
    cargo run\n

To run this server application, you need PHP and Composer installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/php\n
  2. Install dependencies 
    composer install\n
  3. Run the application 
    composer start\n

To run this server application, you need .NET installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/dotnet\n
  2. Run the application 
    dotnet run\n

Warning

This .NET server application needs the LIVEKIT_API_SECRET env variable to be at least 32 characters long. Make sure to update it here and in your OpenVidu Server.

"},{"location":"docs/tutorials/angular-components/openvidu-custom-participant-panel-item/#4-run-the-openvidu-custom-participant-panel-item-tutorial","title":"4. Run the openvidu-custom-participant-panel-item tutorial","text":"

To run the client application tutorial, you need Node installed on your development computer.

  1. Navigate into the application client directory:

      cd openvidu-tutorials/openvidu-components/openvidu-custom-participant-panel-item\n

  2. Install the required dependencies:

      npm install\n

  3. Serve the application:

      npm start\n

Once the server is up and running, you can test the application by visiting http://localhost:5080.

Accessing your application client from other devices in your local network

One advantage of running OpenVidu locally is that you can test your application client with other devices in your local network very easily without worrying about SSL certificates.

Access your application client through https://xxx-yyy-zzz-www.openvidu-local.dev:5443, where xxx-yyy-zzz-www part of the domain is your LAN private IP address with dashes (-) instead of dots (.). For more information, see section Accessing your app from other devices in your network.

"},{"location":"docs/tutorials/angular-components/openvidu-custom-participant-panel-item/#understanding-the-code","title":"Understanding the code","text":"

This tutorial is an Angular project generated with Angular CLI tool. Therefore, you will see many configuration files and other components that are not the primary focus of this tutorial. We will concentrate on the following files in the src directory:

To use OpenVidu Components Angular in your application, you need to install the library and import the OpenViduComponentsModule in your Angular module. Let's see how to do this:

  1. Create an Angular Project (version 17 or higher)

    To begin, you will need to create a new Angular project if you haven't already. Ensure you have Node.js and the Angular CLI installed. Then, run the following command to create a new Angular project:

    ng new your-project-name\n

    Replace your-project-name with the desired name for your project.

  2. Add Angular Material to your project

    OpenVidu Components Angular needs Angular Material, which provides a range of UI components. To add Angular Material to your project, navigate to your project directory and run:

    ng add @angular/material\n

  3. Install OpenVidu Components Angular

    With your Angular project set up, it's time to add videoconferencing capabilities with OpenVidu Components Angular. Install the library using npm:

    npm install openvidu-components-angular\n

  4. Import and use OpenVidu Components Angular

    To use OpenVidu Components Angular in your application, you need to:

    1. Import the OpenViduComponentsModule in your Angular application.
    2. Configure the module with the OpenViduComponentsConfig object.
    3. Add the component to your template file.
    4. Assign the OpenVidu token and LiveKit URL to the component.
    5. Customize the appearance of the components using CSS variables.
main.tsapp.component.tsstyles.scss

In your main.ts application file, import the it and configure it as follows:

// Other imports ...\n\nimport { OpenViduComponentsModule, OpenViduComponentsConfig } from 'openvidu-components-angular';\n\nconst config: OpenViduComponentsConfig = {\n    production: true,\n};\n\nbootstrapApplication(AppComponent, {\n    providers: [\n        importProvidersFrom(\n            OpenViduComponentsModule.forRoot(config)\n            // Other imports ...\n        ),\n        provideAnimations(),\n    ],\n}).catch((err) => console.error(err));\n

Use the ov-videoconference component to create a videoconference. This component requires a token to connect to the OpenVidu Room. The AppComponent class is responsible for requesting the token and passing it to the ov-videoconference component.

import {\n  ParticipantModel,\n    ParticipantService,\n  OpenViduComponentsModule\n} from 'openvidu-components-angular';\n\n@Component({\n  selector: 'app-root',\n  template:`\n    <!-- OpenVidu Video Conference Component -->\n    <ov-videoconference\n        [token]=\"token\"\n        [livekitUrl]=\"LIVEKIT_URL\"\n        (onTokenRequested)=\"onTokenRequested($event)\"\n    >\n        <!-- Participant Panel Items -->\n        <div *ovParticipantPanelItem=\"let participant\" style=\"display: flex\">\n            <p>{{ participant.name }}</p>\n\n            <!-- More Options Menu -->\n            <button mat-icon-button [matMenuTriggerFor]=\"menu\">\n                <mat-icon>more_vert</mat-icon>\n            </button>\n\n            <!-- Menu Content -->\n            <mat-menu #menu=\"matMenu\">\n                <button mat-menu-item>Button 1</button>\n                <button mat-menu-item>Button 2</button>\n            </mat-menu>\n        </div>\n    </ov-videoconference>\n  `,\n  styles: [''],\n  standalone: true,\n    imports: [\n    OpenViduComponentsModule,\n    MatIconButton,\n    MatMenuTrigger,\n    MatIcon,\n    MatMenu,\n    MatMenuItem,\n  ],\n})\nexport class AppComponent {\n  // For local development, leave these variables empty\n  // For production, configure them with correct URLs depending on your deployment\n\n  APPLICATION_SERVER_URL = '';  // (1)!\n  LIVEKIT_URL = ''; // (2)!\n\n  // The name of the room to join.\n  roomName = 'openvidu-custom-participant-panel-item';  // (3)!\n\n  // The token used to join the room.\n  token!: string; // (4)!\n\n  constructor(private httpClient: HttpClient) {\n    this.configureUrls();\n  }\n\n  private configureUrls() {\n    // If APPLICATION_SERVER_URL is not configured, use default value from local development\n    if (!this.APPLICATION_SERVER_URL) {\n      if (window.location.hostname === 'localhost') {\n        this.APPLICATION_SERVER_URL = 'http://localhost:6080/';\n      } else {\n        this.APPLICATION_SERVER_URL =\n          'https://' + window.location.hostname + ':6443/';\n      }\n    }\n\n    // If LIVEKIT_URL is not configured, use default value from local development\n    if (!this.LIVEKIT_URL) {\n      if (window.location.hostname === 'localhost') {\n        this.LIVEKIT_URL = 'ws://localhost:7880/';\n      } else {\n        this.LIVEKIT_URL = 'wss://' + window.location.hostname + ':7443/';\n      }\n    }\n  }\n\n  // Requests a token to join the room with the given participant name.\n  async onTokenRequested(participantName: string) { // (5)!\n    const { token } = await this.getToken(this.roomName, participantName);\n    this.token = token;\n  }\n\n  // Retrieves a token to join the room with the given name and participant name.\n  getToken(roomName: string, participantName: string): Promise<any> { // (6)!\n    // Requesting token to the server application\n  }\n}\n
  1. APPLICATION_SERVER_URL: URL to communicate the client application with the server application to request OpenVidu tokens.
  2. LIVEKIT_URL: URL to communicate the client application with the LiveKit server.
  3. roomName: OpenVidu Room identifier. This is the room where the VideoconferenceComponent will connect.
  4. token: OpenVidu Token used to connect to the OpenVidu Room.
  5. onTokenRequested method that fires when the VideoconferenceComponent requests a token to connect to the OpenVidu Room.
  6. getToken method that requests a token to the server application.

The app.component.ts file declares the following properties and methods:

Configure the URLs

For local development, leave APPLICATION_SERVER_URL and LIVEKIT_URL variables empty. The function configureUrls() will automatically configure them with default values. However, for production, you should configure these variables with the correct URLs depending on your deployment.

The OpenVidu Components Angular library provides a set of CSS variables that you can use to customize the appearance of the components. You can define these variables in your application's global styles file (e.g. styles.scss).

:root {\n    --ov-primary-color: #303030; /* Primary interface color */\n    --ov-secondary-color: #3e3f3f; /* Secondary interface color */\n    --ov-tertiary-color: #598eff; /* Tertiary accent color for elements */\n    --ov-warn-color: #eb5144; /* Warning color for alerts and notifications */\n    --ov-light-color: #e6e6e6; /* Light color for elements */\n\n    --ov-accent-color: #ffae35; /* Accent color for standout UI elements */\n\n    --ov-logo-background-color: #3a3d3d; /* Background color for the logo area */\n    --ov-text-color: #ffffff; /* Default text color */\n\n    --ov-panel-text-color: #1d1d1d; /* Text color for panel elements */\n    --ov-panel-background: #ffffff; /* Background color for panels */\n\n    --ov-buttons-radius: 50%; /* Border-radius for circular buttons */\n    --ov-leave-button-radius: 10px; /* Border-radius for the leave button */\n    --ov-video-radius: 5px; /* Border-radius for video elements */\n    --ov-panel-radius: 5px; /* Border-radius for panel elements */\n}\n
"},{"location":"docs/tutorials/angular-components/openvidu-custom-participant-panel-item/#customizing-participant-item","title":"Customizing participant item","text":"

This tutorial uses the *ovParticipantPanelItem directive with the aim of replacing the default participant item, inside of the participants panel, with a custom one.

In the app.component.ts file, you can see the following code snippet:

@Component({\n    selector: 'app-root',\n    template: `\n        <!-- OpenVidu Video Conference Component -->\n        <ov-videoconference\n            [token]=\"token\"\n            [livekitUrl]=\"LIVEKIT_URL\"\n            (onTokenRequested)=\"onTokenRequested($event)\"\n        >\n            <!-- Participant Panel Items -->\n            <div *ovParticipantPanelItem=\"let participant\" style=\"display: flex\">\n                <p>{{ participant.name }}</p>\n\n                <!-- More Options Menu -->\n                <button mat-icon-button [matMenuTriggerFor]=\"menu\">\n                    <mat-icon>more_vert</mat-icon>\n                </button>\n\n                <!-- Menu Content -->\n                <mat-menu #menu=\"matMenu\">\n                    <button mat-menu-item>Button 1</button>\n                    <button mat-menu-item>Button 2</button>\n                </mat-menu>\n            </div>\n        </ov-videoconference>\n    `,\n    styles: [''],\n    standalone: true,\n    imports: [\n        OpenViduComponentsModule,\n        MatIconButton,\n        MatMenuTrigger,\n        MatIcon,\n        MatMenu,\n        MatMenuItem,\n    ],\n})\nexport class AppComponent {\n    // ...\n}\n

In this code snippet, the *ovParticipantPanelItem directive is used to replace the default participant item inside of the participants panel with a custom one. The *ovParticipantPanelItem directive provides a way to access the participant object and customize the participant item component to your needs.

"},{"location":"docs/tutorials/angular-components/openvidu-custom-participants-panel/","title":"openvidu-custom-participants-panel","text":"

Source code

The openvidu-custom-participants-panel tutorial demonstrates how to customize the participants panel, providing a more tailored user experience.

Replacing the default participants panel is made simple with the ParticipantsPanelDirective, which offers a straightforward way to replace and adapt the ParticipantsPanelComponent to your needs.

OpenVidu Components - Custom Participants Panel"},{"location":"docs/tutorials/angular-components/openvidu-custom-participants-panel/#running-this-tutorial","title":"Running this tutorial","text":""},{"location":"docs/tutorials/angular-components/openvidu-custom-participants-panel/#1-run-openvidu-server","title":"1. Run OpenVidu Server","text":"Run OpenVidu locallyDeploy OpenVidu

  1. Download OpenVidu

    git clone https://github.com/OpenVidu/openvidu-local-deployment\n

  2. Configure the local deployment

    Windows macOS Linux 
    cd openvidu-local-deployment/community\n.\\configure_lan_private_ip_windows.bat\n
    cd openvidu-local-deployment/community\n./configure_lan_private_ip_macos.sh\n
    cd openvidu-local-deployment/community\n./configure_lan_private_ip_linux.sh\n

  3. Run OpenVidu

    docker compose up\n

To use a production-ready OpenVidu deployment, visit the official deployment guide.

"},{"location":"docs/tutorials/angular-components/openvidu-custom-participants-panel/#2-download-the-tutorial-code","title":"2. Download the tutorial code","text":"
git clone https://github.com/OpenVidu/openvidu-livekit-tutorials.git\ngit clone https://github.com/OpenVidu/openvidu-tutorials.git\n
"},{"location":"docs/tutorials/angular-components/openvidu-custom-participants-panel/#3-run-the-server-application","title":"3. Run the server application","text":"Node Go Ruby Java Python Rust PHP .NET

To run this server application, you need Node installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/node\n
  2. Install dependencies 
    npm install\n
  3. Run the application 
    npm start\n

To run this server application, you need Go installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/go\n
  2. Run the application 
    go run main.go\n

To run this server application, you need Ruby installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/ruby\n
  2. Install dependencies 
    bundle install\n
  3. Run the application 
    ruby app.rb\n

To run this server application, you need Java and Maven installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/java\n
  2. Run the application 
    mvn spring-boot:run\n

To run this server application, you need Python 3 installed on your device.

  1. Navigate into the server directory

    cd openvidu-livekit-tutorials/application-server/python\n

  2. Create a python virtual environment

    python -m venv venv\n

  3. Activate the virtual environment

    Windows macOS Linux 
    .\\venv\\Scripts\\activate\n
    . ./venv/bin/activate\n
    . ./venv/bin/activate\n

  4. Install dependencies

    pip install -r requirements.txt\n

  5. Run the application

    python app.py\n

To run this server application, you need Rust installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/rust\n
  2. Run the application 
    cargo run\n

To run this server application, you need PHP and Composer installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/php\n
  2. Install dependencies 
    composer install\n
  3. Run the application 
    composer start\n

To run this server application, you need .NET installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/dotnet\n
  2. Run the application 
    dotnet run\n

Warning

This .NET server application needs the LIVEKIT_API_SECRET env variable to be at least 32 characters long. Make sure to update it here and in your OpenVidu Server.

"},{"location":"docs/tutorials/angular-components/openvidu-custom-participants-panel/#4-run-the-openvidu-custom-participants-panel-tutorial","title":"4. Run the openvidu-custom-participants-panel tutorial","text":"

To run the client application tutorial, you need Node installed on your development computer.

  1. Navigate into the application client directory:

      cd openvidu-tutorials/openvidu-components/openvidu-custom-participants-panel\n

  2. Install the required dependencies:

      npm install\n

  3. Serve the application:

      npm start\n

Once the server is up and running, you can test the application by visiting http://localhost:5080.

Accessing your application client from other devices in your local network

One advantage of running OpenVidu locally is that you can test your application client with other devices in your local network very easily without worrying about SSL certificates.

Access your application client through https://xxx-yyy-zzz-www.openvidu-local.dev:5443, where xxx-yyy-zzz-www part of the domain is your LAN private IP address with dashes (-) instead of dots (.). For more information, see section Accessing your app from other devices in your network.

"},{"location":"docs/tutorials/angular-components/openvidu-custom-participants-panel/#understanding-the-code","title":"Understanding the code","text":"

This tutorial is an Angular project generated with Angular CLI tool. Therefore, you will see many configuration files and other components that are not the primary focus of this tutorial. We will concentrate on the following files in the src directory:

To use OpenVidu Components Angular in your application, you need to install the library and import the OpenViduComponentsModule in your Angular module. Let's see how to do this:

  1. Create an Angular Project (version 17 or higher)

    To begin, you will need to create a new Angular project if you haven't already. Ensure you have Node.js and the Angular CLI installed. Then, run the following command to create a new Angular project:

    ng new your-project-name\n

    Replace your-project-name with the desired name for your project.

  2. Add Angular Material to your project

    OpenVidu Components Angular needs Angular Material, which provides a range of UI components. To add Angular Material to your project, navigate to your project directory and run:

    ng add @angular/material\n

  3. Install OpenVidu Components Angular

    With your Angular project set up, it's time to add videoconferencing capabilities with OpenVidu Components Angular. Install the library using npm:

    npm install openvidu-components-angular\n

  4. Import and use OpenVidu Components Angular

    To use OpenVidu Components Angular in your application, you need to:

    1. Import the OpenViduComponentsModule in your Angular application.
    2. Configure the module with the OpenViduComponentsConfig object.
    3. Add the component to your template file.
    4. Assign the OpenVidu token and LiveKit URL to the component.
    5. Customize the appearance of the components using CSS variables.
main.tsapp.component.tsstyles.scss

In your main.ts application file, import the it and configure it as follows:

// Other imports ...\n\nimport { OpenViduComponentsModule, OpenViduComponentsConfig } from 'openvidu-components-angular';\n\nconst config: OpenViduComponentsConfig = {\n    production: true,\n};\n\nbootstrapApplication(AppComponent, {\n    providers: [\n        importProvidersFrom(\n            OpenViduComponentsModule.forRoot(config)\n            // Other imports ...\n        ),\n        provideAnimations(),\n    ],\n}).catch((err) => console.error(err));\n

Use the ov-videoconference component to create a videoconference. This component requires a token to connect to the OpenVidu Room. The AppComponent class is responsible for requesting the token and passing it to the ov-videoconference component.

import {\n  ParticipantModel,\n    ParticipantService,\n  OpenViduComponentsModule\n} from 'openvidu-components-angular';\n\n@Component({\n  selector: 'app-root',\n  template:`\n    <!-- OpenVidu Video Conference Component -->\n    <ov-videoconference\n      [token]=\"token\"\n      [livekitUrl]=\"LIVEKIT_URL\"\n      (onTokenRequested)=\"onTokenRequested($event)\"\n    >\n      <!-- Custom Participants Panel -->\n      <div *ovParticipantsPanel id=\"my-panel\">\n        <ul id=\"local\">\n          <li>{{ localParticipant.name }}</li>\n        </ul>\n        <ul id=\"remote\">\n          @for (p of remoteParticipants; track p) {\n          <li>{{ p.name }}</li>\n          }\n        </ul>\n      </div>\n    </ov-videoconference>\n  `,\n  styles: [''],\n  standalone: true,\n  imports: [OpenViduComponentsModule],\n})\nexport class AppComponent implements OnInit, OnDestroy {\n  // For local development, leave these variables empty\n  // For production, configure them with correct URLs depending on your deployment\n\n  APPLICATION_SERVER_URL = '';  // (1)!\n  LIVEKIT_URL = ''; // (2)!\n\n  // The name of the room to join.\n  roomName = 'openvidu-custom-participants-panel';  // (3)!\n\n  // The token used to join the room.\n  token!: string; // (4)!\n\n  // Participant-related properties\n  localParticipant!: ParticipantModel; // (5)!\n  remoteParticipants!: ParticipantModel[]; // (6)!\n  localParticipantSubs!: Subscription; // (7)!\n  remoteParticipantsSubs!: Subscription; // (8)!\n\n  constructor(private httpClient: HttpClient, private participantService: ParticipantService) {\n    this.configureUrls();\n  }\n\n  private configureUrls() {\n    // If APPLICATION_SERVER_URL is not configured, use default value from local development\n    if (!this.APPLICATION_SERVER_URL) {\n      if (window.location.hostname === 'localhost') {\n        this.APPLICATION_SERVER_URL = 'http://localhost:6080/';\n      } else {\n        this.APPLICATION_SERVER_URL =\n          'https://' + window.location.hostname + ':6443/';\n      }\n    }\n\n    // If LIVEKIT_URL is not configured, use default value from local development\n    if (!this.LIVEKIT_URL) {\n      if (window.location.hostname === 'localhost') {\n        this.LIVEKIT_URL = 'ws://localhost:7880/';\n      } else {\n        this.LIVEKIT_URL = 'wss://' + window.location.hostname + ':7443/';\n      }\n    }\n  }\n\n  ngOnInit() {\n    // Subscribe to participants' updates\n    this.subscribeToParticipants();\n  }\n\n  ngOnDestroy() {\n    // Unsubscribe from participant updates to prevent memory leaks\n    this.localParticipantSubs?.unsubscribe();\n    this.remoteParticipantsSubs?.unsubscribe();\n  }\n\n  // Requests a token to join the room with the given participant name.\n  async onTokenRequested(participantName: string) { // (9)!\n    const { token } = await this.getToken(this.roomName, participantName);\n    this.token = token;\n  }\n\n  // Subscribe to updates for local and remote participants\n  private subscribeToParticipants() { // (10)!\n    this.localParticipantSubs = this.participantService.localParticipant$.subscribe((p) => {\n      if (p) this.localParticipant = p;\n    });\n\n    this.remoteParticipantsSubs = this.participantService.remoteParticipants$.subscribe((participants) => {\n      this.remoteParticipants = participants;\n    });\n  }\n\n  // Retrieves a token to join the room with the given name and participant name.\n  getToken(roomName: string, participantName: string): Promise<any> { // (11)!\n    // Requesting token to the server application\n  }\n}\n
  1. APPLICATION_SERVER_URL: URL to communicate the client application with the server application to request OpenVidu tokens.
  2. LIVEKIT_URL: URL to communicate the client application with the LiveKit server.
  3. roomName: OpenVidu Room identifier. This is the room where the VideoconferenceComponent will connect.
  4. token: OpenVidu Token used to connect to the OpenVidu Room.
  5. localParticipant: Local participant model.
  6. remoteParticipants: Remote participants model.
  7. localParticipantSubs: Subscription to the local participant updates.
  8. remoteParticipantsSubs: Subscription to the remote participants updates.
  9. onTokenRequested method that fires when the VideoconferenceComponent requests a token to connect to the OpenVidu Room.
  10. subscribeToParticipants method that subscribes to updates for local and remote participants.
  11. getToken method that requests a token to the server application.

The app.component.ts file declares the following properties and methods:

Configure the URLs

For local development, leave APPLICATION_SERVER_URL and LIVEKIT_URL variables empty. The function configureUrls() will automatically configure them with default values. However, for production, you should configure these variables with the correct URLs depending on your deployment.

The OpenVidu Components Angular library provides a set of CSS variables that you can use to customize the appearance of the components. You can define these variables in your application's global styles file (e.g. styles.scss).

:root {\n    --ov-primary-color: #303030; /* Primary interface color */\n    --ov-secondary-color: #3e3f3f; /* Secondary interface color */\n    --ov-tertiary-color: #598eff; /* Tertiary accent color for elements */\n    --ov-warn-color: #eb5144; /* Warning color for alerts and notifications */\n    --ov-light-color: #e6e6e6; /* Light color for elements */\n\n    --ov-accent-color: #ffae35; /* Accent color for standout UI elements */\n\n    --ov-logo-background-color: #3a3d3d; /* Background color for the logo area */\n    --ov-text-color: #ffffff; /* Default text color */\n\n    --ov-panel-text-color: #1d1d1d; /* Text color for panel elements */\n    --ov-panel-background: #ffffff; /* Background color for panels */\n\n    --ov-buttons-radius: 50%; /* Border-radius for circular buttons */\n    --ov-leave-button-radius: 10px; /* Border-radius for the leave button */\n    --ov-video-radius: 5px; /* Border-radius for video elements */\n    --ov-panel-radius: 5px; /* Border-radius for panel elements */\n}\n
"},{"location":"docs/tutorials/angular-components/openvidu-custom-participants-panel/#customizing-participants-panel","title":"Customizing participants panel","text":"

This tutorial uses the *ovParticipantsPanel directive with the aim of replacing the default participant panel with a custom one.

In the app.component.ts file, you can see the following code snippet:

@Component({\n    selector: 'app-root',\n    template: `\n        <!-- OpenVidu Video Conference Component -->\n    <ov-videoconference\n      [token]=\"token\"\n      [livekitUrl]=\"LIVEKIT_URL\"\n      (onTokenRequested)=\"onTokenRequested($event)\"\n    >\n      <!-- Custom Participants Panel -->\n      <div *ovParticipantsPanel id=\"my-panel\">\n        <ul id=\"local\">\n          <li>{{ localParticipant.name }}</li>\n        </ul>\n        <ul id=\"remote\">\n          @for (p of remoteParticipants; track p) {\n          <li>{{ p.name }}</li>\n          }\n        </ul>\n      </div>\n    </ov-videoconference>\n    `,\n    styles: [''],\n    standalone: true,\n    imports: [OpenViduComponentsModule],\n})\nexport class AppComponent implements OnInit, OnDestroy{\n    // ...\n}\n
"},{"location":"docs/tutorials/angular-components/openvidu-custom-stream/","title":"openvidu-custom-stream","text":"

Source code

The openvidu-custom-stream tutorial demonstrates how to replace the default video stream with a custom one, providing a more tailored user experience.

Customizing the video stream component is made simple with the StreamDirective, which offers a straightforward way to replace and adapt the StreamComponent to your needs.

OpenVidu Components - Custom Stream"},{"location":"docs/tutorials/angular-components/openvidu-custom-stream/#running-this-tutorial","title":"Running this tutorial","text":""},{"location":"docs/tutorials/angular-components/openvidu-custom-stream/#1-run-openvidu-server","title":"1. Run OpenVidu Server","text":"Run OpenVidu locallyDeploy OpenVidu

  1. Download OpenVidu

    git clone https://github.com/OpenVidu/openvidu-local-deployment\n

  2. Configure the local deployment

    Windows macOS Linux 
    cd openvidu-local-deployment/community\n.\\configure_lan_private_ip_windows.bat\n
    cd openvidu-local-deployment/community\n./configure_lan_private_ip_macos.sh\n
    cd openvidu-local-deployment/community\n./configure_lan_private_ip_linux.sh\n

  3. Run OpenVidu

    docker compose up\n

To use a production-ready OpenVidu deployment, visit the official deployment guide.

"},{"location":"docs/tutorials/angular-components/openvidu-custom-stream/#2-download-the-tutorial-code","title":"2. Download the tutorial code","text":"
git clone https://github.com/OpenVidu/openvidu-livekit-tutorials.git\ngit clone https://github.com/OpenVidu/openvidu-tutorials.git\n
"},{"location":"docs/tutorials/angular-components/openvidu-custom-stream/#3-run-the-server-application","title":"3. Run the server application","text":"Node Go Ruby Java Python Rust PHP .NET

To run this server application, you need Node installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/node\n
  2. Install dependencies 
    npm install\n
  3. Run the application 
    npm start\n

To run this server application, you need Go installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/go\n
  2. Run the application 
    go run main.go\n

To run this server application, you need Ruby installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/ruby\n
  2. Install dependencies 
    bundle install\n
  3. Run the application 
    ruby app.rb\n

To run this server application, you need Java and Maven installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/java\n
  2. Run the application 
    mvn spring-boot:run\n

To run this server application, you need Python 3 installed on your device.

  1. Navigate into the server directory

    cd openvidu-livekit-tutorials/application-server/python\n

  2. Create a python virtual environment

    python -m venv venv\n

  3. Activate the virtual environment

    Windows macOS Linux 
    .\\venv\\Scripts\\activate\n
    . ./venv/bin/activate\n
    . ./venv/bin/activate\n

  4. Install dependencies

    pip install -r requirements.txt\n

  5. Run the application

    python app.py\n

To run this server application, you need Rust installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/rust\n
  2. Run the application 
    cargo run\n

To run this server application, you need PHP and Composer installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/php\n
  2. Install dependencies 
    composer install\n
  3. Run the application 
    composer start\n

To run this server application, you need .NET installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/dotnet\n
  2. Run the application 
    dotnet run\n

Warning

This .NET server application needs the LIVEKIT_API_SECRET env variable to be at least 32 characters long. Make sure to update it here and in your OpenVidu Server.

"},{"location":"docs/tutorials/angular-components/openvidu-custom-stream/#4-run-the-openvidu-custom-stream-tutorial","title":"4. Run the openvidu-custom-stream tutorial","text":"

To run the client application tutorial, you need Node installed on your development computer.

  1. Navigate into the application client directory:

      cd openvidu-tutorials/openvidu-components/openvidu-custom-stream\n

  2. Install the required dependencies:

      npm install\n

  3. Serve the application:

      npm start\n

Once the server is up and running, you can test the application by visiting http://localhost:5080.

Accessing your application client from other devices in your local network

One advantage of running OpenVidu locally is that you can test your application client with other devices in your local network very easily without worrying about SSL certificates.

Access your application client through https://xxx-yyy-zzz-www.openvidu-local.dev:5443, where xxx-yyy-zzz-www part of the domain is your LAN private IP address with dashes (-) instead of dots (.). For more information, see section Accessing your app from other devices in your network.

"},{"location":"docs/tutorials/angular-components/openvidu-custom-stream/#understanding-the-code","title":"Understanding the code","text":"

This tutorial is an Angular project generated with Angular CLI tool. Therefore, you will see many configuration files and other components that are not the primary focus of this tutorial. We will concentrate on the following files in the src directory:

To use OpenVidu Components Angular in your application, you need to install the library and import the OpenViduComponentsModule in your Angular module. Let's see how to do this:

  1. Create an Angular Project (version 17 or higher)

    To begin, you will need to create a new Angular project if you haven't already. Ensure you have Node.js and the Angular CLI installed. Then, run the following command to create a new Angular project:

    ng new your-project-name\n

    Replace your-project-name with the desired name for your project.

  2. Add Angular Material to your project

    OpenVidu Components Angular needs Angular Material, which provides a range of UI components. To add Angular Material to your project, navigate to your project directory and run:

    ng add @angular/material\n

  3. Install OpenVidu Components Angular

    With your Angular project set up, it's time to add videoconferencing capabilities with OpenVidu Components Angular. Install the library using npm:

    npm install openvidu-components-angular\n

  4. Import and use OpenVidu Components Angular

    To use OpenVidu Components Angular in your application, you need to:

    1. Import the OpenViduComponentsModule in your Angular application.
    2. Configure the module with the OpenViduComponentsConfig object.
    3. Add the component to your template file.
    4. Assign the OpenVidu token and LiveKit URL to the component.
    5. Customize the appearance of the components using CSS variables.
main.tsapp.component.tsstyles.scss

In your main.ts application file, import the it and configure it as follows:

// Other imports ...\n\nimport { OpenViduComponentsModule, OpenViduComponentsConfig } from 'openvidu-components-angular';\n\nconst config: OpenViduComponentsConfig = {\n    production: true,\n};\n\nbootstrapApplication(AppComponent, {\n    providers: [\n        importProvidersFrom(\n            OpenViduComponentsModule.forRoot(config)\n            // Other imports ...\n        ),\n        provideAnimations(),\n    ],\n}).catch((err) => console.error(err));\n

Use the ov-videoconference component to create a videoconference. This component requires a token to connect to the OpenVidu Room. The AppComponent class is responsible for requesting the token and passing it to the ov-videoconference component.

import { OpenViduComponentsModule } from 'openvidu-components-angular';\n\n@Component({\n  selector: 'app-root',\n  template:`\n        <!-- OpenVidu Video Conference Component -->\n      <ov-videoconference\n        [token]=\"token\"\n        [livekitUrl]=\"LIVEKIT_URL\"\n        (onTokenRequested)=\"onTokenRequested($event)\"\n      >\n        <!-- Display Video Streams -->\n        <div *ovStream=\"let track\">\n          <!-- Video Stream Component -->\n          <ov-stream [track]=\"track\" [displayParticipantName]=\"false\"></ov-stream>\n\n          <!-- Display Participant's Name -->\n          <p>{{ track.participant.name }}</p>\n        </div>\n      </ov-videoconference>\n  `,\n  styles: [''],\n  standalone: true,\n  imports: [OpenViduComponentsModule],\n})\nexport class AppComponent {\n  // For local development, leave these variables empty\n  // For production, configure them with correct URLs depending on your deployment\n\n  APPLICATION_SERVER_URL = '';  // (1)!\n  LIVEKIT_URL = ''; // (2)!\n\n  // The name of the room to join.\n  roomName = 'openvidu-custom-stream';  // (3)!\n\n  // The token used to join the room.\n  token!: string; // (4)!\n\n  constructor(private httpClient: HttpClient) {\n    this.configureUrls();\n  }\n\n  private configureUrls() {\n    // If APPLICATION_SERVER_URL is not configured, use default value from local development\n    if (!this.APPLICATION_SERVER_URL) {\n      if (window.location.hostname === 'localhost') {\n        this.APPLICATION_SERVER_URL = 'http://localhost:6080/';\n      } else {\n        this.APPLICATION_SERVER_URL =\n          'https://' + window.location.hostname + ':6443/';\n      }\n    }\n\n    // If LIVEKIT_URL is not configured, use default value from local development\n    if (!this.LIVEKIT_URL) {\n      if (window.location.hostname === 'localhost') {\n        this.LIVEKIT_URL = 'ws://localhost:7880/';\n      } else {\n        this.LIVEKIT_URL = 'wss://' + window.location.hostname + ':7443/';\n      }\n    }\n  }\n\n  // Requests a token to join the room with the given participant name.\n  async onTokenRequested(participantName: string) { // (5)!\n    const { token } = await this.getToken(this.roomName, participantName);\n    this.token = token;\n  }\n\n  // Retrieves a token to join the room with the given name and participant name.\n  getToken(roomName: string, participantName: string): Promise<any> { // (6)!\n    // Requesting token to the server application\n  }\n}\n
  1. APPLICATION_SERVER_URL: URL to communicate the client application with the server application to request OpenVidu tokens.
  2. LIVEKIT_URL: URL to communicate the client application with the LiveKit server.
  3. roomName: OpenVidu Room identifier. This is the room where the VideoconferenceComponent will connect.
  4. token: OpenVidu Token used to connect to the OpenVidu Room.
  5. onTokenRequested method that fires when the VideoconferenceComponent requests a token to connect to the OpenVidu Room.
  6. getToken method that requests a token to the server application.

The app.component.ts file declares the following properties and methods:

Configure the URLs

For local development, leave APPLICATION_SERVER_URL and LIVEKIT_URL variables empty. The function configureUrls() will automatically configure them with default values. However, for production, you should configure these variables with the correct URLs depending on your deployment.

The OpenVidu Components Angular library provides a set of CSS variables that you can use to customize the appearance of the components. You can define these variables in your application's global styles file (e.g. styles.scss).

:root {\n    --ov-primary-color: #303030; /* Primary interface color */\n    --ov-secondary-color: #3e3f3f; /* Secondary interface color */\n    --ov-tertiary-color: #598eff; /* Tertiary accent color for elements */\n    --ov-warn-color: #eb5144; /* Warning color for alerts and notifications */\n    --ov-light-color: #e6e6e6; /* Light color for elements */\n\n    --ov-accent-color: #ffae35; /* Accent color for standout UI elements */\n\n    --ov-logo-background-color: #3a3d3d; /* Background color for the logo area */\n    --ov-text-color: #ffffff; /* Default text color */\n\n    --ov-panel-text-color: #1d1d1d; /* Text color for panel elements */\n    --ov-panel-background: #ffffff; /* Background color for panels */\n\n    --ov-buttons-radius: 50%; /* Border-radius for circular buttons */\n    --ov-leave-button-radius: 10px; /* Border-radius for the leave button */\n    --ov-video-radius: 5px; /* Border-radius for video elements */\n    --ov-panel-radius: 5px; /* Border-radius for panel elements */\n}\n
"},{"location":"docs/tutorials/angular-components/openvidu-custom-stream/#customizing-the-video-stream","title":"Customizing the video stream","text":"

The *ovStream directive is used to replace the default video stream with a custom one and allows you to customize the video stream component to your needs. It provides a way to access the video stream track and the participant name.

In the app.component.ts file, you can see the following code snippet:

@Component({\n    selector: 'app-root',\n    template: `\n        <!-- OpenVidu Video Conference Component -->\n        <ov-videoconference\n            [token]=\"token\"\n            [livekitUrl]=\"LIVEKIT_URL\"\n            (onTokenRequested)=\"onTokenRequested($event)\"\n        >\n            <!-- Display Video Streams -->\n            <div *ovStream=\"let track\">\n                <!-- Video Stream Component -->\n                <ov-stream [track]=\"track\" [displayParticipantName]=\"false\"></ov-stream>\n\n                <!-- Display Participant's Name -->\n                <p>{{ track.participant.name }}</p>\n            </div>\n        </ov-videoconference>\n    `,\n    styles: [''],\n    standalone: true,\n    imports: [OpenViduComponentsModule],\n})\nexport class AppComponent {\n    // ...\n}\n

In this code snippet, the *ovStream directive provides access to the ParticipantTrackPublication object, which contains the video stream track and the participant name.

The track object is passed to the ov-stream component to display the video stream. The track.participant.name object is used to display the participant's name.

"},{"location":"docs/tutorials/angular-components/openvidu-custom-toolbar/","title":"openvidu-custom-toolbar","text":"

Source code

The openvidu-custom-toolbar tutorial demonstrates how to replace the default toolbar with a custom one, providing a more tailored user experience.

Customizing the toolbar is made simple with the ToolbarDirective, which offers a straightforward way to replace and adapt the ToolbarComponent to your needs.

OpenVidu Components - Custom Toolbar"},{"location":"docs/tutorials/angular-components/openvidu-custom-toolbar/#running-this-tutorial","title":"Running this tutorial","text":""},{"location":"docs/tutorials/angular-components/openvidu-custom-toolbar/#1-run-openvidu-server","title":"1. Run OpenVidu Server","text":"Run OpenVidu locallyDeploy OpenVidu

  1. Download OpenVidu

    git clone https://github.com/OpenVidu/openvidu-local-deployment\n

  2. Configure the local deployment

    Windows macOS Linux 
    cd openvidu-local-deployment/community\n.\\configure_lan_private_ip_windows.bat\n
    cd openvidu-local-deployment/community\n./configure_lan_private_ip_macos.sh\n
    cd openvidu-local-deployment/community\n./configure_lan_private_ip_linux.sh\n

  3. Run OpenVidu

    docker compose up\n

To use a production-ready OpenVidu deployment, visit the official deployment guide.

"},{"location":"docs/tutorials/angular-components/openvidu-custom-toolbar/#2-download-the-tutorial-code","title":"2. Download the tutorial code","text":"
git clone https://github.com/OpenVidu/openvidu-livekit-tutorials.git\ngit clone https://github.com/OpenVidu/openvidu-tutorials.git\n
"},{"location":"docs/tutorials/angular-components/openvidu-custom-toolbar/#3-run-the-server-application","title":"3. Run the server application","text":"Node Go Ruby Java Python Rust PHP .NET

To run this server application, you need Node installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/node\n
  2. Install dependencies 
    npm install\n
  3. Run the application 
    npm start\n

To run this server application, you need Go installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/go\n
  2. Run the application 
    go run main.go\n

To run this server application, you need Ruby installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/ruby\n
  2. Install dependencies 
    bundle install\n
  3. Run the application 
    ruby app.rb\n

To run this server application, you need Java and Maven installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/java\n
  2. Run the application 
    mvn spring-boot:run\n

To run this server application, you need Python 3 installed on your device.

  1. Navigate into the server directory

    cd openvidu-livekit-tutorials/application-server/python\n

  2. Create a python virtual environment

    python -m venv venv\n

  3. Activate the virtual environment

    Windows macOS Linux 
    .\\venv\\Scripts\\activate\n
    . ./venv/bin/activate\n
    . ./venv/bin/activate\n

  4. Install dependencies

    pip install -r requirements.txt\n

  5. Run the application

    python app.py\n

To run this server application, you need Rust installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/rust\n
  2. Run the application 
    cargo run\n

To run this server application, you need PHP and Composer installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/php\n
  2. Install dependencies 
    composer install\n
  3. Run the application 
    composer start\n

To run this server application, you need .NET installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/dotnet\n
  2. Run the application 
    dotnet run\n

Warning

This .NET server application needs the LIVEKIT_API_SECRET env variable to be at least 32 characters long. Make sure to update it here and in your OpenVidu Server.

"},{"location":"docs/tutorials/angular-components/openvidu-custom-toolbar/#4-run-the-openvidu-custom-toolbar-tutorial","title":"4. Run the openvidu-custom-toolbar tutorial","text":"

To run the client application tutorial, you need Node installed on your development computer.

  1. Navigate into the application client directory:

      cd openvidu-tutorials/openvidu-components/openvidu-custom-toolbar\n

  2. Install the required dependencies:

      npm install\n

  3. Serve the application:

      npm start\n

Once the server is up and running, you can test the application by visiting http://localhost:5080.

Accessing your application client from other devices in your local network

One advantage of running OpenVidu locally is that you can test your application client with other devices in your local network very easily without worrying about SSL certificates.

Access your application client through https://xxx-yyy-zzz-www.openvidu-local.dev:5443, where xxx-yyy-zzz-www part of the domain is your LAN private IP address with dashes (-) instead of dots (.). For more information, see section Accessing your app from other devices in your network.

"},{"location":"docs/tutorials/angular-components/openvidu-custom-toolbar/#understanding-the-code","title":"Understanding the code","text":"

This tutorial is an Angular project generated with Angular CLI tool. Therefore, you will see many configuration files and other components that are not the primary focus of this tutorial. We will concentrate on the following files in the src directory:

To use OpenVidu Components Angular in your application, you need to install the library and import the OpenViduComponentsModule in your Angular module. Let's see how to do this:

  1. Create an Angular Project (version 17 or higher)

    To begin, you will need to create a new Angular project if you haven't already. Ensure you have Node.js and the Angular CLI installed. Then, run the following command to create a new Angular project:

    ng new your-project-name\n

    Replace your-project-name with the desired name for your project.

  2. Add Angular Material to your project

    OpenVidu Components Angular needs Angular Material, which provides a range of UI components. To add Angular Material to your project, navigate to your project directory and run:

    ng add @angular/material\n

  3. Install OpenVidu Components Angular

    With your Angular project set up, it's time to add videoconferencing capabilities with OpenVidu Components Angular. Install the library using npm:

    npm install openvidu-components-angular\n

  4. Import and use OpenVidu Components Angular

    To use OpenVidu Components Angular in your application, you need to:

    1. Import the OpenViduComponentsModule in your Angular application.
    2. Configure the module with the OpenViduComponentsConfig object.
    3. Add the component to your template file.
    4. Assign the OpenVidu token and LiveKit URL to the component.
    5. Customize the appearance of the components using CSS variables.
main.tsapp.component.tsstyles.scss

In your main.ts application file, import the it and configure it as follows:

// Other imports ...\n\nimport { OpenViduComponentsModule, OpenViduComponentsConfig } from 'openvidu-components-angular';\n\nconst config: OpenViduComponentsConfig = {\n    production: true,\n};\n\nbootstrapApplication(AppComponent, {\n    providers: [\n        importProvidersFrom(\n            OpenViduComponentsModule.forRoot(config)\n            // Other imports ...\n        ),\n        provideAnimations(),\n    ],\n}).catch((err) => console.error(err));\n

Use the ov-videoconference component to create a videoconference. This component requires a token to connect to the OpenVidu Room. The AppComponent class is responsible for requesting the token and passing it to the ov-videoconference component.

import { OpenViduComponentsModule, ParticipantService } from 'openvidu-components-angular';\n\n@Component({\n  selector: 'app-root',\n  template:`\n    <ov-videoconference\n      [token]=\"token\"\n      [livekitUrl]=\"LIVEKIT_URL\"\n      (onTokenRequested)=\"onTokenRequested($event)\"\n    >\n      <div *ovToolbar style=\"text-align: center;\">\n        <button (click)=\"toggleVideo()\">Toggle Video</button>\n        <button (click)=\"toggleAudio()\">Toggle Audio</button>\n      </div>\n    </ov-videoconference>\n  `,\n  styles: [''],\n  standalone: true,\n  imports: [OpenViduComponentsModule],\n})\nexport class AppComponent {\n  // For local development, leave these variables empty\n  // For production, configure them with correct URLs depending on your deployment\n\n  APPLICATION_SERVER_URL = '';  // (1)!\n  LIVEKIT_URL = ''; // (2)!\n\n  // The name of the room to join.\n  roomName = 'openvidu-custom-toolbar';  // (3)!\n\n  // The token used to join the room.\n  token!: string; // (4)!\n\n  constructor(private httpClient: HttpClient, private participantService: ParticipantService) {\n    this.configureUrls();\n  }\n\n  private configureUrls() {\n    // If APPLICATION_SERVER_URL is not configured, use default value from local development\n    if (!this.APPLICATION_SERVER_URL) {\n      if (window.location.hostname === 'localhost') {\n        this.APPLICATION_SERVER_URL = 'http://localhost:6080/';\n      } else {\n        this.APPLICATION_SERVER_URL =\n          'https://' + window.location.hostname + ':6443/';\n      }\n    }\n\n    // If LIVEKIT_URL is not configured, use default value from local development\n    if (!this.LIVEKIT_URL) {\n      if (window.location.hostname === 'localhost') {\n        this.LIVEKIT_URL = 'ws://localhost:7880/';\n      } else {\n        this.LIVEKIT_URL = 'wss://' + window.location.hostname + ':7443/';\n      }\n    }\n  }\n\n  // Requests a token to join the room with the given participant name.\n  async onTokenRequested(participantName: string) { // (5)!\n    const { token } = await this.getToken(this.roomName, participantName);\n    this.token = token;\n  }\n\n  // Toggles the camera on and off.\n  async toggleVideo() { // (6)!\n    const isCameraEnabled = this.participantService.isMyCameraEnabled();\n    await this.participantService.setCameraEnabled(!isCameraEnabled);\n  }\n\n  // Toggles the microphone on and off.\n  async toggleAudio() { // (7)!\n    const isMicrophoneEnabled = this.participantService.isMyMicrophoneEnabled();\n    await this.participantService.setMicrophoneEnabled(!isMicrophoneEnabled);\n  }\n\n  // Retrieves a token to join the room with the given name and participant name.\n  getToken(roomName: string, participantName: string): Promise<any> { // (8)!\n    // Requesting token to the server application\n  }\n}\n
  1. APPLICATION_SERVER_URL: URL to communicate the client application with the server application to request OpenVidu tokens.
  2. LIVEKIT_URL: URL to communicate the client application with the LiveKit server.
  3. roomName: OpenVidu Room identifier. This is the room where the VideoconferenceComponent will connect.
  4. token: OpenVidu Token used to connect to the OpenVidu Room.
  5. onTokenRequested method that fires when the VideoconferenceComponent requests a token to connect to the OpenVidu Room.
  6. toggleVideo method that toggles the camera on and off.
  7. toggleAudio method that toggles the microphone on and off.
  8. getToken method that requests a token to the server application.

The app.component.ts file declares the following properties and methods:

Configure the URLs

For local development, leave APPLICATION_SERVER_URL and LIVEKIT_URL variables empty. The function configureUrls() will automatically configure them with default values. However, for production, you should configure these variables with the correct URLs depending on your deployment.

The OpenVidu Components Angular library provides a set of CSS variables that you can use to customize the appearance of the components. You can define these variables in your application's global styles file (e.g. styles.scss).

:root {\n    --ov-primary-color: #303030; /* Primary interface color */\n    --ov-secondary-color: #3e3f3f; /* Secondary interface color */\n    --ov-tertiary-color: #598eff; /* Tertiary accent color for elements */\n    --ov-warn-color: #eb5144; /* Warning color for alerts and notifications */\n    --ov-light-color: #e6e6e6; /* Light color for elements */\n\n    --ov-accent-color: #ffae35; /* Accent color for standout UI elements */\n\n    --ov-logo-background-color: #3a3d3d; /* Background color for the logo area */\n    --ov-text-color: #ffffff; /* Default text color */\n\n    --ov-panel-text-color: #1d1d1d; /* Text color for panel elements */\n    --ov-panel-background: #ffffff; /* Background color for panels */\n\n    --ov-buttons-radius: 50%; /* Border-radius for circular buttons */\n    --ov-leave-button-radius: 10px; /* Border-radius for the leave button */\n    --ov-video-radius: 5px; /* Border-radius for video elements */\n    --ov-panel-radius: 5px; /* Border-radius for panel elements */\n}\n
"},{"location":"docs/tutorials/angular-components/openvidu-custom-toolbar/#customizing-the-toolbar","title":"Customizing the toolbar","text":"

The *ov-toolbar directive allows you to replace the default toolbar with a custom one. This directive is applied to a div element that contains the custom toolbar elements.

In the app.component.ts file, you can see the following code snippet:

@Component({\n  selector: 'app-root',\n  template:`\n    <ov-videoconference\n      [token]=\"token\"\n      [livekitUrl]=\"LIVEKIT_URL\"\n      (onTokenRequested)=\"onTokenRequested($event)\"\n    >\n      <div *ovToolbar style=\"text-align: center;\">\n        <button (click)=\"toggleVideo()\">Toggle Video</button>\n        <button (click)=\"toggleAudio()\">Toggle Audio</button>\n      </div>\n\n    </ov-videoconference>\n  `,\n  styles: [''],\n  standalone: true,\n  imports: [OpenViduComponentsModule],\n})\nexport class AppComponent {\n  // ...\n}\n

In this code snippet, the *ov-toolbar directive is applied to a div element that contains two buttons. These buttons are used to toggle the camera and microphone on and off.

"},{"location":"docs/tutorials/angular-components/openvidu-custom-ui/","title":"openvidu-custom-ui","text":"

Source code

Creating a unique and intuitive user interface (UI) is essential for ensuring a great user experience. OpenVidu Components Angular allows for flexibility in UI customization to fit your application's design requirements.

OpenVidu Components - Custom UI"},{"location":"docs/tutorials/angular-components/openvidu-custom-ui/#running-this-tutorial","title":"Running this tutorial","text":""},{"location":"docs/tutorials/angular-components/openvidu-custom-ui/#1-run-openvidu-server","title":"1. Run OpenVidu Server","text":"Run OpenVidu locallyDeploy OpenVidu

  1. Download OpenVidu

    git clone https://github.com/OpenVidu/openvidu-local-deployment\n

  2. Configure the local deployment

    Windows macOS Linux 
    cd openvidu-local-deployment/community\n.\\configure_lan_private_ip_windows.bat\n
    cd openvidu-local-deployment/community\n./configure_lan_private_ip_macos.sh\n
    cd openvidu-local-deployment/community\n./configure_lan_private_ip_linux.sh\n

  3. Run OpenVidu

    docker compose up\n

To use a production-ready OpenVidu deployment, visit the official deployment guide.

"},{"location":"docs/tutorials/angular-components/openvidu-custom-ui/#2-download-the-tutorial-code","title":"2. Download the tutorial code","text":"
git clone https://github.com/OpenVidu/openvidu-livekit-tutorials.git\ngit clone https://github.com/OpenVidu/openvidu-tutorials.git\n
"},{"location":"docs/tutorials/angular-components/openvidu-custom-ui/#3-run-the-server-application","title":"3. Run the server application","text":"Node Go Ruby Java Python Rust PHP .NET

To run this server application, you need Node installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/node\n
  2. Install dependencies 
    npm install\n
  3. Run the application 
    npm start\n

To run this server application, you need Go installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/go\n
  2. Run the application 
    go run main.go\n

To run this server application, you need Ruby installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/ruby\n
  2. Install dependencies 
    bundle install\n
  3. Run the application 
    ruby app.rb\n

To run this server application, you need Java and Maven installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/java\n
  2. Run the application 
    mvn spring-boot:run\n

To run this server application, you need Python 3 installed on your device.

  1. Navigate into the server directory

    cd openvidu-livekit-tutorials/application-server/python\n

  2. Create a python virtual environment

    python -m venv venv\n

  3. Activate the virtual environment

    Windows macOS Linux 
    .\\venv\\Scripts\\activate\n
    . ./venv/bin/activate\n
    . ./venv/bin/activate\n

  4. Install dependencies

    pip install -r requirements.txt\n

  5. Run the application

    python app.py\n

To run this server application, you need Rust installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/rust\n
  2. Run the application 
    cargo run\n

To run this server application, you need PHP and Composer installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/php\n
  2. Install dependencies 
    composer install\n
  3. Run the application 
    composer start\n

To run this server application, you need .NET installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/dotnet\n
  2. Run the application 
    dotnet run\n

Warning

This .NET server application needs the LIVEKIT_API_SECRET env variable to be at least 32 characters long. Make sure to update it here and in your OpenVidu Server.

"},{"location":"docs/tutorials/angular-components/openvidu-custom-ui/#4-run-the-openvidu-custom-ui-tutorial","title":"4. Run the openvidu-custom-ui tutorial","text":"

To run the client application tutorial, you need Node installed on your development computer.

  1. Navigate into the application client directory:

      cd openvidu-tutorials/openvidu-components/openvidu-custom-ui\n

  2. Install the required dependencies:

      npm install\n

  3. Serve the application:

      npm start\n

Once the server is up and running, you can test the application by visiting http://localhost:5080.

Accessing your application client from other devices in your local network

One advantage of running OpenVidu locally is that you can test your application client with other devices in your local network very easily without worrying about SSL certificates.

Access your application client through https://xxx-yyy-zzz-www.openvidu-local.dev:5443, where xxx-yyy-zzz-www part of the domain is your LAN private IP address with dashes (-) instead of dots (.). For more information, see section Accessing your app from other devices in your network.

"},{"location":"docs/tutorials/angular-components/openvidu-custom-ui/#understanding-the-code","title":"Understanding the code","text":"

This tutorial is an Angular project generated with Angular CLI tool. Therefore, you will see many configuration files and other components that are not the primary focus of this tutorial. We will concentrate on the following files in the src directory:

To use OpenVidu Components Angular in your application, you need to install the library and import the OpenViduComponentsModule in your Angular module. Let's see how to do this:

  1. Create an Angular Project (version 17 or higher)

    To begin, you will need to create a new Angular project if you haven't already. Ensure you have Node.js and the Angular CLI installed. Then, run the following command to create a new Angular project:

    ng new your-project-name\n

    Replace your-project-name with the desired name for your project.

  2. Add Angular Material to your project

    OpenVidu Components Angular needs Angular Material, which provides a range of UI components. To add Angular Material to your project, navigate to your project directory and run:

    ng add @angular/material\n

  3. Install OpenVidu Components Angular

    With your Angular project set up, it's time to add videoconferencing capabilities with OpenVidu Components Angular. Install the library using npm:

    npm install openvidu-components-angular\n

  4. Import and use OpenVidu Components Angular

    To use OpenVidu Components Angular in your application, you need to:

    1. Import the OpenViduComponentsModule in your Angular application.
    2. Configure the module with the OpenViduComponentsConfig object.
    3. Add the component to your template file.
    4. Assign the OpenVidu token and LiveKit URL to the component.
    5. Customize the appearance of the components using CSS variables.
main.tsapp.component.tsstyles.scss

In your main.ts application file, import the it and configure it as follows:

// Other imports ...\n\nimport { OpenViduComponentsModule, OpenViduComponentsConfig } from 'openvidu-components-angular';\n\nconst config: OpenViduComponentsConfig = {\n    production: true,\n};\n\nbootstrapApplication(AppComponent, {\n    providers: [\n        importProvidersFrom(\n            OpenViduComponentsModule.forRoot(config)\n            // Other imports ...\n        ),\n        provideAnimations(),\n    ],\n}).catch((err) => console.error(err));\n

Use the ov-videoconference component to create a videoconference. This component requires a token to connect to the OpenVidu Room. The AppComponent class is responsible for requesting the token and passing it to the ov-videoconference component.

import { OpenViduComponentsModule } from 'openvidu-components-angular';\n\n@Component({\n  selector: 'app-root',\n  template:`\n    <ov-videoconference\n      [token]=\"token\"\n      [livekitUrl]=\"LIVEKIT_URL\"\n      (onTokenRequested)=\"onTokenRequested($event)\"\n    >\n    </ov-videoconference>\n  `,\n  styles: [''],\n  standalone: true,\n  imports: [OpenViduComponentsModule],\n})\nexport class AppComponent {\n  // For local development, leave these variables empty\n  // For production, configure them with correct URLs depending on your deployment\n\n  APPLICATION_SERVER_URL = '';  // (1)!\n  LIVEKIT_URL = ''; // (2)!\n\n  // The name of the room to join.\n  roomName = 'openvidu-custom-ui';  // (3)!\n\n  // The token used to join the room.\n  token!: string; // (4)!\n\n  constructor(private httpClient: HttpClient) {\n    this.configureUrls();\n  }\n\n  private configureUrls() {\n    // If APPLICATION_SERVER_URL is not configured, use default value from local development\n    if (!this.APPLICATION_SERVER_URL) {\n      if (window.location.hostname === 'localhost') {\n        this.APPLICATION_SERVER_URL = 'http://localhost:6080/';\n      } else {\n        this.APPLICATION_SERVER_URL =\n          'https://' + window.location.hostname + ':6443/';\n      }\n    }\n\n    // If LIVEKIT_URL is not configured, use default value from local development\n    if (!this.LIVEKIT_URL) {\n      if (window.location.hostname === 'localhost') {\n        this.LIVEKIT_URL = 'ws://localhost:7880/';\n      } else {\n        this.LIVEKIT_URL = 'wss://' + window.location.hostname + ':7443/';\n      }\n    }\n  }\n\n  // Requests a token to join the room with the given participant name.\n  async onTokenRequested(participantName: string) { // (5)!\n    const { token } = await this.getToken(this.roomName, participantName);\n    this.token = token;\n  }\n\n  // Retrieves a token to join the room with the given name and participant name.\n  getToken(roomName: string, participantName: string): Promise<any> { // (6)!\n    // Requesting token to the server application\n  }\n}\n
  1. APPLICATION_SERVER_URL: URL to communicate the client application with the server application to request OpenVidu tokens.
  2. LIVEKIT_URL: URL to communicate the client application with the LiveKit server.
  3. roomName: OpenVidu Room identifier. This is the room where the VideoconferenceComponent will connect
  4. token: OpenVidu Token used to connect to the OpenVidu Room.
  5. onTokenRequested method that fires when the VideoconferenceComponent requests a token to connect to the OpenVidu Room.
  6. getToken method that requests a token to the server application.

The app.component.ts file declares the following properties and methods:

Configure the URLs

For local development, leave APPLICATION_SERVER_URL and LIVEKIT_URL variables empty. The function configureUrls() will automatically configure them with default values. However, for production, you should configure these variables with the correct URLs depending on your deployment.

The OpenVidu Components Angular library provides a set of CSS variables that you can use to customize the appearance of the components. You can define these variables in your application's global styles file (e.g. styles.scss).

:root {\n    --ov-primary-color: #303030; /* Primary interface color */\n    --ov-secondary-color: #3e3f3f; /* Secondary interface color */\n    --ov-tertiary-color: #598eff; /* Tertiary accent color for elements */\n    --ov-warn-color: #eb5144; /* Warning color for alerts and notifications */\n    --ov-light-color: #e6e6e6; /* Light color for elements */\n\n    --ov-accent-color: #ffae35; /* Accent color for standout UI elements */\n\n    --ov-logo-background-color: #3a3d3d; /* Background color for the logo area */\n    --ov-text-color: #ffffff; /* Default text color */\n\n    --ov-panel-text-color: #1d1d1d; /* Text color for panel elements */\n    --ov-panel-background: #ffffff; /* Background color for panels */\n\n    --ov-buttons-radius: 50%; /* Border-radius for circular buttons */\n    --ov-leave-button-radius: 10px; /* Border-radius for the leave button */\n    --ov-video-radius: 5px; /* Border-radius for video elements */\n    --ov-panel-radius: 5px; /* Border-radius for panel elements */\n}\n
"},{"location":"docs/tutorials/angular-components/openvidu-custom-ui/#customizing-the-ui","title":"Customizing the UI","text":"

To customize the appearance of OpenVidu Components, simply redefine the necessary CSS variables in your styles.scss file. For instance, to change the primary color used throughout your application, you would update the --ov-primary-color variable as shown below:

:root {\n  --ov-primary-color: #yourNewColor; /* Replace #yourNewColor with your chosen hex color code */\n\n  /* Others variables ... */\n}\n
Once you redefine a variable, the new style will automatically apply to all components in the OpenVidu UI that use that variable.

The library also allows you to customize shape of buttons, panels and videos customization, the background color personalization of panels, buttons and videoconference and also you can change the text color.

"},{"location":"docs/tutorials/angular-components/openvidu-custom-ui/#replacing-the-branding-logo","title":"Replacing the branding logo","text":"

You can replace the branding logo with your own. Just modify the src/assets/images/logo.png file with your own logo.

"},{"location":"docs/tutorials/angular-components/openvidu-toggle-hand/","title":"openvidu-toggle-hand","text":"

Source code

The openvidu-toggle-hand tutorial demonstrates how to add a toggle hand feature to the OpenVidu Components Angular library.

The toggle hand feature allows participants to raise and lower their hand during a videoconference. This feature is useful for participants to signal that they want to speak or ask a question.

This tutorial combines the use of the ToolbarAdditionalButtonsDirective, the StreamDirective and the ParticipantsPanelItemElementsDirective to create a custom toolbar button, a custom stream component element and a custom participant panel item element. Check the openvidu-toolbar-buttons and the openvidu-custom-stream tutorials documentation for learning more about these directives.

OpenVidu Components - Toggle Hand"},{"location":"docs/tutorials/angular-components/openvidu-toggle-hand/#running-this-tutorial","title":"Running this tutorial","text":""},{"location":"docs/tutorials/angular-components/openvidu-toggle-hand/#1-run-openvidu-server","title":"1. Run OpenVidu Server","text":"Run OpenVidu locallyDeploy OpenVidu

  1. Download OpenVidu

    git clone https://github.com/OpenVidu/openvidu-local-deployment\n

  2. Configure the local deployment

    Windows macOS Linux 
    cd openvidu-local-deployment/community\n.\\configure_lan_private_ip_windows.bat\n
    cd openvidu-local-deployment/community\n./configure_lan_private_ip_macos.sh\n
    cd openvidu-local-deployment/community\n./configure_lan_private_ip_linux.sh\n

  3. Run OpenVidu

    docker compose up\n

To use a production-ready OpenVidu deployment, visit the official deployment guide.

"},{"location":"docs/tutorials/angular-components/openvidu-toggle-hand/#2-download-the-tutorial-code","title":"2. Download the tutorial code","text":"
git clone https://github.com/OpenVidu/openvidu-livekit-tutorials.git\ngit clone https://github.com/OpenVidu/openvidu-tutorials.git\n
"},{"location":"docs/tutorials/angular-components/openvidu-toggle-hand/#3-run-the-server-application","title":"3. Run the server application","text":"Node Go Ruby Java Python Rust PHP .NET

To run this server application, you need Node installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/node\n
  2. Install dependencies 
    npm install\n
  3. Run the application 
    npm start\n

To run this server application, you need Go installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/go\n
  2. Run the application 
    go run main.go\n

To run this server application, you need Ruby installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/ruby\n
  2. Install dependencies 
    bundle install\n
  3. Run the application 
    ruby app.rb\n

To run this server application, you need Java and Maven installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/java\n
  2. Run the application 
    mvn spring-boot:run\n

To run this server application, you need Python 3 installed on your device.

  1. Navigate into the server directory

    cd openvidu-livekit-tutorials/application-server/python\n

  2. Create a python virtual environment

    python -m venv venv\n

  3. Activate the virtual environment

    Windows macOS Linux 
    .\\venv\\Scripts\\activate\n
    . ./venv/bin/activate\n
    . ./venv/bin/activate\n

  4. Install dependencies

    pip install -r requirements.txt\n

  5. Run the application

    python app.py\n

To run this server application, you need Rust installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/rust\n
  2. Run the application 
    cargo run\n

To run this server application, you need PHP and Composer installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/php\n
  2. Install dependencies 
    composer install\n
  3. Run the application 
    composer start\n

To run this server application, you need .NET installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/dotnet\n
  2. Run the application 
    dotnet run\n

Warning

This .NET server application needs the LIVEKIT_API_SECRET env variable to be at least 32 characters long. Make sure to update it here and in your OpenVidu Server.

"},{"location":"docs/tutorials/angular-components/openvidu-toggle-hand/#4-run-the-openvidu-toggle-hand-tutorial","title":"4. Run the openvidu-toggle-hand tutorial","text":"

To run the client application tutorial, you need Node installed on your development computer.

  1. Navigate into the application client directory:

      cd openvidu-tutorials/openvidu-components/openvidu-toggle-hand\n

  2. Install the required dependencies:

      npm install\n

  3. Serve the application:

      npm start\n

Once the server is up and running, you can test the application by visiting http://localhost:5080.

Accessing your application client from other devices in your local network

One advantage of running OpenVidu locally is that you can test your application client with other devices in your local network very easily without worrying about SSL certificates.

Access your application client through https://xxx-yyy-zzz-www.openvidu-local.dev:5443, where xxx-yyy-zzz-www part of the domain is your LAN private IP address with dashes (-) instead of dots (.). For more information, see section Accessing your app from other devices in your network.

"},{"location":"docs/tutorials/angular-components/openvidu-toggle-hand/#understanding-the-code","title":"Understanding the code","text":"

This tutorial is an Angular project generated with Angular CLI tool. Therefore, you will see many configuration files and other components that are not the primary focus of this tutorial. We will concentrate on the following files in the src directory:

To use OpenVidu Components Angular in your application, you need to install the library and import the OpenViduComponentsModule in your Angular module. Let's see how to do this:

  1. Create an Angular Project (version 17 or higher)

    To begin, you will need to create a new Angular project if you haven't already. Ensure you have Node.js and the Angular CLI installed. Then, run the following command to create a new Angular project:

    ng new your-project-name\n

    Replace your-project-name with the desired name for your project.

  2. Add Angular Material to your project

    OpenVidu Components Angular needs Angular Material, which provides a range of UI components. To add Angular Material to your project, navigate to your project directory and run:

    ng add @angular/material\n

  3. Install OpenVidu Components Angular

    With your Angular project set up, it's time to add videoconferencing capabilities with OpenVidu Components Angular. Install the library using npm:

    npm install openvidu-components-angular\n

  4. Import and use OpenVidu Components Angular

    To use OpenVidu Components Angular in your application, you need to:

    1. Import the OpenViduComponentsModule in your Angular application.
    2. Configure the module with the OpenViduComponentsConfig object.
    3. Add the component to your template file.
    4. Assign the OpenVidu token and LiveKit URL to the component.
    5. Customize the appearance of the components using CSS variables.
main.tsapp.component.tsmodels/participant-app.model.tsstyles.scss

In your main.ts application file, import the it and configure it as follows:

// Other imports ...\n\nimport { OpenViduComponentsModule, OpenViduComponentsConfig } from 'openvidu-components-angular';\n\nconst config: OpenViduComponentsConfig = {\n    production: true,\n};\n\nbootstrapApplication(AppComponent, {\n    providers: [\n        importProvidersFrom(\n            OpenViduComponentsModule.forRoot(config)\n            // Other imports ...\n        ),\n        provideAnimations(),\n    ],\n}).catch((err) => console.error(err));\n

Use the ov-videoconference component to create a videoconference. This component requires a token to connect to the OpenVidu Room. The AppComponent class is responsible for requesting the token and passing it to the ov-videoconference component.

import {\n  ParticipantModel,\n  ParticipantService,\n  OpenViduComponentsModule\n} from 'openvidu-components-angular';\n\nenum DataTopicApp {\n  HAND_TOGGLE = 'handToggle'\n}\n\n@Component({\n  selector: 'app-root',\n  template:`\n    <!-- OpenVidu Video Conference Component -->\n    <ov-videoconference\n      [prejoin]=\"true\"\n      [token]=\"token\"\n      [livekitUrl]=\"LIVEKIT_URL\"\n      (onTokenRequested)=\"onTokenRequested($event)\"\n      (onRoomCreated)=\"handleRemoteHand($event)\"\n    >\n      <div *ovToolbarAdditionalButtons>\n        <button toolbar-btn mat-icon-button (click)=\"handleLocalHand()\" [class.active-btn]=\"hasHandRaised\">\n          <mat-icon matTooltip=\"Toggle hand\">front_hand</mat-icon>\n        </button>\n      </div>\n\n      <div *ovStream=\"let track\" style=\"height: 100%\">\n        <ov-stream [track]=\"track\"></ov-stream>\n        @if (track.participant.hasHandRaised) {\n        <mat-icon @inOutHandAnimation id=\"hand-notification\">front_hand</mat-icon>\n        }\n      </div>\n\n      <div *ovParticipantPanelItemElements=\"let participant\">\n        @if (participant.hasHandRaised) {\n        <mat-icon>front_hand</mat-icon>\n        }\n      </div>\n    </ov-videoconference>\n  `,\n  styles: [''],\n  standalone: true,\n  imports: [OpenViduComponentsModule, MatIconButton, MatIcon]\n})\nexport class AppComponent {\n  // For local development, leave these variables empty\n  // For production, configure them with correct URLs depending on your deployment\n\n  APPLICATION_SERVER_URL = '';  // (1)!\n  LIVEKIT_URL = ''; // (2)!\n\n  // The name of the room to join.\n  roomName = 'openvidu-toggle-hand';  // (3)!\n\n  // The token used to join the room.\n  token!: string; // (4)!\n\n  // Whether the local participant has raised their hand.\n  hasHandRaised: boolean = false; // (5)!\n\n  constructor(private httpClient: HttpClient, private participantService: ParticipantService) {\n    this.configureUrls();\n  }\n\n  private configureUrls() {\n    // If APPLICATION_SERVER_URL is not configured, use default value from local development\n    if (!this.APPLICATION_SERVER_URL) {\n      if (window.location.hostname === 'localhost') {\n        this.APPLICATION_SERVER_URL = 'http://localhost:6080/';\n      } else {\n        this.APPLICATION_SERVER_URL =\n          'https://' + window.location.hostname + ':6443/';\n      }\n    }\n\n    // If LIVEKIT_URL is not configured, use default value from local development\n    if (!this.LIVEKIT_URL) {\n      if (window.location.hostname === 'localhost') {\n        this.LIVEKIT_URL = 'ws://localhost:7880/';\n      } else {\n        this.LIVEKIT_URL = 'wss://' + window.location.hostname + ':7443/';\n      }\n    }\n  }\n\n  // Requests a token to join the room with the given participant name.\n  async onTokenRequested(participantName: string) { // (6)!\n    const { token } = await this.getToken(this.roomName, participantName);\n    this.token = token;\n  }\n\n  // Handles the reception of a remote hand-raising event.\n  handleRemoteHand(room: Room) { // (7)!\n    // Subscribe to hand toggling events from other participants\n    room.on(RoomEvent.DataReceived, (payload: Uint8Array, participant?: RemoteParticipant, _?: DataPacket_Kind, topic?: string) => { // (8)!\n      if (topic === DataTopicApp.HAND_TOGGLE) {\n        const p = this.participantService.getRemoteParticipantBySid(participant.sid); // (9)!\n        if (p) {\n          (<ParticipantAppModel>p).toggleHandRaised(); // (10)!\n        }\n        this.participantService.updateRemoteParticipants(); // (11)!\n      }\n    });\n  }\n\n  // Handles the local hand-raising event.\n  async handleLocalHand() {  // (12)!\n    // Get local participant with ParticipantService\n    const participant = <ParticipantAppModel>this.participantService.getLocalParticipant(); // (13)!\n\n    // Toggle the participant hand with the method we wil add in our ParticipantAppModel\n    participant.toggleHandRaised(); // (14)!\n\n    // Refresh the local participant object for others component and services\n    this.participantService.updateLocalParticipant(); // (15)!\n\n    // Send a signal with the new value to others participant using the openvidu-browser signal\n    const strData = JSON.stringify({});\n    const data: Uint8Array = new TextEncoder().encode(strData);\n    const options: DataPublishOptions = { topic: DataTopicApp.HAND_TOGGLE };\n\n    await this.participantService.publishData(data, options); // (16)!\n  }\n\n  // Retrieves a token to join the room with the given name and participant name.\n  getToken(roomName: string, participantName: string): Promise<any> { // (17)!\n    // Requesting token to the server application\n  }\n}\n
  1. APPLICATION_SERVER_URL: URL to communicate the client application with the server application to request OpenVidu tokens.
  2. LIVEKIT_URL: URL to communicate the client application with the LiveKit server.
  3. roomName: OpenVidu Room identifier. This is the room where the VideoconferenceComponent will connect.
  4. token: OpenVidu Token used to connect to the OpenVidu Room.
  5. hasHandRaised: Boolean that indicates if the local participant has raised their hand.
  6. onTokenRequested method that fires when the VideoconferenceComponent requests a token to connect to the OpenVidu Room.
  7. handleRemoteHand method that handles the reception of a remote HAND_TOGGLE event.
  8. on method that subscribes to the DataReceived event to handle the reception of a remote HAND_TOGGLE event.
  9. getRemoteParticipantBySid method that retrieves a remote participant by its unique ID.
  10. toggleHandRaised method that toggles the hand raising status of a remote participant.
  11. updateRemoteParticipants method that updates the list of remote participants.
  12. handleLocalHand method that handles the local HAND_TOGGLE event.
  13. getLocalParticipant method that retrieves the local participant.
  14. toggleHandRaised method that toggles the hand raising status of the local participant.
  15. updateLocalParticipant method that updates the local participant.
  16. publishData method that sends a signal to other participants.
  17. getToken method that requests a token to the server application.

The app.component.ts file declares the following properties and methods:

Configure the URLs

For local development, leave APPLICATION_SERVER_URL and LIVEKIT_URL variables empty. The function configureUrls() will automatically configure them with default values. However, for production, you should configure these variables with the correct URLs depending on your deployment.

The ParticipantAppModel class extends the ParticipantModel class to add the ability to raise and lower the hand.

  import { ParticipantModel, ParticipantProperties } from 'openvidu-components-angular';\n\n  // Represents a participant in the application, with the ability to raise their hand.\n  export class ParticipantAppModel extends ParticipantModel {\n\n    // Indicates whether the participant has raised their hand.\n    hasHandRaised: boolean;\n\n    //  Creates a new instance of ParticipantAppModel.\n    constructor(props: ParticipantProperties) {\n      super(props);\n      this.hasHandRaised = false;\n    }\n\n    // Toggles the participant's hand raised status.\n    toggleHandRaised() {\n      this.hasHandRaised = !this.hasHandRaised;\n    }\n  }\n

The OpenVidu Components Angular library provides a set of CSS variables that you can use to customize the appearance of the components. You can define these variables in your application's global styles file (e.g. styles.scss).

:root {\n    --ov-primary-color: #303030; /* Primary interface color */\n    --ov-secondary-color: #3e3f3f; /* Secondary interface color */\n    --ov-tertiary-color: #598eff; /* Tertiary accent color for elements */\n    --ov-warn-color: #eb5144; /* Warning color for alerts and notifications */\n    --ov-light-color: #e6e6e6; /* Light color for elements */\n\n    --ov-accent-color: #ffae35; /* Accent color for standout UI elements */\n\n    --ov-logo-background-color: #3a3d3d; /* Background color for the logo area */\n    --ov-text-color: #ffffff; /* Default text color */\n\n    --ov-panel-text-color: #1d1d1d; /* Text color for panel elements */\n    --ov-panel-background: #ffffff; /* Background color for panels */\n\n    --ov-buttons-radius: 50%; /* Border-radius for circular buttons */\n    --ov-leave-button-radius: 10px; /* Border-radius for the leave button */\n    --ov-video-radius: 5px; /* Border-radius for video elements */\n    --ov-panel-radius: 5px; /* Border-radius for panel elements */\n}\n
"},{"location":"docs/tutorials/angular-components/openvidu-toolbar-buttons/","title":"openvidu-toolbar-buttons","text":"

Source code

The openvidu-toolbar-buttons tutorial demonstrates how to add custom buttons to the central part of the default toolbar in the OpenVidu Components Angular library.

Adding toolbar buttons is made simple with the ToolbarAdditionalButtonsDirective, which offers a straightforward way to add custom buttons to the ToolbarComponent.

OpenVidu Components - Toolbar Buttons"},{"location":"docs/tutorials/angular-components/openvidu-toolbar-buttons/#running-this-tutorial","title":"Running this tutorial","text":""},{"location":"docs/tutorials/angular-components/openvidu-toolbar-buttons/#1-run-openvidu-server","title":"1. Run OpenVidu Server","text":"Run OpenVidu locallyDeploy OpenVidu

  1. Download OpenVidu

    git clone https://github.com/OpenVidu/openvidu-local-deployment\n

  2. Configure the local deployment

    Windows macOS Linux 
    cd openvidu-local-deployment/community\n.\\configure_lan_private_ip_windows.bat\n
    cd openvidu-local-deployment/community\n./configure_lan_private_ip_macos.sh\n
    cd openvidu-local-deployment/community\n./configure_lan_private_ip_linux.sh\n

  3. Run OpenVidu

    docker compose up\n

To use a production-ready OpenVidu deployment, visit the official deployment guide.

"},{"location":"docs/tutorials/angular-components/openvidu-toolbar-buttons/#2-download-the-tutorial-code","title":"2. Download the tutorial code","text":"
git clone https://github.com/OpenVidu/openvidu-livekit-tutorials.git\ngit clone https://github.com/OpenVidu/openvidu-tutorials.git\n
"},{"location":"docs/tutorials/angular-components/openvidu-toolbar-buttons/#3-run-the-server-application","title":"3. Run the server application","text":"Node Go Ruby Java Python Rust PHP .NET

To run this server application, you need Node installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/node\n
  2. Install dependencies 
    npm install\n
  3. Run the application 
    npm start\n

To run this server application, you need Go installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/go\n
  2. Run the application 
    go run main.go\n

To run this server application, you need Ruby installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/ruby\n
  2. Install dependencies 
    bundle install\n
  3. Run the application 
    ruby app.rb\n

To run this server application, you need Java and Maven installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/java\n
  2. Run the application 
    mvn spring-boot:run\n

To run this server application, you need Python 3 installed on your device.

  1. Navigate into the server directory

    cd openvidu-livekit-tutorials/application-server/python\n

  2. Create a python virtual environment

    python -m venv venv\n

  3. Activate the virtual environment

    Windows macOS Linux 
    .\\venv\\Scripts\\activate\n
    . ./venv/bin/activate\n
    . ./venv/bin/activate\n

  4. Install dependencies

    pip install -r requirements.txt\n

  5. Run the application

    python app.py\n

To run this server application, you need Rust installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/rust\n
  2. Run the application 
    cargo run\n

To run this server application, you need PHP and Composer installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/php\n
  2. Install dependencies 
    composer install\n
  3. Run the application 
    composer start\n

To run this server application, you need .NET installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/dotnet\n
  2. Run the application 
    dotnet run\n

Warning

This .NET server application needs the LIVEKIT_API_SECRET env variable to be at least 32 characters long. Make sure to update it here and in your OpenVidu Server.

"},{"location":"docs/tutorials/angular-components/openvidu-toolbar-buttons/#4-run-the-openvidu-toolbar-buttons-tutorial","title":"4. Run the openvidu-toolbar-buttons tutorial","text":"

To run the client application tutorial, you need Node installed on your development computer.

  1. Navigate into the application client directory:

      cd openvidu-tutorials/openvidu-components/openvidu-toolbar-buttons\n

  2. Install the required dependencies:

      npm install\n

  3. Serve the application:

      npm start\n

Once the server is up and running, you can test the application by visiting http://localhost:5080.

Accessing your application client from other devices in your local network

One advantage of running OpenVidu locally is that you can test your application client with other devices in your local network very easily without worrying about SSL certificates.

Access your application client through https://xxx-yyy-zzz-www.openvidu-local.dev:5443, where xxx-yyy-zzz-www part of the domain is your LAN private IP address with dashes (-) instead of dots (.). For more information, see section Accessing your app from other devices in your network.

"},{"location":"docs/tutorials/angular-components/openvidu-toolbar-buttons/#understanding-the-code","title":"Understanding the code","text":"

This tutorial is an Angular project generated with Angular CLI tool. Therefore, you will see many configuration files and other components that are not the primary focus of this tutorial. We will concentrate on the following files in the src directory:

To use OpenVidu Components Angular in your application, you need to install the library and import the OpenViduComponentsModule in your Angular module. Let's see how to do this:

  1. Create an Angular Project (version 17 or higher)

    To begin, you will need to create a new Angular project if you haven't already. Ensure you have Node.js and the Angular CLI installed. Then, run the following command to create a new Angular project:

    ng new your-project-name\n

    Replace your-project-name with the desired name for your project.

  2. Add Angular Material to your project

    OpenVidu Components Angular needs Angular Material, which provides a range of UI components. To add Angular Material to your project, navigate to your project directory and run:

    ng add @angular/material\n

  3. Install OpenVidu Components Angular

    With your Angular project set up, it's time to add videoconferencing capabilities with OpenVidu Components Angular. Install the library using npm:

    npm install openvidu-components-angular\n

  4. Import and use OpenVidu Components Angular

    To use OpenVidu Components Angular in your application, you need to:

    1. Import the OpenViduComponentsModule in your Angular application.
    2. Configure the module with the OpenViduComponentsConfig object.
    3. Add the component to your template file.
    4. Assign the OpenVidu token and LiveKit URL to the component.
    5. Customize the appearance of the components using CSS variables.
main.tsapp.component.tsstyles.scss

In your main.ts application file, import the it and configure it as follows:

// Other imports ...\n\nimport { OpenViduComponentsModule, OpenViduComponentsConfig } from 'openvidu-components-angular';\n\nconst config: OpenViduComponentsConfig = {\n    production: true,\n};\n\nbootstrapApplication(AppComponent, {\n    providers: [\n        importProvidersFrom(\n            OpenViduComponentsModule.forRoot(config)\n            // Other imports ...\n        ),\n        provideAnimations(),\n    ],\n}).catch((err) => console.error(err));\n

Use the ov-videoconference component to create a videoconference. This component requires a token to connect to the OpenVidu Room. The AppComponent class is responsible for requesting the token and passing it to the ov-videoconference component.

import { MatIcon } from '@angular/material/icon';\nimport { MatIconButton } from '@angular/material/button';\nimport { OpenViduComponentsModule, ParticipantService } from 'openvidu-components-angular';\n\n@Component({\n  selector: 'app-root',\n  template:`\n    <ov-videoconference\n      [token]=\"token\"\n      [livekitUrl]=\"LIVEKIT_URL\"\n      (onTokenRequested)=\"onTokenRequested($event)\"\n    >\n      <div *ovToolbarAdditionalButtons style=\"text-align: center;\">\n        <button mat-icon-button (click)=\"toggleVideo()\">\n          <mat-icon>videocam</mat-icon>\n        </button>\n        <button mat-icon-button (click)=\"toggleAudio()\">\n          <mat-icon>mic</mat-icon>\n        </button>\n      </div>\n    </ov-videoconference>\n  `,\n  styles: [''],\n  standalone: true,\n    imports: [OpenViduComponentsModule, MatIconButton, MatIcon],\n})\nexport class AppComponent {\n  // For local development, leave these variables empty\n  // For production, configure them with correct URLs depending on your deployment\n\n  APPLICATION_SERVER_URL = '';  // (1)!\n  LIVEKIT_URL = ''; // (2)!\n\n  // The name of the room to join.\n  roomName = 'openvidu-toolbar-buttons';  // (3)!\n\n  // The token used to join the room.\n  token!: string; // (4)!\n\n  constructor(private httpClient: HttpClient, private participantService: ParticipantService) {\n    this.configureUrls();\n  }\n\n  private configureUrls() {\n    // If APPLICATION_SERVER_URL is not configured, use default value from local development\n    if (!this.APPLICATION_SERVER_URL) {\n      if (window.location.hostname === 'localhost') {\n        this.APPLICATION_SERVER_URL = 'http://localhost:6080/';\n      } else {\n        this.APPLICATION_SERVER_URL =\n          'https://' + window.location.hostname + ':6443/';\n      }\n    }\n\n    // If LIVEKIT_URL is not configured, use default value from local development\n    if (!this.LIVEKIT_URL) {\n      if (window.location.hostname === 'localhost') {\n        this.LIVEKIT_URL = 'ws://localhost:7880/';\n      } else {\n        this.LIVEKIT_URL = 'wss://' + window.location.hostname + ':7443/';\n      }\n    }\n  }\n\n  // Requests a token to join the room with the given participant name.\n  async onTokenRequested(participantName: string) { // (5)!\n    const { token } = await this.getToken(this.roomName, participantName);\n    this.token = token;\n  }\n\n  // Toggles the camera on and off.\n  async toggleVideo() { // (6)!\n    const isCameraEnabled = this.participantService.isMyCameraEnabled();\n    await this.participantService.setCameraEnabled(!isCameraEnabled);\n  }\n\n  // Toggles the microphone on and off.\n  async toggleAudio() { // (7)!\n    const isMicrophoneEnabled = this.participantService.isMyMicrophoneEnabled();\n    await this.participantService.setMicrophoneEnabled(!isMicrophoneEnabled);\n  }\n\n  // Retrieves a token to join the room with the given name and participant name.\n  getToken(roomName: string, participantName: string): Promise<any> { // (8)!\n    // Requesting token to the server application\n  }\n}\n
  1. APPLICATION_SERVER_URL: URL to communicate the client application with the server application to request OpenVidu tokens.
  2. LIVEKIT_URL: URL to communicate the client application with the LiveKit server.
  3. roomName: OpenVidu Room identifier. This is the room where the VideoconferenceComponent will connect.
  4. token: OpenVidu Token used to connect to the OpenVidu Room.
  5. onTokenRequested method that fires when the VideoconferenceComponent requests a token to connect to the OpenVidu Room.
  6. toggleVideo method that toggles the camera on and off.
  7. toggleAudio method that toggles the microphone on and off.
  8. getToken method that requests a token to the server application.

The app.component.ts file declares the following properties and methods:

Configure the URLs

For local development, leave APPLICATION_SERVER_URL and LIVEKIT_URL variables empty. The function configureUrls() will automatically configure them with default values. However, for production, you should configure these variables with the correct URLs depending on your deployment.

The OpenVidu Components Angular library provides a set of CSS variables that you can use to customize the appearance of the components. You can define these variables in your application's global styles file (e.g. styles.scss).

:root {\n    --ov-primary-color: #303030; /* Primary interface color */\n    --ov-secondary-color: #3e3f3f; /* Secondary interface color */\n    --ov-tertiary-color: #598eff; /* Tertiary accent color for elements */\n    --ov-warn-color: #eb5144; /* Warning color for alerts and notifications */\n    --ov-light-color: #e6e6e6; /* Light color for elements */\n\n    --ov-accent-color: #ffae35; /* Accent color for standout UI elements */\n\n    --ov-logo-background-color: #3a3d3d; /* Background color for the logo area */\n    --ov-text-color: #ffffff; /* Default text color */\n\n    --ov-panel-text-color: #1d1d1d; /* Text color for panel elements */\n    --ov-panel-background: #ffffff; /* Background color for panels */\n\n    --ov-buttons-radius: 50%; /* Border-radius for circular buttons */\n    --ov-leave-button-radius: 10px; /* Border-radius for the leave button */\n    --ov-video-radius: 5px; /* Border-radius for video elements */\n    --ov-panel-radius: 5px; /* Border-radius for panel elements */\n}\n
"},{"location":"docs/tutorials/angular-components/openvidu-toolbar-buttons/#adding-additional-buttons-to-the-toolbar","title":"Adding additional buttons to the toolbar","text":"

OpenVidu Components Angular provides a directive called *ovToolbarAdditionalButtons that allows you to add custom buttons to the toolbar.

In the app.component.ts file, you can see the following code snippet:

@Component({\n  selector: 'app-root',\n  template:`\n    <ov-videoconference\n      [token]=\"token\"\n      [livekitUrl]=\"LIVEKIT_URL\"\n      (onTokenRequested)=\"onTokenRequested($event)\"\n    >\n      <div *ovToolbarAdditionalButtons style=\"text-align: center;\">\n        <button mat-icon-button (click)=\"toggleVideo()\">\n          <mat-icon>videocam</mat-icon>\n        </button>\n        <button mat-icon-button (click)=\"toggleAudio()\">\n          <mat-icon>mic</mat-icon>\n        </button>\n      </div>\n\n    </ov-videoconference>\n  `,\n  styles: [''],\n  standalone: true,\n  imports: [OpenViduComponentsModule, MatIconButton, MatIcon],\n})\nexport class AppComponent {\n  // ...\n}\n

In this code snippet, the *ovToolbarAdditionalButtons directive is used to add two buttons to the toolbar. The mat-icon-button component from Angular Material is used to create the buttons. The toggleVideo and toggleAudio methods are called when the buttons are clicked.

"},{"location":"docs/tutorials/angular-components/openvidu-toolbar-panel-buttons/","title":"openvidu-toolbar-panel-buttons","text":"

Source code

The openvidu-toolbar-panel-buttons tutorial demonstrates how to add custom buttons to the right part of the default toolbar in the OpenVidu Components Angular library.

Adding toolbar buttons is made simple with the ToolbarAdditionalPanelButtonsDirective, which offers a straightforward way to add custom buttons to the ToolbarComponent.

OpenVidu Components - Toolbar Panel Buttons"},{"location":"docs/tutorials/angular-components/openvidu-toolbar-panel-buttons/#running-this-tutorial","title":"Running this tutorial","text":""},{"location":"docs/tutorials/angular-components/openvidu-toolbar-panel-buttons/#1-run-openvidu-server","title":"1. Run OpenVidu Server","text":"Run OpenVidu locallyDeploy OpenVidu

  1. Download OpenVidu

    git clone https://github.com/OpenVidu/openvidu-local-deployment\n

  2. Configure the local deployment

    Windows macOS Linux 
    cd openvidu-local-deployment/community\n.\\configure_lan_private_ip_windows.bat\n
    cd openvidu-local-deployment/community\n./configure_lan_private_ip_macos.sh\n
    cd openvidu-local-deployment/community\n./configure_lan_private_ip_linux.sh\n

  3. Run OpenVidu

    docker compose up\n

To use a production-ready OpenVidu deployment, visit the official deployment guide.

"},{"location":"docs/tutorials/angular-components/openvidu-toolbar-panel-buttons/#2-download-the-tutorial-code","title":"2. Download the tutorial code","text":"
git clone https://github.com/OpenVidu/openvidu-livekit-tutorials.git\ngit clone https://github.com/OpenVidu/openvidu-tutorials.git\n
"},{"location":"docs/tutorials/angular-components/openvidu-toolbar-panel-buttons/#3-run-the-server-application","title":"3. Run the server application","text":"Node Go Ruby Java Python Rust PHP .NET

To run this server application, you need Node installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/node\n
  2. Install dependencies 
    npm install\n
  3. Run the application 
    npm start\n

To run this server application, you need Go installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/go\n
  2. Run the application 
    go run main.go\n

To run this server application, you need Ruby installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/ruby\n
  2. Install dependencies 
    bundle install\n
  3. Run the application 
    ruby app.rb\n

To run this server application, you need Java and Maven installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/java\n
  2. Run the application 
    mvn spring-boot:run\n

To run this server application, you need Python 3 installed on your device.

  1. Navigate into the server directory

    cd openvidu-livekit-tutorials/application-server/python\n

  2. Create a python virtual environment

    python -m venv venv\n

  3. Activate the virtual environment

    Windows macOS Linux 
    .\\venv\\Scripts\\activate\n
    . ./venv/bin/activate\n
    . ./venv/bin/activate\n

  4. Install dependencies

    pip install -r requirements.txt\n

  5. Run the application

    python app.py\n

To run this server application, you need Rust installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/rust\n
  2. Run the application 
    cargo run\n

To run this server application, you need PHP and Composer installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/php\n
  2. Install dependencies 
    composer install\n
  3. Run the application 
    composer start\n

To run this server application, you need .NET installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/dotnet\n
  2. Run the application 
    dotnet run\n

Warning

This .NET server application needs the LIVEKIT_API_SECRET env variable to be at least 32 characters long. Make sure to update it here and in your OpenVidu Server.

"},{"location":"docs/tutorials/angular-components/openvidu-toolbar-panel-buttons/#4-run-the-openvidu-toolbar-panel-buttons-tutorial","title":"4. Run the openvidu-toolbar-panel-buttons tutorial","text":"

To run the client application tutorial, you need Node installed on your development computer.

  1. Navigate into the application client directory:

      cd openvidu-tutorials/openvidu-components/openvidu-toolbar-panel-buttons\n

  2. Install the required dependencies:

      npm install\n

  3. Serve the application:

      npm start\n

Once the server is up and running, you can test the application by visiting http://localhost:5080.

Accessing your application client from other devices in your local network

One advantage of running OpenVidu locally is that you can test your application client with other devices in your local network very easily without worrying about SSL certificates.

Access your application client through https://xxx-yyy-zzz-www.openvidu-local.dev:5443, where xxx-yyy-zzz-www part of the domain is your LAN private IP address with dashes (-) instead of dots (.). For more information, see section Accessing your app from other devices in your network.

"},{"location":"docs/tutorials/angular-components/openvidu-toolbar-panel-buttons/#understanding-the-code","title":"Understanding the code","text":"

This tutorial is an Angular project generated with Angular CLI tool. Therefore, you will see many configuration files and other components that are not the primary focus of this tutorial. We will concentrate on the following files in the src directory:

To use OpenVidu Components Angular in your application, you need to install the library and import the OpenViduComponentsModule in your Angular module. Let's see how to do this:

  1. Create an Angular Project (version 17 or higher)

    To begin, you will need to create a new Angular project if you haven't already. Ensure you have Node.js and the Angular CLI installed. Then, run the following command to create a new Angular project:

    ng new your-project-name\n

    Replace your-project-name with the desired name for your project.

  2. Add Angular Material to your project

    OpenVidu Components Angular needs Angular Material, which provides a range of UI components. To add Angular Material to your project, navigate to your project directory and run:

    ng add @angular/material\n

  3. Install OpenVidu Components Angular

    With your Angular project set up, it's time to add videoconferencing capabilities with OpenVidu Components Angular. Install the library using npm:

    npm install openvidu-components-angular\n

  4. Import and use OpenVidu Components Angular

    To use OpenVidu Components Angular in your application, you need to:

    1. Import the OpenViduComponentsModule in your Angular application.
    2. Configure the module with the OpenViduComponentsConfig object.
    3. Add the component to your template file.
    4. Assign the OpenVidu token and LiveKit URL to the component.
    5. Customize the appearance of the components using CSS variables.
main.tsapp.component.tsstyles.scss

In your main.ts application file, import the it and configure it as follows:

// Other imports ...\n\nimport { OpenViduComponentsModule, OpenViduComponentsConfig } from 'openvidu-components-angular';\n\nconst config: OpenViduComponentsConfig = {\n    production: true,\n};\n\nbootstrapApplication(AppComponent, {\n    providers: [\n        importProvidersFrom(\n            OpenViduComponentsModule.forRoot(config)\n            // Other imports ...\n        ),\n        provideAnimations(),\n    ],\n}).catch((err) => console.error(err));\n

Use the ov-videoconference component to create a videoconference. This component requires a token to connect to the OpenVidu Room. The AppComponent class is responsible for requesting the token and passing it to the ov-videoconference component.

import { MatIcon } from '@angular/material/icon';\nimport { MatIconButton } from '@angular/material/button';\nimport { OpenViduComponentsModule } from 'openvidu-components-angular';\n\n@Component({\n  selector: 'app-root',\n  template:`\n      <ov-videoconference\n        [token]=\"token\"\n        [livekitUrl]=\"LIVEKIT_URL\"\n        [toolbarDisplayRoomName]=\"false\"\n        (onTokenRequested)=\"onTokenRequested($event)\"\n      >\n        <div *ovToolbarAdditionalPanelButtons style=\"text-align: center;\">\n          <button mat-icon-button (click)=\"onButtonClicked()\">\n            <mat-icon>star</mat-icon>\n          </button>\n        </div>\n      </ov-videoconference>\n  `,\n  styles: [''],\n  standalone: true,\n    imports: [OpenViduComponentsModule, MatIconButton, MatIcon],\n})\nexport class AppComponent {\n  // For local development, leave these variables empty\n  // For production, configure them with correct URLs depending on your deployment\n\n  APPLICATION_SERVER_URL = '';  // (1)!\n  LIVEKIT_URL = ''; // (2)!\n\n  // The name of the room to join.\n  roomName = 'openvidu-toolbar-panel-buttons';  // (3)!\n\n  // The token used to join the room.\n  token!: string; // (4)!\n\n  constructor(private httpClient: HttpClient) {\n    this.configureUrls();\n  }\n\n  private configureUrls() {\n    // If APPLICATION_SERVER_URL is not configured, use default value from local development\n    if (!this.APPLICATION_SERVER_URL) {\n      if (window.location.hostname === 'localhost') {\n        this.APPLICATION_SERVER_URL = 'http://localhost:6080/';\n      } else {\n        this.APPLICATION_SERVER_URL =\n          'https://' + window.location.hostname + ':6443/';\n      }\n    }\n\n    // If LIVEKIT_URL is not configured, use default value from local development\n    if (!this.LIVEKIT_URL) {\n      if (window.location.hostname === 'localhost') {\n        this.LIVEKIT_URL = 'ws://localhost:7880/';\n      } else {\n        this.LIVEKIT_URL = 'wss://' + window.location.hostname + ':7443/';\n      }\n    }\n  }\n\n  // Requests a token to join the room with the given participant name.\n  async onTokenRequested(participantName: string) { // (5)!\n    const { token } = await this.getToken(this.roomName, participantName);\n    this.token = token;\n  }\n\n  // Method to handle button click\n  onButtonClicked() { // (6)!\n    alert('button clicked');\n  }\n\n  // Retrieves a token to join the room with the given name and participant name.\n  getToken(roomName: string, participantName: string): Promise<any> { // (7)!\n    // Requesting token to the server application\n  }\n}\n
  1. APPLICATION_SERVER_URL: URL to communicate the client application with the server application to request OpenVidu tokens.
  2. LIVEKIT_URL: URL to communicate the client application with the LiveKit server.
  3. roomName: OpenVidu Room identifier. This is the room where the VideoconferenceComponent will connect.
  4. token: OpenVidu Token used to connect to the OpenVidu Room.
  5. onTokenRequested method that fires when the VideoconferenceComponent requests a token to connect to the OpenVidu Room.
  6. onButtonClicked method that fires when the custom button is clicked.
  7. getToken method that requests a token to the server application.

The app.component.ts file declares the following properties and methods:

Configure the URLs

For local development, leave APPLICATION_SERVER_URL and LIVEKIT_URL variables empty. The function configureUrls() will automatically configure them with default values. However, for production, you should configure these variables with the correct URLs depending on your deployment.

The OpenVidu Components Angular library provides a set of CSS variables that you can use to customize the appearance of the components. You can define these variables in your application's global styles file (e.g. styles.scss).

:root {\n    --ov-primary-color: #303030; /* Primary interface color */\n    --ov-secondary-color: #3e3f3f; /* Secondary interface color */\n    --ov-tertiary-color: #598eff; /* Tertiary accent color for elements */\n    --ov-warn-color: #eb5144; /* Warning color for alerts and notifications */\n    --ov-light-color: #e6e6e6; /* Light color for elements */\n\n    --ov-accent-color: #ffae35; /* Accent color for standout UI elements */\n\n    --ov-logo-background-color: #3a3d3d; /* Background color for the logo area */\n    --ov-text-color: #ffffff; /* Default text color */\n\n    --ov-panel-text-color: #1d1d1d; /* Text color for panel elements */\n    --ov-panel-background: #ffffff; /* Background color for panels */\n\n    --ov-buttons-radius: 50%; /* Border-radius for circular buttons */\n    --ov-leave-button-radius: 10px; /* Border-radius for the leave button */\n    --ov-video-radius: 5px; /* Border-radius for video elements */\n    --ov-panel-radius: 5px; /* Border-radius for panel elements */\n}\n
"},{"location":"docs/tutorials/angular-components/openvidu-toolbar-panel-buttons/#adding-custom-buttons-to-the-toolbar","title":"Adding custom buttons to the toolbar","text":"

OpenVidu Components Angular provides a directive called *ovToolbarAdditionalPanelButtons that allows you to add custom buttons to the toolbar. This directive can be used to add buttons to the right part of the toolbar.

In the app.component.ts file, you can see the following code snippet:

@Component({\n    selector: 'app-root',\n    template: `\n        <ov-videoconference\n            [token]=\"token\"\n            [livekitUrl]=\"LIVEKIT_URL\"\n            [toolbarDisplayRoomName]=\"false\"\n            (onTokenRequested)=\"onTokenRequested($event)\"\n        >\n            <div *ovToolbarAdditionalPanelButtons style=\"text-align: center;\">\n                <button mat-icon-button (click)=\"onButtonClicked()\">\n                    <mat-icon>star</mat-icon>\n                </button>\n            </div>\n        </ov-videoconference>\n    `,\n    styles: [''],\n    standalone: true,\n    imports: [OpenViduComponentsModule, MatIconButton, MatIcon],\n})\nexport class AppComponent {\n    // ...\n}\n

In this code snippet, the *ovToolbarAdditionalPanelButtons directive is used to add a custom button to the right part of the toolbar and is displayed as a star icon, and the onButtonClicked method is called when the button is clicked.

"},{"location":"docs/tutorials/application-client/","title":"Application client tutorials","text":"

Every application client below shares the same core functionality:

Every application client below is interchangeable with the others, because:

JavaScript

React

Angular

Vue

Electron

Ionic

"},{"location":"docs/tutorials/application-client/angular/","title":"openvidu-angular","text":"

Source code

This tutorial is a simple video-call application built with Angular that allows:

It uses the LiveKit JS SDK to connect to the LiveKit server and interact with the video call room.

"},{"location":"docs/tutorials/application-client/angular/#running-this-tutorial","title":"Running this tutorial","text":""},{"location":"docs/tutorials/application-client/angular/#1-run-openvidu-server","title":"1. Run OpenVidu Server","text":"Run OpenVidu locallyDeploy OpenVidu

  1. Download OpenVidu

    git clone https://github.com/OpenVidu/openvidu-local-deployment\n

  2. Configure the local deployment

    Windows macOS Linux 
    cd openvidu-local-deployment/community\n.\\configure_lan_private_ip_windows.bat\n
    cd openvidu-local-deployment/community\n./configure_lan_private_ip_macos.sh\n
    cd openvidu-local-deployment/community\n./configure_lan_private_ip_linux.sh\n

  3. Run OpenVidu

    docker compose up\n

To use a production-ready OpenVidu deployment, visit the official deployment guide.

"},{"location":"docs/tutorials/application-client/angular/#2-download-the-tutorial-code","title":"2. Download the tutorial code","text":"
git clone https://github.com/OpenVidu/openvidu-livekit-tutorials.git\n
"},{"location":"docs/tutorials/application-client/angular/#3-run-a-server-application","title":"3. Run a server application","text":"Node Go Ruby Java Python Rust PHP .NET

To run this server application, you need Node installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/node\n
  2. Install dependencies 
    npm install\n
  3. Run the application 
    npm start\n

To run this server application, you need Go installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/go\n
  2. Run the application 
    go run main.go\n

To run this server application, you need Ruby installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/ruby\n
  2. Install dependencies 
    bundle install\n
  3. Run the application 
    ruby app.rb\n

To run this server application, you need Java and Maven installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/java\n
  2. Run the application 
    mvn spring-boot:run\n

To run this server application, you need Python 3 installed on your device.

  1. Navigate into the server directory

    cd openvidu-livekit-tutorials/application-server/python\n

  2. Create a python virtual environment

    python -m venv venv\n

  3. Activate the virtual environment

    Windows macOS Linux 
    .\\venv\\Scripts\\activate\n
    . ./venv/bin/activate\n
    . ./venv/bin/activate\n

  4. Install dependencies

    pip install -r requirements.txt\n

  5. Run the application

    python app.py\n

To run this server application, you need Rust installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/rust\n
  2. Run the application 
    cargo run\n

To run this server application, you need PHP and Composer installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/php\n
  2. Install dependencies 
    composer install\n
  3. Run the application 
    composer start\n

To run this server application, you need .NET installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/dotnet\n
  2. Run the application 
    dotnet run\n

Warning

This .NET server application needs the LIVEKIT_API_SECRET env variable to be at least 32 characters long. Make sure to update it here and in your OpenVidu Server.

"},{"location":"docs/tutorials/application-client/angular/#4-run-the-client-application","title":"4. Run the client application","text":"

To run the client application tutorial, you need Node installed on your development computer.

  1. Navigate into the application client directory:

    cd openvidu-livekit-tutorials/application-client/openvidu-angular\n

  2. Install the required dependencies:

    npm install\n

  3. Serve the application:

    npm start\n

Once the server is up and running, you can test the application by visiting http://localhost:5080. You should see a screen like this:

Accessing your application client from other devices in your local network

One advantage of running OpenVidu locally is that you can test your application client with other devices in your local network very easily without worrying about SSL certificates.

Access your application client through https://xxx-yyy-zzz-www.openvidu-local.dev:5443, where xxx-yyy-zzz-www part of the domain is your LAN private IP address with dashes (-) instead of dots (.). For more information, see section Accessing your app from other devices in your network.

"},{"location":"docs/tutorials/application-client/angular/#understanding-the-code","title":"Understanding the code","text":"

This Angular project has been created using the Angular CLI tool. You may come across various configuration files and other items that are not essential for this tutorial. Our focus will be on the key files located within the src/app/ directory:

To use the LiveKit JS SDK in an Angular application, you need to install the livekit-client package. This package provides the necessary classes and methods to interact with the LiveKit server. You can install it using the following command:

npm install livekit-client\n

Now let's see the code of the app.component.ts file:

app.component.ts
type TrackInfo = { // (1)!\n    trackPublication: RemoteTrackPublication;\n    participantIdentity: string;\n};\n\n// For local development, leave these variables empty\n// For production, configure them with correct URLs depending on your deployment\nvar APPLICATION_SERVER_URL = ''; // (2)!\nvar LIVEKIT_URL = ''; // (3)!\n\n@Component({ // (4)!\n    selector: 'app-root',\n    standalone: true,\n    imports: [ReactiveFormsModule, AudioComponent, VideoComponent],\n    templateUrl: './app.component.html',\n    styleUrl: './app.component.css',\n})\nexport class AppComponent implements OnDestroy {\n    roomForm = new FormGroup({ // (5)!\n        roomName: new FormControl('Test Room', Validators.required),\n        participantName: new FormControl('Participant' + Math.floor(Math.random() * 100), Validators.required),\n    });\n\n    room = signal<Room | undefined>(undefined); // (6)!\n    localTrack = signal<LocalVideoTrack | undefined>(undefined); // (7)!\n    remoteTracksMap = signal<Map<string, TrackInfo>>(new Map()); // (8)!\n\n    constructor(private httpClient: HttpClient) {\n        this.configureUrls();\n    }\n\n    configureUrls() {\n        // If APPLICATION_SERVER_URL is not configured, use default value from local development\n        if (!APPLICATION_SERVER_URL) {\n            if (window.location.hostname === 'localhost') {\n                APPLICATION_SERVER_URL = 'http://localhost:6080/';\n            } else {\n                APPLICATION_SERVER_URL = 'https://' + window.location.hostname + ':6443/';\n            }\n        }\n\n        // If LIVEKIT_URL is not configured, use default value from local development\n        if (!LIVEKIT_URL) {\n            if (window.location.hostname === 'localhost') {\n                LIVEKIT_URL = 'ws://localhost:7880/';\n            } else {\n                LIVEKIT_URL = 'wss://' + window.location.hostname + ':7443/';\n            }\n        }\n    }\n
  1. TrackInfo type, which groups a track publication with the participant's identity.
  2. The URL of the application server.
  3. The URL of the LiveKit server.
  4. Angular component decorator that defines the AppComponent class and associates the HTML and CSS files with it.
  5. The roomForm object, which is a form group that contains the roomName and participantName fields. These fields are used to join a video call room.
  6. The room object, which represents the video call room.
  7. The local video track, which represents the user's camera.
  8. Map that links track SIDs with TrackInfo objects. This map is used to store remote tracks and their associated participant identities.

The app.component.ts file defines the following variables:

Configure the URLs

For local development, leave APPLICATION_SERVER_URL and LIVEKIT_URL variables empty. The function configureUrls() will automatically configure them with default values. However, for production, you should configure these variables with the correct URLs depending on your deployment.

"},{"location":"docs/tutorials/application-client/angular/#joining-a-room","title":"Joining a Room","text":"

After the user specifies their participant name and the name of the room they want to join, when they click the Join button, the joinRoom() method is called:

app.component.ts
async joinRoom() {\n    // Initialize a new Room object\n    const room = new Room();\n    this.room.set(room); // (1)!\n\n    // Specify the actions when events take place in the room\n    // On every new Track received...\n    this.room.on(\n        RoomEvent.TrackSubscribed,\n        (_track: RemoteTrack, publication: RemoteTrackPublication, participant: RemoteParticipant) => { // (2)!\n            this.remoteTracksMap.update((map) => {\n                map.set(publication.trackSid, {\n                    trackPublication: publication,\n                    participantIdentity: participant.identity,\n                });\n                return map;\n            });\n        }\n    );\n\n    // On every new Track destroyed...\n    room.on(RoomEvent.TrackUnsubscribed, (_track: RemoteTrack, publication: RemoteTrackPublication) => { // (3)!\n        this.remoteTracksMap.update((map) => {\n            map.delete(publication.trackSid);\n            return map;\n        });\n    });\n\n    try {\n        // Get the room name and participant name from the form\n        const roomName = this.roomForm.value.roomName!; // (4)!\n        const participantName = this.roomForm.value.participantName!;\n\n        // Get a token from your application server with the room name and participant name\n        const token = await this.getToken(roomName, participantName); // (5)!\n\n        // Connect to the room with the LiveKit URL and the token\n        await room.connect(LIVEKIT_URL, token); // (6)!\n\n        // Publish your camera and microphone\n        await room.localParticipant.enableCameraAndMicrophone(); // (7)!\n        this.localTrack.set(room.localParticipant.videoTrackPublications.values().next().value.videoTrack);\n    } catch (error: any) {\n        console.log(\n            'There was an error connecting to the room:',\n            error?.error?.errorMessage || error?.message || error\n        );\n        await this.leaveRoom();\n    }\n}\n
  1. Initialize a new Room object.
  2. Event handling for when a new track is received in the room.
  3. Event handling for when a track is destroyed.
  4. Get the room name and participant name from the form.
  5. Get a token from the application server with the room name and participant name.
  6. Connect to the room with the LiveKit URL and the token.
  7. Publish your camera and microphone.

The joinRoom() method performs the following actions:

  1. It creates a new Room object. This object represents the video call room.

    Info

    When the room object is defined, the HTML template is automatically updated hiding the \"Join room\" page and showing the \"Room\" layout.

  2. Event handling is configured for different scenarios within the room. These events are fired when new tracks are subscribed to and when existing tracks are unsubscribed.

    These event handlers are essential for managing the behavior of tracks within the video call. You can further extend the event handling as needed for your application.

    Take a look at all events

    You can take a look at all the events in the Livekit Documentation

  3. It retrieves the room name and participant name from the form.

  4. It requests a token from the application server using the room name and participant name. This is done by calling the getToken() method:

    app.component.ts
    /**\n * --------------------------------------------\n * GETTING A TOKEN FROM YOUR APPLICATION SERVER\n * --------------------------------------------\n * The method below request the creation of a token to\n * your application server. This prevents the need to expose\n * your LiveKit API key and secret to the client side.\n *\n * In this sample code, there is no user control at all. Anybody could\n * access your application server endpoints. In a real production\n * environment, your application server must identify the user to allow\n * access to the endpoints.\n */\nasync getToken(roomName: string, participantName: string): Promise<string> {\n    const response = await lastValueFrom(\n        this.httpClient.post<{ token: string }>(APPLICATION_SERVER_URL + 'token', { roomName, participantName })\n    );\n    return response.token;\n}\n

    This function sends a POST request using HttpClient to the application server's /token endpoint. The request body contains the room name and participant name. The server responds with a token that is used to connect to the room.

  5. It connects to the room using the LiveKit URL and the token.

  6. It publishes the camera and microphone tracks to the room using room.localParticipant.enableCameraAndMicrophone(), which asks the user for permission to access their camera and microphone at the same time. The local video track is then stored in the localTrack variable.
"},{"location":"docs/tutorials/application-client/angular/#displaying-video-and-audio-tracks","title":"Displaying Video and Audio Tracks","text":"

In order to display participants' video and audio tracks, the app.component.html file integrates the VideoComponent and AudioComponent.

app.component.html
<div id=\"layout-container\">\n    @if (localTrack()) {\n    <video-component\n        [track]=\"localTrack()!\"\n        [participantIdentity]=\"roomForm.value.participantName!\"\n        [local]=\"true\"\n    ></video-component>\n    }\n    @for (remoteTrack of remoteTracksMap().values(); track remoteTrack.trackPublication.trackSid) {\n        @if (remoteTrack.trackPublication.kind === 'video') {\n        <video-component\n            [track]=\"remoteTrack.trackPublication.videoTrack!\"\n            [participantIdentity]=\"remoteTrack.participantIdentity\"\n        ></video-component>\n        } @else {\n        <audio-component [track]=\"remoteTrack.trackPublication.audioTrack!\" hidden></audio-component>\n        }\n    }\n</div>\n

This code snippet does the following:

Let's see now the code of the video.component.ts file:

video.component.ts
// (1)!\n@Component({\n    selector: 'video-component',\n    standalone: true,\n    imports: [],\n    templateUrl: './video.component.html',\n    styleUrl: './video.component.css',\n})\nexport class VideoComponent implements AfterViewInit, OnDestroy {\n    videoElement = viewChild<ElementRef<HTMLVideoElement>>('videoElement'); // (2)!\n\n    track = input.required<LocalVideoTrack | RemoteVideoTrack>(); // (3)!\n    participantIdentity = input.required<string>(); // (4)!\n    local = input(false); // (5)!\n\n    ngAfterViewInit() {\n        if (this.videoElement()) {\n            this.track().attach(this.videoElement()!.nativeElement); // (6)!\n        }\n    }\n\n    ngOnDestroy() {\n        this.track().detach(); // (7)!\n    }\n}\n
  1. Angular component decorator that defines the VideoComponent class and associates the HTML and CSS files with it.
  2. The reference to the video element in the HTML template.
  3. The video track object, which can be a LocalVideoTrack or a RemoteVideoTrack.
  4. The participant identity associated with the video track.
  5. A boolean flag that indicates whether the video track belongs to the local participant.
  6. Attach the video track to the video element when the track is set.
  7. Detach the video track when the component is destroyed.

The VideoComponent does the following:

Finally, let's see the code of the audio.component.ts file:

audio.component.ts
// (1)!\n@Component({\n    selector: 'audio-component',\n    standalone: true,\n    imports: [],\n    templateUrl: './audio.component.html',\n    styleUrl: './audio.component.css',\n})\nexport class AudioComponent implements AfterViewInit, OnDestroy {\n    audioElement = viewChild<ElementRef<HTMLAudioElement>>('audioElement'); // (2)!\n\n    track = input.required<LocalAudioTrack | RemoteAudioTrack>(); // (3)!\n\n    ngAfterViewInit() {\n        if (this.audioElement()) {\n            this.track().attach(this.audioElement()!.nativeElement); // (4)!\n        }\n    }\n\n    ngOnDestroy() {\n        this.track().detach(); // (5)!\n    }\n}\n
  1. Angular component decorator that defines the AudioComponent class and associates the HTML and CSS files with it.
  2. The reference to the audio element in the HTML template.
  3. The audio track object, which can be a RemoteAudioTrack or a LocalAudioTrack, although in this case, it will always be a RemoteAudioTrack.
  4. Attach the audio track to the audio element when view is initialized.
  5. Detach the audio track when the component is destroyed.

The AudioComponent class is similar to the VideoComponent class, but it is used to display audio tracks. It attaches the audio track to the audio element when view is initialized and detaches the audio track when the component is destroyed.

"},{"location":"docs/tutorials/application-client/angular/#leaving-the-room","title":"Leaving the Room","text":"

When the user wants to leave the room, they can click the Leave Room button. This action calls the leaveRoom() method:

app.component.ts
async leaveRoom() {\n    // Leave the room by calling 'disconnect' method over the Room object\n    await this.room()?.disconnect(); // (1)!\n\n    // Reset all variables\n    this.room.set(undefined); // (2)!\n    this.localTrack.set(undefined);\n    this.remoteTracksMap.set(new Map());\n}\n\n@HostListener('window:beforeunload') // (3)!\nasync ngOnDestroy() {\n    // On window closed or component destroyed, leave the room\n    await this.leaveRoom();\n}\n
  1. Disconnect the user from the room.
  2. Reset all variables.
  3. Call the leaveRoom() method when the user closes the browser window or navigates to another page.

The leaveRoom() method performs the following actions:

The window.onbeforeunload event and the ngOnDestroy() lifecycle hook are used to ensure that the user leaves the room when the browser window is closed or the component is destroyed.

"},{"location":"docs/tutorials/application-client/electron/","title":"openvidu-electron","text":"

Source code

This tutorial is a simple video-call application built with Electron that allows:

It uses the LiveKit JS SDK to connect to the LiveKit server and interact with the video call room.

"},{"location":"docs/tutorials/application-client/electron/#running-this-tutorial","title":"Running this tutorial","text":""},{"location":"docs/tutorials/application-client/electron/#1-run-openvidu-server","title":"1. Run OpenVidu Server","text":"Run OpenVidu locallyDeploy OpenVidu

  1. Download OpenVidu

    git clone https://github.com/OpenVidu/openvidu-local-deployment\n

  2. Configure the local deployment

    Windows macOS Linux 
    cd openvidu-local-deployment/community\n.\\configure_lan_private_ip_windows.bat\n
    cd openvidu-local-deployment/community\n./configure_lan_private_ip_macos.sh\n
    cd openvidu-local-deployment/community\n./configure_lan_private_ip_linux.sh\n

  3. Run OpenVidu

    docker compose up\n

To use a production-ready OpenVidu deployment, visit the official deployment guide.

"},{"location":"docs/tutorials/application-client/electron/#2-download-the-tutorial-code","title":"2. Download the tutorial code","text":"
git clone https://github.com/OpenVidu/openvidu-livekit-tutorials.git\n
"},{"location":"docs/tutorials/application-client/electron/#3-run-a-server-application","title":"3. Run a server application","text":"Node Go Ruby Java Python Rust PHP .NET

To run this server application, you need Node installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/node\n
  2. Install dependencies 
    npm install\n
  3. Run the application 
    npm start\n

To run this server application, you need Go installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/go\n
  2. Run the application 
    go run main.go\n

To run this server application, you need Ruby installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/ruby\n
  2. Install dependencies 
    bundle install\n
  3. Run the application 
    ruby app.rb\n

To run this server application, you need Java and Maven installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/java\n
  2. Run the application 
    mvn spring-boot:run\n

To run this server application, you need Python 3 installed on your device.

  1. Navigate into the server directory

    cd openvidu-livekit-tutorials/application-server/python\n

  2. Create a python virtual environment

    python -m venv venv\n

  3. Activate the virtual environment

    Windows macOS Linux 
    .\\venv\\Scripts\\activate\n
    . ./venv/bin/activate\n
    . ./venv/bin/activate\n

  4. Install dependencies

    pip install -r requirements.txt\n

  5. Run the application

    python app.py\n

To run this server application, you need Rust installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/rust\n
  2. Run the application 
    cargo run\n

To run this server application, you need PHP and Composer installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/php\n
  2. Install dependencies 
    composer install\n
  3. Run the application 
    composer start\n

To run this server application, you need .NET installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/dotnet\n
  2. Run the application 
    dotnet run\n

Warning

This .NET server application needs the LIVEKIT_API_SECRET env variable to be at least 32 characters long. Make sure to update it here and in your OpenVidu Server.

"},{"location":"docs/tutorials/application-client/electron/#4-run-the-client-application","title":"4. Run the client application","text":"

To run the client application tutorial, you need Node installed on your development computer.

  1. Navigate into the application client directory:

    cd openvidu-livekit-tutorials/application-client/openvidu-electron\n

  2. Install the required dependencies:

    npm install\n

  3. Run the application:

    npm start\n

The application will seamlessly initiate as a native desktop program, adapting itself to the specific operating system you are using. Once the application is open, you should see a screen like this:

Accessing your application client from other devices in your local network

One advantage of running OpenVidu locally is that you can test your application client with other devices in your local network very easily without worrying about SSL certificates.

Access your application client through https://xxx-yyy-zzz-www.openvidu-local.dev:5443, where xxx-yyy-zzz-www part of the domain is your LAN private IP address with dashes (-) instead of dots (.). For more information, see section Accessing your app from other devices in your network.

"},{"location":"docs/tutorials/application-client/electron/#understanding-the-code","title":"Understanding the code","text":"

This Electron project has been created using electron-forge. As an Electron application, the code is divided into two main parts, the main process and the renderer process. The most important files are located within the src/ directory:

To use the LiveKit JS SDK in an Electron application, you need to install the livekit-client package. This package provides the necessary classes and methods to interact with the LiveKit server. You can install it using the following command:

npm install livekit-client\n

Now let's see the code of the app.js file:

app.js
const { Room, RoomEvent } = require(\"livekit-client\"); // (1)!\n\n// Configure this constants with correct URLs depending on your deployment\nconst APPLICATION_SERVER_URL = \"http://localhost:6080/\"; // (2)!\nconst LIVEKIT_URL = \"ws://localhost:7880/\"; // (3)!\n\nvar room; // (4)!\n
  1. Import the Room and RoomEvent classes from the livekit-client package.
  2. The URL of the application server.
  3. The URL of the LiveKit server.
  4. The room object, which represents the video call room.

The app.js file defines the following variables:

Configure the URLs

You should configure APPLICATION_SERVER_URL and LIVEKIT_URL constants with the correct URLs depending on your deployment.

"},{"location":"docs/tutorials/application-client/electron/#joining-a-room","title":"Joining a Room","text":"

After the user specifies their participant name and the name of the room they want to join, when they click the Join button, the joinRoom() function is called:

app.js
async function joinRoom() {\n    // Disable 'Join' button\n    document.getElementById(\"join-button\").disabled = true;\n    document.getElementById(\"join-button\").innerText = \"Joining...\";\n\n    // Initialize a new Room object\n    room = new Room(); // (1)!\n\n    // Specify the actions when events take place in the room\n    // On every new Track received...\n    room.on(RoomEvent.TrackSubscribed, (track, _publication, participant) => {\n        // (2)!\n        addTrack(track, participant.identity);\n    });\n\n    // On every new Track destroyed...\n    room.on(RoomEvent.TrackUnsubscribed, (track, _publication, participant) => {\n        // (3)!\n        track.detach();\n        document.getElementById(track.sid)?.remove();\n\n        if (track.kind === \"video\") {\n            removeVideoContainer(participant.identity);\n        }\n    });\n\n    try {\n        // Get the room name and participant name from the form\n        const roomName = document.getElementById(\"room-name\").value; // (4)!\n        const userName = document.getElementById(\"participant-name\").value;\n\n        // Get a token from your application server with the room name and participant name\n        const token = await getToken(roomName, userName); // (5)!\n\n        // Connect to the room with the LiveKit URL and the token\n        await room.connect(LIVEKIT_URL, token); // (6)!\n\n        // Hide the 'Join room' page and show the 'Room' page\n        document.getElementById(\"room-title\").innerText = roomName; // (7)!\n        document.getElementById(\"join\").hidden = true;\n        document.getElementById(\"room\").hidden = false;\n\n        // Publish your camera and microphone\n        await room.localParticipant.enableCameraAndMicrophone(); // (8)!\n        const localVideoTrack = this.room.localParticipant.videoTrackPublications.values().next().value.track;\n        addTrack(localVideoTrack, userName, true);\n    } catch (error) {\n        console.log(\"There was an error connecting to the room:\", error.message);\n    }\n}\n
  1. Initialize a new Room object.
  2. Event handling for when a new track is received in the room.
  3. Event handling for when a track is destroyed.
  4. Get the room name and participant name from the form.
  5. Get a token from the application server with the room name and participant name.
  6. Connect to the room with the LiveKit URL and the token.
  7. Hide the \"Join room\" page and show the \"Room\" page.
  8. Publish your camera and microphone.

The joinRoom() function performs the following actions:

  1. It creates a new Room object. This object represents the video call room.

  2. Event handling is configured for different scenarios within the room. These events are fired when new tracks are subscribed to and when existing tracks are unsubscribed.

    app.js
    function addTrack(track, participantIdentity, local = false) {\n    const element = track.attach(); // (1)!\n    element.id = track.sid;\n\n    /* If the track is a video track, we create a container and append the video element to it\n    with the participant's identity */\n    if (track.kind === \"video\") {\n        const videoContainer = createVideoContainer(participantIdentity, local);\n        videoContainer.append(element);\n        appendParticipantData(videoContainer, participantIdentity + (local ? \" (You)\" : \"\"));\n    } else {\n        document.getElementById(\"layout-container\").append(element);\n    }\n}\n
    1. Attach the track to an HTML element.
    app.js
    function createVideoContainer(participantIdentity, local = false) {\n    const videoContainer = document.createElement(\"div\");\n    videoContainer.id = `camera-${participantIdentity}`;\n    videoContainer.className = \"video-container\";\n    const layoutContainer = document.getElementById(\"layout-container\");\n\n    if (local) {\n        layoutContainer.prepend(videoContainer);\n    } else {\n        layoutContainer.append(videoContainer);\n    }\n\n    return videoContainer;\n}\n\nfunction appendParticipantData(videoContainer, participantIdentity) {\n    const dataElement = document.createElement(\"div\");\n    dataElement.className = \"participant-data\";\n    dataElement.innerHTML = `<p>${participantIdentity}</p>`;\n    videoContainer.prepend(dataElement);\n}\n
    app.js
    function removeVideoContainer(participantIdentity) {\n    const videoContainer = document.getElementById(`camera-${participantIdentity}`);\n    videoContainer?.remove();\n}\n

    These event handlers are essential for managing the behavior of tracks within the video call.

    Take a look at all events

    You can take a look at all the events in the Livekit Documentation

  3. It retrieves the room name and participant name from the form.

  4. It requests a token from the application server using the room name and participant name. This is done by calling the getToken() function:

    app.js
    /**\n * --------------------------------------------\n * GETTING A TOKEN FROM YOUR APPLICATION SERVER\n * --------------------------------------------\n * The method below request the creation of a token to\n * your application server. This prevents the need to expose\n * your LiveKit API key and secret to the client side.\n *\n * In this sample code, there is no user control at all. Anybody could\n * access your application server endpoints. In a real production\n * environment, your application server must identify the user to allow\n * access to the endpoints.\n */\nasync function getToken(roomName, participantName) {\n    const response = await fetch(APPLICATION_SERVER_URL + \"token\", {\n        method: \"POST\",\n        headers: {\n            \"Content-Type\": \"application/json\"\n        },\n        body: JSON.stringify({\n            roomName,\n            participantName\n        })\n    });\n\n    if (!response.ok) {\n        const error = await response.json();\n        throw new Error(`Failed to get token: ${error.errorMessage}`);\n    }\n\n    const token = await response.json();\n    return token.token;\n}\n

    This function sends a POST request using fetch() to the application server's /token endpoint. The request body contains the room name and participant name. The server responds with a token that is used to connect to the room.

  5. It connects to the room using the LiveKit URL and the token.

  6. It updates the UI to hide the \"Join room\" page and show the \"Room\" layout.
  7. It publishes the camera and microphone tracks to the room using room.localParticipant.enableCameraAndMicrophone(), which asks the user for permission to access their camera and microphone at the same time. The local video track is then added to the layout.
"},{"location":"docs/tutorials/application-client/electron/#leaving-the-room","title":"Leaving the Room","text":"

When the user wants to leave the room, they can click the Leave Room button. This action calls the leaveRoom() function:

app.js
async function leaveRoom() {\n    // Leave the room by calling 'disconnect' method over the Room object\n    await room.disconnect(); // (1)!\n\n    // Remove all HTML elements inside the layout container\n    removeAllLayoutElements(); // (2)!\n\n    // Back to 'Join room' page\n    document.getElementById(\"join\").hidden = false; // (3)!\n    document.getElementById(\"room\").hidden = true;\n\n    // Enable 'Join' button\n    document.getElementById(\"join-button\").disabled = false;\n    document.getElementById(\"join-button\").innerText = \"Join!\";\n}\n\n// (4)!\nwindow.onbeforeunload = () => {\n    room?.disconnect();\n};\n
  1. Disconnect the user from the room.
  2. Remove all HTML elements inside the layout container.
  3. Show the \"Join room\" page and hide the \"Room\" layout.
  4. Call the disconnect() method on the room object when the user closes the tab or navigates to another page.

The leaveRoom() function performs the following actions:

The window.onbeforeunload event is used to ensure that the user is disconnected from the room before the page is unloaded. This event is triggered when the user closes the tab or navigates to another page.

"},{"location":"docs/tutorials/application-client/ionic/","title":"openvidu-ionic","text":"

Source code

This tutorial is a simple video-call application built with Ionic, using Angular and Capacitor, that allows:

It uses the LiveKit JS SDK to connect to the LiveKit server and interact with the video call room.

"},{"location":"docs/tutorials/application-client/ionic/#running-this-tutorial","title":"Running this tutorial","text":""},{"location":"docs/tutorials/application-client/ionic/#1-run-openvidu-server","title":"1. Run OpenVidu Server","text":"Run OpenVidu locallyDeploy OpenVidu

  1. Download OpenVidu

    git clone https://github.com/OpenVidu/openvidu-local-deployment\n

  2. Configure the local deployment

    Windows macOS Linux 
    cd openvidu-local-deployment/community\n.\\configure_lan_private_ip_windows.bat\n
    cd openvidu-local-deployment/community\n./configure_lan_private_ip_macos.sh\n
    cd openvidu-local-deployment/community\n./configure_lan_private_ip_linux.sh\n

  3. Run OpenVidu

    docker compose up\n

To use a production-ready OpenVidu deployment, visit the official deployment guide.

"},{"location":"docs/tutorials/application-client/ionic/#2-download-the-tutorial-code","title":"2. Download the tutorial code","text":"
git clone https://github.com/OpenVidu/openvidu-livekit-tutorials.git\n
"},{"location":"docs/tutorials/application-client/ionic/#3-run-a-server-application","title":"3. Run a server application","text":"Node Go Ruby Java Python Rust PHP .NET

To run this server application, you need Node installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/node\n
  2. Install dependencies 
    npm install\n
  3. Run the application 
    npm start\n

To run this server application, you need Go installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/go\n
  2. Run the application 
    go run main.go\n

To run this server application, you need Ruby installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/ruby\n
  2. Install dependencies 
    bundle install\n
  3. Run the application 
    ruby app.rb\n

To run this server application, you need Java and Maven installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/java\n
  2. Run the application 
    mvn spring-boot:run\n

To run this server application, you need Python 3 installed on your device.

  1. Navigate into the server directory

    cd openvidu-livekit-tutorials/application-server/python\n

  2. Create a python virtual environment

    python -m venv venv\n

  3. Activate the virtual environment

    Windows macOS Linux 
    .\\venv\\Scripts\\activate\n
    . ./venv/bin/activate\n
    . ./venv/bin/activate\n

  4. Install dependencies

    pip install -r requirements.txt\n

  5. Run the application

    python app.py\n

To run this server application, you need Rust installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/rust\n
  2. Run the application 
    cargo run\n

To run this server application, you need PHP and Composer installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/php\n
  2. Install dependencies 
    composer install\n
  3. Run the application 
    composer start\n

To run this server application, you need .NET installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/dotnet\n
  2. Run the application 
    dotnet run\n

Warning

This .NET server application needs the LIVEKIT_API_SECRET env variable to be at least 32 characters long. Make sure to update it here and in your OpenVidu Server.

"},{"location":"docs/tutorials/application-client/ionic/#4-run-the-client-application","title":"4. Run the client application","text":"

To run the client application tutorial, you need Node installed on your development computer.

  1. Navigate into the application client directory:

    cd openvidu-livekit-tutorials/application-client/openvidu-angular\n

  2. Install the required dependencies:

    npm install\n

  3. Serve the application:

    You have two options for running the client application: browser-based or mobile device-based:

    Browser Mobile

    To run the application in a browser, you will need to start the Ionic server. To do so, run the following command:

    npm start\n

    Once the server is up and running, you can test the application by visiting http://localhost:5080. You should see a screen like this:

    Mobile appearance

    To show the app with a mobile device appearance, open the dev tools in your browser and find the button to adapt the viewport to a mobile device aspect ratio. You may also choose predefined types of devices to see the behavior of your app in different resolutions.

    Accessing your application client from other devices in your local network

    One advantage of running OpenVidu locally is that you can test your application client with other devices in your local network very easily without worrying about SSL certificates.

    Access your application client through https://xxx-yyy-zzz-www.openvidu-local.dev:5443, where xxx-yyy-zzz-www part of the domain is your LAN private IP address with dashes (-) instead of dots (.). For more information, see section Accessing your app from other devices in your network.

    Running the tutorial on a mobile device presents additional challenges compared to running it in a browser, mainly due to the application being launched on a different device, such as an Android smartphone or iPhone, rather than our computer. To overcome these challenges, the following steps need to be taken:

    1. Localhost limitations:

      The usage of localhost in our Ionic app is restricted, preventing seamless communication between the application client and the server.

    2. Serve over local network:

      The application must be served over our local network to enable communication between the device and the server.

    3. Secure connection requirement for WebRTC API:

      The WebRTC API demands a secure connection for functionality outside of localhost, necessitating the serving of the application over HTTPS.

    If you run OpenVidu locally you don't need to worry about this. OpenVidu will handle all of the above requirements for you. For more information, see section Accessing your app from other devices in your network.

    Now, let's explore how to run the application on a mobile device:

    Requirements

    Before running the application on a mobile device, make sure that the device is connected to the same network as your PC and the mobile is connected to the PC via USB.

    Android iOS 
    npm run android\n

    You will need Ruby and Cocoapods installed in your computer.

    The app must be signed with a development team. To do so, open the project in Xcode and select a development team in the Signing & Capabilities editor.

    npm run ios\n

    The script will ask you for the device you want to run the application on. You should select the real device you have connected to your computer.

    Once the mobile device has been selected, the script will launch the application on the device and you will see a screen like this:

"},{"location":"docs/tutorials/application-client/ionic/#understanding-the-code","title":"Understanding the code","text":"

This Ionic project has been created using the Ionic CLI tool. You may come across various configuration files and other items that are not essential for this tutorial. Our focus will be on the key files located within the src/app/ directory:

To use the LiveKit JS SDK in an Ionic application, you need to install the livekit-client package. This package provides the necessary classes and methods to interact with the LiveKit server. You can install it using the following command:

npm install livekit-client\n

Now let's see the code of the app.component.ts file:

app.component.ts
type TrackInfo = { // (1)!\n    trackPublication: RemoteTrackPublication;\n    participantIdentity: string;\n};\n\n// For local development launching app in web browser, leave these variables empty\n// For production or when launching app in device, configure them with correct URLs\nvar APPLICATION_SERVER_URL = ''; // (2)!\nvar LIVEKIT_URL = ''; // (3)!\n\n@Component({ // (4)!\n    selector: 'app-root',\n    templateUrl: 'app.component.html',\n    styleUrl: 'app.component.scss',\n    standalone: true,\n    imports: [\n        IonApp,\n        VideoComponent,\n        AudioComponent,\n        ReactiveFormsModule,\n        IonHeader,\n        IonToolbar,\n        IonTitle,\n        IonButtons,\n        IonButton,\n        IonFab,\n        IonFabButton,\n        IonIcon,\n        IonContent,\n        IonList,\n        IonItem,\n        IonInput,\n        IonFooter,\n    ],\n})\nexport class AppComponent implements OnDestroy {\n    roomForm = new FormGroup({ // (5)!\n        roomName: new FormControl('Test Room', Validators.required),\n        participantName: new FormControl('Participant' + Math.floor(Math.random() * 100), Validators.required),\n    });\n\n    room = signal<Room | undefined>(undefined); // (6)!\n    localTrack = signal<LocalVideoTrack | undefined>(undefined); // (7)!\n    remoteTracksMap = signal<Map<string, TrackInfo>>(new Map()); // (8)!\n\n    constructor(private httpClient: HttpClient) {\n        this.configureUrls();\n        addIcons({\n            logoGithub,\n            book,\n            settings,\n        });\n    }\n\n    configureUrls() {\n        const deviceMode = this.platform.is('hybrid');\n\n        // If APPLICATION_SERVER_URL is not configured and app is not launched in device mode,\n        // use default value from local development\n        if (!APPLICATION_SERVER_URL) {\n            if (deviceMode) {\n                APPLICATION_SERVER_URL = 'https://{YOUR-LAN-IP}.openvidu-local.dev:6443/';\n            } else {\n                if (window.location.hostname === 'localhost') {\n                    APPLICATION_SERVER_URL = 'http://localhost:6080/';\n                } else {\n                    APPLICATION_SERVER_URL = 'https://' + window.location.hostname + ':6443/';\n                }\n            }\n        }\n\n        // If LIVEKIT_URL is not configured and app is not launched in device mode,\n        // use default value from local development\n        if (!LIVEKIT_URL) {\n            if (deviceMode) {\n                LIVEKIT_URL = 'wss://{YOUR-LAN-IP}.openvidu-local.dev:7443/';\n            } else {\n                if (window.location.hostname === 'localhost') {\n                    LIVEKIT_URL = 'ws://localhost:7880/';\n                } else {\n                    LIVEKIT_URL = 'wss://' + window.location.hostname + ':7443/';\n                }\n            }\n        }\n    }\n
  1. TrackInfo type, which groups a track publication with the participant's identity.
  2. The URL of the application server.
  3. The URL of the LiveKit server.
  4. Angular component decorator that defines the AppComponent class and associates the HTML and CSS files with it.
  5. The roomForm object, which is a form group that contains the roomName and participantName fields. These fields are used to join a video call room.
  6. The room object, which represents the video call room.
  7. The local video track, which represents the user's camera.
  8. Map that links track SIDs with TrackInfo objects. This map is used to store remote tracks and their associated participant identities.

The app.component.ts file defines the following variables:

Configure the URLs

For local development launching the app in a web browser, leave APPLICATION_SERVER_URL and LIVEKIT_URL variables empty. The function configureUrls() will automatically configure them with default values. However, for production or when launching the app in a mobile device, you should configure these variables with the correct URLs depending on your deployment.

You can also configure these variables once the application has been launched by clicking on the settings button in the bottom right corner of the screen.

"},{"location":"docs/tutorials/application-client/ionic/#joining-a-room","title":"Joining a Room","text":"

After the user specifies their participant name and the name of the room they want to join, when they click the Join button, the joinRoom() method is called:

app.component.ts
async joinRoom() {\n    // Initialize a new Room object\n    const room = new Room();\n    this.room.set(room); // (1)!\n\n    // Specify the actions when events take place in the room\n    // On every new Track received...\n    this.room.on(\n        RoomEvent.TrackSubscribed,\n        (_track: RemoteTrack, publication: RemoteTrackPublication, participant: RemoteParticipant) => { // (2)!\n            this.remoteTracksMap.update((map) => {\n                map.set(publication.trackSid, {\n                    trackPublication: publication,\n                    participantIdentity: participant.identity,\n                });\n                return map;\n            });\n        }\n    );\n\n    // On every new Track destroyed...\n    room.on(RoomEvent.TrackUnsubscribed, (_track: RemoteTrack, publication: RemoteTrackPublication) => { // (3)!\n        this.remoteTracksMap.update((map) => {\n            map.delete(publication.trackSid);\n            return map;\n        });\n    });\n\n    try {\n        // Get the room name and participant name from the form\n        const roomName = this.roomForm.value.roomName!; // (4)!\n        const participantName = this.roomForm.value.participantName!;\n\n        // Get a token from your application server with the room name and participant name\n        const token = await this.getToken(roomName, participantName); // (5)!\n\n        // Connect to the room with the LiveKit URL and the token\n        await room.connect(LIVEKIT_URL, token); // (6)!\n\n        // Publish your camera and microphone\n        await room.localParticipant.enableCameraAndMicrophone(); // (7)!\n        this.localTrack.set(room.localParticipant.videoTrackPublications.values().next().value.videoTrack);\n    } catch (error: any) {\n        console.log(\n            'There was an error connecting to the room:',\n            error?.error?.errorMessage || error?.message || error\n        );\n        await this.leaveRoom();\n    }\n}\n
  1. Initialize a new Room object.
  2. Event handling for when a new track is received in the room.
  3. Event handling for when a track is destroyed.
  4. Get the room name and participant name from the form.
  5. Get a token from the application server with the room name and participant name.
  6. Connect to the room with the LiveKit URL and the token.
  7. Publish your camera and microphone.

The joinRoom() method performs the following actions:

  1. It creates a new Room object. This object represents the video call room.

    Info

    When the room object is defined, the HTML template is automatically updated hiding the \"Join room\" page and showing the \"Room\" layout.

  2. Event handling is configured for different scenarios within the room. These events are fired when new tracks are subscribed to and when existing tracks are unsubscribed.

    These event handlers are essential for managing the behavior of tracks within the video call. You can further extend the event handling as needed for your application.

    Take a look at all events

    You can take a look at all the events in the Livekit Documentation

  3. It retrieves the room name and participant name from the form.

  4. It requests a token from the application server using the room name and participant name. This is done by calling the getToken() method:

    app.component.ts
    /**\n * --------------------------------------------\n * GETTING A TOKEN FROM YOUR APPLICATION SERVER\n * --------------------------------------------\n * The method below request the creation of a token to\n * your application server. This prevents the need to expose\n * your LiveKit API key and secret to the client side.\n *\n * In this sample code, there is no user control at all. Anybody could\n * access your application server endpoints. In a real production\n * environment, your application server must identify the user to allow\n * access to the endpoints.\n */\nasync getToken(roomName: string, participantName: string): Promise<string> {\n    const response = await lastValueFrom(\n        this.httpClient.post<{ token: string }>(APPLICATION_SERVER_URL + 'token', { roomName, participantName })\n    );\n    return response.token;\n}\n

    This function sends a POST request using HttpClient to the application server's /token endpoint. The request body contains the room name and participant name. The server responds with a token that is used to connect to the room.

  5. It connects to the room using the LiveKit URL and the token.

  6. It publishes the camera and microphone tracks to the room using room.localParticipant.enableCameraAndMicrophone(), which asks the user for permission to access their camera and microphone at the same time. The local video track is then stored in the localTrack variable.
"},{"location":"docs/tutorials/application-client/ionic/#displaying-video-and-audio-tracks","title":"Displaying Video and Audio Tracks","text":"

In order to display participants' video and audio tracks, the app.component.html file integrates the VideoComponent and AudioComponent.

app.component.html
<div id=\"layout-container\">\n    @if (localTrack()) {\n    <video-component\n        [track]=\"localTrack()!\"\n        [participantIdentity]=\"roomForm.value.participantName!\"\n        [local]=\"true\"\n    ></video-component>\n    }\n    @for (remoteTrack of remoteTracksMap().values(); track remoteTrack.trackPublication.trackSid) {\n        @if (remoteTrack.trackPublication.kind === 'video') {\n        <video-component\n            [track]=\"remoteTrack.trackPublication.videoTrack!\"\n            [participantIdentity]=\"remoteTrack.participantIdentity\"\n        ></video-component>\n        } @else {\n        <audio-component [track]=\"remoteTrack.trackPublication.audioTrack!\" hidden></audio-component>\n        }\n    }\n</div>\n

This code snippet does the following:

Let's see now the code of the video.component.ts file:

video.component.ts
// (1)!\n@Component({\n    selector: \"video-component\",\n    standalone: true,\n    imports: [],\n    templateUrl: \"./video.component.html\",\n    styleUrl: \"./video.component.css\"\n})\nexport class VideoComponent implements AfterViewInit, OnDestroy {\n    videoElement = viewChild<ElementRef<HTMLVideoElement>>(\"videoElement\"); // (2)!\n\n    track = input.required<LocalVideoTrack | RemoteVideoTrack>(); // (3)!\n    participantIdentity = input.required<string>(); // (4)!\n    local = input(false); // (5)!\n\n    ngAfterViewInit() {\n        if (this.videoElement()) {\n            this.track().attach(this.videoElement()!.nativeElement); // (6)!\n        }\n    }\n\n    ngOnDestroy() {\n        this.track().detach(); // (7)!\n    }\n}\n
  1. Angular component decorator that defines the VideoComponent class and associates the HTML and CSS files with it.
  2. The reference to the video element in the HTML template.
  3. The video track object, which can be a LocalVideoTrack or a RemoteVideoTrack.
  4. The participant identity associated with the video track.
  5. A boolean flag that indicates whether the video track belongs to the local participant.
  6. Attach the video track to the video element when the track is set.
  7. Detach the video track when the component is destroyed.

The VideoComponent does the following:

Finally, let's see the code of the audio.component.ts file:

audio.component.ts
// (1)!\n@Component({\n    selector: \"audio-component\",\n    standalone: true,\n    imports: [],\n    templateUrl: \"./audio.component.html\",\n    styleUrl: \"./audio.component.css\"\n})\nexport class AudioComponent implements AfterViewInit, OnDestroy {\n    audioElement = viewChild<ElementRef<HTMLAudioElement>>(\"audioElement\"); // (2)!\n\n    track = input.required<LocalAudioTrack | RemoteAudioTrack>(); // (3)!\n\n    ngAfterViewInit() {\n        if (this.audioElement()) {\n            this.track().attach(this.audioElement()!.nativeElement); // (4)!\n        }\n    }\n\n    ngOnDestroy() {\n        this.track().detach(); // (5)!\n    }\n}\n
  1. Angular component decorator that defines the AudioComponent class and associates the HTML and CSS files with it.
  2. The reference to the audio element in the HTML template.
  3. The audio track object, which can be a RemoteAudioTrack or a LocalAudioTrack, although in this case, it will always be a RemoteAudioTrack.
  4. Attach the audio track to the audio element when view is initialized.
  5. Detach the audio track when the component is destroyed.

The AudioComponent class is similar to the VideoComponent class, but it is used to display audio tracks. It attaches the audio track to the audio element when view is initialized and detaches the audio track when the component is destroyed.

"},{"location":"docs/tutorials/application-client/ionic/#leaving-the-room","title":"Leaving the room","text":"

When the user wants to leave the room, they can click the Leave Room button. This action calls the leaveRoom() method:

app.component.ts
async leaveRoom() {\n    // Leave the room by calling 'disconnect' method over the Room object\n    await this.room()?.disconnect(); // (1)!\n\n    // Reset all variables\n    this.room.set(undefined); // (2)!\n    this.localTrack.set(undefined);\n    this.remoteTracksMap.set(new Map());\n}\n\nasync ngOnDestroy() { // (3)!\n    // On window closed or component destroyed, leave the room\n    await this.leaveRoom();\n}\n
  1. Disconnect the user from the room.
  2. Reset all variables.
  3. Call the leaveRoom() method when the component is destroyed.

The leaveRoom() method performs the following actions:

The ngOnDestroy() lifecycle hook is used to ensure that the user leaves the room when the component is destroyed.

"},{"location":"docs/tutorials/application-client/ionic/#specific-mobile-requirements","title":"Specific mobile requirements","text":"

In order to be able to test the application on an Android or iOS device, the application must ask for the necessary permissions to access the device's camera and microphone. These permissions are requested when the user joins the video call room.

Android iOS

The application must include the following permissions in the AndroidManifest.xml file located in the android/app/src/main/AndroidManifest.xml directory:

AndroidManifest.xml
<uses-permission android:name=\"android.permission.CAMERA\" />\n<uses-permission android:name=\"android.permission.RECORD_AUDIO\" />\n<uses-permission android:name=\"android.permission.MODIFY_AUDIO_SETTINGS\" />\n

The application must include the following permissions in the Info.plist file located in the ios/App/App/Info.plist directory:

Info.plist
<key>NSCameraUsageDescription</key>\n<string>This Application uses your camera to make video calls.</string>\n<key>NSMicrophoneUsageDescription</key>\n<string>This Application uses your microphone to make calls.</string>\n
"},{"location":"docs/tutorials/application-client/javascript/","title":"openvidu-js","text":"

Source code

This tutorial is a simple video-call application built with plain JavaScript, HTML and CSS that allows:

It uses the LiveKit JS SDK to connect to the LiveKit server and interact with the video call room.

"},{"location":"docs/tutorials/application-client/javascript/#running-this-tutorial","title":"Running this tutorial","text":""},{"location":"docs/tutorials/application-client/javascript/#1-run-openvidu-server","title":"1. Run OpenVidu Server","text":"Run OpenVidu locallyDeploy OpenVidu

  1. Download OpenVidu

    git clone https://github.com/OpenVidu/openvidu-local-deployment\n

  2. Configure the local deployment

    Windows macOS Linux 
    cd openvidu-local-deployment/community\n.\\configure_lan_private_ip_windows.bat\n
    cd openvidu-local-deployment/community\n./configure_lan_private_ip_macos.sh\n
    cd openvidu-local-deployment/community\n./configure_lan_private_ip_linux.sh\n

  3. Run OpenVidu

    docker compose up\n

To use a production-ready OpenVidu deployment, visit the official deployment guide.

"},{"location":"docs/tutorials/application-client/javascript/#2-download-the-tutorial-code","title":"2. Download the tutorial code","text":"
git clone https://github.com/OpenVidu/openvidu-livekit-tutorials.git\n
"},{"location":"docs/tutorials/application-client/javascript/#3-run-a-server-application","title":"3. Run a server application","text":"Node Go Ruby Java Python Rust PHP .NET

To run this server application, you need Node installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/node\n
  2. Install dependencies 
    npm install\n
  3. Run the application 
    npm start\n

To run this server application, you need Go installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/go\n
  2. Run the application 
    go run main.go\n

To run this server application, you need Ruby installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/ruby\n
  2. Install dependencies 
    bundle install\n
  3. Run the application 
    ruby app.rb\n

To run this server application, you need Java and Maven installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/java\n
  2. Run the application 
    mvn spring-boot:run\n

To run this server application, you need Python 3 installed on your device.

  1. Navigate into the server directory

    cd openvidu-livekit-tutorials/application-server/python\n

  2. Create a python virtual environment

    python -m venv venv\n

  3. Activate the virtual environment

    Windows macOS Linux 
    .\\venv\\Scripts\\activate\n
    . ./venv/bin/activate\n
    . ./venv/bin/activate\n

  4. Install dependencies

    pip install -r requirements.txt\n

  5. Run the application

    python app.py\n

To run this server application, you need Rust installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/rust\n
  2. Run the application 
    cargo run\n

To run this server application, you need PHP and Composer installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/php\n
  2. Install dependencies 
    composer install\n
  3. Run the application 
    composer start\n

To run this server application, you need .NET installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/dotnet\n
  2. Run the application 
    dotnet run\n

Warning

This .NET server application needs the LIVEKIT_API_SECRET env variable to be at least 32 characters long. Make sure to update it here and in your OpenVidu Server.

"},{"location":"docs/tutorials/application-client/javascript/#4-run-the-client-application","title":"4. Run the client application","text":"

To run the client application tutorial, you need an HTTP web server installed on your development computer. A great option is http-server. You can install it via NPM:

npm install -g http-server\n

  1. Navigate into the application client directory:

    cd openvidu-livekit-tutorials/application-client/openvidu-js\n

  2. Serve the application:

    http-server -p 5080 ./src\n

Once the server is up and running, you can test the application by visiting http://localhost:5080. You should see a screen like this:

Accessing your application client from other devices in your local network

One advantage of running OpenVidu locally is that you can test your application client with other devices in your local network very easily without worrying about SSL certificates.

Access your application client through https://xxx-yyy-zzz-www.openvidu-local.dev:5443, where xxx-yyy-zzz-www part of the domain is your LAN private IP address with dashes (-) instead of dots (.). For more information, see section Accessing your app from other devices in your network.

"},{"location":"docs/tutorials/application-client/javascript/#understanding-the-code","title":"Understanding the code","text":"

This application is designed to be beginner-friendly and consists of only three essential files that are located in the src directory:

To use the LiveKit JS SDK in your application, you need to include the library in your HTML file. You can do this by adding the following script tag to the <head> section of your HTML file:

index.html
<script src=\"https://cdn.jsdelivr.net/npm/livekit-client@2.1.5/dist/livekit-client.umd.js\"></script>\n

Then, you can use the LivekitClient object in your JavaScript code by referencing it from the window object under LivekitClient. When accessing symbols from the class, you will need to prefix them with LivekitClient.. For example, Room becomes LivekitClient.Room.

Now let's see the code of the app.js file:

app.js
// For local development, leave these variables empty\n// For production, configure them with correct URLs depending on your deployment\nvar APPLICATION_SERVER_URL = \"\"; // (1)!\nvar LIVEKIT_URL = \"\"; // (2)!\nconfigureUrls();\n\nconst LivekitClient = window.LivekitClient; // (3)!\nvar room; // (4)!\n\nfunction configureUrls() {\n    // If APPLICATION_SERVER_URL is not configured, use default value from local development\n    if (!APPLICATION_SERVER_URL) {\n        if (window.location.hostname === \"localhost\") {\n            APPLICATION_SERVER_URL = \"http://localhost:6080/\";\n        } else {\n            APPLICATION_SERVER_URL = \"https://\" + window.location.hostname + \":6443/\";\n        }\n    }\n\n    // If LIVEKIT_URL is not configured, use default value from local development\n    if (!LIVEKIT_URL) {\n        if (window.location.hostname === \"localhost\") {\n            LIVEKIT_URL = \"ws://localhost:7880/\";\n        } else {\n            LIVEKIT_URL = \"wss://\" + window.location.hostname + \":7443/\";\n        }\n    }\n}\n
  1. The URL of the application server.
  2. The URL of the LiveKit server.
  3. The LivekitClient object, which is the entry point to the LiveKit JS SDK.
  4. The room object, which represents the video call room.

The app.js file defines the following variables:

Configure the URLs

For local development, leave APPLICATION_SERVER_URL and LIVEKIT_URL variables empty. The function configureUrls() will automatically configure them with default values. However, for production, you should configure these variables with the correct URLs depending on your deployment.

"},{"location":"docs/tutorials/application-client/javascript/#joining-a-room","title":"Joining a Room","text":"

After the user specifies their participant name and the name of the room they want to join, when they click the Join button, the joinRoom() function is called:

app.js
async function joinRoom() {\n    // Disable 'Join' button\n    document.getElementById(\"join-button\").disabled = true;\n    document.getElementById(\"join-button\").innerText = \"Joining...\";\n\n    // Initialize a new Room object\n    room = new LivekitClient.Room(); // (1)!\n\n    // Specify the actions when events take place in the room\n    // On every new Track received...\n    room.on(LivekitClient.RoomEvent.TrackSubscribed, (track, _publication, participant) => {\n        // (2)!\n        addTrack(track, participant.identity);\n    });\n\n    // On every new Track destroyed...\n    room.on(LivekitClient.RoomEvent.TrackUnsubscribed, (track, _publication, participant) => {\n        // (3)!\n        track.detach();\n        document.getElementById(track.sid)?.remove();\n\n        if (track.kind === \"video\") {\n            removeVideoContainer(participant.identity);\n        }\n    });\n\n    try {\n        // Get the room name and participant name from the form\n        const roomName = document.getElementById(\"room-name\").value; // (4)!\n        const userName = document.getElementById(\"participant-name\").value;\n\n        // Get a token from your application server with the room name and participant name\n        const token = await getToken(roomName, userName); // (5)!\n\n        // Connect to the room with the LiveKit URL and the token\n        await room.connect(LIVEKIT_URL, token); // (6)!\n\n        // Hide the 'Join room' page and show the 'Room' page\n        document.getElementById(\"room-title\").innerText = roomName; // (7)!\n        document.getElementById(\"join\").hidden = true;\n        document.getElementById(\"room\").hidden = false;\n\n        // Publish your camera and microphone\n        await room.localParticipant.enableCameraAndMicrophone(); // (8)!\n        const localVideoTrack = this.room.localParticipant.videoTrackPublications.values().next().value.track;\n        addTrack(localVideoTrack, userName, true);\n    } catch (error) {\n        console.log(\"There was an error connecting to the room:\", error.message);\n    }\n}\n
  1. Initialize a new Room object.
  2. Event handling for when a new track is received in the room.
  3. Event handling for when a track is destroyed.
  4. Get the room name and participant name from the form.
  5. Get a token from the application server with the room name and participant name.
  6. Connect to the room with the LiveKit URL and the token.
  7. Hide the \"Join room\" page and show the \"Room\" page.
  8. Publish your camera and microphone.

The joinRoom() function performs the following actions:

  1. It creates a new Room object using LivekitClient.Room(). This object represents the video call room.

  2. Event handling is configured for different scenarios within the room. These events are fired when new tracks are subscribed to and when existing tracks are unsubscribed.

    app.js
    function addTrack(track, participantIdentity, local = false) {\n    const element = track.attach(); // (1)!\n    element.id = track.sid;\n\n    /* If the track is a video track, we create a container and append the video element to it\n    with the participant's identity */\n    if (track.kind === \"video\") {\n        const videoContainer = createVideoContainer(participantIdentity, local);\n        videoContainer.append(element);\n        appendParticipantData(videoContainer, participantIdentity + (local ? \" (You)\" : \"\"));\n    } else {\n        document.getElementById(\"layout-container\").append(element);\n    }\n}\n
    1. Attach the track to an HTML element.
    app.js
    function createVideoContainer(participantIdentity, local = false) {\n    const videoContainer = document.createElement(\"div\");\n    videoContainer.id = `camera-${participantIdentity}`;\n    videoContainer.className = \"video-container\";\n    const layoutContainer = document.getElementById(\"layout-container\");\n\n    if (local) {\n        layoutContainer.prepend(videoContainer);\n    } else {\n        layoutContainer.append(videoContainer);\n    }\n\n    return videoContainer;\n}\n\nfunction appendParticipantData(videoContainer, participantIdentity) {\n    const dataElement = document.createElement(\"div\");\n    dataElement.className = \"participant-data\";\n    dataElement.innerHTML = `<p>${participantIdentity}</p>`;\n    videoContainer.prepend(dataElement);\n}\n
    app.js
    function removeVideoContainer(participantIdentity) {\n    const videoContainer = document.getElementById(`camera-${participantIdentity}`);\n    videoContainer?.remove();\n}\n

    These event handlers are essential for managing the behavior of tracks within the video call.

    Take a look at all events

    You can take a look at all the events in the Livekit Documentation

  3. It retrieves the room name and participant name from the form.

  4. It requests a token from the application server using the room name and participant name. This is done by calling the getToken() function:

    app.js
    /**\n * --------------------------------------------\n * GETTING A TOKEN FROM YOUR APPLICATION SERVER\n * --------------------------------------------\n * The method below request the creation of a token to\n * your application server. This prevents the need to expose\n * your LiveKit API key and secret to the client side.\n *\n * In this sample code, there is no user control at all. Anybody could\n * access your application server endpoints. In a real production\n * environment, your application server must identify the user to allow\n * access to the endpoints.\n */\nasync function getToken(roomName, participantName) {\n    const response = await fetch(APPLICATION_SERVER_URL + \"token\", {\n        method: \"POST\",\n        headers: {\n            \"Content-Type\": \"application/json\"\n        },\n        body: JSON.stringify({\n            roomName,\n            participantName\n        })\n    });\n\n    if (!response.ok) {\n        const error = await response.json();\n        throw new Error(`Failed to get token: ${error.errorMessage}`);\n    }\n\n    const token = await response.json();\n    return token.token;\n}\n

    This function sends a POST request using fetch() to the application server's /token endpoint. The request body contains the room name and participant name. The server responds with a token that is used to connect to the room.

  5. It connects to the room using the LiveKit URL and the token.

  6. It updates the UI to hide the \"Join room\" page and show the \"Room\" layout.
  7. It publishes the camera and microphone tracks to the room using room.localParticipant.enableCameraAndMicrophone(), which asks the user for permission to access their camera and microphone at the same time. The local video track is then added to the layout.
"},{"location":"docs/tutorials/application-client/javascript/#leaving-the-room","title":"Leaving the Room","text":"

When the user wants to leave the room, they can click the Leave Room button. This action calls the leaveRoom() function:

app.js
async function leaveRoom() {\n    // Leave the room by calling 'disconnect' method over the Room object\n    await room.disconnect(); // (1)!\n\n    // Remove all HTML elements inside the layout container\n    removeAllLayoutElements(); // (2)!\n\n    // Back to 'Join room' page\n    document.getElementById(\"join\").hidden = false; // (3)!\n    document.getElementById(\"room\").hidden = true;\n\n    // Enable 'Join' button\n    document.getElementById(\"join-button\").disabled = false;\n    document.getElementById(\"join-button\").innerText = \"Join!\";\n}\n\n// (4)!\nwindow.onbeforeunload = () => {\n    room?.disconnect();\n};\n
  1. Disconnect the user from the room.
  2. Remove all HTML elements inside the layout container.
  3. Show the \"Join room\" page and hide the \"Room\" layout.
  4. Call the disconnect() method on the room object when the user closes the tab or navigates to another page.

The leaveRoom() function performs the following actions:

The window.onbeforeunload event is used to ensure that the user is disconnected from the room before the page is unloaded. This event is triggered when the user closes the tab or navigates to another page.

"},{"location":"docs/tutorials/application-client/react/","title":"openvidu-react","text":"

Source code

This tutorial is a simple video-call application built with React that allows:

It uses the LiveKit JS SDK to connect to the LiveKit server and interact with the video call room.

"},{"location":"docs/tutorials/application-client/react/#running-this-tutorial","title":"Running this tutorial","text":""},{"location":"docs/tutorials/application-client/react/#1-run-openvidu-server","title":"1. Run OpenVidu Server","text":"Run OpenVidu locallyDeploy OpenVidu

  1. Download OpenVidu

    git clone https://github.com/OpenVidu/openvidu-local-deployment\n

  2. Configure the local deployment

    Windows macOS Linux 
    cd openvidu-local-deployment/community\n.\\configure_lan_private_ip_windows.bat\n
    cd openvidu-local-deployment/community\n./configure_lan_private_ip_macos.sh\n
    cd openvidu-local-deployment/community\n./configure_lan_private_ip_linux.sh\n

  3. Run OpenVidu

    docker compose up\n

To use a production-ready OpenVidu deployment, visit the official deployment guide.

"},{"location":"docs/tutorials/application-client/react/#2-download-the-tutorial-code","title":"2. Download the tutorial code","text":"
git clone https://github.com/OpenVidu/openvidu-livekit-tutorials.git\n
"},{"location":"docs/tutorials/application-client/react/#3-run-a-server-application","title":"3. Run a server application","text":"Node Go Ruby Java Python Rust PHP .NET

To run this server application, you need Node installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/node\n
  2. Install dependencies 
    npm install\n
  3. Run the application 
    npm start\n

To run this server application, you need Go installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/go\n
  2. Run the application 
    go run main.go\n

To run this server application, you need Ruby installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/ruby\n
  2. Install dependencies 
    bundle install\n
  3. Run the application 
    ruby app.rb\n

To run this server application, you need Java and Maven installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/java\n
  2. Run the application 
    mvn spring-boot:run\n

To run this server application, you need Python 3 installed on your device.

  1. Navigate into the server directory

    cd openvidu-livekit-tutorials/application-server/python\n

  2. Create a python virtual environment

    python -m venv venv\n

  3. Activate the virtual environment

    Windows macOS Linux 
    .\\venv\\Scripts\\activate\n
    . ./venv/bin/activate\n
    . ./venv/bin/activate\n

  4. Install dependencies

    pip install -r requirements.txt\n

  5. Run the application

    python app.py\n

To run this server application, you need Rust installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/rust\n
  2. Run the application 
    cargo run\n

To run this server application, you need PHP and Composer installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/php\n
  2. Install dependencies 
    composer install\n
  3. Run the application 
    composer start\n

To run this server application, you need .NET installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/dotnet\n
  2. Run the application 
    dotnet run\n

Warning

This .NET server application needs the LIVEKIT_API_SECRET env variable to be at least 32 characters long. Make sure to update it here and in your OpenVidu Server.

"},{"location":"docs/tutorials/application-client/react/#4-run-the-client-application","title":"4. Run the client application","text":"

To run the client application tutorial, you need Node installed on your development computer.

  1. Navigate into the application client directory:

    cd openvidu-livekit-tutorials/application-client/openvidu-react\n

  2. Install dependencies:

    npm install\n

  3. Run the application:

    npm start\n

Once the server is up and running, you can test the application by visiting http://localhost:5080. You should see a screen like this:

Accessing your application client from other devices in your local network

One advantage of running OpenVidu locally is that you can test your application client with other devices in your local network very easily without worrying about SSL certificates.

Access your application client through https://xxx-yyy-zzz-www.openvidu-local.dev:5443, where xxx-yyy-zzz-www part of the domain is your LAN private IP address with dashes (-) instead of dots (.). For more information, see section Accessing your app from other devices in your network.

"},{"location":"docs/tutorials/application-client/react/#understanding-the-code","title":"Understanding the code","text":"

This React project has been generated using the Vite. You may come across various configuration files and other items that are not essential for this tutorial. Our focus will be on the key files located within the src/ directory:

To use the LiveKit JS SDK in a Vue application, you need to install the livekit-client package. This package provides the necessary classes and methods to interact with the LiveKit server. You can install it using the following command:

npm install livekit-client\n

Now let's see the code of the App.tsx file:

App.tsx
type TrackInfo = { // (1)!\n    trackPublication: RemoteTrackPublication;\n    participantIdentity: string;\n};\n\n// For local development, leave these variables empty\n// For production, configure them with correct URLs depending on your deployment\nlet APPLICATION_SERVER_URL = \"\"; // (2)!\nlet LIVEKIT_URL = \"\"; // (3)!\nconfigureUrls();\n\nfunction configureUrls() {\n    // If APPLICATION_SERVER_URL is not configured, use default value from local development\n    if (!APPLICATION_SERVER_URL) {\n        if (window.location.hostname === \"localhost\") {\n            APPLICATION_SERVER_URL = \"http://localhost:6080/\";\n        } else {\n            APPLICATION_SERVER_URL = \"https://\" + window.location.hostname + \":6443/\";\n        }\n    }\n\n    // If LIVEKIT_URL is not configured, use default value from local development\n    if (!LIVEKIT_URL) {\n        if (window.location.hostname === \"localhost\") {\n            LIVEKIT_URL = \"ws://localhost:7880/\";\n        } else {\n            LIVEKIT_URL = \"wss://\" + window.location.hostname + \":7443/\";\n        }\n    }\n}\n\nfunction App() {\n    const [room, setRoom] = useState<Room | undefined>(undefined); // (4)!\n    const [localTrack, setLocalTrack] = useState<LocalVideoTrack | undefined>(undefined); // (5)!\n    const [remoteTracks, setRemoteTracks] = useState<TrackInfo[]>([]); // (6)!\n\n    const [participantName, setParticipantName] = useState(\"Participant\" + Math.floor(Math.random() * 100)); // (7)!\n    const [roomName, setRoomName] = useState(\"Test Room\"); // (8)!\n
  1. TrackInfo type, which groups a track publication with the participant's identity.
  2. The URL of the application server.
  3. The URL of the LiveKit server.
  4. The room object, which represents the video call room.
  5. The local video track, which represents the user's camera.
  6. The remote tracks array.
  7. The participant's name.
  8. The room name.

The App.tsx file defines the following variables:

Configure the URLs

For local development, leave APPLICATION_SERVER_URL and LIVEKIT_URL variables empty. The function configureUrls() will automatically configure them with default values. However, for production, you should configure these variables with the correct URLs depending on your deployment.

"},{"location":"docs/tutorials/application-client/react/#joining-a-room","title":"Joining a Room","text":"

After the user specifies their participant name and the name of the room they want to join, when they click the Join button, the joinRoom() function is called:

App.tsx
async function joinRoom() {\n    // Initialize a new Room object\n    const room = new Room(); // (1)!\n    setRoom(room);\n\n    // Specify the actions when events take place in the room\n    // On every new Track received...\n    room.on(\n        RoomEvent.TrackSubscribed,\n        (_track: RemoteTrack, publication: RemoteTrackPublication, participant: RemoteParticipant) => {\n            // (2)!\n            setRemoteTracks((prev) => [\n                ...prev,\n                { trackPublication: publication, participantIdentity: participant.identity }\n            ]);\n        }\n    );\n\n    // On every Track destroyed...\n    room.on(RoomEvent.TrackUnsubscribed, (_track: RemoteTrack, publication: RemoteTrackPublication) => {\n        // (3)!\n        setRemoteTracks((prev) => prev.filter((track) => track.trackPublication.trackSid !== publication.trackSid));\n    });\n\n    try {\n        // Get a token from your application server with the room name and participant name\n        const token = await getToken(roomName, participantName); // (4)!\n\n        // Connect to the room with the LiveKit URL and the token\n        await room.connect(LIVEKIT_URL, token); // (5)!\n\n        // Publish your camera and microphone\n        await room.localParticipant.enableCameraAndMicrophone(); // (6)!\n        setLocalTrack(room.localParticipant.videoTrackPublications.values().next().value.videoTrack);\n    } catch (error) {\n        console.log(\"There was an error connecting to the room:\", (error as Error).message);\n        await leaveRoom();\n    }\n}\n
  1. Initialize a new Room object.
  2. Event handling for when a new track is received in the room.
  3. Event handling for when a track is destroyed.
  4. Get a token from the application server with the room name and participant name from the form.
  5. Connect to the room with the LiveKit URL and the token.
  6. Publish your camera and microphone.

The joinRoom() function performs the following actions:

  1. It creates a new Room object. This object represents the video call room.

    Info

    When the room object is defined, the HTML template is automatically updated hiding the \"Join room\" page and showing the \"Room\" layout.

  2. Event handling is configured for different scenarios within the room. These events are fired when new tracks are subscribed to and when existing tracks are unsubscribed.

    These event handlers are essential for managing the behavior of tracks within the video call. You can further extend the event handling as needed for your application.

    Take a look at all events

    You can take a look at all the events in the Livekit Documentation

  3. It requests a token from the application server using the room name and participant name. This is done by calling the getToken() function:

    App.tsx
    /**\n * --------------------------------------------\n * GETTING A TOKEN FROM YOUR APPLICATION SERVER\n * --------------------------------------------\n * The method below request the creation of a token to\n * your application server. This prevents the need to expose\n * your LiveKit API key and secret to the client side.\n *\n * In this sample code, there is no user control at all. Anybody could\n * access your application server endpoints. In a real production\n * environment, your application server must identify the user to allow\n * access to the endpoints.\n */\nasync function getToken(roomName: string, participantName: string) {\n    const response = await fetch(APPLICATION_SERVER_URL + \"token\", {\n        method: \"POST\",\n        headers: {\n            \"Content-Type\": \"application/json\"\n        },\n        body: JSON.stringify({\n            roomName: roomName,\n            participantName: participantName\n        })\n    });\n\n    if (!response.ok) {\n        const error = await response.json();\n        throw new Error(`Failed to get token: ${error.errorMessage}`);\n    }\n\n    const data = await response.json();\n    return data.token;\n}\n

    This function sends a POST request using fetch() to the application server's /token endpoint. The request body contains the room name and participant name. The server responds with a token that is used to connect to the room.

  4. It connects to the room using the LiveKit URL and the token.

  5. It publishes the camera and microphone tracks to the room using room.localParticipant.enableCameraAndMicrophone(), which asks the user for permission to access their camera and microphone at the same time. The local video track is then stored in the localTrack variable.
"},{"location":"docs/tutorials/application-client/react/#displaying-video-and-audio-tracks","title":"Displaying Video and Audio Tracks","text":"

In order to display participants' video and audio tracks, the main component integrates the VideoComponent and AudioComponent.

App.tsx
<div id=\"layout-container\">\n    {localTrack && (\n        <VideoComponent track={localTrack} participantIdentity={participantName} local={true} />\n    )}\n    {remoteTracks.map((remoteTrack) =>\n        remoteTrack.trackPublication.kind === \"video\" ? (\n            <VideoComponent\n                key={remoteTrack.trackPublication.trackSid}\n                track={remoteTrack.trackPublication.videoTrack!}\n                participantIdentity={remoteTrack.participantIdentity}\n            />\n        ) : (\n            <AudioComponent\n                key={remoteTrack.trackPublication.trackSid}\n                track={remoteTrack.trackPublication.audioTrack!}\n            />\n        )\n    )}\n</div>\n

This code snippet does the following:

Let's see now the code of the VideoComponent.txs file:

VideoComponent.tsx
interface VideoComponentProps {\n    track: LocalVideoTrack | RemoteVideoTrack; // (1)!\n    participantIdentity: string; // (2)!\n    local?: boolean; // (3)!\n}\n\nfunction VideoComponent({ track, participantIdentity, local = false }: VideoComponentProps) {\n    const videoElement = useRef<HTMLVideoElement | null>(null); // (4)!\n\n    useEffect(() => {\n        if (videoElement.current) {\n            track.attach(videoElement.current); // (5)!\n        }\n\n        return () => {\n            track.detach(); // (6)!\n        };\n    }, [track]);\n\n    return (\n        <div id={\"camera-\" + participantIdentity} className=\"video-container\">\n            <div className=\"participant-data\">\n                <p>{participantIdentity + (local ? \" (You)\" : \"\")}</p>\n            </div>\n            <video ref={videoElement} id={track.sid}></video>\n        </div>\n    );\n}\n
  1. The video track object, which can be a LocalVideoTrack or a RemoteVideoTrack.
  2. The participant identity associated with the video track.
  3. A boolean flag that indicates whether the video track belongs to the local participant.
  4. The reference to the video element in the HTML template.
  5. Attach the video track to the video element when the component is mounted.
  6. Detach the video track when the component is unmounted.

The VideoComponent does the following:

Finally, let's see the code of the AudioComponent.tsx file:

AudioComponent.tsx
interface AudioComponentProps {\n    track: LocalAudioTrack | RemoteAudioTrack; // (1)!\n}\n\nfunction AudioComponent({ track }: AudioComponentProps) {\n    const audioElement = useRef<HTMLAudioElement | null>(null); // (2)!\n\n    useEffect(() => {\n        if (audioElement.current) {\n            track.attach(audioElement.current); // (3)!\n        }\n\n        return () => {\n            track.detach(); // (4)!\n        };\n    }, [track]);\n\n    return <audio ref={audioElement} id={track.sid} />;\n}\n
  1. The audio track object, which can be a LocalAudioTrack or a RemoteAudioTrack, although in this case, it will always be a RemoteAudioTrack.
  2. The reference to the audio element in the HTML template.
  3. Attach the audio track to the audio element when the component is mounted.
  4. Detach the audio track when the component is unmounted.

The AudioComponent is similar to the VideoComponent but is used to display audio tracks. It defines the track property as a prop for the component and creates a reference to the audio element in the HTML template. The audio track is attached to the audio element when the component is mounted and detached when the component is unmounted.

"},{"location":"docs/tutorials/application-client/react/#leaving-the-room","title":"Leaving the Room","text":"

When the user wants to leave the room, they can click the Leave Room button. This action calls the leaveRoom() function:

App.tsx
async function leaveRoom() {\n    // Leave the room by calling 'disconnect' method over the Room object\n    await room?.disconnect(); // (1)!\n\n    // Reset the state\n    setRoom(undefined); // (2)!\n    setLocalTrack(undefined);\n    setRemoteTracks([]);\n}\n
  1. Disconnect the user from the room.
  2. Reset all variables to their initial state.

The leaveRoom() function performs the following actions:

"},{"location":"docs/tutorials/application-client/vue/","title":"openvidu-vue","text":"

Source code

This tutorial is a simple video-call application built with Vue that allows:

It uses the LiveKit JS SDK to connect to the LiveKit server and interact with the video call room.

"},{"location":"docs/tutorials/application-client/vue/#running-this-tutorial","title":"Running this tutorial","text":""},{"location":"docs/tutorials/application-client/vue/#1-run-openvidu-server","title":"1. Run OpenVidu Server","text":"Run OpenVidu locallyDeploy OpenVidu

  1. Download OpenVidu

    git clone https://github.com/OpenVidu/openvidu-local-deployment\n

  2. Configure the local deployment

    Windows macOS Linux 
    cd openvidu-local-deployment/community\n.\\configure_lan_private_ip_windows.bat\n
    cd openvidu-local-deployment/community\n./configure_lan_private_ip_macos.sh\n
    cd openvidu-local-deployment/community\n./configure_lan_private_ip_linux.sh\n

  3. Run OpenVidu

    docker compose up\n

To use a production-ready OpenVidu deployment, visit the official deployment guide.

"},{"location":"docs/tutorials/application-client/vue/#2-download-the-tutorial-code","title":"2. Download the tutorial code","text":"
git clone https://github.com/OpenVidu/openvidu-livekit-tutorials.git\n
"},{"location":"docs/tutorials/application-client/vue/#3-run-a-server-application","title":"3. Run a server application","text":"Node Go Ruby Java Python Rust PHP .NET

To run this server application, you need Node installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/node\n
  2. Install dependencies 
    npm install\n
  3. Run the application 
    npm start\n

To run this server application, you need Go installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/go\n
  2. Run the application 
    go run main.go\n

To run this server application, you need Ruby installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/ruby\n
  2. Install dependencies 
    bundle install\n
  3. Run the application 
    ruby app.rb\n

To run this server application, you need Java and Maven installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/java\n
  2. Run the application 
    mvn spring-boot:run\n

To run this server application, you need Python 3 installed on your device.

  1. Navigate into the server directory

    cd openvidu-livekit-tutorials/application-server/python\n

  2. Create a python virtual environment

    python -m venv venv\n

  3. Activate the virtual environment

    Windows macOS Linux 
    .\\venv\\Scripts\\activate\n
    . ./venv/bin/activate\n
    . ./venv/bin/activate\n

  4. Install dependencies

    pip install -r requirements.txt\n

  5. Run the application

    python app.py\n

To run this server application, you need Rust installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/rust\n
  2. Run the application 
    cargo run\n

To run this server application, you need PHP and Composer installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/php\n
  2. Install dependencies 
    composer install\n
  3. Run the application 
    composer start\n

To run this server application, you need .NET installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/dotnet\n
  2. Run the application 
    dotnet run\n

Warning

This .NET server application needs the LIVEKIT_API_SECRET env variable to be at least 32 characters long. Make sure to update it here and in your OpenVidu Server.

"},{"location":"docs/tutorials/application-client/vue/#4-run-the-client-application","title":"4. Run the client application","text":"

To run the client application tutorial, you need Node installed on your development computer.

  1. Navigate into the application client directory:

    cd openvidu-livekit-tutorials/application-client/openvidu-vue\n

  2. Install dependencies:

    npm install\n

  3. Run the application:

    npm start\n

Once the server is up and running, you can test the application by visiting http://localhost:5080. You should see a screen like this:

Accessing your application client from other devices in your local network

One advantage of running OpenVidu locally is that you can test your application client with other devices in your local network very easily without worrying about SSL certificates.

Access your application client through https://xxx-yyy-zzz-www.openvidu-local.dev:5443, where xxx-yyy-zzz-www part of the domain is your LAN private IP address with dashes (-) instead of dots (.). For more information, see section Accessing your app from other devices in your network.

"},{"location":"docs/tutorials/application-client/vue/#understanding-the-code","title":"Understanding the code","text":"

This Vue project has been generated using the Vue CLI tool. You may come across various configuration files and other items that are not essential for this tutorial. Our focus will be on the key files located within the src/ directory:

To use the LiveKit JS SDK in a Vue application, you need to install the livekit-client package. This package provides the necessary classes and methods to interact with the LiveKit server. You can install it using the following command:

npm install livekit-client\n

Now let's see the code of the App.vue file:

App.vue
type TrackInfo = {\n    // (1)!\n    trackPublication: RemoteTrackPublication;\n    participantIdentity: string;\n};\n\n// For local development, leave these variables empty\n// For production, configure them with correct URLs depending on your deployment\nlet APPLICATION_SERVER_URL = \"\"; // (2)!\nlet LIVEKIT_URL = \"\"; // (3)!\nconfigureUrls();\n\nfunction configureUrls() {\n    // If APPLICATION_SERVER_URL is not configured, use default value from local development\n    if (!APPLICATION_SERVER_URL) {\n        if (window.location.hostname === \"localhost\") {\n            APPLICATION_SERVER_URL = \"http://localhost:6080/\";\n        } else {\n            APPLICATION_SERVER_URL = \"https://\" + window.location.hostname + \":6443/\";\n        }\n    }\n\n    // If LIVEKIT_URL is not configured, use default value from local development\n    if (!LIVEKIT_URL) {\n        if (window.location.hostname === \"localhost\") {\n            LIVEKIT_URL = \"ws://localhost:7880/\";\n        } else {\n            LIVEKIT_URL = \"wss://\" + window.location.hostname + \":7443/\";\n        }\n    }\n}\n\nconst room = ref<Room>(); // (4)!\nconst localTrack = ref<LocalVideoTrack>(); // (5)!\nconst remoteTracksMap: Ref<Map<string, TrackInfo>> = ref(new Map()); // (6)!\n\nlet participantName = ref(\"Participant\" + Math.floor(Math.random() * 100)); // (7)!\nlet roomName = ref(\"Test Room\"); // (8)!\n
  1. TrackInfo type, which groups a track publication with the participant's identity.
  2. The URL of the application server.
  3. The URL of the LiveKit server.
  4. The room object, which represents the video call room.
  5. The local video track, which represents the user's camera.
  6. Map that links track SIDs with TrackInfo objects. This map is used to store remote tracks and their associated participant identities.
  7. The participant's name.
  8. The room name.

The App.vue file defines the following variables:

Configure the URLs

For local development, leave APPLICATION_SERVER_URL and LIVEKIT_URL variables empty. The function configureUrls() will automatically configure them with default values. However, for production, you should configure these variables with the correct URLs depending on your deployment.

"},{"location":"docs/tutorials/application-client/vue/#joining-a-room","title":"Joining a Room","text":"

After the user specifies their participant name and the name of the room they want to join, when they click the Join button, the joinRoom() function is called:

App.vue
async function joinRoom() {\n    // Initialize a new Room object\n    room.value = new Room(); // (1)!\n\n    // Specify the actions when events take place in the room\n    // On every new Track received...\n    room.value.on(\n        RoomEvent.TrackSubscribed,\n        (_track: RemoteTrack, publication: RemoteTrackPublication, participant: RemoteParticipant) => {\n            // (2)!\n            remoteTracksMap.value.set(publication.trackSid, {\n                trackPublication: publication,\n                participantIdentity: participant.identity\n            });\n        }\n    );\n\n    // On every Track destroyed...\n    room.value.on(RoomEvent.TrackUnsubscribed, (_track: RemoteTrack, publication: RemoteTrackPublication) => {\n        // (3)!\n        remoteTracksMap.value.delete(publication.trackSid);\n    });\n\n    try {\n        // Get a token from your application server with the room name and participant name\n        const token = await getToken(roomName.value, participantName.value); // (4)!\n\n        // Connect to the room with the LiveKit URL and the token\n        await room.value.connect(LIVEKIT_URL, token); // (5)!\n\n        // Publish your camera and microphone\n        await room.value.localParticipant.enableCameraAndMicrophone(); // (6)!\n        localTrack.value = room.value.localParticipant.videoTrackPublications.values().next().value.videoTrack;\n    } catch (error: any) {\n        console.log(\"There was an error connecting to the room:\", error.message);\n        await leaveRoom();\n    }\n\n    // Add listener for beforeunload event to leave the room when the user closes the tab\n    window.addEventListener(\"beforeunload\", leaveRoom); // (7)!\n}\n
  1. Initialize a new Room object.
  2. Event handling for when a new track is received in the room.
  3. Event handling for when a track is destroyed.
  4. Get a token from the application server with the room name and participant name from the form.
  5. Connect to the room with the LiveKit URL and the token.
  6. Publish your camera and microphone.
  7. Add a listener for the beforeunload event to leave the room when the user closes the tab.

The joinRoom() function performs the following actions:

  1. It creates a new Room object. This object represents the video call room.

    Info

    When the room object is defined, the HTML template is automatically updated hiding the \"Join room\" page and showing the \"Room\" layout.

  2. Event handling is configured for different scenarios within the room. These events are fired when new tracks are subscribed to and when existing tracks are unsubscribed.

    These event handlers are essential for managing the behavior of tracks within the video call. You can further extend the event handling as needed for your application.

    Take a look at all events

    You can take a look at all the events in the Livekit Documentation

  3. It requests a token from the application server using the room name and participant name. This is done by calling the getToken() function:

    App.vue
    /**\n * --------------------------------------------\n * GETTING A TOKEN FROM YOUR APPLICATION SERVER\n * --------------------------------------------\n * The method below request the creation of a token to\n * your application server. This prevents the need to expose\n * your LiveKit API key and secret to the client side.\n *\n * In this sample code, there is no user control at all. Anybody could\n * access your application server endpoints. In a real production\n * environment, your application server must identify the user to allow\n * access to the endpoints.\n */\nasync function getToken(roomName: string, participantName: string) {\n    const response = await fetch(APPLICATION_SERVER_URL + \"token\", {\n        method: \"POST\",\n        headers: {\n            \"Content-Type\": \"application/json\"\n        },\n        body: JSON.stringify({\n            roomName,\n            participantName\n        })\n    });\n\n    if (!response.ok) {\n        const error = await response.json();\n        throw new Error(`Failed to get token: ${error.errorMessage}`);\n    }\n\n    const data = await response.json();\n    return data.token;\n}\n

    This function sends a POST request using fetch() to the application server's /token endpoint. The request body contains the room name and participant name. The server responds with a token that is used to connect to the room.

  4. It connects to the room using the LiveKit URL and the token.

  5. It publishes the camera and microphone tracks to the room using room.localParticipant.enableCameraAndMicrophone(), which asks the user for permission to access their camera and microphone at the same time. The local video track is then stored in the localTrack variable.
  6. It adds a listener for the beforeunload event to leave the room when the user closes the tab.
"},{"location":"docs/tutorials/application-client/vue/#displaying-video-and-audio-tracks","title":"Displaying Video and Audio Tracks","text":"

In order to display participants' video and audio tracks, the main component integrates the VideoComponent and AudioComponent.

App.vue
<div id=\"layout-container\">\n    <VideoComponent v-if=\"localTrack\" :track=\"localTrack\" :participantIdentity=\"participantName\" :local=\"true\" />\n    <template v-for=\"remoteTrack of remoteTracksMap.values()\" :key=\"remoteTrack.trackPublication.trackSid\">\n        <VideoComponent\n            v-if=\"remoteTrack.trackPublication.kind === 'video'\"\n            :track=\"remoteTrack.trackPublication.videoTrack!\"\n            :participantIdentity=\"remoteTrack.participantIdentity\"\n        />\n        <AudioComponent v-else :track=\"remoteTrack.trackPublication.audioTrack!\" hidden />\n    </template>\n</div>\n

This code snippet does the following:

Let's see now the code of the VideoComponent.vue file:

VideoComponent.vue
const props = withDefaults(\n    defineProps<{\n        track: LocalVideoTrack | RemoteVideoTrack; // (1)!\n        participantIdentity: string; // (2)!\n        local?: boolean; // (3)!\n    }>(),\n    {\n        local: false\n    }\n);\n\nconst videoElement = ref<HTMLMediaElement | null>(null); // (4)!\n\nonMounted(() => {\n    if (videoElement.value) {\n        props.track.attach(videoElement.value); // (5)!\n    }\n});\n\nonUnmounted(() => {\n    props.track.detach(); // (6)!\n});\n
  1. The video track object, which can be a LocalVideoTrack or a RemoteVideoTrack.
  2. The participant identity associated with the video track.
  3. A boolean flag that indicates whether the video track belongs to the local participant.
  4. The reference to the video element in the HTML template.
  5. Attach the video track to the video element when the component is mounted.
  6. Detach the video track when the component is unmounted.

The VideoComponent does the following:

Finally, let's see the code of the AudioComponent.vue file:

AudioComponent.vue
const props = defineProps<{\n    track: LocalAudioTrack | RemoteAudioTrack; // (1)!\n}>();\nconst audioElement = ref<HTMLMediaElement | null>(null); // (2)!\n\nonMounted(() => {\n    if (audioElement.value) {\n        props.track.attach(audioElement.value); // (3)!\n    }\n});\n\nonUnmounted(() => {\n    props.track.detach(); // (4)!\n});\n
  1. The audio track object, which can be a LocalAudioTrack or a RemoteAudioTrack, although in this case, it will always be a RemoteAudioTrack.
  2. The reference to the audio element in the HTML template.
  3. Attach the audio track to the audio element when the component is mounted.
  4. Detach the audio track when the component is unmounted.

The AudioComponent is similar to the VideoComponent but is used to display audio tracks. It defines the track property using the defineProps() function and creates a reference to the audio element in the HTML template. The audio track is attached to the audio element when the component is mounted and detached when the component is unmounted.

"},{"location":"docs/tutorials/application-client/vue/#leaving-the-room","title":"Leaving the Room","text":"

When the user wants to leave the room, they can click the Leave Room button. This action calls the leaveRoom() function:

App.vue
async function leaveRoom() {\n    // Leave the room by calling 'disconnect' method over the Room object\n    await room.value?.disconnect(); // (1)!\n\n    // Empty all variables\n    room.value = undefined; // (2)!\n    localTrack.value = undefined;\n    remoteTracksMap.value.clear();\n\n    window.removeEventListener(\"beforeunload\", leaveRoom); // (3)!\n}\n\nonUnmounted(() => {\n    // (4)!\n    // On component unmount, leave the room\n    leaveRoom();\n});\n
  1. Disconnect the user from the room.
  2. Reset all variables to their initial state.
  3. Remove the beforeunload event listener.
  4. Call the leaveRoom() function when the component is unmounted.

The leaveRoom() function performs the following actions:

The leaveRoom() function is also called when the component is unmounted using the onUnmounted() lifecycle hook. This ensures that the user leaves the room when the component is no longer needed.

"},{"location":"docs/tutorials/application-server/","title":"Application server tutorials","text":"

Every application server below has two specific purposes:

To do so they all define two REST endpoints:

They use the proper LiveKit Server SDK for their language, if available.

NodeJS

Go

Ruby

Java

Python

Rust

PHP

.NET

"},{"location":"docs/tutorials/application-server/dotnet/","title":".NET","text":"

Source code

This is a minimal server application built for .NET with ASP.NET Core Minimal APIs that allows:

Unfortunately there is no .NET SDK for LiveKit available, so the application has to manually build LiveKit compatible JWT tokens using the .NET library System.IdentityModel.Tokens.Jwt, and check the validity of webhook events on its own. It is a fairly easy process.

"},{"location":"docs/tutorials/application-server/dotnet/#running-this-application","title":"Running this application","text":"

Download the tutorial code:

git clone https://github.com/OpenVidu/openvidu-livekit-tutorials.git\n

To run this server application, you need .NET installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/dotnet\n
  2. Run the application 
    dotnet run\n

Warning

This .NET server application needs the LIVEKIT_API_SECRET env variable to be at least 32 characters long. Make sure to update it here and in your OpenVidu Server.

Info

You can run any Application Client to test against this server right away.

"},{"location":"docs/tutorials/application-server/dotnet/#understanding-the-code","title":"Understanding the code","text":"

The application is a simple ASP.NET Core Minimal APIs app with a single file Program.cs that exports two endpoints:

Let's see the code Program.cs file:

Program.cs
var builder = WebApplication.CreateBuilder(args); // (1)!\nvar MyAllowSpecificOrigins = \"_myAllowSpecificOrigins\"; // (2)!\n\nIConfiguration config = new ConfigurationBuilder() // (3)!\n                .SetBasePath(Directory.GetCurrentDirectory())\n                .AddJsonFile(\"appsettings.json\")\n                .AddEnvironmentVariables().Build();\n\n// Load env variables\nvar SERVER_PORT = config.GetValue<int>(\"SERVER_PORT\"); // (4)!\nvar LIVEKIT_API_KEY = config.GetValue<string>(\"LIVEKIT_API_KEY\"); // (5)!\nvar LIVEKIT_API_SECRET = config.GetValue<string>(\"LIVEKIT_API_SECRET\"); // (6)!\n\n// Enable CORS support\nbuilder.Services.AddCors(options => // (7)!\n{\n    options.AddPolicy(name: MyAllowSpecificOrigins,\n                      builder =>\n                      {\n                          builder.WithOrigins(\"*\").AllowAnyHeader();\n                      });\n});\n\nbuilder.WebHost.UseKestrel(serverOptions => // (8)!\n{\n    serverOptions.ListenAnyIP(SERVER_PORT);\n});\n\nvar app = builder.Build(); // (9)!\napp.UseCors(MyAllowSpecificOrigins);\n
  1. A WebApplicationBuilder instance to build the application.
  2. The name of the CORS policy to be used in the application.
  3. A IConfiguration instance to load the configuration from the appsettings.json file, including the required environment variables.
  4. The port where the application will be listening.
  5. The API key of LiveKit Server.
  6. The API secret of LiveKit Server.
  7. Configure CORS support.
  8. Configure the port.
  9. Build the application and enable CORS support.

The Program.cs file imports the required dependencies and loads the necessary environment variables (defined in appsettings.json file):

Finally the application enables CORS support and the port where the application will be listening.

"},{"location":"docs/tutorials/application-server/dotnet/#create-token","title":"Create token","text":"

The endpoint /token accepts POST requests with a payload of type application/json, containing the following fields:

Program.cs
app.MapPost(\"/token\", async (HttpRequest request) =>\n{\n    var body = new StreamReader(request.Body); // (1)!\n    string postData = await body.ReadToEndAsync();\n    Dictionary<string, dynamic> bodyParams = JsonSerializer.Deserialize<Dictionary<string, dynamic>>(postData) ?? new Dictionary<string, dynamic>();\n\n    if (bodyParams.TryGetValue(\"roomName\", out var roomName) && bodyParams.TryGetValue(\"participantName\", out var participantName))\n    {\n        var token = CreateLiveKitJWT(roomName.ToString(), participantName.ToString()); // (2)!\n        return Results.Json(new { token }); // (3)!\n    }\n    else\n    {\n        return Results.BadRequest(new { errorMessage = \"roomName and participantName are required\" }); // (4)!\n    }\n});\n
  1. The endpoint obtains a Dictionary from the body request, and check if fields roomName and participantName are available.
  2. Create a new JWT token with the room and participant name.
  3. Return the token to the client.
  4. Return a 400 error if required fields are not available.

The endpoint obtains a Dictionary from the body request, and check if fields roomName and participantName are available. If not, it returns a 400 error.

If required fields are available, a new JWT token is created. Unfortunately there is no .NET SDK for LiveKit, so we need to create the JWT token manually. The CreateLiveKitJWT method is responsible for creating the LiveKit compatible JWT token:

Program.cs
string CreateLiveKitJWT(string roomName, string participantName)\n{\n    JwtHeader headers = new(new SigningCredentials(new SymmetricSecurityKey(Encoding.UTF8.GetBytes(LIVEKIT_API_SECRET)), \"HS256\")); // (1)!\n\n    var videoGrants = new Dictionary<string, object>() // (2)!\n    {\n        { \"room\", roomName },\n        { \"roomJoin\", true }\n    };\n    JwtPayload payload = new()\n    {\n        { \"exp\", new DateTimeOffset(DateTime.UtcNow.AddHours(6)).ToUnixTimeSeconds() }, // (3)!\n        { \"iss\", LIVEKIT_API_KEY }, // (4)!\n        { \"nbf\", 0 }, // (5)!\n        { \"sub\", participantName }, // (6)!\n        { \"name\", participantName },\n        { \"video\", videoGrants }\n    };\n    JwtSecurityToken token = new(headers, payload);\n    return new JwtSecurityTokenHandler().WriteToken(token); // (7)!\n}\n
  1. Create a new JwtHeader with LIVEKIT_API_SECRET as the secret key and HS256 as the encryption algorithm.
  2. Create a new Dictionary with the video grants for the participant. roomJoin allows the user to join a room and room determines the specific room. Check out all Video Grants.
  3. Set the expiration time of the token. LiveKit default's is 6 hours.
  4. Set the API key of LiveKit Server as the issuer (iss) of the token.
  5. The Not before field (nbf) sets when the token becomes valid (0 for immediately valid).
  6. Set the participant's name in the claims sub and name.
  7. Finally, the returned token is sent back to the client.

This method uses the native System.IdentityModel.Tokens.Jwt library to create a JWT token valid for LiveKit. The most important field in the JwtPayload is video, which will determine the VideoGrant permissions of the participant in the Room. You can also customize the expiration time of the token by changing the exp field, and add a metadata field for the participant. Check out all the available claims.

Finally, the returned token is sent back to the client.

"},{"location":"docs/tutorials/application-server/dotnet/#receive-webhook","title":"Receive webhook","text":"

The endpoint /livekit/webhook accepts POST requests with a payload of type application/webhook+json. This is the endpoint where LiveKit Server will send webhook events.

Program.cs
app.MapPost(\"/livekit/webhook\", async (HttpRequest request) =>\n{\n    var body = new StreamReader(request.Body);\n    string postData = await body.ReadToEndAsync(); // (1)!\n\n    var authHeader = request.Headers[\"Authorization\"]; // (2)!\n    if (authHeader.Count == 0)\n    {\n        return Results.BadRequest(\"Authorization header is required\");\n    }\n    try\n    {\n        VerifyWebhookEvent(authHeader.First(), postData); // (3)!\n    }\n    catch (Exception e)\n    {\n        Console.Error.WriteLine(\"Error validating webhook event: \" + e.Message);\n        return Results.Unauthorized();\n    }\n\n    Console.Out.WriteLine(postData); // (4)!\n    return Results.Ok(); // (5)!\n});\n
  1. The raw string body of the request contains the webhook event.
  2. The Authorization header is required to validate the webhook event.
  3. Verify the webhook event.
  4. Consume the event as you whish.
  5. Return a response to LiveKit Server to let it know that the webhook was received correctly.

The endpoint receives the incoming webhook event and validates it to ensure it is coming from our LiveKit Server. For that we need the raw string body and the Authorization header of the request. After validating it, we can consume the event (in this case, we just log it), and we must also return a 200 OK response to LiveKit Server to let it know that the webhook was received correctly.

Unfortunately there is no .NET SDK for LiveKit, so we need to manually validate the webhook event. The VerifyWebhookEvent method does that:

Program.cs
void VerifyWebhookEvent(string authHeader, string body)\n{\n    var utf8Encoding = new UTF8Encoding();\n    var tokenValidationParameters = new TokenValidationParameters()\n    {\n        ValidateIssuerSigningKey = true,\n        IssuerSigningKey = new SymmetricSecurityKey(utf8Encoding.GetBytes(LIVEKIT_API_SECRET)), // (1)!\n        ValidateIssuer = true,\n        ValidIssuer = LIVEKIT_API_KEY, // (2)!\n        ValidateAudience = false\n    };\n\n    var jwtValidator = new JwtSecurityTokenHandler();\n    var claimsPrincipal = jwtValidator.ValidateToken(authHeader, tokenValidationParameters, out SecurityToken validatedToken); // (3)!\n\n    var sha256 = SHA256.Create();\n    var hashBytes = sha256.ComputeHash(utf8Encoding.GetBytes(body));\n    var hash = Convert.ToBase64String(hashBytes); // (4)!\n\n    if (claimsPrincipal.HasClaim(c => c.Type == \"sha256\") && claimsPrincipal.FindFirstValue(\"sha256\") != hash)\n    {\n        throw new ArgumentException(\"sha256 checksum of body does not match!\");\n    }\n}\n
  1. Use the LIVEKIT_API_SECRET as the secret key to validate the token.
  2. Set the LIVEKIT_API_KEY as the issuer of the token.
  3. Validate the Authorization header with the recently created TokenValidationParameters. If the LIVEKIT_API_SECRET or LIVEKIT_API_KEY of the LiveKit Server that sent the event do not match the ones in the application, this will throw an exception.
  4. Calculate the SHA256 hash of the body and compare it with the sha256 claim in the token. If they match, it means the webhook event was not tampered and we can trust it.

We need a TokenValidationParameters object from the Microsoft.IdentityModel.Tokens namespace. We use the LIVEKIT_API_SECRET as the symmetric key, and the LIVEKIT_API_KEY as the issuer of the token.

If method JwtSecurityTokenHandler#ValidateToken does rise an exception when validating the Authorization header, it means the webhook event was sent by a LiveKit Server with different credentials.

Finally, we calculate the SHA256 hash of the body and compare it with the sha256 claim in the token. If they match, it means the webhook event was not tampered and we can definitely trust it.

"},{"location":"docs/tutorials/application-server/go/","title":"Go","text":"

Source code

This is a minimal server application built for Go with Gin that allows:

It internally uses the LiveKit Go SDK.

"},{"location":"docs/tutorials/application-server/go/#running-this-application","title":"Running this application","text":"

Download the tutorial code:

git clone https://github.com/OpenVidu/openvidu-livekit-tutorials.git\n

To run this server application, you need Go installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/go\n
  2. Run the application 
    go run main.go\n

Info

You can run any Application Client to test against this server right away.

"},{"location":"docs/tutorials/application-server/go/#understanding-the-code","title":"Understanding the code","text":"

The application is a simple Go app with a single file main.go that exports two endpoints:

Let's see the code of the main.go file:

main.go
var (\n    SERVER_PORT        = getEnv(\"SERVER_PORT\", \"6080\") // (1)!\n    LIVEKIT_API_KEY    = getEnv(\"LIVEKIT_API_KEY\", \"devkey\") // (2)!\n    LIVEKIT_API_SECRET = getEnv(\"LIVEKIT_API_SECRET\", \"secret\") // (3)!\n)\n\nfunc getEnv(key, defaultValue string) string {\n    if value, ok := os.LookupEnv(key); ok {\n        return value\n    }\n    return defaultValue\n}\n
  1. The port where the application will be listening
  2. The API key of LiveKit Server
  3. The API secret of LiveKit Server

The main.go file first loads the necessary environment variables:

Method getEnv simply load each environment variable, giving a default value if not found.

The server launch takes place in the main function at the end of the file, where we set the REST endpoints and start the server on SERVER_PORT:

main.go
func main() {\n    router := gin.Default() // (1)!\n    router.Use(cors.Default()) // (2)!\n    router.POST(\"/token\", createToken) // (3)!\n    router.POST(\"/livekit/webhook\", receiveWebhook) // (4)!\n    router.Run(\":\" + SERVER_PORT) // (5)!\n}\n
  1. Create a new Gin router
  2. Enable CORS support
  3. Create the /token endpoint
  4. Create the /livekit/webhook endpoint
  5. Start the server on the SERVER_PORT
"},{"location":"docs/tutorials/application-server/go/#create-token","title":"Create token","text":"

The endpoint /token accepts POST requests with a payload of type application/json, containing the following fields:

main.go
func createToken(context *gin.Context) {\n    var body struct {\n        RoomName        string `json:\"roomName\"`\n        ParticipantName string `json:\"participantName\"`\n    }\n\n    if err := context.BindJSON(&body); err != nil {\n        context.JSON(http.StatusBadRequest, err.Error())\n        return\n    }\n\n    if body.RoomName == \"\" || body.ParticipantName == \"\" {\n        context.JSON(http.StatusBadRequest, gin.H{\"errorMessage\": \"roomName and participantName are required\"})\n        return\n    }\n\n    at := auth.NewAccessToken(LIVEKIT_API_KEY, LIVEKIT_API_SECRET) // (1)!\n    grant := &auth.VideoGrant{\n        RoomJoin: true,\n        Room:     body.RoomName,\n    }\n    at.AddGrant(grant).SetIdentity(body.ParticipantName) // (2)!\n\n    token, err := at.ToJWT() // (3)!\n    if err != nil {\n        context.JSON(http.StatusInternalServerError, err.Error())\n        return\n    }\n\n    context.JSON(http.StatusOK, gin.H{\"token\": token}) // (4)!\n}\n
  1. A new AccessToken is created providing the LIVEKIT_API_KEY and LIVEKIT_API_SECRET.
  2. We set the video grants and identity of the participant in the AccessToken. RoomJoin allows the user to join a room and Room determines the specific room. Check out all Video Grants.
  3. We convert the AccessToken to a JWT token.
  4. Finally, the token is sent back to the client.

We first load the request body into a struct with roomName and participantName string fields. If they are not available, it returns a 400 error.

If required fields are available, a new JWT token is created. For that we use the LiveKit Go SDK:

  1. A new AccessToken is created providing the LIVEKIT_API_KEY and LIVEKIT_API_SECRET.
  2. We set the video grants and identity of the participant in the AccessToken. RoomJoin allows the user to join a room and Room determines the specific room. Check out all Video Grants.
  3. We convert the AccessToken to a JWT token and return it to the client.
  4. Finally, the token is sent back to the client.
"},{"location":"docs/tutorials/application-server/go/#receive-webhook","title":"Receive webhook","text":"

The endpoint /livekit/webhook accepts POST requests with a payload of type application/webhook+json. This is the endpoint where LiveKit Server will send webhook events.

main.go
func receiveWebhook(context *gin.Context) {\n    authProvider := auth.NewSimpleKeyProvider( // (1)!\n        LIVEKIT_API_KEY, LIVEKIT_API_SECRET,\n    )\n    event, err := webhook.ReceiveWebhookEvent(context.Request, authProvider) // (2)!\n    if err != nil {\n        fmt.Fprintf(os.Stderr, \"error validating webhook event: %v\", err)\n        return\n    }\n    fmt.Println(\"LiveKit Webhook\", event) // (3)!\n}\n
  1. Create a SimpleKeyProvider with the LIVEKIT_API_KEY and LIVEKIT_API.
  2. Receive the webhook event providing the http.Request in the Gin context and the SimpleKeyProvider we just created. This will validate and decode the incoming webhook event.
  3. Consume the event as you whish.

  1. Create a SimpleKeyProvider with the LIVEKIT_API_KEY and LIVEKIT_API.
  2. Receive the webhook event providing the http.Request in the Gin context and the SimpleKeyProvider we just created. This will validate and decode the incoming webhook event.
  3. Consume the event as you whish.

"},{"location":"docs/tutorials/application-server/java/","title":"Java","text":"

Source code

This is a minimal server application built for Java with Spring Boot that allows:

It internally uses LiveKit Kotlin SDK.

"},{"location":"docs/tutorials/application-server/java/#running-this-application","title":"Running this application","text":"

Download the tutorial code:

git clone https://github.com/OpenVidu/openvidu-livekit-tutorials.git\n

To run this server application, you need Java and Maven installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/java\n
  2. Run the application 
    mvn spring-boot:run\n

Info

You can run any Application Client to test against this server right away.

"},{"location":"docs/tutorials/application-server/java/#understanding-the-code","title":"Understanding the code","text":"

The application is a simple Spring Boot app with a single controller Controller.java that exports two endpoints:

Let's see the code of the Controller.java file:

Controller.java
@CrossOrigin(origins = \"*\") // (1)!\n@RestController // (2)!\npublic class Controller {\n\n    @Value(\"${livekit.api.key}\")\n    private String LIVEKIT_API_KEY; // (3)!\n\n    @Value(\"${livekit.api.secret}\")\n    private String LIVEKIT_API_SECRET; // (4)!\n\n    ...\n}\n
  1. Allows the application to be accessed from any domain
  2. Marks the class as a controller where every method returns a domain object instead of a view
  3. The API key of LiveKit Server
  4. The API secret of LiveKit Server

Starting by the top, the Controller class has the following annotations:

Going deeper, the Controller class has the following fields:

"},{"location":"docs/tutorials/application-server/java/#create-token","title":"Create token","text":"

The endpoint /token accepts POST requests with a payload of type application/json, containing the following fields:

Controller.java
@PostMapping(value = \"/token\")\npublic ResponseEntity<Map<String, String>> createToken(@RequestBody Map<String, String> params) {\n    String roomName = params.get(\"roomName\");\n    String participantName = params.get(\"participantName\");\n\n    if (roomName == null || participantName == null) {\n        return ResponseEntity.badRequest().body(Map.of(\"errorMessage\", \"roomName and participantName are required\"));\n    }\n\n    AccessToken token = new AccessToken(LIVEKIT_API_KEY, LIVEKIT_API_SECRET); // (1)!\n    token.setName(participantName); // (2)!\n    token.setIdentity(participantName);\n    token.addGrants(new RoomJoin(true), new RoomName(roomName)); // (3)!\n\n    return ResponseEntity.ok(Map.of(\"token\", token.toJwt())); // (4)!\n}\n
  1. A new AccessToken is created providing the LIVEKIT_API_KEY and LIVEKIT_API_SECRET.
  2. We set participant's name and identity in the AccessToken.
  3. We set the video grants in the AccessToken. RoomJoin allows the user to join a room and RoomName determines the specific room. Check out all Video Grants.
  4. Finally, the token is sent back to the client.

The endpoint first obtains the roomName and participantName parameters from the request body. If they are not available, it returns a 400 error.

If required fields are available, a new JWT token is created. For that we use the LiveKit Kotlin SDK:

  1. A new AccessToken is created providing the LIVEKIT_API_KEY and LIVEKIT_API_SECRET.
  2. We set participant's name and identity in the AccessToken.
  3. We set the video grants in the AccessToken. RoomJoin allows the user to join a room and RoomName determines the specific room. Check out all Video Grants.
  4. Finally, the token is sent back to the client.
"},{"location":"docs/tutorials/application-server/java/#receive-webhook","title":"Receive webhook","text":"

The endpoint /livekit/webhook accepts POST requests with a payload of type application/webhook+json. This is the endpoint where LiveKit Server will send webhook events.

Controller.java
@PostMapping(value = \"/livekit/webhook\", consumes = \"application/webhook+json\")\npublic ResponseEntity<String> receiveWebhook(@RequestHeader(\"Authorization\") String authHeader, @RequestBody String body) { // (1)!\n    WebhookReceiver webhookReceiver = new WebhookReceiver(LIVEKIT_API_KEY, LIVEKIT_API_SECRET); // (2)!\n    try {\n        WebhookEvent event = webhookReceiver.receive(body, authHeader); // (3)!\n        System.out.println(\"LiveKit Webhook: \" + event.toString()); // (4)!\n    } catch (Exception e) {\n        System.err.println(\"Error validating webhook event: \" + e.getMessage());\n    }\n    return ResponseEntity.ok(\"ok\");\n}\n
  1. We need the 'Authorization' header and the raw body of the HTTP request.
  2. Initialize the WebhookReceiver using the LIVEKIT_API_KEY and LIVEKIT_API_SECRET. It will help validating and decoding incoming webhook events.
  3. Obtain the WebhookEvent object using the WebhookReceiver#receive method. It takes the raw body as a String and the Authorization header of the request.
  4. Consume the event as you whish.

We declare the 'Authorization' header and the raw body of the HTTP request as parameters of the our method. We need both of them to validate and decode the incoming webhook event.

Then we initialize a WebhookReceiver object using the LIVEKIT_API_KEY and LIVEKIT_API_SECRET.

Finally we obtain a WebhookEvent object calling method WebhookReceiver#receive. It takes the raw body as a String and the Authorization header of the request. If everything is correct, you can do whatever you want with the event (in this case, we just log it).

Remember to return a 200 OK response at the end to let LiveKit Server know that the webhook was received correctly.

"},{"location":"docs/tutorials/application-server/node/","title":"Node","text":"

Source code

This is a minimal server application built for Node with Express that allows:

It internally uses LiveKit JS SDK.

"},{"location":"docs/tutorials/application-server/node/#running-this-application","title":"Running this application","text":"

Download the tutorial code:

git clone https://github.com/OpenVidu/openvidu-livekit-tutorials.git\n

To run this server application, you need Node installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/node\n
  2. Install dependencies 
    npm install\n
  3. Run the application 
    npm start\n

Info

You can run any Application Client to test against this server right away.

"},{"location":"docs/tutorials/application-server/node/#understanding-the-code","title":"Understanding the code","text":"

The application is a simple Express app with a single file index.js that exports two endpoints:

Let's see the code of the index.js file:

index.js
import \"dotenv/config\";\nimport express from \"express\";\nimport cors from \"cors\";\nimport { AccessToken, WebhookReceiver } from \"livekit-server-sdk\"; // (1)!\n\nconst SERVER_PORT = process.env.SERVER_PORT || 6080; // (2)!\nconst LIVEKIT_API_KEY = process.env.LIVEKIT_API_KEY || \"devkey\"; // (3)!\nconst LIVEKIT_API_SECRET = process.env.LIVEKIT_API_SECRET || \"secret\"; // (4)!\n\nconst app = express(); // (5)!\n\napp.use(cors()); // (6)!\napp.use(express.json()); // (7)!\napp.use(express.raw({ type: \"application/webhook+json\" })); // (8)!\n
  1. Import AccessToken from livekit-server-sdk.
  2. The port where the application will be listening.
  3. The API key of LiveKit Server.
  4. The API secret of LiveKit Server.
  5. Initialize the Express application.
  6. Enable CORS support.
  7. Enable JSON body parsing for the /token endpoint.
  8. Enable raw body parsing for the /livekit/webhook endpoint.

The index.js file imports the required dependencies and loads the necessary environment variables:

It also initializes the WebhookReceiver object that will help validating and decoding incoming webhook events.

Finally the express application is initialized. CORS is allowed, JSON body parsing is enabled for the /token endpoint and raw body parsing is enabled for the /livekit/webhook endpoint.

"},{"location":"docs/tutorials/application-server/node/#create-token","title":"Create token","text":"

The endpoint /token accepts POST requests with a payload of type application/json, containing the following fields:

index.js
app.post(\"/token\", async (req, res) => {\n  const roomName = req.body.roomName;\n  const participantName = req.body.participantName;\n\n  if (!roomName || !participantName) {\n    res.status(400).json({ errorMessage: \"roomName and participantName are required\" });\n    return;\n  }\n\n  const at = new AccessToken(LIVEKIT_API_KEY, LIVEKIT_API_SECRET, { // (1)!\n    identity: participantName,\n  });\n  at.addGrant({ roomJoin: true, room: roomName }); // (2)!\n  const token = await at.toJwt(); // (3)!\n  res.json({ token }); // (4)!\n});\n
  1. A new AccessToken is created providing the LIVEKIT_API_KEY, LIVEKIT_API_SECRET and setting the participant's identity.
  2. We set the video grants in the AccessToken. roomJoin allows the user to join a room and room determines the specific room. Check out all Video Grants.
  3. We convert the AccessToken to a JWT token.
  4. Finally, the token is sent back to the client.

The endpoint first obtains the roomName and participantName parameters from the request body. If they are not available, it returns a 400 error.

If required fields are available, a new JWT token is created. For that we use the LiveKit JS SDK:

  1. A new AccessToken is created providing the LIVEKIT_API_KEY, LIVEKIT_API_SECRET and setting the participant's identity.
  2. We set the video grants in the AccessToken. roomJoin allows the user to join a room and room determines the specific room. Check out all Video Grants.
  3. We convert the AccessToken to a JWT token.
  4. Finally, the token is sent back to the client.
"},{"location":"docs/tutorials/application-server/node/#receive-webhook","title":"Receive webhook","text":"

The endpoint /livekit/webhook accepts POST requests with a payload of type application/webhook+json. This is the endpoint where LiveKit Server will send webhook events.

index.js
const webhookReceiver = new WebhookReceiver( // (1)!\n  LIVEKIT_API_KEY,\n  LIVEKIT_API_SECRET\n);\n\napp.post(\"/livekit/webhook\", async (req, res) => {\n  try {\n    const event = await webhookReceiver.receive(\n      req.body, // (2)!\n      req.get(\"Authorization\") // (3)!\n    );\n    console.log(event); // (4)!\n  } catch (error) {\n    console.error(\"Error validating webhook event\", error);\n  }\n  res.status(200).send();\n});\n
  1. Initialize the WebhookReceiver using the LIVEKIT_API_KEY and LIVEKIT_API_SECRET. It will help validating and decoding incoming webhook events.
  2. The body of the HTTP request.
  3. The Authorization header of the HTTP request.
  4. Consume the event as you whish.

First of all we initialize the WebhookReceiver using the LIVEKIT_API_KEY and LIVEKIT_API_SECRET. This object will validate and decode the incoming webhook events.

The endpoint receives the incoming webhook with the async method WebhookReceiver#receive. It takes the body and the Authorization header of the request. If everything is correct, you can do whatever you want with the event (in this case, we just log it).

Remember to return a 200 OK response at the end to let LiveKit Server know that the webhook was received correctly.

"},{"location":"docs/tutorials/application-server/php/","title":"PHP","text":"

Source code

This is a minimal server application built for PHP that allows:

It internally uses LiveKit PHP SDK.

"},{"location":"docs/tutorials/application-server/php/#running-this-application","title":"Running this application","text":"

Download the tutorial code:

git clone https://github.com/OpenVidu/openvidu-livekit-tutorials.git\n

To run this server application, you need PHP and Composer installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/php\n
  2. Install dependencies 
    composer install\n
  3. Run the application 
    composer start\n

Info

You can run any Application Client to test against this server right away.

Warning

LiveKit PHP SDK requires library BCMath. This is available out-of-the-box in PHP for Windows, but a manual installation might be necessary in other OS. Run sudo apt install php-bcmath or sudo yum install php-bcmath

"},{"location":"docs/tutorials/application-server/php/#understanding-the-code","title":"Understanding the code","text":"

The application is a simple PHP app with a single file index.php that exports two endpoints:

Let's see the code of the index.php file:

index.php
<?php\nrequire __DIR__ . \"/vendor/autoload.php\";\n\nuse Agence104\\LiveKit\\AccessToken; // (1)!\nuse Agence104\\LiveKit\\AccessTokenOptions;\nuse Agence104\\LiveKit\\VideoGrant;\nuse Agence104\\LiveKit\\WebhookReceiver;\nuse Dotenv\\Dotenv;\n\nDotenv::createImmutable(__DIR__)->safeLoad();\n\nheader(\"Access-Control-Allow-Origin: *\"); // (2)!\nheader(\"Access-Control-Allow-Headers: Content-Type, Authorization\");\nheader(\"Content-type: application/json\");\n\n$LIVEKIT_API_KEY = $_ENV[\"LIVEKIT_API_KEY\"] ?? \"devkey\"; // (3)!\n$LIVEKIT_API_SECRET = $_ENV[\"LIVEKIT_API_SECRET\"] ?? \"secret\"; // (4)!\n
  1. Import all necessary dependencies from the PHP LiveKit library.
  2. Configure HTTP headers for the web server: enable CORS support, allow the Content-Type and Authorization headers and set the response content type to application/json.
  3. The API key of LiveKit Server.
  4. The API secret of LiveKit Server.

The index.php file imports the required dependencies, sets the HTTP headers for the web server and loads the necessary environment variables:

"},{"location":"docs/tutorials/application-server/php/#create-token","title":"Create token","text":"

The endpoint /token accepts POST requests with a payload of type application/json, containing the following fields:

index.php
<?php\nif (isset($_SERVER[\"REQUEST_METHOD\"]) && $_SERVER[\"REQUEST_METHOD\"] === \"POST\" && $_SERVER[\"PATH_INFO\"] === \"/token\") {\n    $data = json_decode(file_get_contents(\"php://input\"), true);\n\n    $roomName = $data[\"roomName\"] ?? null;\n    $participantName = $data[\"participantName\"] ?? null;\n\n    if (!$roomName || !$participantName) {\n        http_response_code(400);\n        echo json_encode([\"errorMessage\" => \"roomName and participantName are required\"]);\n        exit();\n    }\n\n    $tokenOptions = (new AccessTokenOptions()) // (1)!\n        ->setIdentity($participantName);\n    $videoGrant = (new VideoGrant()) // (2)!\n        ->setRoomJoin()\n        ->setRoomName($roomName);\n    $token = (new AccessToken($LIVEKIT_API_KEY, $LIVEKIT_API_SECRET)) // (3)!\n        ->init($tokenOptions)\n        ->setGrant($videoGrant)\n        ->toJwt();\n\n    echo json_encode([\"token\" => $token]); // (4)!\n    exit();\n}\n
  1. Create an AccessTokenOptions object with the participant's identity.
  2. Create a VideoGrant object setting the necessary video grants options. setRoomJoin allows the user to join a room and setRoomName determines the specific room. Check out all Video Grants.
  3. We create the AccessToken providing the LIVEKIT_API_KEY and LIVEKIT_API_SECRET, initialize it with the token options, set the video grants and generate the JWT token.
  4. Finally, the token is sent back to the client.

The endpoint first obtains the roomName and participantName parameters from the request body. If they are not available, it returns a 400 error.

If required fields are available, a new JWT token is created. For that we use the LiveKit PHP SDK:

  1. Create an AccessTokenOptions object with the participant's identity.
  2. Create a VideoGrant object setting the necessary video grants options. setRoomJoin allows the user to join a room and setRoomName determines the specific room. Check out all Video Grants.
  3. We create the AccessToken providing the LIVEKIT_API_KEY and LIVEKIT_API_SECRET, initialize it with the token options, set the video grants and generate the JWT token.
  4. Finally, the token is sent back to the client.
"},{"location":"docs/tutorials/application-server/php/#receive-webhook","title":"Receive webhook","text":"

The endpoint /livekit/webhook accepts POST requests with a payload of type application/webhook+json. This is the endpoint where LiveKit Server will send webhook events.

index.php
<?php\n$webhookReceiver = (new WebhookReceiver($LIVEKIT_API_KEY, $LIVEKIT_API_SECRET)); // (1)!\n\nif (isset($_SERVER[\"REQUEST_METHOD\"]) && $_SERVER[\"REQUEST_METHOD\"] === \"POST\" && $_SERVER[\"PATH_INFO\"] === \"/livekit/webhook\") {\n    $headers = getallheaders();\n    $authHeader = $headers[\"Authorization\"]; // (2)!\n    $body = file_get_contents(\"php://input\"); // (3)!\n    try {\n        $event = $webhookReceiver->receive($body, $authHeader); // (4)!\n        error_log(\"LiveKit Webhook:\");\n        error_log(print_r($event->getEvent(), true)); // (5)!\n        exit();\n    } catch (Exception $e) {\n        http_response_code(401);\n        echo \"Error validating webhook event\";\n        echo json_encode($e->getMessage());\n        exit();\n    }\n}\n
  1. Create a new WebhookReceiver object providing the LIVEKIT_API_KEY and LIVEKIT_API_SECRET. It will help validating and decoding incoming webhook events.
  2. The Authorization header of the HTTP request.
  3. The raw body of the HTTP request as a string.
  4. Obtain the WebhookEvent object using the WebhookReceiver#receive method. It takes the raw body as a String and the Authorization header of the request.
  5. Consume the event as you wish.

We first create a WebhookReceiver object using the LIVEKIT_API_KEY and LIVEKIT_API_SECRET. Then we must retrieve the Authorization header and the raw body of the HTTP request. We need both of them to validate and decode the incoming webhook event.

Finally, we obtain the WebhookEvent object using the WebhookReceiver#receive method. It takes the raw body as a String and the Authorization header of the request. We can consume the event as we wish (in this case, we just log it using the error output).

"},{"location":"docs/tutorials/application-server/python/","title":"Python","text":"

Source code

This is a minimal server application built for Python with Flask that allows:

It internally uses LiveKit Python SDK.

"},{"location":"docs/tutorials/application-server/python/#running-this-application","title":"Running this application","text":"

Download the tutorial code:

git clone https://github.com/OpenVidu/openvidu-livekit-tutorials.git\n

To run this server application, you need Python 3 installed on your device.

  1. Navigate into the server directory

    cd openvidu-livekit-tutorials/application-server/python\n

  2. Create a python virtual environment

    python -m venv venv\n

  3. Activate the virtual environment

    Windows macOS Linux 
    .\\venv\\Scripts\\activate\n
    . ./venv/bin/activate\n
    . ./venv/bin/activate\n

  4. Install dependencies

    pip install -r requirements.txt\n

  5. Run the application

    python app.py\n

Info

You can run any Application Client to test against this server right away.

"},{"location":"docs/tutorials/application-server/python/#understanding-the-code","title":"Understanding the code","text":"

The application is a simple Flask app with a single file app.py that exports two endpoints:

Let's see the code of the app.py file:

app.py
import os\nfrom flask import Flask, request\nfrom flask_cors import CORS\nfrom dotenv import load_dotenv\nfrom livekit.api import AccessToken, VideoGrants, TokenVerifier, WebhookReceiver # (1)!\n\nload_dotenv() # (2)!\n\nSERVER_PORT = os.environ.get(\"SERVER_PORT\", 6080) # (3)!\nLIVEKIT_API_KEY = os.environ.get(\"LIVEKIT_API_KEY\", \"devkey\") # (4)!\nLIVEKIT_API_SECRET = os.environ.get(\"LIVEKIT_API_SECRET\", \"secret\") # (5)!\n\napp = Flask(__name__) # (6)!\n\nCORS(app) # (7)!\n
  1. Import all necessary dependencies from livekit library
  2. Load environment variables from .env file
  3. The port where the application will be listening
  4. The API key of LiveKit Server
  5. The API secret of LiveKit Server
  6. Initialize the Flask application
  7. Enable CORS support

The app.py file imports the required dependencies and loads the necessary environment variables from .env file using dotenv library:

Finally the Flask application is initialized and CORS support is enabled.

"},{"location":"docs/tutorials/application-server/python/#create-token","title":"Create token","text":"

The endpoint /token accepts POST requests with a payload of type application/json, containing the following fields:

app.py
@app.post(\"/token\")\ndef create_token():\n    room_name = request.json.get(\"roomName\")\n    participant_name = request.json.get(\"participantName\")\n\n    if not room_name or not participant_name:\n        return {\"errorMessage\": \"roomName and participantName are required\"}, 400\n\n    token = (\n        AccessToken(LIVEKIT_API_KEY, LIVEKIT_API_SECRET) # (1)!\n        .with_identity(participant_name) # (2)!\n        .with_grants(api.VideoGrants(room_join=True, room=room_name)) # (3)!\n    )\n    return {\"token\": token.to_jwt()} # (4)!\n
  1. A new AccessToken is created providing the LIVEKIT_API_KEY and LIVEKIT_API_SECRET.
  2. We set participant's identity in the AccessToken.
  3. We set the video grants in the AccessToken. room_join allows the user to join a room and room determines the specific room. Check out all Video Grants.
  4. Finally, we convert the AccessToken to a JWT token and send it back to the client.

The endpoint first obtains the roomName and participantName parameters from the request body. If they are not available, it returns a 400 error.

If required fields are available, a new JWT token is created. For that we use the LiveKit Python SDK:

  1. A new AccessToken is created providing the LIVEKIT_API_KEY and LIVEKIT_API_SECRET.
  2. We set participant's identity in the AccessToken.
  3. We set the video grants in the AccessToken. room_join allows the user to join a room and room determines the specific room. Check out all Video Grants.
  4. Finally, we convert the AccessToken to a JWT token and send it back to the client.
"},{"location":"docs/tutorials/application-server/python/#receive-webhook","title":"Receive webhook","text":"

The endpoint /livekit/webhook accepts POST requests with a payload of type application/webhook+json. This is the endpoint where LiveKit Server will send webhook events.

app.py
token_verifier = TokenVerifier(LIVEKIT_API_KEY, LIVEKIT_API_SECRET) # (1)!\nwebhook_receiver = WebhookReceiver(token_verifier) # (2)!\n\n\n@app.post(\"/livekit/webhook\")\ndef receive_webhook():\n    auth_token = request.headers.get(\"Authorization\") # (3)!\n\n    if not auth_token:\n        return \"Authorization header is required\", 401\n\n    try:\n        event = webhook_receiver.receive(request.data.decode(\"utf-8\"), auth_token) # (4)!\n        print(\"LiveKit Webhook:\", event) # (5)!\n        return \"ok\"\n    except:\n        print(\"Authorization header is not valid\")\n        return \"Authorization header is not valid\", 401\n
  1. Initialize a TokenVerifier using the LIVEKIT_API_KEY and LIVEKIT_API_SECRET.
  2. Initialize a WebhookReceiver using the TokenVerifier. It will help validating and decoding incoming webhook events.
  3. Get the 'Authorization' header from the HTTP request.
  4. Obtain the webhook event using the WebhookReceiver#receive method. It expects the raw body of the request and the 'Authorization' header.
  5. Consume the event as you whish.

First of all, we need a WebhookReceiver for validating and decoding incoming webhook events. We initialize it with a TokenVerifier built with the LIVEKIT_API_KEY and LIVEKIT_API_SECRET.

Inside the receive_webhook handler we:

  1. Get the Authorization header from the HTTP request.
  2. Obtain the webhook event using the WebhookReceiver#receive method. It expects the raw body of the request and the Authorization header. In this way, we can validate the event to confirm it is actually coming from our LiveKit Server.
  3. If everything is ok, you can consume the event as you whish (in this case, we just log it).

"},{"location":"docs/tutorials/application-server/ruby/","title":"Ruby","text":"

Source code

This is a minimal server application built for Ruby with Sinatra that allows:

It internally uses LiveKit Ruby SDK.

"},{"location":"docs/tutorials/application-server/ruby/#running-this-application","title":"Running this application","text":"

Download the tutorial code:

git clone https://github.com/OpenVidu/openvidu-livekit-tutorials.git\n

To run this server application, you need Ruby installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/ruby\n
  2. Install dependencies 
    bundle install\n
  3. Run the application 
    ruby app.rb\n

Info

You can run any Application Client to test against this server right away.

"},{"location":"docs/tutorials/application-server/ruby/#understanding-the-code","title":"Understanding the code","text":"

The application is a simple Ruby app using the popular Sinatra web library. It has a single file app.rb that exports two endpoints:

Let's see the code of the app.rb file:

app.rb
require 'sinatra'\nrequire 'sinatra/cors'\nrequire 'sinatra/json'\nrequire 'livekit' # (1)!\nrequire './env.rb'\n\nSERVER_PORT = ENV['SERVER_PORT'] || 6080 # (2)!\nLIVEKIT_API_KEY = ENV['LIVEKIT_API_KEY'] || 'devkey' # (3)!\nLIVEKIT_API_SECRET = ENV['LIVEKIT_API_SECRET'] || 'secret' # (4)!\n\nset :port, SERVER_PORT # (5)!\n\nregister Sinatra::Cors # (6)!\nset :allow_origin, '*' # (7)!\nset :allow_methods, 'POST,OPTIONS'\nset :allow_headers, 'content-type'\nset :bind, '0.0.0.0' # (8)!\n
  1. Import livekit library
  2. The port where the application will be listening
  3. The API key of LiveKit Server
  4. The API secret of LiveKit Server
  5. Configure the port
  6. Enable CORS support
  7. Set allowed origin (any), methods and headers
  8. Listen in any available network interface of the host

The app.rb file imports the required dependencies and loads the necessary environment variables (defined in env.rb file):

Finally the application configures the port, sets the CORS configuration for Sinatra and binds the application to all available network interfaces (0.0.0.0).

"},{"location":"docs/tutorials/application-server/ruby/#create-token-endpoint","title":"Create token endpoint","text":"

The endpoint /token accepts POST requests with a payload of type application/json, containing the following fields:

app.rb
post '/token' do\n  body = JSON.parse(request.body.read)\n  room_name = body['roomName']\n  participant_name = body['participantName']\n\n  if room_name.nil? || participant_name.nil?\n    status 400\n    return json({errorMessage: 'roomName and participantName are required'})\n  end\n\n  token = LiveKit::AccessToken.new(api_key: LIVEKIT_API_KEY, api_secret: LIVEKIT_API_SECRET) # (1)!\n  token.identity = participant_name # (2)!\n  token.add_grant(roomJoin: true, room: room_name) # (3)!\n\n  return json({token: token.to_jwt}) # (4)!\nend\n
  1. A new AccessToken is created providing the LIVEKIT_API_KEY and LIVEKIT_API_SECRET.
  2. We set participant's identity in the AccessToken.
  3. We set the video grants in the AccessToken. roomJoin allows the user to join a room and room determines the specific room. Check out all Video Grants.
  4. Finally, we convert the AccessToken to a JWT token and send it back to the client.

The endpoint first obtains the roomName and participantName parameters from the request body. If they are not available, it returns a 400 error.

If required fields are available, a new JWT token is created. For that we use the LiveKit Ruby SDK:

  1. A new AccessToken is created providing the LIVEKIT_API_KEY and LIVEKIT_API_SECRET.
  2. We set participant's identity in the AccessToken.
  3. We set the video grants in the AccessToken. roomJoin allows the user to join a room and room determines the specific room. Check out all Video Grants.
  4. Finally, we convert the AccessToken to a JWT token and send it back to the client.
"},{"location":"docs/tutorials/application-server/ruby/#receive-webhook","title":"Receive webhook","text":"

The endpoint /livekit/webhook accepts POST requests with a payload of type application/webhook+json. This is the endpoint where LiveKit Server will send webhook events.

app.rb
post '/livekit/webhook' do\n  auth_header = request.env['HTTP_AUTHORIZATION'] # (1)!\n  token_verifier = LiveKit::TokenVerifier.new(api_key: LIVEKIT_API_KEY, api_secret: LIVEKIT_API_SECRET) # (2)!\n  begin\n    token_verifier.verify(auth_header) # (3)!\n    body = JSON.parse(request.body.read) # (4)!\n    puts \"LiveKit Webhook: #{body}\" # (5)!\n    return\n  rescue => e\n    puts \"Authorization header is not valid: #{e}\"\n  end\nend\n
  1. Get the Authorization header from the HTTP request.
  2. Create a new TokenVerifier instance providing the LIVEKIT_API_KEY and LIVEKIT_API_SECRET. This will validate the webhook event to confirm it is actually coming from our LiveKit Server.
  3. Verify the Authorization header with the TokenVerifier.
  4. Now that we are sure the event is valid, we can parse the request JSON body to get the actual webhook event.
  5. Consume the event as you whish.

We need to verify that the event is coming from our LiveKit Server. For that we need the Authorization header from the HTTP request and a TokenVerifier instance built with the LIVEKIT_API_KEY and LIVEKIT_API_SECRET.

If the verification is successful, we can parse the request JSON body and consume the event (in this case, we just log it).

Remember to return a 200 OK response at the end to let LiveKit Server know that the webhook was received correctly.

"},{"location":"docs/tutorials/application-server/rust/","title":"Rust","text":"

Source code

This is a minimal server application built for Rust with Axum that allows:

It internally uses the LiveKit Rust SDK.

"},{"location":"docs/tutorials/application-server/rust/#running-this-application","title":"Running this application","text":"

Download the tutorial code:

git clone https://github.com/OpenVidu/openvidu-livekit-tutorials.git\n

To run this server application, you need Rust installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/rust\n
  2. Run the application 
    cargo run\n

Info

You can run any Application Client to test against this server right away.

"},{"location":"docs/tutorials/application-server/rust/#understanding-the-code","title":"Understanding the code","text":"

The application is a simple Rust app with a single file main.rs that exports two endpoints:

Let's see the code of the main.rs file:

main.rs
use axum::http::HeaderMap;\nuse axum::{\n    extract::Json, http::header::CONTENT_TYPE, http::Method, http::StatusCode, routing::post,\n    Router,\n};\nuse dotenv::dotenv;\nuse livekit_api::access_token::AccessToken; // (1)!\nuse livekit_api::access_token::TokenVerifier;\nuse livekit_api::access_token::VideoGrants;\nuse livekit_api::webhooks::WebhookReceiver;\nuse serde_json::{json, Value};\nuse std::env;\nuse tokio::net::TcpListener;\nuse tower_http::cors::{Any, CorsLayer};\n\n#[tokio::main]\nasync fn main() {\n    dotenv().ok(); // (2)!\n\n    let server_port = env::var(\"SERVER_PORT\").unwrap_or(\"6081\".to_string());\n\n    let cors = CorsLayer::new() // (3)!\n        .allow_methods([Method::POST])\n        .allow_origin(Any)\n        .allow_headers([CONTENT_TYPE]);\n\n    let app = Router::new() // (4)!\n        .route(\"/token\", post(create_token))\n        .route(\"/livekit/webhook\", post(receive_webhook))\n        .layer(cors);\n\n    let listener = tokio::net::TcpListener::bind(\"0.0.0.0:\".to_string() + &server_port)\n        .await\n        .unwrap();\n    axum::serve(listener, app).await.unwrap(); // (5)!\n}\n
  1. Import all necessary dependencies from the Rust LiveKit library.
  2. Load environment variables from .env file.
  3. Enable CORS support.
  4. Define /token and /livekit/webhook endpoints.
  5. Start the server listening on the specified port.

The main.rs file imports the required dependencies and loads the necessary environment variables:

Then CORS support is enabled and the endpoints are defined. Finally the axum application is initialized on the specified port.

"},{"location":"docs/tutorials/application-server/rust/#create-token-endpoint","title":"Create token endpoint","text":"

The endpoint /token accepts POST requests with a payload of type application/json, containing the following fields:

main.rs
async fn create_token(payload: Option<Json<Value>>) -> (StatusCode, Json<Value>) {\n    if let Some(payload) = payload {\n        let livekit_api_key = env::var(\"LIVEKIT_API_KEY\").unwrap_or(\"devkey\".to_string());\n        let livekit_api_secret = env::var(\"LIVEKIT_API_SECRET\").unwrap_or(\"secret\".to_string());\n\n        let room_name = match payload.get(\"roomName\") {\n            Some(value) => value,\n            None => {\n                return (\n                    StatusCode::BAD_REQUEST,\n                    Json(json!({ \"errorMessage\": \"roomName is required\" })),\n                );\n            }\n        };\n        let participant_name = match payload.get(\"participantName\") {\n            Some(value) => value,\n            None => {\n                return (\n                    StatusCode::BAD_REQUEST,\n                    Json(json!({ \"errorMessage\": \"participantName is required\" })),\n                );\n            }\n        };\n\n        let token = match AccessToken::with_api_key(&livekit_api_key, &livekit_api_secret) // (1)!\n            .with_identity(&participant_name.to_string()) // (2)!\n            .with_name(&participant_name.to_string())\n            .with_grants(VideoGrants { // (3)!\n                room_join: true,\n                room: room_name.to_string(),\n                ..Default::default()\n            })\n            .to_jwt() // (4)!\n        {\n            Ok(token) => token,\n            Err(_) => {\n                return (\n                    StatusCode::INTERNAL_SERVER_ERROR,\n                    Json(json!({ \"errorMessage\": \"Error creating token\" })),\n                );\n            }\n        };\n\n        return (StatusCode::OK, Json(json!({ \"token\": token }))); // (5)!\n    } else {\n        return (\n            StatusCode::BAD_REQUEST,\n            Json(json!({ \"errorMessage\": \"roomName and participantName are required\" })),\n        );\n    }\n}\n
  1. A new AccessToken is created providing the LIVEKIT_API_KEY and LIVEKIT_API_SECRET.
  2. We set participant's name and identity in the AccessToken.
  3. We set the video grants in the AccessToken. room_join allows the user to join a room and room determines the specific room. Check out all Video Grants.
  4. We convert the AccessToken to a JWT token.
  5. Finally, the token is sent back to the client.

The endpoint first obtains the roomName and participantName parameters from the request body. If they are not available, it returns a 400 error.

If required fields are available, a new JWT token is created. For that we use the LiveKit Rust SDK:

  1. A new AccessToken is created providing the LIVEKIT_API_KEY and LIVEKIT_API_SECRET.
  2. We set participant's name and identity in the AccessToken.
  3. We set the video grants in the AccessToken. room_join allows the user to join a room and room determines the specific room. Check out all Video Grants.
  4. We convert the AccessToken to a JWT token.
  5. Finally, the token is sent back to the client.
"},{"location":"docs/tutorials/application-server/rust/#receive-webhook","title":"Receive webhook","text":"

The endpoint /livekit/webhook accepts POST requests with a payload of type application/webhook+json. This is the endpoint where LiveKit Server will send webhook events.

main.rs
async fn receive_webhook(headers: HeaderMap, body: String) -> (StatusCode, String) {\n    let livekit_api_key = env::var(\"LIVEKIT_API_KEY\").unwrap_or(\"devkey\".to_string());\n    let livekit_api_secret = env::var(\"LIVEKIT_API_SECRET\").unwrap_or(\"secret\".to_string());\n    let token_verifier = TokenVerifier::with_api_key(&livekit_api_key, &livekit_api_secret); // (1)!\n    let webhook_receiver = WebhookReceiver::new(token_verifier); // (2)!\n\n    let auth_header = match headers.get(\"Authorization\") { // (3)!\n        Some(header_value) => match header_value.to_str() {\n            Ok(header_str) => header_str,\n            Err(_) => {\n                return (\n                    StatusCode::BAD_REQUEST,\n                    \"Invalid Authorization header format\".to_string(),\n                );\n            }\n        },\n        None => {\n            return (\n                StatusCode::BAD_REQUEST,\n                \"Authorization header is required\".to_string(),\n            );\n        }\n    };\n\n    match webhook_receiver.receive(&body, auth_header) { // (4)!\n        Ok(event) => {\n            println!(\"LiveKit WebHook: {:?}\", event); // (5)!\n            return (StatusCode::OK, \"ok\".to_string());\n        }\n        Err(_) => {\n            return (\n                StatusCode::UNAUTHORIZED,\n                \"Error validating webhook event\".to_string(),\n            );\n        }\n    }\n}\n
  1. Create a TokenVerifier with the LIVEKIT_API_KEY and LIVEKIT_API_SECRET. This will validate the webhook event to confirm it is actually coming from our LiveKit Server.
  2. Create a WebhookReceiver with the TokenVerifier.
  3. Get the Authorization header from the HTTP request.
  4. Obtain the webhook event using the WebhookReceiver#receive method. It expects the raw string body of the request and the Authorization header.
  5. Consume the event as you wish.

We declare as function parameters the map of headers (headers: HeaderMap) and the raw body (body: String) of the HTTP request. We will need both of them to validate and decode the incoming webhook event. We then:

  1. Create a TokenVerifier with the LIVEKIT_API_KEY and LIVEKIT_API_SECRET. This will validate the webhook event to confirm it is actually coming from our LiveKit Server.
  2. Create a WebhookReceiver with the TokenVerifier.
  3. Get the Authorization header from the HTTP request.
  4. Obtain the webhook event using the WebhookReceiver#receive method. It expects the raw string body of the request and the Authorization header.
  5. Consume the event as you wish (in this case, we just log it).

Remember to return a 200 OK response at the end to let LiveKit Server know that the webhook was received correctly.

"},{"location":"docs/tutorials/shared/application-server-tabs/","title":"Application server tabs","text":"Node Go Ruby Java Python Rust PHP .NET

To run this server application, you need Node installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/node\n
  2. Install dependencies 
    npm install\n
  3. Run the application 
    npm start\n

To run this server application, you need Go installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/go\n
  2. Run the application 
    go run main.go\n

To run this server application, you need Ruby installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/ruby\n
  2. Install dependencies 
    bundle install\n
  3. Run the application 
    ruby app.rb\n

To run this server application, you need Java and Maven installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/java\n
  2. Run the application 
    mvn spring-boot:run\n

To run this server application, you need Python 3 installed on your device.

  1. Navigate into the server directory

    cd openvidu-livekit-tutorials/application-server/python\n

  2. Create a python virtual environment

    python -m venv venv\n

  3. Activate the virtual environment

    Windows macOS Linux 
    .\\venv\\Scripts\\activate\n
    . ./venv/bin/activate\n
    . ./venv/bin/activate\n

  4. Install dependencies

    pip install -r requirements.txt\n

  5. Run the application

    python app.py\n

To run this server application, you need Rust installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/rust\n
  2. Run the application 
    cargo run\n

To run this server application, you need PHP and Composer installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/php\n
  2. Install dependencies 
    composer install\n
  3. Run the application 
    composer start\n

To run this server application, you need .NET installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/dotnet\n
  2. Run the application 
    dotnet run\n

Warning

This .NET server application needs the LIVEKIT_API_SECRET env variable to be at least 32 characters long. Make sure to update it here and in your OpenVidu Server.

"},{"location":"docs/tutorials/shared/configure-urls/","title":"Configure urls","text":"

Configure the URLs

For local development, leave APPLICATION_SERVER_URL and LIVEKIT_URL variables empty. The function configureUrls() will automatically configure them with default values. However, for production, you should configure these variables with the correct URLs depending on your deployment.

"},{"location":"docs/tutorials/shared/dotnet/","title":"Dotnet","text":"

To run this server application, you need .NET installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/dotnet\n
  2. Run the application 
    dotnet run\n

Warning

This .NET server application needs the LIVEKIT_API_SECRET env variable to be at least 32 characters long. Make sure to update it here and in your OpenVidu Server.

"},{"location":"docs/tutorials/shared/go/","title":"Go","text":"

To run this server application, you need Go installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/go\n
  2. Run the application 
    go run main.go\n
"},{"location":"docs/tutorials/shared/java/","title":"Java","text":"

To run this server application, you need Java and Maven installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/java\n
  2. Run the application 
    mvn spring-boot:run\n
"},{"location":"docs/tutorials/shared/node/","title":"Node","text":"

To run this server application, you need Node installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/node\n
  2. Install dependencies 
    npm install\n
  3. Run the application 
    npm start\n
"},{"location":"docs/tutorials/shared/openvidu-components-files/","title":"Openvidu components files","text":"

This tutorial is an Angular project generated with Angular CLI tool. Therefore, you will see many configuration files and other components that are not the primary focus of this tutorial. We will concentrate on the following files in the src directory:

"},{"location":"docs/tutorials/shared/openvidu-components-import/","title":"Openvidu components import","text":"

In your main.ts application file, import the it and configure it as follows:

// Other imports ...\n\nimport { OpenViduComponentsModule, OpenViduComponentsConfig } from 'openvidu-components-angular';\n\nconst config: OpenViduComponentsConfig = {\n    production: true,\n};\n\nbootstrapApplication(AppComponent, {\n    providers: [\n        importProvidersFrom(\n            OpenViduComponentsModule.forRoot(config)\n            // Other imports ...\n        ),\n        provideAnimations(),\n    ],\n}).catch((err) => console.error(err));\n
"},{"location":"docs/tutorials/shared/openvidu-components-install/","title":"Openvidu components install","text":"

To use OpenVidu Components Angular in your application, you need to install the library and import the OpenViduComponentsModule in your Angular module. Let's see how to do this:

  1. Create an Angular Project (version 17 or higher)

    To begin, you will need to create a new Angular project if you haven't already. Ensure you have Node.js and the Angular CLI installed. Then, run the following command to create a new Angular project:

    ng new your-project-name\n

    Replace your-project-name with the desired name for your project.

  2. Add Angular Material to your project

    OpenVidu Components Angular needs Angular Material, which provides a range of UI components. To add Angular Material to your project, navigate to your project directory and run:

    ng add @angular/material\n

  3. Install OpenVidu Components Angular

    With your Angular project set up, it's time to add videoconferencing capabilities with OpenVidu Components Angular. Install the library using npm:

    npm install openvidu-components-angular\n

  4. Import and use OpenVidu Components Angular

    To use OpenVidu Components Angular in your application, you need to:

    1. Import the OpenViduComponentsModule in your Angular application.
    2. Configure the module with the OpenViduComponentsConfig object.
    3. Add the component to your template file.
    4. Assign the OpenVidu token and LiveKit URL to the component.
    5. Customize the appearance of the components using CSS variables.
"},{"location":"docs/tutorials/shared/openvidu-components-styles/","title":"Openvidu components styles","text":"

The OpenVidu Components Angular library provides a set of CSS variables that you can use to customize the appearance of the components. You can define these variables in your application's global styles file (e.g. styles.scss).

:root {\n    --ov-primary-color: #303030; /* Primary interface color */\n    --ov-secondary-color: #3e3f3f; /* Secondary interface color */\n    --ov-tertiary-color: #598eff; /* Tertiary accent color for elements */\n    --ov-warn-color: #eb5144; /* Warning color for alerts and notifications */\n    --ov-light-color: #e6e6e6; /* Light color for elements */\n\n    --ov-accent-color: #ffae35; /* Accent color for standout UI elements */\n\n    --ov-logo-background-color: #3a3d3d; /* Background color for the logo area */\n    --ov-text-color: #ffffff; /* Default text color */\n\n    --ov-panel-text-color: #1d1d1d; /* Text color for panel elements */\n    --ov-panel-background: #ffffff; /* Background color for panels */\n\n    --ov-buttons-radius: 50%; /* Border-radius for circular buttons */\n    --ov-leave-button-radius: 10px; /* Border-radius for the leave button */\n    --ov-video-radius: 5px; /* Border-radius for video elements */\n    --ov-panel-radius: 5px; /* Border-radius for panel elements */\n}\n
"},{"location":"docs/tutorials/shared/php/","title":"Php","text":"

To run this server application, you need PHP and Composer installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/php\n
  2. Install dependencies 
    composer install\n
  3. Run the application 
    composer start\n
"},{"location":"docs/tutorials/shared/python/","title":"Python","text":"

To run this server application, you need Python 3 installed on your device.

  1. Navigate into the server directory

    cd openvidu-livekit-tutorials/application-server/python\n

  2. Create a python virtual environment

    python -m venv venv\n

  3. Activate the virtual environment

    Windows macOS Linux 
    .\\venv\\Scripts\\activate\n
    . ./venv/bin/activate\n
    . ./venv/bin/activate\n

  4. Install dependencies

    pip install -r requirements.txt\n

  5. Run the application

    python app.py\n
"},{"location":"docs/tutorials/shared/ruby/","title":"Ruby","text":"

To run this server application, you need Ruby installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/ruby\n
  2. Install dependencies 
    bundle install\n
  3. Run the application 
    ruby app.rb\n
"},{"location":"docs/tutorials/shared/run-application-server/","title":"Run application server","text":"Node Go Ruby Java Python Rust PHP .NET

To run this server application, you need Node installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/node\n
  2. Install dependencies 
    npm install\n
  3. Run the application 
    npm start\n

To run this server application, you need Go installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/go\n
  2. Run the application 
    go run main.go\n

To run this server application, you need Ruby installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/ruby\n
  2. Install dependencies 
    bundle install\n
  3. Run the application 
    ruby app.rb\n

To run this server application, you need Java and Maven installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/java\n
  2. Run the application 
    mvn spring-boot:run\n

To run this server application, you need Python 3 installed on your device.

  1. Navigate into the server directory

    cd openvidu-livekit-tutorials/application-server/python\n

  2. Create a python virtual environment

    python -m venv venv\n

  3. Activate the virtual environment

    Windows macOS Linux 
    .\\venv\\Scripts\\activate\n
    . ./venv/bin/activate\n
    . ./venv/bin/activate\n

  4. Install dependencies

    pip install -r requirements.txt\n

  5. Run the application

    python app.py\n

To run this server application, you need Rust installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/rust\n
  2. Run the application 
    cargo run\n

To run this server application, you need PHP and Composer installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/php\n
  2. Install dependencies 
    composer install\n
  3. Run the application 
    composer start\n

To run this server application, you need .NET installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/dotnet\n
  2. Run the application 
    dotnet run\n

Warning

This .NET server application needs the LIVEKIT_API_SECRET env variable to be at least 32 characters long. Make sure to update it here and in your OpenVidu Server.

"},{"location":"docs/tutorials/shared/run-openvidu-locally/","title":"Run openvidu locally","text":"

  1. Download OpenVidu

    git clone https://github.com/OpenVidu/openvidu-local-deployment\n

  2. Configure the local deployment

    Windows macOS Linux 
    cd openvidu-local-deployment/community\n.\\configure_lan_private_ip_windows.bat\n
    cd openvidu-local-deployment/community\n./configure_lan_private_ip_macos.sh\n
    cd openvidu-local-deployment/community\n./configure_lan_private_ip_linux.sh\n

  3. Run OpenVidu

    docker compose up\n
"},{"location":"docs/tutorials/shared/run-openvidu-server/","title":"Run openvidu server","text":"Run OpenVidu locallyDeploy OpenVidu

  1. Download OpenVidu

    git clone https://github.com/OpenVidu/openvidu-local-deployment\n

  2. Configure the local deployment

    Windows macOS Linux 
    cd openvidu-local-deployment/community\n.\\configure_lan_private_ip_windows.bat\n
    cd openvidu-local-deployment/community\n./configure_lan_private_ip_macos.sh\n
    cd openvidu-local-deployment/community\n./configure_lan_private_ip_linux.sh\n

  3. Run OpenVidu

    docker compose up\n

To use a production-ready OpenVidu deployment, visit the official deployment guide.

"},{"location":"docs/tutorials/shared/rust/","title":"Rust","text":"

To run this server application, you need Rust installed on your device.

  1. Navigate into the server directory 
    cd openvidu-livekit-tutorials/application-server/rust\n
  2. Run the application 
    cargo run\n
"},{"location":"docs/tutorials/shared/testing-other-devices/","title":"Testing other devices","text":"

Accessing your application client from other devices in your local network

One advantage of running OpenVidu locally is that you can test your application client with other devices in your local network very easily without worrying about SSL certificates.

Access your application client through https://xxx-yyy-zzz-www.openvidu-local.dev:5443, where xxx-yyy-zzz-www part of the domain is your LAN private IP address with dashes (-) instead of dots (.). For more information, see section Accessing your app from other devices in your network.

"},{"location":"docs/ui-components/angular-components/","title":"Angular Components","text":""},{"location":"docs/ui-components/angular-components/#introduction","title":"Introduction","text":"

Angular Components are the simplest way to create real-time videoconferencing apps with Angular. There's no need to manage state or low-level events; Angular Components from OpenVidu handle all the complexity for you.

This Angular library, offers developers a robust set of powerful and comprehensive videoconferencing components. These components are highly adaptable, extendable, and easily replaceable, allowing you to tailor them to your application's specific requirements.

Angular Components

The primary goal of the OpenVidu team is to minimize the developer's effort when creating videoconferencing applications. Angular Components significantly contribute to this objective for several reasons:

"},{"location":"docs/ui-components/angular-components/#how-to-use","title":"How to use","text":"

Using Angular Components in your application is straightforward. The official Angular Components Tutorials cover everything Angular Components offers, from customizing colors and branding logos to injecting new custom features.

"},{"location":"docs/ui-components/angular-components/#featured-components","title":"Featured Components","text":""},{"location":"docs/ui-components/angular-components/#prefabricated-components","title":"Prefabricated Components","text":"

Angular Components provides a wide range of prefabricated components that you can use to build your videoconferencing application in a matter of minutes. These components are designed for direct use without any extensions or modifications.

Toolbar Layout Stream ChatPanel ParticipantsPanel ParticipantPanelItem ActivitiesPanel RecordingActivity BroadcastingActivity AdminLogin AdminDashboard"},{"location":"docs/ui-components/angular-components/#directives","title":"Directives","text":"

Angular Components provides two types of directives: Structural Directives and Attribute Directives.

"},{"location":"docs/ui-components/angular-components/#events","title":"Events","text":"

Each component in Angular Components emits a set of events that you can listen to in your application to trigger specific actions.

These events are designed to provide you with the flexibility to customize your videoconferencing application according to your requirements.

You can check out all component events in the Angular Components API Reference.

"},{"location":"docs/ui-components/angular-components/#applications","title":"Applications","text":"

A practical example showcases the potential of Angular Components is our production-ready flagship application, OpenVidu Call. This application is built using Angular Components and demonstrates the power and flexibility of the library.

"},{"location":"docs/ui-components/angular-components/#references","title":"References","text":""},{"location":"docs/ui-components/react-components/","title":"React Components","text":""},{"location":"docs/ui-components/react-components/#introduction","title":"Introduction","text":"

React Components are the simplest way to create real-time audio/video applications with React. There's no need to manage state or low level events, React Components from LiveKit handle all the complexity for you.

"},{"location":"docs/ui-components/react-components/#featured-components","title":"Featured Components","text":"

A curated set of components that we believe are essential and serve as a solid foundation for most applications.

"},{"location":"docs/ui-components/react-components/#prefabricated-components","title":"Prefabricated Components","text":"

Prefabricated are constructed using components and enhanced with additional functionalities, unique styles, and practical defaults. They are designed for immediate use and are not meant to be extended.

AudioConference Chat ControlBar MediaDeviceMenu PreJoin VideoConference"},{"location":"docs/ui-components/react-components/#contexts","title":"Contexts","text":"

Contexts are used to allow child components to access parent state without having to pass it down the component tree via props

Participant Room Chat Feature Layout Pin TrackRef"},{"location":"docs/ui-components/react-components/#hooks","title":"Hooks","text":"

Hooks are functions that let you use state and other React features without writing a class. They are functions that let you \u201chook into\u201d React state and lifecycle features from function components.

React Components provides a set of hooks that you can use to interact with the components and the underlying LiveKit client.

See Reference

"},{"location":"docs/ui-components/react-components/#applications","title":"Applications","text":"

A practical example showcases the potential of React Components is the production-ready flagship application, LiveKit Meet. This application is built using React Components and demonstrates the power and flexibility of the library.

"},{"location":"docs/ui-components/react-components/#references","title":"References","text":""}]} \ No newline at end of file