Hi ich kann gern mal demnächst™ an der EAH noch mal fragen wie das mit Räumen ist wenn Interesse besteht.
Hab aber vorher noch mal ne eigene Frage hier bzgl. rxjs
Also, ich arbeite gerade an etwas das den Stream einer Cam nutzen soll und wollte ganz einfach einen Record-Button einblenden, wenn nichts gemacht wird und einen Stop-Button wenn denn aufgenommen wird.
Da dachte ich mir hey du kannst ja ein Observable nutzen damit ich den MediaStream auf dessen state überwachen kann. Hat sich dann herausgestellt, dass das nicht gehen kann, da dass ja ein Promise ist und nur einmal resolved. Ein Freund hat mir dann empfohlen, es doch andersherum zu machen und mit ein Observable aus den Click Events meiner Buttons zu machen. Klappt auch super, ich zeug euch mal wie das ist:

export class CameraComponent implements OnInit, AfterViewInit {
    @ViewChild('video', { static: true }) public video: ElementRef;
    @ViewChild('recordStream', { static: false, read: ElementRef })
    public recordStreamButton: ElementRef;
    @ViewChild('stopStream', { static: false, read: ElementRef })
    public stopStreamButton: ElementRef;

    public async ngAfterViewInit() {
        const activateButtonClick$ = fromEvent(
            this.recordStreamButton.nativeElement,
            'click',
        );

        const deactivateButtonClick$ = fromEvent(
            this.stopStreamButton.nativeElement,
            'click',
        );

        const activated$ = merge(
            activateButtonClick$.pipe(mapTo(true)),
            deactivateButtonClick$.pipe(mapTo(false)),
        );

        activated$.subscribe(activated => {
            activated ? this.getVideoStream() : this.stopCamera();
        });
    }

<button
        #recordStream
        class="custom-button"
        color="primary"
        mat-fab
    >
        <mat-icon inline="true">videocam</mat-icon>
    </button>

    <button
        #stopStream
        class="custom-button"
        color="warn"
        mat-fab
    >
        <mat-icon inline="true">videocam_off</mat-icon>
    </button>

so und jetzt frage ich mich ob ich eigentlich wirklich einen Vorteil davon habe das so zu tun? Letztlich könnte ich ja einfach in getVideoStream oder stopCamera eine Variable isActive togglen und gut oder?

Hi ich kann gern mal demnächst™ an der EAH noch mal fragen wie das mit Räumen ist wenn Interesse besteht.
Hab aber vorher noch mal ne eigene Frage hier bzgl. rxjs
Also, ich arbeite gerade an etwas das den Stream einer Cam nutzen soll und wollte ganz einfach einen Record-Button einblenden, wenn nichts gemacht wird und einen Stop-Button wenn denn aufgenommen wird.
Da dachte ich mir hey du kannst ja ein Observable nutzen damit ich den MediaStream auf dessen state überwachen kann. Hat sich dann herausgestellt, dass das nicht gehen kann, da dass ja ein Promise ist und nur einmal resolved. Ein Freund hat mir dann empfohlen, es doch andersherum zu machen und mir ein Observable aus den Click Events meiner Buttons zu machen. Klappt auch super, ich zeug euch mal wie das ist:

export class CameraComponent implements OnInit, AfterViewInit {
    @ViewChild('video', { static: true }) public video: ElementRef;
    @ViewChild('recordStream', { static: false, read: ElementRef })
    public recordStreamButton: ElementRef;
    @ViewChild('stopStream', { static: false, read: ElementRef })
    public stopStreamButton: ElementRef;

    public async ngAfterViewInit() {
        const activateButtonClick$ = fromEvent(
            this.recordStreamButton.nativeElement,
            'click',
        );

        const deactivateButtonClick$ = fromEvent(
            this.stopStreamButton.nativeElement,
            'click',
        );

        const activated$ = merge(
            activateButtonClick$.pipe(mapTo(true)),
            deactivateButtonClick$.pipe(mapTo(false)),
        );

        activated$.subscribe(activated => {
            activated ? this.getVideoStream() : this.stopCamera();
        });
    }

<button
        #recordStream
        class="custom-button"
        color="primary"
        mat-fab
    >
        <mat-icon inline="true">videocam</mat-icon>
    </button>

    <button
        #stopStream
        class="custom-button"
        color="warn"
        mat-fab
    >
        <mat-icon inline="true">videocam_off</mat-icon>
    </button>

so und jetzt frage ich mich ob ich eigentlich wirklich einen Vorteil davon habe das so zu tun? Letztlich könnte ich ja einfach in getVideoStream oder stopCamera eine Variable isActive togglen und gut oder?

Hi ich kann gern mal demnächst™ an der EAH noch mal fragen wie das mit Räumen ist wenn Interesse besteht.
Hab aber vorher noch mal ne eigene Frage hier bzgl. rxjs
Also, ich arbeite gerade an etwas das den Stream einer Cam nutzen soll und wollte ganz einfach einen Record-Button einblenden, wenn nichts gemacht wird und einen Stop-Button wenn denn aufgenommen wird.
Da dachte ich mir hey du kannst ja ein Observable nutzen damit ich den MediaStream auf dessen state überwachen kann. Hat sich dann herausgestellt, dass das nicht gehen kann, da dass ja ein Promise ist und nur einmal resolved. Ein Freund hat mir dann empfohlen, es doch andersherum zu machen und mir ein Observable aus den Click Events meiner Buttons zu machen. Klappt auch super, ich zeug euch mal wie das ist:

export class CameraComponent implements OnInit, AfterViewInit {
    @ViewChild('video', { static: true }) public video: ElementRef;
    @ViewChild('recordStream', { static: false, read: ElementRef })
    public recordStreamButton: ElementRef;
    @ViewChild('stopStream', { static: false, read: ElementRef })
    public stopStreamButton: ElementRef;

    public async ngAfterViewInit() {
        const activateButtonClick$ = fromEvent(
            this.recordStreamButton.nativeElement,
            'click',
        );

        const deactivateButtonClick$ = fromEvent(
            this.stopStreamButton.nativeElement,
            'click',
        );

        const activated$ = merge(
            activateButtonClick$.pipe(mapTo(true)),
            deactivateButtonClick$.pipe(mapTo(false)),
        );

        activated$.subscribe(activated => {
            activated ? this.getVideoStream() : this.stopCamera();
        });
    }

<button
        #recordStream
        class="custom-button"
        color="primary"
        mat-fab
    >
        <mat-icon inline="true">videocam</mat-icon>
    </button>

    <button
        #stopStream
        class="custom-button"
        color="warn"
        mat-fab
    >
        <mat-icon inline="true">videocam_off</mat-icon>
    </button>

so und jetzt frage ich mich ob ich eigentlich wirklich einen Vorteil davon habe das so zu tun? Letztlich könnte ich ja einfach in getVideoStream oder stopCamera eine Variable isActive togglen und gut oder?

Hi ich kann gern mal demnächst™ an der EAH noch mal fragen wie das mit Räumen ist wenn Interesse besteht.
Hab aber vorher noch mal ne eigene Frage hier bzgl. rxjs
Also, ich arbeite gerade an etwas das den Stream einer Cam nutzen soll und wollte ganz einfach einen Record-Button einblenden, wenn nichts gemacht wird und einen Stop-Button wenn denn aufgenommen wird.
Da dachte ich mir hey du kannst ja ein Observable nutzen damit ich den MediaStream auf dessen state überwachen kann. Hat sich dann herausgestellt, dass das nicht gehen kann, da dass ja ein Promise ist und nur einmal resolved. Ein Freund hat mir dann empfohlen, es doch andersherum zu machen und mir ein Observable aus den Click Events meiner Buttons zu machen. Klappt auch super, ich zeug euch mal wie das ist:

export class CameraComponent implements OnInit, AfterViewInit {
    @ViewChild('video', { static: true }) public video: ElementRef;
    @ViewChild('recordStream', { static: false, read: ElementRef })
    public recordStreamButton: ElementRef;
    @ViewChild('stopStream', { static: false, read: ElementRef })
    public stopStreamButton: ElementRef;

    public async ngAfterViewInit() {
        const activateButtonClick$ = fromEvent(
            this.recordStreamButton.nativeElement,
            'click',
        );

        const deactivateButtonClick$ = fromEvent(
            this.stopStreamButton.nativeElement,
            'click',
        );

        const activated$ = merge(
            activateButtonClick$.pipe(mapTo(true)),
            deactivateButtonClick$.pipe(mapTo(false)),
        );

        activated$.subscribe(activated => {
            activated ? this.getVideoStream() : this.stopCamera();
        });
    }

<button
    #recordStream
    class="custom-button"
    color="primary"
    mat-fab
>
    <mat-icon inline="true">videocam</mat-icon>
</button>

<button
    #stopStream
    class="custom-button"
    color="warn"
    mat-fab
>
    <mat-icon inline="true">videocam_off</mat-icon>
</button>

so und jetzt frage ich mich ob ich eigentlich wirklich einen Vorteil davon habe das so zu tun? Letztlich könnte ich ja einfach in getVideoStream oder stopCamera eine Variable isActive togglen und gut oder?

tarvos90: Na du willst bei der observeable in angular benutzung auf subscribe nach möglichkeit verzichten und dann eher die async pipe benutzen. du kannst ja mit from(new Promise()) ein Promise auch in ein Observeable umwandeln. Sowas könntest du auch noch machen:

<button
    #recordStream
    class="custom-button"
    color="primary"
    mat-fab
   *ngIf="activated | async"
>
    <mat-icon inline="true">videocam</mat-icon>
</button>

<button
    #stopStream
    class="custom-button"
    color="warn"
    mat-fab
    *ngIf="activated | async"
>

tarvos90: Na du willst bei der observeable in angular benutzung auf subscribe nach möglichkeit verzichten und dann eher die async pipe benutzen. du kannst ja mit from(new Promise()) ein Promise auch in ein Observeable umwandeln. Sowas könntest du auch noch machen:

<button
    #recordStream
    class="custom-button"
    color="primary"
    mat-fab
   *ngIf="activated$ | async"
>
    <mat-icon inline="true">videocam</mat-icon>
</button>

<button
    #stopStream
    class="custom-button"
    color="warn"
    mat-fab
    *ngIf="activated$ | async"
>

bzw für den Stop-Button so:

<button
    #stopStream
    class="custom-button"
    color="warn"
    mat-fab
    *ngIf="!(activated$ | async)"
>