platformProject/src/views/safe/demo/pull.vue

<template>
  <el-row :gutter="15">
    <!--安防摄像头接入-->
    <el-col :span="20" :xs="15">
      <ContentWrap>
        <el-input v-model="rtspAddr" class="!w-450px" placeholder="请输入RTSP/RTMP视频拉流地址" />
        <el-button @click="handleChange">接入</el-button>
      </ContentWrap>
      <ContentWrap>
        <video id="video" autoplay controls width="500" height="400"></video>
      </ContentWrap>
    </el-col>
  </el-row>


</template>

<script>
let  rtspAddr
export default {
  name: 'Webrtc',
  data() {
    return {
      webRtcServer: null,
    }
  },
  mounted() {
    //转码服务器暂时先写死，然后我在做活，测试用
    this.webRtcServer = new WebRtcStreamer('video', location.protocol + '//123.60.223.250:18000')
    //这个拉流的服务暂时写死，为了效果
    this.rtspAddr = 'rtsp://caoyang:gyee@123.60.223.250:38554/cy12345'
    this.webRtcServer.connect(this.rtspAddr);
  },
  beforeUnmount() {
    this.webRtcServer.disconnect()
    this.webRtcServer = null
  },
  methods: {
    handleChange() {
      console.log(this.rtspAddr);
      if (this.rtspAddr) {
        console.log('正在拉流');
        this.webRtcServer.connect(this.rtspAddr);
      } else {
        ElMessage.error('请填写正确地址，地址格式为：rtsp://用户名:密码@地址:端口/应用ID')
      }
    }
  }
}
</script>

<style scoped></style>