ambiser
/
openvidu
mirror of https://github.com/OpenVidu/openvidu.git
8
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity
openvidu/openvidu-components-angular/migration-guide.md

13 KiB
Raw Permalink Blame History

OpenVidu Angular 3.0.0 Migration Guide

  1. Introduction

Mejoras:

publicacion de multiples tracks por participante

Desventajas

Backgrounds no existe en openvidu 3.0.0 Captions no existe en openvidu 3.0.0

  1. Updating Dependencies

OpenVidu Components 2.x was developed using Angular 14. Now, this version 3 is developed with Angular 15. This means that you will need to update your Angular version to 15.0.0 or higher. Check Angular Migration Guide for more information: https://update.angular.io/

Install the new version of OpenVidu Components:

npm install openvidu-components-angular@3.0.0

  1. Source Code Migration

    Components

    • ActivitiesPanelComponent (ov-activities-panel):

      Events / @Output
      API Directives / @Input

    • BroadcastingActivityComponent (ov-broadcasting-activity):

      Events / @Output
      • onBroadcastingStartRequested (Describe onBroadcastingStartRequested event here)
      • onRecordingPlayClicked (Describe onRecordingPlayClicked event here)
      API Directives / @Input
      • broadcastingError has been deleted

    • ChatPanelComponent (ov-chat-panel):

      Events / @Output
      API Directives / @Input

    • LayoutComponent (ov-layout):

      Events / @Output
      API Directives / @Input

    • PanelComponent (ov-panel):

      Events / @Output
      API Directives / @Input

    • ParticipantPanelItemComponent (ov-participant-panel-item):

      Events / @Output
      API Directives / @Input

    • ParticipantsPanelComponent (ov-participants-panel):

      Events / @Output
      API Directives / @Input

    • RecordingActivityComponent (ov-recording-activity):

      Events / @Output
      • onRecordingStartRequested (Describe onRecordingStartRequested event here)
      • onRecordingStopRequested (Describe onRecordingStopRequested event here)
      API Directives / @Input
      • recordingError has been deleted
      • recordingsList has been deleted

    • StreamComponent (ov-stream):

      Events / @Output
      API Directives / @Input
      • settingsButton has been replaced by videoControls
      • stream input has been replaced by track input. Check the Pipes section for more information.

    • ToolbarComponent (ov-toolbar):

      Events / @Output
      • backgroundEffectsButton has been deleted TODO: Try to add it again!!
      • captionsButton has been deleted
      • displaySessionName has been renamed to displayRoomName
      API Directives / @Input

    • VideoconferenceComponent (ov-videoconference):

      Events / @Output
      • onActivitiesPanelDeleteRecordingClicked has been replaced by onRecordingDeleteRequested
      • onActivitiesPanelForceRecordingUpdate has been deleted
      • onActivitiesPanelPlayRecordingClicked has been replaced by onRecordingPlayClicked
      • onActivitiesPanelStartBroadcastingClicked have been replaced by onBroadcastingStartRequested
      • onActivitiesPanelStartRecordingClicked and onToolbarStartRecordingClicked has been replaced by onRecordingStartRequested
      • onActivitiesPanelStopBroadcastingClicked and onToolbarStopBroadcastingClicked has been replaced by onBroadcastingStopRequested
      • onActivitiesPanelStopRecordingClicked and onToolbarStopRecordingClicked has been replaced by onRecordingStopRequested
      • // TODO: langChanged
      • onNodeCrashed has been deleted
      • onSessionCreated has been replaced by onRoomCreated
      • onToolbarActivitiesPanelButtonClicked has been replaced by onActivitiesPanelStatusChanged
      • onToolbarCameraButtonClicked has been replaced by onVideoEnabledChanged
      • onToolbarChatPanelButtonClicked has been replaced by onChatPanelStatusChanged
      • onToolbarFullscreenButtonClicked has been replaced by onFullscreenEnabledChanged
      • onToolbarLeaveButtonClicked has been replaced by onRoomDisconnected
      • onToolbarMicrophoneButtonClicked has been replaced by onAudioEnabledChanged
      • onToolbarParticipantsPanelButtonClicked has been replaced by onParticipantsPanelStatusChanged
      • onToolbarScreenshareButtonClicked has been replaced by onScreenShareEnabledChanged
      • onSettingsPanelStatusChanged has been added to notify when the settings panel status has changed
      • onTokenRequested has been added to notify when a token need to be created
      • onVideoDeviceChanged has been added to notify when the video device has changed
      • onAudioDeviceChanged has been added to notify when the audio device has changed
      • onRecordingDownloadClicked has been added to notify when the user clicks on the download button of a recording
      • onActivitiesPanelPlayRecordingClicked has been replaced by onRecordingPlayClicked

    • Admin Login (ov-admin-login):

      • onLoginButtonClicked returns an object with the username and password instead of a secret string
      API Directives / @Input
      • audioMuted has been replaced by audioEnabled
      • broadcastingActivityBroadcastingError has been deleted
      • captionsLang has been deleted
      • captionsLangOptions has been deleted
      • recordingActivityRecordingError has been deleted
      • recordingActivityRecordingsList has been deleted
      • streamSettingsButton has been replaced by streamVideoControls
      • toolbarBackgroundEffectsButton has been deleted TODO: Try to add it again!!
      • toolbarCaptionsButton has been deleted
      • toolbarDisplaySessionName has been renamed to toolbarDisplayRoomName
      • videoMuted has been replaced by videoEnabled

    Web Component

    Apply the same Outputs and Inputs changes as in the VideoconferenceComponent

    Pipes

    • stream has been replaced by track

      In version 2.X of openvidu-angular, the ParticipantStreamsPipe (streams) was employed to extract streams from both the local participant and remote participants' lists. Its purpose was to inject these streams into the StreamComponent (ov-stream).

      However, in the current version (3.0.0), StreamComponent now requires direct access to participant tracks. Consequently, the streams pipe has been replaced by the RemoteParticipantTracksPipe (tracks), exclusively used for remote participants' lists. Local participant tracks can now be obtained directly from the track accessor of the ParticipantModel class. This accessor and pipe return an array of ParticipantTrackPublication objects, simplifying the handling of tracks.

      In v2.X (using streams pipe):
      <div class="item" *ngFor="let stream of localParticipant | streams">
	<ov-stream [stream]="stream"></ov-stream>
</div>
<div class="item" *ngFor="let stream of remoteParticipants | streams">
	<ov-stream [stream]="stream"></ov-stream>
</div>
      In v3.0.0 (using tracks pipe):
      <div *ngFor="let track of localParticipant.tracks">
	<ov-stream [track]="track"></ov-stream>
</div>
<div *ngFor="let track of remoteParticipants | tracks">
	<ov-stream [track]="track"></ov-stream>
</div>

    Services

    • Broadcasting Service (BroadcastingService):
      • broadcastingStatusObs observable now pushes an BroadcastingStatusInfo object instead of an BroadcastingStatus in every update.
      • startBroadcasting method has been replaced by setBroadcastingStarting
      • stopBroadcasting method has been replaced by setBroadcastingStopping
      • updateStatus method has been deleted. Now the status is updated automatically when the status changes.

      You can check the BroadcastingService documentation for more information.

    • OpenVidu Service (OpenViduService):
      • disconnect method has been renamed to disconnectRoom
      • getRemoteConnections method has been moved to ParticipantService and renamed to getRemoteParticipants.
      • getSession method has been renamed to getRoom.
      • isSessionConnected method has been renamed to isRoomConnected.
      • publishCamera and unpublishCamera methods have been moved to ParticipantService and renamed to setCameraEnabled
      • publishScreen and unpublishScreen methods have been renamed to setScreenShareEnabled
      • isSttReadyObs observable has been deleted
      • connectRoom method has been added
      • getRoomName method has been added to get the name of the room
    • Panel Service (PanelService):
      • panelOpenedObs observable has been renamed to panelStatusObs which returns a PanelStatusInfo object instead of a PanelEvent in every update.
      • isBackgroundEffectsPanelOpened method has been deleted

      You can check the PanelService documentation for more information.

    • Participant Service (ParticipantService):
      • amIModerator method has been renamed to amIRoomAdmin
      • toggleScreenshare method has been renamed to switchScreenShare
      • isMyVideoActive method has been renamed to isMyCameraEnabled
      • isMyAudioActive method has been renamed to isMyMicrophoneEnabled
      • publishVideo method has been renamed to setCameraEnabled
      • publishAudio method has been renamed to setMicrophoneEnabled

      You can check the ParticipantService documentation for more information.

    • Recording Service (RecordingService):
      • recordingStatusObs observable now pushes an RecordingStatusInfo object instead of an RecordingStatus in every update.
      • forceUpdateRecordings method has been deleted. Now the recordings are updated automatically when the status changes.
      • updateStatus method has been deleted. Now the status is updated automatically when the status changes.

      You can check the RecordingService documentation for more information.

    Models

    • ParticipantAbstracModel has been renamed to ParticipantModel. In addition, the ParticipantModel class has been refactored and now it has a new property called tracks that contains all the tracks of the participant. This property is an array of ParticipantTrackPublication objects.

    • StreamModel has been renamed to ParticipantTrackPublication.

    Interfaces

    • BroadcastingError has been deleted
    • CaptionsLangOptions has been deleted
    • PanelEvent has been renamed to PanelStatusInfo
    • StreamModel has been renamed to ParticipantTrackPublication
    • TokenModel has been deleted

  2. References and Additional Resources

  3. FAQ (Frequently Asked Questions)

    Why should I migrate to version 3.0.0 of OpenVidu Angular?

    TODO

    Which versions of Angular are compatible with OpenVidu Angular 3.0.0?

    OpenVidu Angular 3.0.0 is compatible with Angular 15 and later versions. Make sure to update your Angular project to version 15 or higher to use this version of OpenVidu Angular.

    How can I check the current version of Angular in my project?

    You can check the current version of Angular in your project by running the following command in your terminal:

    ng version

    This will provide you with detailed information about the version of Angular you are using in your project.

    Where can I find examples of using the new features and API changes?

    You can find examples of using the new features and API changes in the official documentation of OpenVidu Angular 3.0.0. Visit the official tutorials.

    How can I contribute or report issues with the new version?

    If you wish to contribute to the development of OpenVidu Angular or report issues, you can do so through the collaborative development platform, such as GitHub. Visit the official repository at OpenVidu Angular repository for information on how to contribute and how to report issues. Your participation is valuable in improving the library and assisting other users.

  4. Support and Community