vue 遍历 摄像头的flv流

 

npm install --save flv.js

 

 

 

import flvjs from "flv.js";

 

 

 

 

<template>

  <div class="box">

    <div v-for="(item, index) in videoList" :key="index">      

      <div class="bg-purple">  

      <video

        :id="'video' + item.id"

        style="width: 500px; height: 300px"

        controls

        autoplay

        muted>

        </video>

        </div>

       

    </div>

  </div>

</template>

<script>

//=> 引入flv.js

import flvjs from "flv.js";

export default {

  data() {

    return {

     

      videoList: [

        {

          src: "http://170.16.0.46:8081/live/110.live.flv",

          id: 0,

        },

        {

          src: "http://170.16.0.46:8081/live/101.live.flv",

          id: 1,

        },

        {

          src: "http://170.16.0.46:8081/live/99.live.flv",

          id: 2,

        },

        {

          src: "http://170.16.0.46:8081/live/110.live.flv",

          id: 3,

        },

        {

          src: "http://170.16.0.46:8081/live/110.live.flv",

          id: 4,

        },

        {

          src: "http://170.16.0.46:8081/live/110.live.flv",

          id: 5,

        },

      ],

    };

  },

  mounted() {

    this.startPlay();

  },

  methods: {

    //视频浏览

    startPlay() {

       this.videoList.map((item,index) => {

           console.log("flvjs不支持");

       });

      this.videoList.forEach((item, index) => {

        if (flvjs.isSupported()) {

          let player = null;

          let videoElement = document.getElementById("video" + item.id);

          player = flvjs.createPlayer({

            type: "flv", //=> 媒体类型 flv 或 mp4

            isLive: true, //=> 是否为直播流

            hasAudio: false, //=> 是否开启声音

            url: item.src, //=> 视频流地址

          });

          player.attachMediaElement(videoElement); //=> 绑DOM

          player.load();

          player.play();

        } else {

          console.log("flvjs不支持");

        }

      });

    },

  },

};

</script>

<style scoped>

   .box {

    width: 100%;

    height: 1000px;

    overflow-y:scroll;

    overflow-x:hidden;

    white-space: nowrap;

   }

   .bg-purple {

    background: #d3dce6;

    border:2px solid;

    border-radius: 5px;

    min-height: 300px;

   

   }

</style>