From 216ef3750dd4acfa69247565c5480a6955570de5 Mon Sep 17 00:00:00 2001
From: Kamil Stasiak <kamilstasiaknew@gmail.com>
Date: Wed, 20 Dec 2023 10:29:14 +0100
Subject: [PATCH] Mock tracks works in an insecure context (#62)

---
 package-lock.json                     | 26 +++++++++++++++++++++++---
 package.json                          |  2 ++
 src/components/AudioDevicePanel.tsx   |  3 ++-
 src/components/MockVideoPanel.tsx     |  3 ++-
 src/components/ScreensharingPanel.tsx |  5 +++--
 src/components/VideoDevicePanel.tsx   |  3 ++-
 src/containers/Dashboard.tsx          |  9 ++++++++-
 7 files changed, 42 insertions(+), 9 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index afd4528..d6fc8cd 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -28,6 +28,7 @@
         "react-hot-toast": "^2.4.1",
         "react-icons": "^4.12.0",
         "react-router-dom": "^6.20.1",
+        "uuid": "^9.0.1",
         "vite-plugin-mkcert": "^1.17.1"
       },
       "devDependencies": {
@@ -37,6 +38,7 @@
         "@types/phoenix": "^1.6.4",
         "@types/react": "^18.2.42",
         "@types/react-dom": "^18.2.17",
+        "@types/uuid": "^9.0.7",
         "@typescript-eslint/eslint-plugin": "^6.13.2",
         "@vitejs/plugin-react": "^4.2.1",
         "autoprefixer": "^10.4.16",
@@ -1074,6 +1076,14 @@
         "uuid": "^8.3.2"
       }
     },
+    "node_modules/@jellyfish-dev/membrane-webrtc-js/node_modules/uuid": {
+      "version": "8.3.2",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
+      "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
+      "bin": {
+        "uuid": "dist/bin/uuid"
+      }
+    },
     "node_modules/@jellyfish-dev/react-client-sdk": {
       "version": "0.1.6",
       "resolved": "https://registry.npmjs.org/@jellyfish-dev/react-client-sdk/-/react-client-sdk-0.1.6.tgz",
@@ -1830,6 +1840,12 @@
       "integrity": "sha512-dn1l8LaMea/IjDoHNd9J52uBbInB796CDffS6VdIxvqYCPSG0V0DzHp76GpaWnlhg88uYyPbXCDIowa86ybd5A==",
       "dev": true
     },
+    "node_modules/@types/uuid": {
+      "version": "9.0.7",
+      "resolved": "https://registry.npmjs.org/@types/uuid/-/uuid-9.0.7.tgz",
+      "integrity": "sha512-WUtIVRUZ9i5dYXefDEAI7sh9/O7jGvHg7Df/5O/gtH3Yabe5odI3UWopVR1qbPXQtvOxWu3mM4XxlYeZtMWF4g==",
+      "dev": true
+    },
     "node_modules/@typescript-eslint/eslint-plugin": {
       "version": "6.13.2",
       "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-6.13.2.tgz",
@@ -5567,9 +5583,13 @@
       "dev": true
     },
     "node_modules/uuid": {
-      "version": "8.3.2",
-      "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
-      "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
+      "version": "9.0.1",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.1.tgz",
+      "integrity": "sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA==",
+      "funding": [
+        "https://github.com/sponsors/broofa",
+        "https://github.com/sponsors/ctavan"
+      ],
       "bin": {
         "uuid": "dist/bin/uuid"
       }
diff --git a/package.json b/package.json
index f7326ed..c851f90 100644
--- a/package.json
+++ b/package.json
@@ -36,6 +36,7 @@
     "react-hot-toast": "^2.4.1",
     "react-icons": "^4.12.0",
     "react-router-dom": "^6.20.1",
+    "uuid": "^9.0.1",
     "vite-plugin-mkcert": "^1.17.1"
   },
   "devDependencies": {
@@ -45,6 +46,7 @@
     "@types/phoenix": "^1.6.4",
     "@types/react": "^18.2.42",
     "@types/react-dom": "^18.2.17",
+    "@types/uuid": "^9.0.7",
     "@typescript-eslint/eslint-plugin": "^6.13.2",
     "@vitejs/plugin-react": "^4.2.1",
     "autoprefixer": "^10.4.16",
diff --git a/src/components/AudioDevicePanel.tsx b/src/components/AudioDevicePanel.tsx
index 15e12da..05319e2 100644
--- a/src/components/AudioDevicePanel.tsx
+++ b/src/components/AudioDevicePanel.tsx
@@ -1,6 +1,7 @@
 import { FaMicrophone } from "react-icons/fa";
 import { getUserMedia } from "../utils/browser-media-utils";
 import { DeviceInfo } from "../containers/StreamingSettingsCard";
+import { v4 as uuidv4 } from "uuid";
 
 type AudioDevicePanelProps = {
   deviceId: string;
@@ -19,7 +20,7 @@ export const AudioDevicePanel = ({
     <button
       className="btn btn-success btn-sm"
       onClick={() => {
-        const id = deviceId + crypto.randomUUID();
+        const id = deviceId + uuidv4();
         getUserMedia(id, "audio").then((stream) => {
           setSelectedAudioId({ id: id, type: "audio", stream: stream });
           addLocalAudioStream(stream, id);
diff --git a/src/components/MockVideoPanel.tsx b/src/components/MockVideoPanel.tsx
index d1db704..ad65a37 100644
--- a/src/components/MockVideoPanel.tsx
+++ b/src/components/MockVideoPanel.tsx
@@ -7,6 +7,7 @@ import { atomWithStorage } from "jotai/utils";
 import { useAtom } from "jotai";
 import { useState } from "react";
 import { DeviceInfo } from "../containers/StreamingSettingsCard";
+import { v4 as uuidv4 } from "uuid";
 
 type MockVideoPanelProps = {
   id: string;
@@ -62,7 +63,7 @@ export const MockVideoPanel = ({ addLocalVideoStream, setSelectedDeviceId, id }:
             key={index}
             className="btn btn-sm btn-success"
             onClick={() => {
-              const uuid = crypto.randomUUID();
+              const uuid = uuidv4();
               const stream = mockStreams[index].create().stream;
               const id = mockStreamNames[index] + uuid;
               setSelectedDeviceId({ id, type: "video", stream: stream });
diff --git a/src/components/ScreensharingPanel.tsx b/src/components/ScreensharingPanel.tsx
index 2d5dbd0..0e918a5 100644
--- a/src/components/ScreensharingPanel.tsx
+++ b/src/components/ScreensharingPanel.tsx
@@ -2,6 +2,7 @@ import { DeviceInfo } from "../containers/StreamingSettingsCard";
 import { useState } from "react";
 import { showToastError } from "./Toasts";
 import { TbScreenShare } from "react-icons/tb";
+import { v4 as uuidv4 } from "uuid";
 
 type ScreensharingPanelProps = {
   addLocalStream: (stream: MediaStream, id: string) => void;
@@ -22,8 +23,8 @@ export const ScreensharingPanel = ({ label, addLocalStream, setSelectedDeviceId
       <button
         className="btn btn-success btn-sm"
         onClick={() => {
-          const videoId = "screenshare_" + crypto.randomUUID();
-          const audioId = "screenshare_" + crypto.randomUUID();
+          const videoId = "screenshare_" + uuidv4();
+          const audioId = "screenshare_" + uuidv4();
           if (navigator.mediaDevices.getDisplayMedia) {
             navigator.mediaDevices
               .getDisplayMedia({
diff --git a/src/components/VideoDevicePanel.tsx b/src/components/VideoDevicePanel.tsx
index 7646c7f..a99226f 100644
--- a/src/components/VideoDevicePanel.tsx
+++ b/src/components/VideoDevicePanel.tsx
@@ -1,6 +1,7 @@
 import { AiOutlineCamera } from "react-icons/ai";
 import { getUserMedia } from "../utils/browser-media-utils";
 import { DeviceInfo } from "../containers/StreamingSettingsCard";
+import { v4 as uuidv4 } from "uuid";
 type VideoDevicePanelProps = {
   deviceId: string;
   label: string;
@@ -18,7 +19,7 @@ export const VideoDevicePanel = ({
     <button
       className="btn btn-success btn-sm"
       onClick={() => {
-        const id = deviceId + crypto.randomUUID();
+        const id = deviceId + uuidv4();
         getUserMedia(deviceId, "video").then((stream) => {
           setSelectedVideoId({ id: id, type: "video", stream: stream });
           addLocalVideoStream(stream, id);
diff --git a/src/containers/Dashboard.tsx b/src/containers/Dashboard.tsx
index 1efcbda..fd2b7a1 100644
--- a/src/containers/Dashboard.tsx
+++ b/src/containers/Dashboard.tsx
@@ -13,7 +13,14 @@ import { Checkbox } from "../components/Checkbox";
 import SocialLinks, { DASHBOARD_GITHUB, SocialIcon } from "../components/SocialLinks";
 import { socialIcons } from "../assets/SocialIcons";
 
-export const DEFAULT_HOST = "localhost:5002";
+const selectDefaultHost = (host: string) => {
+  const parts = host.split(":");
+  return parts.length === 2 ? parts[0] : "localhost";
+};
+
+export const DEFAULT_PORT = "5002";
+export const DEFAULT_IP = selectDefaultHost(window.location.host);
+export const DEFAULT_HOST = `${DEFAULT_IP}:${DEFAULT_PORT}`;
 export const DEFAULT_IS_WSS = false;
 export const DEFAULT_IS_HTTPS = false;
 export const DEFAULT_PATH = "/socket/peer/websocket";