页面效果图是这样的。左侧el-tree可多选，最多4个设备。右侧依次渲染实时监控。

image.png

首先，安装依赖。这里我就不说了，按照https://www.liveqing.com/docs/manuals/LivePlayer.html#%E5%AE%89%E8%A3%85%E4%BD%BF%E7%94%A8-install官方步骤来

我来记录下右侧视频监控的部分

<div class="l-right" ref="playArea">
    <div class="play-area" :class="{ 'full-screen': fullScreen }">
        <div class="player-list">
            <div class="video-player-wrap"
                :class="{ 'is-selected': selectedPlayerIndex === index }"
                v-for="(item, index) in playingList"
                :key="index"
                @click="handleSelectPlayer(index)"
            >
                <live-player
                    :id="`player${index}`"
                    :video-url="item.liveUrl"
                    :video-title="item.cameraName"
                    :show-custom-button="false"
                    v-loading="loadingVideo && index < checkedArr.length - 1"
                    element-loading-text="拼命加载中"
                    element-loading-spinner="el-icon-loading"
                    live
                    alt=""
                    :stretch="true"
                >
                    <div
                        v-if="item.message"
                        style="position:absolute;width: 100%;left: 0;top:45%;color:#FFF;font-size: 20px;text-align: center;"
                    >
                        {{ item.message }}
                    </div>
                </live-player>
                <div class="play-button" v-if="!item.isInit" />
                <div class="play-message" v-if="item.isInit && !item.liveUrl">
                    {{ item.status === '1' ? '获取视频流失败' : '设备已离线' }}
                </div>
            </div>
        </div>
    </div>
</div>

checkedArr是左侧el-tree选中的数组，需要拿到这些设备唯一标识给后端获取hls流的播放地址，拿到这个链接后给到live-player就可以播放啦~