web-test/src/views/tltest.vue

<template>
  <div>
    <br />
    <div id="pusher" style="width:300px;height:400px;background-color:#000000;margin:auto"></div>
    <br />
    <div style="text-align:center; margin:auto;">
      <input id="path" type="text" value="" placeholder="请输入直播服务器地址(rtmp)" />
      <button id="pp" v-on:click="ppPusher()">开始</button>
    </div>
    <div class="button" v-on:click="switchCamera()">切换摄像头</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      bstart: false,
      pusher: null,
    };
  },
  created() {
    document.addEventListener('plusready', this.plusReady, false);
  },
  methods: {
    switchCamera() {
      this.pusher.switchCamera();
    },
    plusReady() {
      // 创建直播推流控件
      this.pusher = new plus.video.LivePusher('pusher', {
        url: 'rtmp://live.liaoningdoupo.com/live/',
      });
      // 监听状态变化事件
      this.pusher.addEventListener(
        'statechange',
        function(e) {
          console.log('statechange: ' + JSON.stringify(e));
        },
        false
      );
    },
    ppPusher() {
      if (this.bstart) {
        this.pusher.stop();
        this.bstart = false;
      } else {
        var path = document.getElementById('path').value;
        if (path && path.length > 0) {
          this.pusher.setOptions({ url: path });
          this.pusher.start();
          this.bstart = true;
        } else {
          plus.nativeUI.toast('请输入直播服务器地址');
        }
      }
      var pp = document.getElementById('pp');
      pp.innerText = this.bstart ? '停止' : '开始';
    },
  },
};
</script>
<style scoped>
input {
  width: 70%;
  font-size: 16px;
  padding: 0.2em 0.2em;
  border: 1px solid #00b100;
  -webkit-user-select: text;
}
.button,
button {
  width: 20%;
  margin: 6px 0 6px 6px;
  font-size: 16px;
  color: #fff;
  background-color: #00cc00;
  border: 1px solid #00b100;
  padding: 0.2em 0em;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}
</style>