vue+樹莓派實現實時視訊播放暫停

 

宣告實時視訊是樹莓派外接usb攝像頭，通過攝像頭實時抓取照片，通過不斷更新頁面照片形成視訊效果，無麥克風

 

效果如下

未開始時

點選開始按鈕

貼程式碼時刻即將到來

<!--視訊元件-->
<template>
    <div class="header">
        <h2 style="clear: both">
            {{DevcieName}}
              <i style="cursor: pointer;" class="el-icon-close" @click="handleCmp('delete',  componentIndex)"></i>
            </h2>
        <div style="width: 100%;height: 100%" @click="reverseplay">
            <img v-show="playstatus" style="width: 100%;height: 100%" :src="address" @load="refreshFile(playstatus)">
            <div>
                <Icon v-show="!playstatus" type="ios-play-outline" size="80"/>
            </div>
        </div>
    </div>
</template>

<script>

export default {
  name: 'Video',
  data() {
    return {
      playstatus: false,
      number: 0,
      DevcieName: '等待新增裝置',
    };
  },
  computed: {
    address() {
      const imgaddress = `http://192.168.0.174:8080/?action=snapshot&n=${this.number}`;
      return imgaddress;
    },
  },
  watch: {
    // 控制播放暫停
    playstatus: {
      handler(newDataSou) {
        // number+1誘惑img標籤onload函式觸發，從而實現重新整理和暫停
        this.number += 1;
      },
      deep: true,
      immediate: true,
    },
  },
  methods: {
    // 開始和關閉
    reverseplay() {
      this.playstatus = !this.playstatus;
    },
    // 控制刷寫時間
    refreshFile(stauts) {
      const self = this;
      if (stauts) {
        setTimeout(() => {
          self.number += 1;
        }, 10);
      }
    },
  },
};
</script>

<style scoped lang="scss">
.header{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    cursor: auto;
    video{
        width: 100%;
        height: 100%;
        object-fit:fill;
    }
}
</style>