update0801

src/components/RTC/PageRtcLive.vue

@@ -6,7 +6,7 @@
     </div>
     <chat v-show="chatShow" :chatList="chatList" :user_info="user_info"></chat>
 
-    <Trtccom :audioMuted="audioMuted" :videoMuted="videoMuted" v-if="isJoined" />
+    <!-- <Trtccom :audioMuted="audioMuted" :videoMuted="videoMuted" v-if="isJoined" /> -->
 
     <div class="contorlBar" v-if="!showInput">
       <div v-if="connectStatus == 1" :class="{ disabled: !user_info.IsWords }" class="saySomething" @click="onFocus">
@@ -96,7 +96,7 @@ import common from "@/utils/common";
 
 import { mapGetters } from "vuex";
 import chat from "./chat/chat.vue";
-import Trtccom from "./Trtccom.vue";
+// import Trtccom from "./Trtccom.vue";
 import browser from "@/utils/browser";
 
 const emit = defineEmits(["openDialog"]);
@@ -134,6 +134,13 @@ let getUrl = (href, queryArr) => {
 };
 const videoDeviceId = computed(() => store.getters["rtc/videoDeviceId"]);
 
+window.addEventListener("message", (e) => {
+  if (e.data.source != "cdf") {
+    return;
+  }
+  store.commit("rtc/setVideoDeviceId", e.data.params.videoDeviceId);
+});
+
 const connectStatus = ref(0);
 const isBrushes = ref(false);
 const showInput = ref(false);
@@ -142,6 +149,33 @@ const animateActive = ref(false);
 
 const audioMuted = ref(false);
 const videoMuted = ref(false);
+const isJoined = ref(false);
+
+watch(audioMuted, () => {
+  window.parent.postMessage(
+    {
+      source: "cdf",
+      event: "audioMuted",
+      params: {
+        audioMuted: audioMuted.value,
+      },
+    },
+    "*"
+  );
+});
+
+watch(videoMuted, () => {
+  window.parent.postMessage(
+    {
+      source: "cdf",
+      event: "videoMuted",
+      params: {
+        videoMuted: videoMuted.value,
+      },
+    },
+    "*"
+  );
+});
 
 const socket = computed(() => store.getters["rtc/socket"]);
 
@@ -155,8 +189,6 @@ const role = ref(browser.getURLParam("role"));
 const userId = computed(() => store.getters["rtc/userId"]);
 const roomId = computed(() => store.getters["rtc/roomId"]);
 
-const isJoined = ref(false);
-
 const paint = reactive({});
 
 const chatList = ref([]);
@@ -276,8 +308,6 @@ const onDrawUndo = async () => {
   let app = await getApp();
   app.Connect.paint.undo();
   canUndo.value = app.Connect.paint.records.length > 0;
-
-  console.log(app.Connect.paint.records, "app.Connect.paint.records");
 };
 
 // 畫筆開啟
@@ -440,6 +470,17 @@ const startFollow = (app) => {
       }
     }
 
+    window.parent.postMessage(
+      {
+        source: "cdf",
+        event: "isJoined",
+        params: {
+          isJoined: true,
+        },
+      },
+      "*"
+    );
+
     isJoined.value = true;
 
     user_info.value = data.user;
@@ -451,7 +492,7 @@ const startFollow = (app) => {
     }, []);
 
     //更新分享鏈接
-    shareLink.value = getUrl(window.location.href, [
+    shareLink.value = getUrl(window.location.href.replace('scene.html','index.html'), [
       {
         key: "mode",
         val: mode.value,
@@ -497,6 +538,16 @@ const startFollow = (app) => {
     }
 
     history.replaceState(null, null, tmp);
+    window.parent.postMessage(
+      {
+        source: "cdf",
+        event: "urlReplace",
+        params: {
+          tempUrl: tmp,
+        },
+      },
+      "*"
+    );
   });
 
   socket.value.on("action", (data) => {

src/components/RTC/Trtccom.vue

@@ -12,7 +12,7 @@
       <div
         class="local"
         :data-role="item.userId_"
-        :class="{ disabledlocal: item.userId_.indexOf('customer') > -1  || !videoDeviceId }"
+        :class="{ disabledlocal: item.userId_.indexOf('customer') > -1 || !videoDeviceId }"
         v-for="item in invitedRemoteStreams"
         :id="item.userId_"
         :key="item.userId_"
@@ -348,7 +348,7 @@ async function handleStreamSubscribed(event) {
 
   await nextTick();
   setTimeout(() => {
-  console.log(remoteStream.userId_,'remoteStream.getId()');
+    console.log(remoteStream.userId_, "remoteStream.getId()");
     remoteStream
       .play(remoteStream.userId_)
       .then(() => {
@@ -400,6 +400,9 @@ let canUseDevice = () => {
 
 <style lang="scss" scoped>
 .trtccom {
+  position: fixed;
+  top: 0;
+  left: 0;
   .local {
     width: 70px;
     height: 70px;

src/components/RTC/dialog/createdRoom.vue

@@ -56,17 +56,16 @@ export default {
   // created: {},
   // mounted:{},
   methods: {
-    getUrl(href,queryArr){
-
-      queryArr.forEach(item=>{
+    getUrl(href, queryArr) {
+      queryArr.forEach((item) => {
         if (!browser.hasURLParam(item.key)) {
           href += `&${item.key}=${item.val}`;
         } else {
           href = browser.replaceQueryString(href, item.key, item.val);
         }
-      })
-      
-      return href
+      });
+
+      return href;
     },
 
     chooseMode(mode) {
@@ -74,51 +73,73 @@ export default {
     },
     closeCreated() {
       this.$emit("closeCreated");
-      !browser.hasURLParam("pose")
+      !browser.hasURLParam("pose");
     },
     createdConfirm() {
       if (this.userName == "") {
-        Dialog.toast({ content: '請輸入您的昵稱', type: 'error' })
+        Dialog.toast({ content: "請輸入您的昵稱", type: "error" });
         return;
       }
       let name = encodeURIComponent(this.userName);
-      let hh = window.location.href
-
+      let hh = window.location.href;
 
       if (this.role == "customer") {
-        let tempUrl = this.getUrl(hh, [{
-          key:'mode',
-          val:this.mode
-        },{
-          key:'name',
-          val:name
-        },{
-          key:'role',
-          val:'customer'
-        },{
-          key:'roomId',
-          val:this.roomId
-        }])
-        // history.replaceState(null, null, hh + "&mode=" + this.mode + "&name=" + name + "&role=customer&roomId=" + this.roomId);
+        let tempUrl = this.getUrl(hh, [
+          {
+            key: "mode",
+            val: this.mode,
+          },
+          {
+            key: "name",
+            val: name,
+          },
+          {
+            key: "role",
+            val: "customer",
+          },
+          {
+            key: "roomId",
+            val: this.roomId,
+          },
+        ]);
         history.replaceState(null, null, tempUrl);
+        window.parent.postMessage(
+          {
+            source: "cdf",
+            event: "urlReplace",
+            params: {
+              tempUrl,
+            },
+          },
+          "*"
+        );
       } else {
+        let tempUrl = this.getUrl(hh, [
+          {
+            key: "mode",
+            val: this.mode,
+          },
+          {
+            key: "name",
+            val: name,
+          },
+          {
+            key: "role",
+            val: "leader",
+          },
+        ]);
 
-        let tempUrl = this.getUrl(hh, [{
-          key:'mode',
-          val:this.mode
-        },{
-          key:'name',
-          val:name
-        },{
-          key:'role',
-          val:'leader'
-        }])
-
-        console.log(tempUrl);
-     
-        // history.replaceState(null, null,hh + "&mode=" + this.mode + "&name=" + name + "&role=leader");
         history.replaceState(null, null, tempUrl);
-
+        window.parent.postMessage(
+          {
+            source: "cdf",
+            event: "urlReplace",
+            params: {
+              tempUrl,
+            },
+          },
+          "*"
+        );
       }
       this.$nextTick(() => {
         this.$emit("createdConfirm");

src/components/RTC/index.vue

@@ -32,7 +32,6 @@ const role = ref(browser.getURLParam("role"));
 const userName = ref(browser.getURLParam("name"));
 const socket = computed(() => store.getters["rtc/socket"]);
 
-
 const openDialog = (str, link) => {
   shareLink.value = link;
   dialog.value = str;
@@ -46,20 +45,39 @@ const confirmDialog = async () => {
   await getApp().Connect.follow.exit();
   store.commit("rtc/setIsJoined", false);
   if (socket.value) {
-    if(role.value == 'leader'){
+    if (role.value == "leader") {
       socket.value.emit("action", { type: "leader-dismiss" });
     }
 
     socket.value.close();
     store.commit("rtc/setSocket", null);
+    window.parent.postMessage(
+      {
+        source: "cdf",
+        event: "exit",
+        params: {
+          role:role.value
+        },
+      },
+      "*"
+    );
   }
 
-  
   let tempUrl = window.location.href;
   ["mode", "name", "role", "roomId", "userId"].forEach((item) => {
     tempUrl = browser.replaceQueryString(tempUrl, item, "");
   });
   history.replaceState(null, null, tempUrl);
+  window.parent.postMessage(
+    {
+      source: "cdf",
+      event: "urlReplace",
+      params: {
+        tempUrl,
+      },
+    },
+    "*"
+  );
 
   store.commit("showShoppingguide", false);
   dialog.value = "";

src/pages/index.vue

@@ -1,20 +1,81 @@
 <template>
   <div class="appcon">
-    <iframe :src="`scene.html${params}`" frameborder="0"></iframe>
-    <Trtccom :audioMuted="audioMuted" :videoMuted="videoMuted"  />
+    <iframe ref="scene$" :src="`scene.html${params}`" frameborder="0"></iframe>
+    <Trtccom :audioMuted="audioMuted" :videoMuted="videoMuted" v-if="isJoined" />
   </div>
 </template>
 
 <script setup>
-import { ref } from "vue";
+import { ref, computed,watch,onMounted } from "vue";
 import Trtccom from "@/components/RTC/Trtccom.vue";
-import Control from "@/components/Controls/Control.Mobile.vue";
+import browser from "@/utils/browser";
+import { useStore } from "vuex";
 
 const params = ref(location.search);
 const audioMuted = ref(false);
 const videoMuted = ref(false);
+const isJoined = ref(false);
+const scene$ = ref(null);
+const store = useStore();
+const videoDeviceId = computed(() => store.getters["rtc/videoDeviceId"]);
 
+watch(videoDeviceId, () => {
+  console.log(scene$.value.contentWindow);
+  scene$.value.contentWindow.postMessage(
+    {
+      source: "cdf",
+      event: "videoDeviceId",
+      params: {
+        videoDeviceId: videoDeviceId.value,
+      },
+    },
+    "*"
+  );
+});
 
+onMounted(() => {
+  window.addEventListener("message", (e) => {
+    if (e.data.source != "cdf") {
+      return;
+    }
+
+    //是否加入
+    if (e.data.event == "isJoined") {
+      isJoined.value = e.data.params.isJoined;
+    }
+    //是否推流
+    if (e.data.event == "isPublished") {
+      store.commit("rtc/setIsPublished", e.data.params.isPublished);
+    }
+
+    //麦克风开启/关闭
+    if (e.data.event == "audioMuted") {
+      audioMuted.value = e.data.params.audioMuted;
+    }
+
+    //摄像头开启/关闭
+    if (e.data.event == "videoMuted") {
+      videoMuted.value = e.data.params.videoMuted;
+    }
+
+    if (e.data.event == "urlReplace") {
+      history.replaceState(null, null, e.data.params.tempUrl.replace("scene.html", "index.html"));
+    }
+
+    if (e.data.event == "userId") {
+      store.commit("rtc/setUserId", e.data.params.userId);
+    }
+
+    if (e.data.event == "roomId") {
+      store.commit("rtc/setRoomId", e.data.params.roomId);
+    }
+
+
+    if (e.data.event == "exit") {
+      store.commit("rtc/setIsJoined", false);
+    }
+  });
+});
 </script>
 
 <style lang="scss" scoped>

src/pages/scene.vue

@@ -448,6 +448,7 @@ onMounted(async () => {
     store.commit("setFloorId", pano.floorIndex);
     store.commit("rtc/setShowdaogou", true);
 
+
     if (browser.getURLParam("roomId")) {
       store.commit("showShoppingguide", true);
     }

src/store/modules/rtc.js

@@ -40,7 +40,7 @@ export default {
         userSig: state => {
             const { userSig } = genTestUserSig({
                 sdkAppId: parseInt(state.sdkAppId, 10),
-                userId:state.userId,
+                userId: state.userId,
                 secretKey: state.secretKey,
             });
             return userSig
@@ -65,48 +65,65 @@ export default {
         },
 
         setUserId(state, payload) {
-            state.userId=payload
+            state.userId = payload
+            window.parent.postMessage(
+                {
+                    source: "cdf",
+                    event: "userId",
+                    params: {
+                        userId: state.userId
+                    },
+                },
+                "*"
+            );
         },
 
         setRoomId(state, payload) {
-            state.roomId=payload
+            state.roomId = payload
+            window.parent.postMessage(
+                {
+                    source: "cdf",
+                    event: "roomId",
+                    params: {
+                        roomId: state.roomId
+                    },
+                },
+                "*"
+            );
         },
 
         setDeviceList(state, payload) {
-            state.cameraList=payload.cameraItems
-            state.microphoneList=payload.microphoneItems
+            state.cameraList = payload.cameraItems
+            state.microphoneList = payload.microphoneItems
         },
 
         setVideoDeviceId(state, payload) {
-            state.videoDeviceId=payload
+            state.videoDeviceId = payload
         },
 
         setAudioDeviceId(state, payload) {
-            state.audioDeviceId=payload
+            state.audioDeviceId = payload
         },
 
-        setIsJoined(state, payload){
+        setIsJoined(state, payload) {
             state.isJoined = payload
         },
-        setIsPublished(state, payload){
+        setIsPublished(state, payload) {
             state.isPublished = payload
+            window.parent.postMessage(
+                {
+                    source: "cdf",
+                    event: "isPublished",
+                    params: {
+                        isPublished: payload
+                    },
+                },
+                "*"
+            );
         },
-       
-    
-        // createShareLink(state, payload) {
-        //     const userId = `Guest_${Math.floor(Math.random() * 1000000)}`;
-        //     const { userSig } = genTestUserSig({
-        //         sdkAppId: parseInt(state.sdkAppId, 10),
-        //         userId,
-        //         secretKey: state.secretKey,
-        //     });
-        //     const { origin } = window.location;
-        //     const { pathname } = window.location;
-        //     return `${origin}${pathname}#/invite?userSig=${userSig}&&SDKAppId=${state.sdkAppId}&&userId=${userId}&&roomId=${state.roomId}`;
-        // },
-        
+
     },
     actions: {
-      
+
     },
 }