update

Former-commit-id: fa109cd6f96edf7255b12674f5effa2a52a21bb2

projects/WebApp/wwwroot/pages/iot/device/camera.html

@@ -1,21 +1,15 @@
 <template>
-    <div class="card" style="box-sizing:border-box;height:150px;margin:10px;">
+    <div class="card" style="box-sizing:border-box;height:510px;margin:10px;">
         <div class="card-header">
             {{device.displayName}}
         </div>
         <div class="card-body" style="padding:0;">
-            <div class="row" style="height:240px;width:320px;margin: 0 auto;">
+            <div class="row" style="width:320px;height:240px;margin: 0 auto;background-color:#000;">
-                <div class="col">
+                <video :class="device.number" v-if="flvjs.isSupported()"></video>
-                    <video :data-number="device.number" v-if="flvjs.isSupported()"></video>
+                <canvas :class="device.number" v-else></canvas>
-                    <canvas :data-number="device.number" v-else></canvas>
+            </div>
-                </div>
+            <div v-if="ptz" :class="'row ptz '+ device.number" style="width:320px;height:100px;margin:0 auto;" >
-                <div class="col col-md-8 col-sm-8 align-self-center">
+                ptz
-                    <div class="row" style="line-height:28px;">
-                        <img style="height:32px;" v-on:click="execApi(device.number,'/Curtain/On')" src="/IoTCenter/images/left.png" />
-                        <img style="height:32px;" v-on:click="execApi(device.number,'/Curtain/Stop')" src="/IoTCenter/images/stop.png" />
-                        <img style="height:32px;" v-on:click="execApi(device.number,'/Curtain/Off')" src="/IoTCenter/images/right.png" />
-                    </div>
-                </div>
             </div>
         </div>
     </div>
@@ -25,22 +19,65 @@
         props: ['device'],
         mounted: function () {
             if (flvjs.isSupported()) {
-                playByFlvJs();
+                this.playByFlvJs();
             }
             else {
-                playByWXInlinePlayer();
+                this.playByWXInlinePlayer();
             }
         },
         methods: {
             playByFlvJs: function () {
-
+                try {
+                    var videoElement = $('video.'+this.device.number)[0];
+                    livePlayer = flvjs.createPlayer({
+                        type: 'flv',
+                        url: this.url,
+                        isLive: true,
+                        cors: true
+                    }, {
+                        enableWorker: true,
+                        enableStashBuffer: false,
+                        stashInitialSize: 1,
+                        fixAudioTimestampGap: false
+                    });
+                    livePlayer.attachMediaElement(videoElement);
+                    livePlayer.load();
+                    livePlayer.volume = volume;
+                    livePlayer.muted = muted;
+                    timer = setInterval(function () {
+                        console.log('.');
+                        if (livePlayer.statisticsInfo.speed === 0) {
+                            console.log('reload1');
+                            clearInterval(timer);
+                            playFlv(videoElement);
+                        }
+                        else if (decodedFrames && livePlayer.statisticsInfo.decodedFrames <= decodedFrames) {
+                            console.log('reload2');
+                            clearInterval(timer);
+                            playFlv(videoElement);
+                        }
+                        else if (livePlayer.buffered.length > 0 && livePlayer.buffered.end(0) - livePlayer.currentTime > 1) {
+                            console.log('reset currentTime');
+                            livePlayer.currentTime = livePlayer.buffered.end(0) - 0.001;
+                        }
+                        decodedFrames = livePlayer.statisticsInfo.decodedFrames;
+                    }, 10 * 1000);
+                } catch (e) {
+                    console.log(e);
+                }
             },
             playByWXInlinePlayer: function () {
             }
         },
         computed: {
             url: function () {
-                return getDeviceDataValue(this.device,'flv');
+                return getDeviceDataValue(this.device, 'flv');
+            },
+            ptz: function () {
+                if (getDeviceDataValue(this.device, '云台地址')) {
+                    return true;
+                }
+                return false;
             }
         }
     });