duoji-frontend/src/views/realTimeMonitoring/index.vue

<template>
    <div class="realTime bg-white">
<!--        <div class="realTime-position">-->
<!--            <div class="realTime-position-label">选择位置：</div>-->
<!--            <div class="realTime-position-box">-->
<!--                <div class="realTime-position-box-btns"></div>-->
<!--                <div class="realTime-position-box-control" @click="handleUpDown">-->
<!--                    {{controlLabel ? '收起' : '展开'}}-->
<!--                    <a-icon type="up" :class="{'anticon-rotate': !controlLabel}"></a-icon>-->
<!--                </div>-->
<!--            </div>-->
<!--        </div>-->
        <div>实时画面：</div>
        <canvas id="video-cav" width="400" height="400"></canvas>
    </div>
</template>

<script>
export default {
    name: "realTimeMonitoring",
    data() {
        return {
            // 收起true  展开false
            controlLabel: true,
            realTimeListData:[],
            url:'722e6f04-bb3c-34b1-bcc7-ae9f6cd72e68',
            path:[]
        };
    },
    mounted() {
        this.getRealTimeList()
        // this.realTimeLychee()
        this.getVideos()
    },
    methods: {
        // 展开收起
        handleUpDown() {
            this.controlLabel = !this.controlLabel;
        },
        getRealTimeList(){
            var that=this
            this.$api.httpApi.getRealTimeList({
                data: {}
            }).then(res => {
                console.log(res.data)
                if(res.code == 200){
                    this.realTimeListData = res.data
                    res.data.map(function(item){
                        // console.log(item.cameras)
                        var $that = that
                        item.cameras.map(function(item){
                            console.log(item.rtsp)
                            $that.$axios.post('/lychee/stream/push', {
                                "sourceUrl":item.rtsp,
                                "paramBefore": "-i",
                                "paramBehind": "-f mpegts -codec:v mpeg1video -s 1080*780 -b:v 1500k -r 30 -bf 0 -codec:a mp2 -ar 44100 -ac 1 -b:a 128k"
                            }).then(res => {
                                console.log(res.data)
                                console.log(this.path)
                            }).catch(err => {

                            })
                        })
                    })
                }
                console.log(this.path)
            }).catch(err => {

            });
        },
        getVideos(){
            var canvas = document.getElementById('video-cav')
            var url = 'ws://192.168.66.56:9007/api/lychee/stream/live/'+this.url
            var player = new JSMpeg.Player(url, {canvas: canvas}) // eslint-disable-line no-unused-vars
        }
    }
};
</script>

<style lang='scss'>
.realTime {
    padding: 24px;
    &-position {
        display: flex;
        justify-content: space-between;
        &-box {
            flex: 1;
            display: flex;
            justify-content: space-between;
            &-btns {
                flex: 1;
                display: flex;
                flex-wrap: wrap;
                justify-content: flex-start;
            }
            &-control {
                text-align: right;
                cursor: pointer;
                color: #55a4ff;
                .anticon {
                    transform: rotate(0deg);
                    transform-origin: center;
                    transition: all 0.2s linear;
                }
                .anticon-rotate {
                    transform: rotate(180deg);
                }
            }
        }
    }
    #video-cav{
        position: fixed;
        z-index: 999;
        border: solid 1px skyblue;
        width: 400px;
        height: 400px;
    }
}
</style>