@snapcall/stream-ui 1.11.2 → 1.11.4

package/dist/stream-ui.esm.js

@@ -1110,6 +1110,16 @@ const $15ddac3121cc3a5d$export$4a210166cc9cb64b = async (src)=>{
 
 
 const $a2f0e3c29b11c88e$var$log = new (0, $0f65a9eaf4a1e910$export$2e2bcd8739ae039)("StreamerMediasoup");
+const $a2f0e3c29b11c88e$var$SCREEN_SHARING_SIMULCAST_ENCODINGS = [
+    {
+        dtx: true,
+        maxBitrate: 1500000
+    },
+    {
+        dtx: true,
+        maxBitrate: 6000000
+    }
+];
 function $a2f0e3c29b11c88e$var$deviceAutoDetection() {
     try {
         const ua = navigator.userAgent;
@@ -1226,6 +1236,30 @@ class $a2f0e3c29b11c88e$export$2e2bcd8739ae039 {
         if (direction === "send") return await this.createSendTransport(server);
         else return await this.createRecvTransport(server);
     }
+    async produceAudio(transport, track, appData) {
+        const producer = await transport.produce({
+            track: track,
+            codecOptions: {
+                opusStereo: true,
+                opusDtx: true
+            },
+            appData: appData
+        });
+        return producer;
+    }
+    async produceVideo(transport, track, appData) {
+        const encodings = undefined;
+        const codecOptions = {
+            videoGoogleStartBitrate: 1000
+        };
+        const producer = await transport.produce({
+            track: track,
+            encodings: encodings,
+            codecOptions: codecOptions,
+            appData: appData
+        });
+        return producer;
+    }
 }
 
 
@@ -1432,16 +1466,6 @@ const $c31e3fb4360572af$var$WEBCAM_SIMULCAST_ENCODINGS = [
         maxBitrate: 5000000
     }
 ];
-const $c31e3fb4360572af$var$SCREEN_SHARING_SIMULCAST_ENCODINGS = [
-    {
-        dtx: true,
-        maxBitrate: 1500000
-    },
-    {
-        dtx: true,
-        maxBitrate: 6000000
-    }
-];
 class $c31e3fb4360572af$var$SnapcallEvent extends CustomEvent {
     // eslint-disable-next-line @typescript-eslint/no-useless-constructor
     constructor(name, data){
@@ -1498,7 +1522,6 @@ class $c31e3fb4360572af$export$2e2bcd8739ae039 extends $c31e3fb4360572af$var$Str
         this.roomId = "";
         this.peerId = "";
         this.webcamProducer = null;
-        this.screenshareProducer = null;
         this.customMessages = new Map();
         this.audioRenderers = {};
         this.profile = {};
@@ -1960,7 +1983,7 @@ class $c31e3fb4360572af$export$2e2bcd8739ae039 extends $c31e3fb4360572af$var$Str
             detail: {}
         });
         this.dispatchEvent(event);
-        await this.protoo.request("closeProducer", {
+        if (this.protoo.connected) await this.protoo.request("closeProducer", {
             producerId: producerId
         });
     }
@@ -2103,7 +2126,7 @@ class $c31e3fb4360572af$export$2e2bcd8739ae039 extends $c31e3fb4360572af$var$Str
         this.protooTransport.close();
         this.protoo.close();
         this.micProducer?.close();
-        this.screenshareProducer?.close();
+        this.screenshareVideoProducer?.close();
         this.webcamProducer?.close();
         this.consumers.forEach((consumer)=>{
             consumer.mediaSoupConsumer.close();
@@ -2205,7 +2228,7 @@ class $c31e3fb4360572af$export$2e2bcd8739ae039 extends $c31e3fb4360572af$var$Str
             this.consumers.forEach((consumer)=>{
                 if (consumer.mediaSoupConsumer.kind === "video") videoCount++;
             });
-            if (this.screenshareProducer && !this.screenshareProducer.closed) videoCount++;
+            if (this.screenshareVideoProducer && !this.screenshareVideoProducer.closed) videoCount++;
             let scale = {
                 scaleResolutionDownBy: 1
             };
@@ -2437,7 +2460,7 @@ class $c31e3fb4360572af$export$2e2bcd8739ae039 extends $c31e3fb4360572af$var$Str
     async disableVideo() {
         if (!this.webcamProducer) return;
         this.webcamProducer.close();
-        await this.protoo.request("closeProducer", {
+        if (this.protoo.connected) await this.protoo.request("closeProducer", {
             producerId: this.webcamProducer.id
         });
         this.webcamProducer = null;
@@ -2449,7 +2472,7 @@ class $c31e3fb4360572af$export$2e2bcd8739ae039 extends $c31e3fb4360572af$var$Str
     async enableScreenshare() {
         if (!this.permissions.find((permission)=>permission === "screen_sharing")) throw new Error("feature not allowed");
         const stream = await this.handleGetUserMediaError("screen", navigator.mediaDevices.getDisplayMedia({
-            audio: false,
+            audio: true,
             video: {
                 displaySurface: "monitor",
                 logicalSurface: true,
@@ -2465,26 +2488,28 @@ class $c31e3fb4360572af$export$2e2bcd8739ae039 extends $c31e3fb4360572af$var$Str
             }
         }));
         if (!stream) return;
-        const transport = await this.getTransport("video", "send");
-        const track = stream.getVideoTracks()[0];
-        const encodings = undefined;
-        const codecOptions = {
-            videoGoogleStartBitrate: 1000
-        };
-        let deviceType = "screen";
-        this.screenshareProducer = await transport.produce({
-            track: track,
-            encodings: encodings,
-            codecOptions: codecOptions,
-            appData: {
+        const deviceType = "screen";
+        const audioTransport = await this.getTransport("audio", "send");
+        const audioTrack = stream.getAudioTracks()[0];
+        if (audioTrack) {
+            this.screenshareAudioProducer = await this.streamerMediasoup?.produceAudio(audioTransport, audioTrack, {
                 deviceType: deviceType,
                 share: true
-            }
+            });
+            this.screenshareVideoProducer?.on("transportclose", ()=>{
+                this.screenshareVideoProducer = undefined;
+            });
+        }
+        const track = stream.getVideoTracks()[0];
+        const videoTransport = await this.getTransport("video", "send");
+        this.screenshareVideoProducer = await this.streamerMediasoup?.produceVideo(videoTransport, track, {
+            deviceType: deviceType,
+            share: true
         });
-        this.screenshareProducer.on("transportclose", ()=>{
-            this.screenshareProducer = null;
+        this.screenshareVideoProducer?.on("transportclose", ()=>{
+            this.screenshareVideoProducer = undefined;
         });
-        this.screenshareProducer.on("trackended", ()=>{
+        this.screenshareVideoProducer?.on("trackended", ()=>{
             this.disableScreenshare().catch(()=>{});
         });
         const event = new $c31e3fb4360572af$var$SnapcallEvent("screenshareEnabled", {
@@ -2493,12 +2518,19 @@ class $c31e3fb4360572af$export$2e2bcd8739ae039 extends $c31e3fb4360572af$var$Str
         this.dispatchEvent(event);
     }
     async disableScreenshare() {
-        if (this.screenshareProducer) {
-            this.screenshareProducer.close();
-            await this.protoo.request("closeProducer", {
-                producerId: this.screenshareProducer.id
+        if (this.screenshareVideoProducer) {
+            this.screenshareVideoProducer.close();
+            if (this.protoo.connected) await this.protoo.request("closeProducer", {
+                producerId: this.screenshareVideoProducer.id
             });
-            this.screenshareProducer = null;
+            this.screenshareVideoProducer = undefined;
+        }
+        if (this.screenshareAudioProducer) {
+            this.screenshareAudioProducer.close();
+            if (this.protoo.connected) await this.protoo.request("closeProducer", {
+                producerId: this.screenshareAudioProducer.id
+            });
+            this.screenshareAudioProducer = undefined;
         }
         const event = new $c31e3fb4360572af$var$SnapcallEvent("screenshareDisabled", {
             detail: {}
@@ -2582,9 +2614,9 @@ class $c31e3fb4360572af$export$2e2bcd8739ae039 extends $c31e3fb4360572af$var$Str
         } else throw new Error("webcam producer not available yet");
     }
     requestLocalScreenshare(element) {
-        if (this.screenshareProducer) {
+        if (this.screenshareVideoProducer) {
             const mediaStream = new MediaStream();
-            mediaStream.addTrack(this.screenshareProducer.track);
+            mediaStream.addTrack(this.screenshareVideoProducer.track);
             element.srcObject = mediaStream;
         } else $c31e3fb4360572af$var$log.log("requestLocalScreenshare", "screenshare producer not available yet");
     }
@@ -2710,7 +2742,7 @@ class $c31e3fb4360572af$export$2e2bcd8739ae039 extends $c31e3fb4360572af$var$Str
     getDevicesState() {
         const microphoneEnabled = this.micProducer ? !this.micProducer.closed : false;
         const cameraEnabled = this.webcamProducer ? !this.webcamProducer.closed : false;
-        const screenshareEnabled = this.screenshareProducer ? !this.screenshareProducer.closed : false;
+        const screenshareEnabled = this.screenshareVideoProducer ? !this.screenshareVideoProducer.closed : false;
         return {
             microphone: {
                 enabled: microphoneEnabled,
@@ -10945,18 +10977,21 @@ const $96999d2514f71e51$export$788cb893d96254c8 = ({ state: state , type: type
 
 
 
+
 const $1c8fc500105e5c78$export$f9d8408fefd786da = ({ state: state , setReady: setReady  })=>{
     const QRCodeRef = (0, $3Sbms$useRef)(null);
-    const QRCodeContainerRef = (0, $3Sbms$useRef)(null);
-    const [QRCodeContainerWidth] = (0, $af23c74942bdcae7$export$2b86bedf890eab8)(QRCodeContainerRef.current);
+    const { options: options  } = (0, $3Sbms$useContext)((0, $5f30d8bf4f04621e$export$2e2bcd8739ae039));
+    const [QRCodeContainerRef, { width: QRCodeContainerWidth  }] = (0, $af23c74942bdcae7$export$e295b0c537d32d7d)();
     (0, $3Sbms$useEffect)(()=>{
-        $3Sbms$toCanvas(QRCodeRef.current, window.location.href, {
+        const url = options.sharedURL || window.location.href;
+        $3Sbms$toCanvas(QRCodeRef.current, url, {
             width: QRCodeContainerWidth > 300 ? 300 : QRCodeContainerWidth,
             errorCorrectionLevel: "Q",
             margin: 0
         });
     }, [
-        QRCodeContainerWidth
+        QRCodeContainerWidth,
+        options.sharedURL
     ]);
     return /*#__PURE__*/ (0, $3Sbms$jsx)((0, $c0bb66c3d546ed81$export$2b77a92f1a5ad772), {
         centered: true,
@@ -11554,6 +11589,7 @@ const $db82628e5503d51b$export$53819c0e58f98d49 = (props)=>{
 };
 
 
+
 const $92672d57809ea9d3$var$timerText = (delta)=>{
     const d = [
         Math.floor(delta / 60),
@@ -11562,6 +11598,7 @@ const $92672d57809ea9d3$var$timerText = (delta)=>{
     return d.join(":");
 };
 const $92672d57809ea9d3$export$336a011955157f9a = ()=>{
+    const { options: options  } = (0, $3Sbms$useContext)((0, $5f30d8bf4f04621e$export$2e2bcd8739ae039));
     const [startRecordTime, setStartRecordTime] = (0, $3Sbms$useState)(undefined);
     const [timer, setTimer] = (0, $3Sbms$useState)(0);
     const [countdownVisible, setCountdownVisible] = (0, $3Sbms$useState)(false);
@@ -11576,7 +11613,9 @@ const $92672d57809ea9d3$export$336a011955157f9a = ()=>{
     });
     const sendAssetsModalState = (0, $3Sbms$useOverlayTriggerState)({});
     const [flashAnimation, setFlashAnimation] = (0, $3Sbms$useState)(false);
-    const menuBarState = (0, $a94f21ef9007b90a$export$bd7b6af6aa16550c)({});
+    const menuBarState = (0, $a94f21ef9007b90a$export$bd7b6af6aa16550c)({
+        photo: options?.recorder?.defaultState !== "video"
+    });
     const exitStreaming = (0, $3Sbms$useCallback)(()=>{
         menuBarState.setStreaming(false);
         setStartRecordTime(undefined);
@@ -11823,7 +11862,7 @@ const $26ed036cbc17809a$var$StreamUI = ({ options: options  })=>{
     const streamUIContainerRef = (0, $3Sbms$useRef)(null);
     const videosContainerRef = (0, $3Sbms$useRef)(null);
     const remoteTilesContainerRef = (0, $3Sbms$useRef)(null);
-    const [streamState, setStreamState] = (0, $3Sbms$useState)(options.recorder ? "recorder" : "streaming");
+    const [streamState, setStreamState] = (0, $3Sbms$useState)(options.recorder?.enabled ? "recorder" : "streaming");
     const [isQuickConnectPopupVisible, setIsQuickConnectPopupVisible] = (0, $3Sbms$useState)(false);
     const [isSettingsMenuVisible, setIsSettingsMenuVisible] = (0, $3Sbms$useState)(false);
     const [isYoutubePopupVisible, setIsYoutubePopupVisible] = (0, $3Sbms$useState)(false);
@@ -11975,7 +12014,7 @@ const $26ed036cbc17809a$var$StreamUI = ({ options: options  })=>{
             setPermissions(event.detail.permissions);
             console.log(event.detail.permissions);
             setSelfPeerId(peerId);
-            if (!options.recorder) try {
+            if (!options.recorder?.enabled) try {
                 await (0, $15a01b611391c1e7$export$494039379563c94d)(options);
                 setUserInteractionTriggered(true);
             } catch (userInteractionError) {
@@ -12498,11 +12537,11 @@ var $e02c50a47b475960$exports = {};
 $e02c50a47b475960$exports = "*, :before, :after {\n  box-sizing: border-box;\n  border: 0 solid #e5e7eb;\n}\n\n:before, :after {\n  --tw-content: \"\";\n}\n\nhtml {\n  -webkit-text-size-adjust: 100%;\n  tab-size: 4;\n  font-feature-settings: normal;\n  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;\n  line-height: 1.5;\n}\n\nbody {\n  line-height: inherit;\n  margin: 0;\n}\n\nhr {\n  height: 0;\n  color: inherit;\n  border-top-width: 1px;\n}\n\nabbr:where([title]) {\n  text-decoration: underline dotted;\n}\n\nh1, h2, h3, h4, h5, h6 {\n  font-size: inherit;\n  font-weight: inherit;\n}\n\na {\n  color: inherit;\n  text-decoration: inherit;\n}\n\nb, strong {\n  font-weight: bolder;\n}\n\ncode, kbd, samp, pre {\n  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;\n  font-size: 1em;\n}\n\nsmall {\n  font-size: 80%;\n}\n\nsub, sup {\n  vertical-align: baseline;\n  font-size: 75%;\n  line-height: 0;\n  position: relative;\n}\n\nsub {\n  bottom: -.25em;\n}\n\nsup {\n  top: -.5em;\n}\n\ntable {\n  text-indent: 0;\n  border-color: inherit;\n  border-collapse: collapse;\n}\n\nbutton, input, optgroup, select, textarea {\n  font-family: inherit;\n  font-size: 100%;\n  font-weight: inherit;\n  line-height: inherit;\n  color: inherit;\n  margin: 0;\n  padding: 0;\n}\n\nbutton, select {\n  text-transform: none;\n}\n\nbutton, [type=\"button\"], [type=\"reset\"], [type=\"submit\"] {\n  -webkit-appearance: button;\n  background-color: #0000;\n  background-image: none;\n}\n\n:-moz-focusring {\n  outline: auto;\n}\n\n:-moz-ui-invalid {\n  box-shadow: none;\n}\n\nprogress {\n  vertical-align: baseline;\n}\n\n::-webkit-inner-spin-button, ::-webkit-outer-spin-button {\n  height: auto;\n}\n\n[type=\"search\"] {\n  -webkit-appearance: textfield;\n  outline-offset: -2px;\n}\n\n::-webkit-search-decoration {\n  -webkit-appearance: none;\n}\n\n::-webkit-file-upload-button {\n  -webkit-appearance: button;\n  font: inherit;\n}\n\nsummary {\n  display: list-item;\n}\n\nblockquote, dl, dd, h1, h2, h3, h4, h5, h6, hr, figure, p, pre {\n  margin: 0;\n}\n\nfieldset {\n  margin: 0;\n  padding: 0;\n}\n\nlegend {\n  padding: 0;\n}\n\nol, ul, menu {\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n\ntextarea {\n  resize: vertical;\n}\n\ninput::placeholder, textarea::placeholder {\n  opacity: 1;\n  color: #9ca3af;\n}\n\nbutton, [role=\"button\"] {\n  cursor: pointer;\n}\n\n:disabled {\n  cursor: default;\n}\n\nimg, svg, video, canvas, audio, iframe, embed, object {\n  vertical-align: middle;\n  display: block;\n}\n\nimg, video {\n  max-width: 100%;\n  height: auto;\n}\n\n[hidden] {\n  display: none;\n}\n\n";
 
 
-const $24075a5d702d64b3$var$currentURL = new URL(window.location.href);
-const $24075a5d702d64b3$var$microphoneEnabled = $24075a5d702d64b3$var$currentURL.searchParams.get("microphone-enabled") !== "0";
-const $24075a5d702d64b3$var$cameraEnabled = $24075a5d702d64b3$var$currentURL.searchParams.get("camera-enabled") === "1";
 const $24075a5d702d64b3$var$defaultOptions = {
-    recorder: false,
+    recorder: {
+        enabled: false,
+        defaultState: "photo"
+    },
     sharedURL: window.location.href,
     showMenuButton: true,
     settingsShortcuts: [
@@ -12514,11 +12553,11 @@ const $24075a5d702d64b3$var$defaultOptions = {
     controls: {
         microphone: {
             available: true,
-            enabled: $24075a5d702d64b3$var$microphoneEnabled
+            enabled: true
         },
         camera: {
             available: true,
-            enabled: $24075a5d702d64b3$var$cameraEnabled
+            enabled: false
         },
         screenshare: {
             available: true
@@ -12529,6 +12568,10 @@ const $24075a5d702d64b3$var$defaultOptions = {
 };
 const $24075a5d702d64b3$export$3f94917203ab7078 = {
     init: ({ element: element , ...options })=>{
+        if (typeof options.recorder === "boolean") options.recorder = {
+            enabled: options.recorder,
+            defaultState: "photo"
+        };
         if (element?.nodeType !== window.Node.ELEMENT_NODE) throw new Error('The "element" property must be a valid element!');
         const mergedOptions = (0, $365e765f9890497b$export$6969335ea1e4e77c)($24075a5d702d64b3$var$defaultOptions, options);
         const rootElement = (0, $3Sbms$createRoot)(element);

package/dist/stream-ui.js

@@ -1115,6 +1115,16 @@ const $3575c8a563f2a1da$export$4a210166cc9cb64b = async (src)=>{
 
 
 const $a62e7f17be5cf3a0$var$log = new (0, $d0c6baf97675ab49$export$2e2bcd8739ae039)("StreamerMediasoup");
+const $a62e7f17be5cf3a0$var$SCREEN_SHARING_SIMULCAST_ENCODINGS = [
+    {
+        dtx: true,
+        maxBitrate: 1500000
+    },
+    {
+        dtx: true,
+        maxBitrate: 6000000
+    }
+];
 function $a62e7f17be5cf3a0$var$deviceAutoDetection() {
     try {
         const ua = navigator.userAgent;
@@ -1231,6 +1241,30 @@ class $a62e7f17be5cf3a0$export$2e2bcd8739ae039 {
         if (direction === "send") return await this.createSendTransport(server);
         else return await this.createRecvTransport(server);
     }
+    async produceAudio(transport, track, appData) {
+        const producer = await transport.produce({
+            track: track,
+            codecOptions: {
+                opusStereo: true,
+                opusDtx: true
+            },
+            appData: appData
+        });
+        return producer;
+    }
+    async produceVideo(transport, track, appData) {
+        const encodings = undefined;
+        const codecOptions = {
+            videoGoogleStartBitrate: 1000
+        };
+        const producer = await transport.produce({
+            track: track,
+            encodings: encodings,
+            codecOptions: codecOptions,
+            appData: appData
+        });
+        return producer;
+    }
 }
 
 
@@ -1437,16 +1471,6 @@ const $1dedebd5ff3002eb$var$WEBCAM_SIMULCAST_ENCODINGS = [
         maxBitrate: 5000000
     }
 ];
-const $1dedebd5ff3002eb$var$SCREEN_SHARING_SIMULCAST_ENCODINGS = [
-    {
-        dtx: true,
-        maxBitrate: 1500000
-    },
-    {
-        dtx: true,
-        maxBitrate: 6000000
-    }
-];
 class $1dedebd5ff3002eb$var$SnapcallEvent extends CustomEvent {
     // eslint-disable-next-line @typescript-eslint/no-useless-constructor
     constructor(name, data){
@@ -1503,7 +1527,6 @@ class $1dedebd5ff3002eb$export$2e2bcd8739ae039 extends $1dedebd5ff3002eb$var$Str
         this.roomId = "";
         this.peerId = "";
         this.webcamProducer = null;
-        this.screenshareProducer = null;
         this.customMessages = new Map();
         this.audioRenderers = {};
         this.profile = {};
@@ -1965,7 +1988,7 @@ class $1dedebd5ff3002eb$export$2e2bcd8739ae039 extends $1dedebd5ff3002eb$var$Str
             detail: {}
         });
         this.dispatchEvent(event);
-        await this.protoo.request("closeProducer", {
+        if (this.protoo.connected) await this.protoo.request("closeProducer", {
             producerId: producerId
         });
     }
@@ -2108,7 +2131,7 @@ class $1dedebd5ff3002eb$export$2e2bcd8739ae039 extends $1dedebd5ff3002eb$var$Str
         this.protooTransport.close();
         this.protoo.close();
         this.micProducer?.close();
-        this.screenshareProducer?.close();
+        this.screenshareVideoProducer?.close();
         this.webcamProducer?.close();
         this.consumers.forEach((consumer)=>{
             consumer.mediaSoupConsumer.close();
@@ -2210,7 +2233,7 @@ class $1dedebd5ff3002eb$export$2e2bcd8739ae039 extends $1dedebd5ff3002eb$var$Str
             this.consumers.forEach((consumer)=>{
                 if (consumer.mediaSoupConsumer.kind === "video") videoCount++;
             });
-            if (this.screenshareProducer && !this.screenshareProducer.closed) videoCount++;
+            if (this.screenshareVideoProducer && !this.screenshareVideoProducer.closed) videoCount++;
             let scale = {
                 scaleResolutionDownBy: 1
             };
@@ -2442,7 +2465,7 @@ class $1dedebd5ff3002eb$export$2e2bcd8739ae039 extends $1dedebd5ff3002eb$var$Str
     async disableVideo() {
         if (!this.webcamProducer) return;
         this.webcamProducer.close();
-        await this.protoo.request("closeProducer", {
+        if (this.protoo.connected) await this.protoo.request("closeProducer", {
             producerId: this.webcamProducer.id
         });
         this.webcamProducer = null;
@@ -2454,7 +2477,7 @@ class $1dedebd5ff3002eb$export$2e2bcd8739ae039 extends $1dedebd5ff3002eb$var$Str
     async enableScreenshare() {
         if (!this.permissions.find((permission)=>permission === "screen_sharing")) throw new Error("feature not allowed");
         const stream = await this.handleGetUserMediaError("screen", navigator.mediaDevices.getDisplayMedia({
-            audio: false,
+            audio: true,
             video: {
                 displaySurface: "monitor",
                 logicalSurface: true,
@@ -2470,26 +2493,28 @@ class $1dedebd5ff3002eb$export$2e2bcd8739ae039 extends $1dedebd5ff3002eb$var$Str
             }
         }));
         if (!stream) return;
-        const transport = await this.getTransport("video", "send");
-        const track = stream.getVideoTracks()[0];
-        const encodings = undefined;
-        const codecOptions = {
-            videoGoogleStartBitrate: 1000
-        };
-        let deviceType = "screen";
-        this.screenshareProducer = await transport.produce({
-            track: track,
-            encodings: encodings,
-            codecOptions: codecOptions,
-            appData: {
+        const deviceType = "screen";
+        const audioTransport = await this.getTransport("audio", "send");
+        const audioTrack = stream.getAudioTracks()[0];
+        if (audioTrack) {
+            this.screenshareAudioProducer = await this.streamerMediasoup?.produceAudio(audioTransport, audioTrack, {
                 deviceType: deviceType,
                 share: true
-            }
+            });
+            this.screenshareVideoProducer?.on("transportclose", ()=>{
+                this.screenshareVideoProducer = undefined;
+            });
+        }
+        const track = stream.getVideoTracks()[0];
+        const videoTransport = await this.getTransport("video", "send");
+        this.screenshareVideoProducer = await this.streamerMediasoup?.produceVideo(videoTransport, track, {
+            deviceType: deviceType,
+            share: true
         });
-        this.screenshareProducer.on("transportclose", ()=>{
-            this.screenshareProducer = null;
+        this.screenshareVideoProducer?.on("transportclose", ()=>{
+            this.screenshareVideoProducer = undefined;
         });
-        this.screenshareProducer.on("trackended", ()=>{
+        this.screenshareVideoProducer?.on("trackended", ()=>{
             this.disableScreenshare().catch(()=>{});
         });
         const event = new $1dedebd5ff3002eb$var$SnapcallEvent("screenshareEnabled", {
@@ -2498,12 +2523,19 @@ class $1dedebd5ff3002eb$export$2e2bcd8739ae039 extends $1dedebd5ff3002eb$var$Str
         this.dispatchEvent(event);
     }
     async disableScreenshare() {
-        if (this.screenshareProducer) {
-            this.screenshareProducer.close();
-            await this.protoo.request("closeProducer", {
-                producerId: this.screenshareProducer.id
+        if (this.screenshareVideoProducer) {
+            this.screenshareVideoProducer.close();
+            if (this.protoo.connected) await this.protoo.request("closeProducer", {
+                producerId: this.screenshareVideoProducer.id
             });
-            this.screenshareProducer = null;
+            this.screenshareVideoProducer = undefined;
+        }
+        if (this.screenshareAudioProducer) {
+            this.screenshareAudioProducer.close();
+            if (this.protoo.connected) await this.protoo.request("closeProducer", {
+                producerId: this.screenshareAudioProducer.id
+            });
+            this.screenshareAudioProducer = undefined;
         }
         const event = new $1dedebd5ff3002eb$var$SnapcallEvent("screenshareDisabled", {
             detail: {}
@@ -2587,9 +2619,9 @@ class $1dedebd5ff3002eb$export$2e2bcd8739ae039 extends $1dedebd5ff3002eb$var$Str
         } else throw new Error("webcam producer not available yet");
     }
     requestLocalScreenshare(element) {
-        if (this.screenshareProducer) {
+        if (this.screenshareVideoProducer) {
             const mediaStream = new MediaStream();
-            mediaStream.addTrack(this.screenshareProducer.track);
+            mediaStream.addTrack(this.screenshareVideoProducer.track);
             element.srcObject = mediaStream;
         } else $1dedebd5ff3002eb$var$log.log("requestLocalScreenshare", "screenshare producer not available yet");
     }
@@ -2715,7 +2747,7 @@ class $1dedebd5ff3002eb$export$2e2bcd8739ae039 extends $1dedebd5ff3002eb$var$Str
     getDevicesState() {
         const microphoneEnabled = this.micProducer ? !this.micProducer.closed : false;
         const cameraEnabled = this.webcamProducer ? !this.webcamProducer.closed : false;
-        const screenshareEnabled = this.screenshareProducer ? !this.screenshareProducer.closed : false;
+        const screenshareEnabled = this.screenshareVideoProducer ? !this.screenshareVideoProducer.closed : false;
         return {
             microphone: {
                 enabled: microphoneEnabled,
@@ -10950,18 +10982,21 @@ const $b46da51ab7ae33e7$export$788cb893d96254c8 = ({ state: state , type: type
 
 
 
+
 const $4dac51e936eb334f$export$f9d8408fefd786da = ({ state: state , setReady: setReady  })=>{
     const QRCodeRef = (0, $jQDcL$react.useRef)(null);
-    const QRCodeContainerRef = (0, $jQDcL$react.useRef)(null);
-    const [QRCodeContainerWidth] = (0, $56e1e7a85d8bf4bb$export$2b86bedf890eab8)(QRCodeContainerRef.current);
+    const { options: options  } = (0, $jQDcL$react.useContext)((0, $8b39f32976a7698a$export$2e2bcd8739ae039));
+    const [QRCodeContainerRef, { width: QRCodeContainerWidth  }] = (0, $56e1e7a85d8bf4bb$export$e295b0c537d32d7d)();
     (0, $jQDcL$react.useEffect)(()=>{
-        $jQDcL$qrcode.toCanvas(QRCodeRef.current, window.location.href, {
+        const url = options.sharedURL || window.location.href;
+        $jQDcL$qrcode.toCanvas(QRCodeRef.current, url, {
             width: QRCodeContainerWidth > 300 ? 300 : QRCodeContainerWidth,
             errorCorrectionLevel: "Q",
             margin: 0
         });
     }, [
-        QRCodeContainerWidth
+        QRCodeContainerWidth,
+        options.sharedURL
     ]);
     return /*#__PURE__*/ (0, $jQDcL$reactjsxruntime.jsx)((0, $48c2553f62767e40$export$2b77a92f1a5ad772), {
         centered: true,
@@ -11559,6 +11594,7 @@ const $47dee8347993fb81$export$53819c0e58f98d49 = (props)=>{
 };
 
 
+
 const $7925c01e7577d264$var$timerText = (delta)=>{
     const d = [
         Math.floor(delta / 60),
@@ -11567,6 +11603,7 @@ const $7925c01e7577d264$var$timerText = (delta)=>{
     return d.join(":");
 };
 const $7925c01e7577d264$export$336a011955157f9a = ()=>{
+    const { options: options  } = (0, $jQDcL$react.useContext)((0, $8b39f32976a7698a$export$2e2bcd8739ae039));
     const [startRecordTime, setStartRecordTime] = (0, $jQDcL$react.useState)(undefined);
     const [timer, setTimer] = (0, $jQDcL$react.useState)(0);
     const [countdownVisible, setCountdownVisible] = (0, $jQDcL$react.useState)(false);
@@ -11581,7 +11618,9 @@ const $7925c01e7577d264$export$336a011955157f9a = ()=>{
     });
     const sendAssetsModalState = (0, $jQDcL$reactstately.useOverlayTriggerState)({});
     const [flashAnimation, setFlashAnimation] = (0, $jQDcL$react.useState)(false);
-    const menuBarState = (0, $6f223c293b335d40$export$bd7b6af6aa16550c)({});
+    const menuBarState = (0, $6f223c293b335d40$export$bd7b6af6aa16550c)({
+        photo: options?.recorder?.defaultState !== "video"
+    });
     const exitStreaming = (0, $jQDcL$react.useCallback)(()=>{
         menuBarState.setStreaming(false);
         setStartRecordTime(undefined);
@@ -11828,7 +11867,7 @@ const $ee8cb448c2c74888$var$StreamUI = ({ options: options  })=>{
     const streamUIContainerRef = (0, $jQDcL$react.useRef)(null);
     const videosContainerRef = (0, $jQDcL$react.useRef)(null);
     const remoteTilesContainerRef = (0, $jQDcL$react.useRef)(null);
-    const [streamState, setStreamState] = (0, $jQDcL$react.useState)(options.recorder ? "recorder" : "streaming");
+    const [streamState, setStreamState] = (0, $jQDcL$react.useState)(options.recorder?.enabled ? "recorder" : "streaming");
     const [isQuickConnectPopupVisible, setIsQuickConnectPopupVisible] = (0, $jQDcL$react.useState)(false);
     const [isSettingsMenuVisible, setIsSettingsMenuVisible] = (0, $jQDcL$react.useState)(false);
     const [isYoutubePopupVisible, setIsYoutubePopupVisible] = (0, $jQDcL$react.useState)(false);
@@ -11980,7 +12019,7 @@ const $ee8cb448c2c74888$var$StreamUI = ({ options: options  })=>{
             setPermissions(event.detail.permissions);
             console.log(event.detail.permissions);
             setSelfPeerId(peerId);
-            if (!options.recorder) try {
+            if (!options.recorder?.enabled) try {
                 await (0, $c3d5253d9d597eb5$export$494039379563c94d)(options);
                 setUserInteractionTriggered(true);
             } catch (userInteractionError) {
@@ -12503,11 +12542,11 @@ var $9833f4335ab609cd$exports = {};
 $9833f4335ab609cd$exports = "*, :before, :after {\n  box-sizing: border-box;\n  border: 0 solid #e5e7eb;\n}\n\n:before, :after {\n  --tw-content: \"\";\n}\n\nhtml {\n  -webkit-text-size-adjust: 100%;\n  tab-size: 4;\n  font-feature-settings: normal;\n  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;\n  line-height: 1.5;\n}\n\nbody {\n  line-height: inherit;\n  margin: 0;\n}\n\nhr {\n  height: 0;\n  color: inherit;\n  border-top-width: 1px;\n}\n\nabbr:where([title]) {\n  text-decoration: underline dotted;\n}\n\nh1, h2, h3, h4, h5, h6 {\n  font-size: inherit;\n  font-weight: inherit;\n}\n\na {\n  color: inherit;\n  text-decoration: inherit;\n}\n\nb, strong {\n  font-weight: bolder;\n}\n\ncode, kbd, samp, pre {\n  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;\n  font-size: 1em;\n}\n\nsmall {\n  font-size: 80%;\n}\n\nsub, sup {\n  vertical-align: baseline;\n  font-size: 75%;\n  line-height: 0;\n  position: relative;\n}\n\nsub {\n  bottom: -.25em;\n}\n\nsup {\n  top: -.5em;\n}\n\ntable {\n  text-indent: 0;\n  border-color: inherit;\n  border-collapse: collapse;\n}\n\nbutton, input, optgroup, select, textarea {\n  font-family: inherit;\n  font-size: 100%;\n  font-weight: inherit;\n  line-height: inherit;\n  color: inherit;\n  margin: 0;\n  padding: 0;\n}\n\nbutton, select {\n  text-transform: none;\n}\n\nbutton, [type=\"button\"], [type=\"reset\"], [type=\"submit\"] {\n  -webkit-appearance: button;\n  background-color: #0000;\n  background-image: none;\n}\n\n:-moz-focusring {\n  outline: auto;\n}\n\n:-moz-ui-invalid {\n  box-shadow: none;\n}\n\nprogress {\n  vertical-align: baseline;\n}\n\n::-webkit-inner-spin-button, ::-webkit-outer-spin-button {\n  height: auto;\n}\n\n[type=\"search\"] {\n  -webkit-appearance: textfield;\n  outline-offset: -2px;\n}\n\n::-webkit-search-decoration {\n  -webkit-appearance: none;\n}\n\n::-webkit-file-upload-button {\n  -webkit-appearance: button;\n  font: inherit;\n}\n\nsummary {\n  display: list-item;\n}\n\nblockquote, dl, dd, h1, h2, h3, h4, h5, h6, hr, figure, p, pre {\n  margin: 0;\n}\n\nfieldset {\n  margin: 0;\n  padding: 0;\n}\n\nlegend {\n  padding: 0;\n}\n\nol, ul, menu {\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n\ntextarea {\n  resize: vertical;\n}\n\ninput::placeholder, textarea::placeholder {\n  opacity: 1;\n  color: #9ca3af;\n}\n\nbutton, [role=\"button\"] {\n  cursor: pointer;\n}\n\n:disabled {\n  cursor: default;\n}\n\nimg, svg, video, canvas, audio, iframe, embed, object {\n  vertical-align: middle;\n  display: block;\n}\n\nimg, video {\n  max-width: 100%;\n  height: auto;\n}\n\n[hidden] {\n  display: none;\n}\n\n";
 
 
-const $e68207026aca356b$var$currentURL = new URL(window.location.href);
-const $e68207026aca356b$var$microphoneEnabled = $e68207026aca356b$var$currentURL.searchParams.get("microphone-enabled") !== "0";
-const $e68207026aca356b$var$cameraEnabled = $e68207026aca356b$var$currentURL.searchParams.get("camera-enabled") === "1";
 const $e68207026aca356b$var$defaultOptions = {
-    recorder: false,
+    recorder: {
+        enabled: false,
+        defaultState: "photo"
+    },
     sharedURL: window.location.href,
     showMenuButton: true,
     settingsShortcuts: [
@@ -12519,11 +12558,11 @@ const $e68207026aca356b$var$defaultOptions = {
     controls: {
         microphone: {
             available: true,
-            enabled: $e68207026aca356b$var$microphoneEnabled
+            enabled: true
         },
         camera: {
             available: true,
-            enabled: $e68207026aca356b$var$cameraEnabled
+            enabled: false
         },
         screenshare: {
             available: true
@@ -12534,6 +12573,10 @@ const $e68207026aca356b$var$defaultOptions = {
 };
 const $e68207026aca356b$export$3f94917203ab7078 = {
     init: ({ element: element , ...options })=>{
+        if (typeof options.recorder === "boolean") options.recorder = {
+            enabled: options.recorder,
+            defaultState: "photo"
+        };
         if (element?.nodeType !== window.Node.ELEMENT_NODE) throw new Error('The "element" property must be a valid element!');
         const mergedOptions = (0, $6b4cf4c12c735fdf$export$6969335ea1e4e77c)($e68207026aca356b$var$defaultOptions, options);
         const rootElement = (0, $jQDcL$reactdomclient.createRoot)(element);