Mock tracks works in an insecure context (#62)

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",

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);

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 });

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({

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);

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";