How Refresh Observable Every 30 Seconds?

@Component({
  selector: 'app-geo',
  templateUrl:   <img  mat-card-image [src]="profileUrl | async ">

  export class GeoComponent implements OnInit {
    date;
    profileUrl: Observable<string>;

    constructor(private tempService: TemperatureService, private humService: HumiditeService, public authService: AuthService,private database: AngularFireDatabase, private storage: AngularFireStorage,private router: Router)
    {
      const ref = this.storage.ref('live/live.jpg');
      this.profileUrl = ref.getDownloadURL(); 
    }
  }
})

My image in Firebase is overwriting every 30 seconds. How I can get the value of this.profileUrl every 30 seconds and save it to Firebase ?

How I use a timer to refresh my observable every 30 seconds?

Combination of RxJS Interval and TakeWhile operators will do the job.

Something like this StackBlitz project example code:

const source = interval(30000).pipe(
  takeWhile(() => { return true }) // here you can have some logic to stop the requests
);
const subscription = source.subscribe(
  (x) => {
    // your code goes here
  },
  function (err) {
    console.log('Error: ' + err);
  },
  function () {
    console.log('Completed');
  });