采用新的rtsp拉流

src/views/hikvideo/index.vue

@@ -1,22 +1,46 @@
 <template>
-    <a-row type="flex-container" :gutter="30">
-      <a-col >
-            时间：<a-date-picker
-                v-model="date"
-                format="YYYY-MM-DD"
-                placeholder="请选择时间"
-                @change="cameraRecord"
-            />
-      </a-col>
-      <label for="name">摄像机:</label>
-      <select v-model="selectedCamera" >
-        <option v-for="(url, camera) in cameras" :key="url.camera" >{{ camera }}</option>
-      </select>
-      <div id="hikvideo">
-        <video id='video' controls autoplay muted width="50%" height="50%" style="object-fit: fill"></video>
-      </div>
-    </a-row>
-  </template>
+    <div>
+        <a-row>
+            <a-col span="9">
+                时间：<a-range-picker
+                    :show-time="{ format: 'HH:mm:ss' }"
+                    v-model="date"
+                    format="YYYY-MM-DD HH:mm:ss"
+                    @change="cameraRecord"
+                />
+            </a-col>
+            <a-col span="6">
+                <label for="name">球机: </label>
+                <a-select
+                    @change="handleChange"
+                    v-model="selectedCamera"
+                    style="width:200px"
+                    :allowClear="true"
+                >
+                    <a-select-option
+                        v-for="(url, camera) in cameras"
+                        :key="url"
+                    >{{ camera }}</a-select-option>
+                </a-select>
+            </a-col>
+
+        </a-row>
+        <a-row>
+            <div id="hikvideo">
+                <video
+                    id='video'
+                    controls
+                    autoplay
+                    muted
+                    width="50%"
+                    height="50%"
+                    style="object-fit: fill"
+                ></video>
+            </div>
+        </a-row>
+    </div>
+
+</template>
 <script>
 export default {
     name: "hikvideo",
@@ -28,35 +52,85 @@ export default {
                     return time.getTime() > Date.now();
                 },
             },
-            date: '',         
+            date: [],
             cameras: null,
-            selectedCamera: null
+            url: null,
+            selectedCamera: null,
         };
     },
     mounted() {
         this.loadCameras();
-        this.webRtcServer = new WebRtcStreamer("video", "http://127.0.0.1:8000"); 
-        //this.webRtcServer.connect("rtsp://132.239.12.145/axis-media/media.amp");   
+        this.webRtcServer = new WebRtcStreamer(
+            "video",
+            "http://192.168.1.200:8000"
+        );
     },
     //销毁视频流
     beforeDestroy() {
-        this.webRtcServer.disconnect()
-        this.webRtcServer = null
+        this.webRtcServer.disconnect();
+        this.webRtcServer = null;
     },
     methods: {
+        convertDateFormat(input) {
+            // 使用正则表达式提取日期和时间部分
+            const regex = /(\d{4})-(\d{2})-(\d{2}) (\d{2}):(\d{2}):(\d{2})/;
+            const match = input.match(regex);
+
+            if (match) {
+                const year = match[1];
+                const month = match[2];
+                const day = match[3];
+                const hours = match[4];
+                const minutes = match[5];
+                const seconds = match[6];
+
+                // 格式化为 YYYYMMDDtHHmmssz
+                return `${year}${month}${day}t${hours}${minutes}${seconds}z`;
+            } else {
+                throw new Error("Invalid date format");
+            }
+        },
+        handleChange(value) {
+            console.log(value);
+            this.url = value;
+            this.play()
+        },
+        play() {
+            if (this.date != null && this.url != null) {
+                var url =
+                    this.url +
+                    "starttime=" +
+                    this.convertDateFormat(this.date[0]) +
+                    "&endtime=" +
+                    this.convertDateFormat(this.date[1]);
+                console.log(url);
+
+                this.webRtcServer.connect(
+                    "rtsp://admin:a1234567@192.168.1.65:554/Streaming/Channels/101"
+                );
+            }
+        },
+        onSubmit() {
+            console.log(this.selectedCamera);
+        },
+        cameraRecord(date, dateString) {
+            console.log(dateString);
+            this.date = dateString;
+            this.play()
+        },
         loadCameras() {
-            fetch('./config.json')
-                .then(response => response.json())
-                .then(data => {
+            fetch("./config.json")
+                .then((response) => response.json())
+                .then((data) => {
                     this.cameras = data.urls;
                     this.camera = data.urls.video;
                     console.log("11111111111111111111111111111111111111111111");
                     console.log(this.cameras);
                 })
-                .catch(error => {
-                    console.error('Error fetching JSON file:', error);
+                .catch((error) => {
+                    console.error("Error fetching JSON file:", error);
                 });
-        }
+        },
     },
 };
 </script>