<template>
  <div>
    <h1>call_room</h1>
    <van-cell-group>
      <van-field v-model="value" label="文本" placeholder="请输入用户名" />
    </van-cell-group>
    <video ref="video" id="rtc_media_player" width="310" autoplay muted controls></video>
    <van-button type="primary" @click="playVideo">主要按钮</van-button>
  </div>
</template>

<script>
/* eslint-disable */
export default {
  name: "call_room",
  data() {
    return {
      value:"webrtc://119.45.242.222/live/livestream123",
    };
  },
  mounted() {
    let player = new SrsRtcPlayerAsync();
    var url = 'webrtc://119.45.242.222/live/livestream123';

    player.play(url).then(function(session){
      console.log(session);
      // ui.children('#peer').text('Peer: ' + url);
      // video.prop('muted', false);
    }).catch(function (reason) {

      // player.close();
      // video.hide();
      console.error(reason);
    });

  },
  methods: {
    playVideo(){
      let sdk=null;
      const video = this.$refs.video;
      video.srcObject=null;

      var query = parse_query_string();
      
      srs_init_rtc("#txt_url", this.value);

      if (sdk) {
        sdk.close();
      }
      sdk = new SrsRtcPlayerAsync();

      // https://webrtc.org/getting-started/remote-streams
      this.rtcSteam=sdk.stream

      video.srcObject = sdk.stream;
      video.onloadedmetadata = function (e) {
        video.play();
      };

      // $('#rtc_media_player').prop('srcObject', sdk.stream);
      // Optional callback, SDK will add track to stream.
      // sdk.ontrack = function (event) { console.log('Got track', event); sdk.stream.addTrack(event.track); };

      // For example: webrtc://r.ossrs.net/live/livestream
      var url = this.value
      sdk.play(url).then(function(session){
        // $('#sessionid').html(session.sessionid);
        // $('#simulator-drop').attr('href', session.simulator + '?drop=1&username=' + session.sessionid);
      }).catch(function (reason) {
        sdk.close();
        $('#rtc_media_player').hide();
        console.error(reason);
      });

    }
  }
}
</script>

<style scoped>

</style>
