添加截图（快照）功能

panlinlin

2021-05-08 e48fa711a3664bece9b3e58840a75fe7c05bc47c

 web_src/src/components/dialog/devicePlayer.vue

@@ -14,15 +14,27 @@
                    </div>
                    <div style="display: flex; margin-bottom: 0.5rem; height: 2.5rem;">
                        <span style="width: 5rem; line-height: 2.5rem; text-align: right;">播放地址：</span>
                        <el-input v-model="getPlayerShared.sharedUrl" :disabled="true" v-on:click.native="copySharedInfo(getPlayerShared.sharedUrl)"></el-input>
                        <el-input v-model="getPlayerShared.sharedUrl" :disabled="true" >
                          <template slot="append">
                            <i class="cpoy-btn el-icon-document-copy"  title="点击拷贝" v-clipboard="getPlayerShared.sharedUrl" @success="$message({type:'success', message:'成功拷贝到粘贴板'})"></i>
                          </template>
                        </el-input>
                    </div>
                    <div style="display: flex; margin-bottom: 0.5rem; height: 2.5rem;">
                        <span style="width: 5rem; line-height: 2.5rem; text-align: right;">iframe：</span>
                        <el-input v-model="getPlayerShared.sharedIframe" :disabled="true" v-on:click.native="copySharedInfo(getPlayerShared.sharedIframe)"></el-input>
                        <el-input v-model="getPlayerShared.sharedIframe" :disabled="true" >
                          <template slot="append">
                            <i class="cpoy-btn el-icon-document-copy"  title="点击拷贝" v-clipboard="getPlayerShared.sharedIframe" @success="$message({type:'success', message:'成功拷贝到粘贴板'})"></i>
                          </template>
                        </el-input>
                    </div>
                    <div style="display: flex; margin-bottom: 0.5rem; height: 2.5rem;">
                        <span style="width: 5rem; line-height: 2.5rem; text-align: right;">资源地址：</span>
                        <el-input v-model="getPlayerShared.sharedRtmp" :disabled="true" v-on:click.native="copySharedInfo(getPlayerShared.sharedRtmp)"></el-input>
                        <el-input v-model="getPlayerShared.sharedRtmp" :disabled="true" >
                          <template slot="append">
                            <i class="cpoy-btn el-icon-document-copy"  title="点击拷贝" v-clipboard="getPlayerShared.sharedRtmp" @success="$message({type:'success', message:'成功拷贝到粘贴板'})"></i>
                          </template>
                        </el-input>
                    </div>
                </el-tab-pane>
                <!--{"code":0,"data":{"paths":["22-29-30.mp4"],"rootPath":"/home/kkkkk/Documents/ZLMediaKit/release/linux/Debug/www/record/hls/kkkkk/2020-05-11/"}}-->
@@ -105,12 +117,13 @@
                </el-tab-pane>
                <el-tab-pane label="编码信息" name="codec" v-loading="tracksLoading">
                    <p>
                        无法播放或者没有声音?&nbsp&nbsp&nbsp试一试
                        无法播放或者没有声音?&nbsp&nbsp&nbsp试一试&nbsp
                        <el-button size="mini" type="primary" v-if="!coverPlaying" @click="coverPlay">转码播放</el-button>
                        <el-button size="mini" type="danger" v-if="coverPlaying" @click="convertStopClick">停止转码</el-button>
                    </p>
                    <div class="trank" >
                        <div v-for="(item, index) in tracks" style="width: 50%; float: left">
                      <p v-if="tracksNotLoaded" style="text-align: center;padding-top: 3rem;">暂无数据</p>
                        <div v-for="(item, index) in tracks" style="width: 50%; float: left" loading>
                            <span >流 {{index}}</span>
                            <div class="trankInfo" v-if="item.codec_type == 0">
                                <p>格式: {{item.codec_id_name}}</p>
@@ -137,6 +150,7 @@

<script>
// import player from '../dialog/rtcPlayer.vue'
// import LivePlayer from '@liveqing/liveplayer'
import player from '../dialog/easyPlayer.vue'
export default {
    name: 'devicePlayer',
@@ -146,9 +160,10 @@
    },
    computed: {
        getPlayerShared: function () {

            return {
                sharedUrl: window.location.host + '/' + this.videoUrl,
                sharedIframe: '<iframe src="' + window.location.host + '/' + this.videoUrl + '"></iframe>',
                sharedUrl: window.location.origin + '/#/play/wasm/' + encodeURIComponent(this.videoUrl),
                sharedIframe: '<iframe src="' + window.location.origin + '/#/play/wasm/' + encodeURIComponent(this.videoUrl) + '"></iframe>',
                sharedRtmp: this.videoUrl
            };
        }
@@ -189,6 +204,7 @@
            recordPlay: "",
            showPtz: true,
            showRrecord: true,
            tracksNotLoaded: false,
        };
    },
    methods: {
@@ -197,6 +213,7 @@
            var that = this;
            that.tracks = [];
            that.tracksLoading = true;
            that.tracksNotLoaded = false;
            if (tab.name == "codec") {
                this.$axios({
                    method: 'get',
@@ -206,6 +223,7 @@
                    if (res.data.code == 0 && res.data.online) {
                        that.tracks = res.data.tracks;
                    }else{
                        that.tracksNotLoaded = true;
                        that.$message({
                            showClose: true,
                            message: '获取编码信息失败,',
@@ -410,7 +428,7 @@
            this.videoUrl = '';
            this.$axios({
                method: 'get',
                url: '/api/playback/stop/' + this.streamId
                url: '/api/playback/stop/' + this.deviceId + "/" + this.channelId
            }).then(function (res) {
                if (callback) callback()
            });