.

modules/Charactor.js

@@ -129,8 +129,8 @@ export default class Charactor {
                 roomId: settings.roomId,
                 userId: settings.userId,
             }
-            console.log("[3D] send(getVideo): ", sendData);
-            connection.socket.emit("getVideo", sendData);
+            console.log("[3D] send(getVideoUrl): ", sendData);
+            connection.socket.emit("getVideoUrl", sendData);
         } 
         else {
             this.getSocketVideoType = "rotateCamera"
@@ -138,8 +138,8 @@ export default class Charactor {
             // 即将走到终点之前，获取终点旋转视频
             let endPointId = pathArr[currentPoint+1].id
 
-            console.log("[3D] send(getRotateVideo): ", endPointId + "/" + endPointId)
-            window.connection.socket.emit("getRotateVideo", {
+            console.log("[3D] send(getRotateVideoUrl): ", endPointId + "/" + endPointId)
+            window.connection.socket.emit("getRotateVideoUrl", {
                 videoPath: endPointId + "/" + endPointId,
                 sangle: 0,
                 eangle: 360,
@@ -148,7 +148,7 @@ export default class Charactor {
                 roomId: settings.roomId,
                 userId: settings.userId,
             });
-            window.connection.socket.emit("getRotateVideo", {
+            window.connection.socket.emit("getRotateVideoUrl", {
                 videoPath: endPointId + "/" + endPointId,
                 sangle: 0,
                 eangle: 360,

modules/index.js

@@ -52,7 +52,7 @@ export default class App {
 
             setTimeout(() => {
                         
-                window.connection.socket.emit("getRotateVideo", {
+                window.connection.socket.emit("getRotateVideoUrl", {
                     videoPath: "0/0",
                     sangle: 0,
                     eangle: 360,
@@ -61,7 +61,7 @@ export default class App {
                     roomId: settings.roomId,
                     userId: settings.userId,
                 });
-                window.connection.socket.emit("getRotateVideo", {
+                window.connection.socket.emit("getRotateVideoUrl", {
                     videoPath: "0/0" ,
                     sangle: 0,
                     eangle: 360,
@@ -168,7 +168,61 @@ export default class App {
     bindSocketEvents() {
 
         let walkPointsTemp = []
+        window.connection.socket.on('getRotateVideoUrl', async(data) => {    
+            console.log("[3D] getSocketVideo: ", data)
+            const url = data
+            // 获得旋转视频
+                            
+            let video = this.isReverse ? document.getElementById("houseTextureReverse") 
+            : document.getElementById("houseTexture")
+
+            video.src = url
+
+            this.isReverse = !this.isReverse
+
+            // 页面刷新后初次加载视频
+            if(this.initVideo) {
+            this.updateHouseVideo(video, true)
+            this.initVideo = false
+            this.cameraController.camera.minZ = 0.001
+            }
+        })
+
+        window.connection.socket.on('getVideoUrl', async(data) => {    
+            console.log("[3D] getSocketVideo: ", data)
+            const url = data
+
+            if(this.getSocketVideoType == "walkPath") {
 
+                let dir = this.charactorManager.getVideoDirecNum()
+                // 获得行走视频
+                let path = walkPointsTemp.map( (point, i) => { 
+                    return { 
+                        id: point.id,
+                        point: new BABYLON.Vector3(-point.location.x, 0, point.location.z), 
+                        video: i == 0 ? common.createVideoElement0(url) : null,
+                        videoName: i != walkPointsTemp.length - 1 ? (point.id + "/" + point.id + "_" + walkPointsTemp[i+1].id + "_" + dir) : null
+                    } 
+                })
+
+                this.getSocketVideoType = "nextWalk"
+    
+                // 行走时锁定camera
+                this.cameraController.lockCamera(true)
+                this.charactorManager.charactor.startWalk(path, this.charactorManager)
+
+            } 
+            else if(this.getSocketVideoType == "nextWalk") {
+
+                let charactor = this.charactorManager.charactor
+                let video = common.createVideoElement0(url) //await common.createVideoElement(url)
+
+                console.error(charactor.walkData.currentPoint+1)
+                charactor.walkData.pathArr[charactor.walkData.currentPoint+1].video = video
+
+            } 
+        })
+        
         window.connection.socket.on('getSocketVideo', async(data) => {
 
             console.log("[3D] getSocketVideo: ", data)
@@ -228,9 +282,9 @@ export default class App {
             }
         })
 
-        window.connection.socket.on('getVideo', async (data) => {
+        window.connection.socket.on('getVideoUrl', async (data) => {
             
-            console.log("[3D] getVideo: ", data)
+            console.log("[3D] getVideoUrl: ", data)
 
             // const blob = new Blob([data], { type: 'application/video' })
             // const url = URL.createObjectURL(blob)
@@ -269,8 +323,8 @@ export default class App {
                 roomId: settings.roomId,
                 userId: settings.userId,
             }
-            console.log("[3D] send(getVideo): ", sendData);
-            connection.socket.emit("getVideo", sendData);
+            console.log("[3D] send(getVideoUrl): ", sendData);
+            connection.socket.emit("getVideoUrl", sendData);
         });
     }
 

modules/utils/common.js

@@ -86,7 +86,28 @@ export default {
     
     createVideoElement0: (path) => {
 
-        let videoName = path.split("/")[path.split("/").length-1].split(".")[0]
+        // let videoName = path.split("/")[path.split("/").length-1].split(".")[0]
+        // let oldVideo = document.getElementById(videoName)
+        // if(oldVideo) {
+        //     oldVideo.currentTime = 0
+        //     oldVideo.isLoaded = true
+        //     return oldVideo
+        // }
+
+        // let video = document.createElement("video")
+        // video.src = path
+        // video.id = videoName
+        // video.crossOrigin = "anonymous" 
+        // // video.playsinline = "playsinline" 
+        // video.autoplay = "autoplay" 
+        // video.muted = "muted"
+        // video.setAttribute("playsinline", "true") 
+        // video.setAttribute("x5-playsinline", "true") 
+        // video.setAttribute("webkit-playsinline", "true") 
+        // video.setAttribute("x5-video-player-type", "h5") 
+        // video.setAttribute("controls", "true") 
+
+        let videoName = path[0].split("/")[path[0].split("/").length-1].split(".")
         let oldVideo = document.getElementById(videoName)
         if(oldVideo) {
             oldVideo.currentTime = 0
@@ -95,7 +116,7 @@ export default {
         }
 
         let video = document.createElement("video")
-        video.src = path
+        video.src = path[0]
         video.id = videoName
         video.crossOrigin = "anonymous" 
         // video.playsinline = "playsinline" 
@@ -106,8 +127,6 @@ export default {
         video.setAttribute("webkit-playsinline", "true") 
         video.setAttribute("x5-video-player-type", "h5") 
         video.setAttribute("controls", "true") 
-
-        // document.getElementById("videoTextureBox").appendChild(video)
         
         return video
     },