|
@@ -2,7 +2,7 @@
|
|
|
<div id="PageRtcLive">
|
|
|
<div class="member_number">
|
|
|
<div class="members"></div>
|
|
|
- <span>2观看</span>
|
|
|
+ <span>{{ user_list.length }}观看</span>
|
|
|
</div>
|
|
|
<!-- <chat ref="chat" v-show="chatShow" :chatList="chatList" :user_info="user_info"></chat> -->
|
|
|
<div class="videoBox userVideo" id="userVideo" v-show="!hideVideoTop">
|
|
@@ -119,6 +119,7 @@ import { onMounted, watch, defineEmits, ref, nextTick } from "vue";
|
|
|
import { useApp, getApp } from "@/app";
|
|
|
import { useStore } from "vuex";
|
|
|
import { Scrollbar, Dialog } from "@/global_components/";
|
|
|
+import common from "@/utils/common";
|
|
|
|
|
|
// import Draw from './paint/Draw';
|
|
|
import { mapGetters } from "vuex";
|
|
@@ -167,6 +168,7 @@ const user_info = ref({});
|
|
|
const user_list = ref([]);
|
|
|
const mode = ref(browser.getURLParam("mode"));
|
|
|
const role = ref(browser.getURLParam("role"));
|
|
|
+
|
|
|
const chatList = ref([]);
|
|
|
const text = ref("");
|
|
|
|
|
@@ -175,86 +177,11 @@ const canUndo = ref(false);
|
|
|
const audioDevices = ref([1]);
|
|
|
const videoDevices = ref([1]);
|
|
|
const disableMic = ref(false);
|
|
|
-const leaderInfo = ref(null);
|
|
|
const chatShow = ref(true);
|
|
|
const all_mute_mic = ref(true);
|
|
|
|
|
|
const onDrawUndo = () => {};
|
|
|
|
|
|
-const setRtc = (res) => {
|
|
|
- console.log("成功进入", res);
|
|
|
- self.connectStatus = 1;
|
|
|
-
|
|
|
- self.user_info = res.user;
|
|
|
- self.user_list = res.users;
|
|
|
- //分享链接
|
|
|
- if (!(window.self === window.top)) {
|
|
|
- // console.log(document.referrer)
|
|
|
- var origin = "";
|
|
|
- if (parent != window) {
|
|
|
- try {
|
|
|
- origin = parent.location.href;
|
|
|
- } catch (e) {
|
|
|
- // origin = document.referrer;
|
|
|
-
|
|
|
- origin = window.name;
|
|
|
- }
|
|
|
- }
|
|
|
- self.shareLink = origin + "#/sceneVisitor" + window.location.search + "#/?mode=" + self.mode + "&role=customer&roomId=" + self.user_info.RoomId;
|
|
|
- } else {
|
|
|
- self.shareLink =
|
|
|
- window.location.origin + window.location.pathname + window.location.search + "#/?mode=" + self.mode + "&role=customer&roomId=" + self.user_info.RoomId;
|
|
|
- }
|
|
|
-
|
|
|
- let hash = "";
|
|
|
-
|
|
|
- if (self.role == "leader") {
|
|
|
- if (!browser.urlHashValue("roomId")) {
|
|
|
- hash += "&roomId=" + self.user_info.RoomId;
|
|
|
- }
|
|
|
- if (!browser.urlHashValue("userId")) {
|
|
|
- hash += "&userId=" + self.user_info.UserId;
|
|
|
- }
|
|
|
- } else {
|
|
|
- if (!browser.urlHashValue("userId")) {
|
|
|
- hash += "&userId=" + self.user_info.UserId;
|
|
|
- }
|
|
|
- }
|
|
|
- //重定向hash
|
|
|
- window.location.replace(window.location.href + hash);
|
|
|
- if (!(window.self === window.top)) {
|
|
|
- //判断在iframe内 需要告知外层
|
|
|
- window.parent.postMessage({ type: "msg", url: window.location.href + hash }, "*");
|
|
|
- }
|
|
|
- //创建通话
|
|
|
- if (!checkBrowserSupport()) {
|
|
|
- self.$parent.showCheckBrowser = true;
|
|
|
- } else {
|
|
|
- checkDevices()
|
|
|
- .then((res) => {
|
|
|
- self.audioDevices = res.filter(function (device) {
|
|
|
- return device.kind === "audioinput";
|
|
|
- });
|
|
|
- self.videoDevices = res.filter(function (device) {
|
|
|
- return device.kind === "videoinput";
|
|
|
- });
|
|
|
- console.log("audioDevices", self.audioDevices);
|
|
|
- console.log("videoDevices", self.videoDevices);
|
|
|
- initRtc(self.user_info.RoomId, {
|
|
|
- videoDevices: self.videoDevices,
|
|
|
- audioDevices: self.audioDevices,
|
|
|
- });
|
|
|
- })
|
|
|
- .catch((err) => {
|
|
|
- console.log(err);
|
|
|
- initRtc(self.user_info.RoomId, {
|
|
|
- videoDevices: self.videoDevices,
|
|
|
- audioDevices: self.audioDevices,
|
|
|
- });
|
|
|
- });
|
|
|
- }
|
|
|
-};
|
|
|
-
|
|
|
const onFocus = () => {
|
|
|
showInput.value = true;
|
|
|
nextTick(() => {
|
|
@@ -304,46 +231,73 @@ const startFollow = (app) => {
|
|
|
var isJoined = false;
|
|
|
|
|
|
socket.value.on("connect", () => {
|
|
|
- console.log(socket.value, "socket");
|
|
|
socket.value.emit("join", {
|
|
|
- userId: Date.now().toString(),
|
|
|
- roomId: "test-room",
|
|
|
- role: "leader",
|
|
|
+ userId: browser.getURLParam("userId") || common.uuid(12),
|
|
|
+ roomId: browser.getURLParam("roomId") || common.uuid(12),
|
|
|
+ role: role.val || "leader",
|
|
|
});
|
|
|
});
|
|
|
|
|
|
- socket.value.on("action", (data) => {
|
|
|
- if (data.type == "error") {
|
|
|
- } else if (data.type == "user-join") {
|
|
|
-
|
|
|
- connectStatus.value = 1
|
|
|
- user_info.value = data.user;
|
|
|
- user_list.value = data.members;
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
- console.log(user_info.value, "user_info");
|
|
|
-
|
|
|
- shareLink.value = getUrl(window.location.href, [
|
|
|
- {
|
|
|
- key: "mode",
|
|
|
- val: mode.value,
|
|
|
- },
|
|
|
+ // 加入房间成功
|
|
|
+ socket.value.on("join", (data) => {
|
|
|
+ connectStatus.value = 1;
|
|
|
+ console.log(data,'join');
|
|
|
+ user_info.value = data.user;
|
|
|
+ user_list.value = data.members;
|
|
|
+
|
|
|
+ console.log(user_info.value, "user_info");
|
|
|
+
|
|
|
+ //更新分享链接
|
|
|
+ shareLink.value = getUrl(window.location.href, [
|
|
|
+ {
|
|
|
+ key: "mode",
|
|
|
+ val: mode.value,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key: "name",
|
|
|
+ val: "",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key: "role",
|
|
|
+ val: "customer",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key: "roomId",
|
|
|
+ val: user_info.value.RoomId,
|
|
|
+ },
|
|
|
+ ]);
|
|
|
+
|
|
|
+ let tmp = "";
|
|
|
+
|
|
|
+ if (user_info.value.Role == "leader") {
|
|
|
+ tmp = getUrl(window.location.href, [
|
|
|
{
|
|
|
- key: "name",
|
|
|
- val: "",
|
|
|
+ key: "roomId",
|
|
|
+ val: user_info.value.RoomId,
|
|
|
},
|
|
|
{
|
|
|
- key: "role",
|
|
|
- val: "customer",
|
|
|
+ key: "userId",
|
|
|
+ val: user_info.value.UserId,
|
|
|
},
|
|
|
+ ]);
|
|
|
+ } else {
|
|
|
+ tmp = getUrl(window.location.href, [
|
|
|
{
|
|
|
- key: "roomId",
|
|
|
- val: user_info.value.RoomId,
|
|
|
+ key: "userId",
|
|
|
+ val: user_info.value.UserId,
|
|
|
},
|
|
|
]);
|
|
|
+ }
|
|
|
|
|
|
- isJoined = true;
|
|
|
+ history.replaceState(null, null, tmp);
|
|
|
+
|
|
|
+ isJoined = true;
|
|
|
+ });
|
|
|
+
|
|
|
+ socket.value.on("action", (data) => {
|
|
|
+ if (data.type == "error") {
|
|
|
+ Dialog.toast({ content: `房间未找到`, type: "error" });
|
|
|
+ } else if (data.type == "user-join") {
|
|
|
}
|
|
|
});
|
|
|
|