How to detect when the stream becomes available?

[functioncall]

Currently, when there is no stream playing, it just shows "The connection with the low latency(OME) failed", but when I start to publish the stream. I had to either manually hit the play button if the controls were shown (which I don't want to show) or I have to either reload the page for the stream to start automatically.

Is there a way to detect when the "stream becomes actually available" so I can call the play() function on that event to start the stream automatically? I tried playing around with below states, but it doesn't seem to work.

    READY,
    DESTROY,
    PLAYER_RESIZED,
    PLAYER_PLAY,
    STATE_IDLE,
    STATE_AD_PLAYING,
    STATE_PLAYING,
    STATE_STALLED,
    STATE_LOADING,
    STATE_COMPLETE,
    STATE_PAUSED,
    STATE_ERROR,
    CONTENT_META,
    PLAYER_STATE,
    PLAYER_CLICKED,
    ERROR

<template>
  <div id="player_id" style="width: 100%; height: 500px;"></div>
</template>

<script>
/* global OvenPlayer */
export default {
  name: 'OvenPlayerComponent',
  mounted() {
    this.loadOvenPlayerScript().then(() => {
      this.setupPlayer();
    });
  },
  methods: {
    loadOvenPlayerScript() {
      return new Promise((resolve, reject) => {
        const script = document.createElement('script');
        script.src = "https://cdn.jsdelivr.net/npm/ovenplayer/dist/ovenplayer.js";
        script.onload = resolve;
        script.onerror = reject;
        document.head.appendChild(script);
      });
    },
    setupPlayer() {
      const player = OvenPlayer.create('player_id', {
        autoStart: true,
        autoFallback: true,
        mute: true,
        controls: false,
        sources: [{
          label: 'label_for_webrtc',
          type: 'webrtc',
          file: 'ws://127.0.0.1:3333/app/stream'
        }]
      });

      player.on('player_state', () => {
        console.log('Stream is ready');
        player.play(); 
      });

      player.on('play', () => {
        console.log('Stream started playing');
      });

      player.on('error', () => {
        console.log('Stream stopped');
      });
    }
  }
}
</script>

Any help would be highly appreciated. Thanks! (:

[functioncall]

Seems like this could be causing the issue. But is there a work around?

https://developer.chrome.com/blog/autoplay/

[functioncall]

Solved by reloading the player on error.

      player.on('error', () => {
        console.log('Stream stopped');
        setTimeout(() => {
          this.loadOvenPlayerScript().then(() => {
            this.setupPlayer();
          });
        }, 1000);
      });