DOMException: Failed to execute 'structuredClone' on 'Window': #<Object> could not be cloned. about mediasoup-client HOT 19 CLOSED

You can ignore utils.clone(), I didn't know what to do with it.

I cannot ignore it because you shown a log in which close() is being called with a track.

from mediasoup-client.

If anyone has the same problem using Vue, don't use ref with mediasoup-client as it will use proxies for every property of a class (ex new Device()). Instead prefer using computed values if you need to keep reactivity.

I was using mediasoup client in a class and storing this class in a ref.

from mediasoup-client.

The error is because in recent version we clone JS objects using an optimized JS function. But that's not a bug. The problem is that, somewhere in your app, you are passing some object that is not a real JS object but a special value (a class, a mobX observable or something like that). We never try to clone a MediaStreamTrack object so the problem is not in the track given to transport.produce() but somewhere else. Check if you are passing special objects to mediasoup-client public API somewhere. For example, if you store router rtpCapabilities in a mobX and then pass them to device.load() that's incorrect. It must be a pure JS object rather than an object handled by mobX or similar things.

from mediasoup-client.

NOTE: even if the problem is triggered when calling produce() it may happen due to wrong data introduced long ago, for example the rtpCapabilities given to device.load() or the data given to device.createXxxxTransport().

BTW also enable full debug by adding "debug" key in local storage with value "*" (without quotes) and reload the web app and check the console.

from mediasoup-client.

I perform a device.load, but I pass an object of type RtpCapabilities, as in this case:

await device.load({ routerRtpCapabilities: rtpCapabilities });

My rtpCapabilities has a socket client. Could that be it? I'm using the Socket.IO library. Basically, I use it to perform a joinRoom

Nevertheless, despite using debugging, I can't find the cause of the error. It occurs in the transport.produce line, and it may originate from earlier, but I really can't find anything that should be causing it, at least from our side. As I mentioned, the only thing that changed in my code was the version of the library, which used to work and now doesn't.

Everything works fine in the cases of the old version and the new one. Looking at the logs between the two, they are identical, but in the latest version, there is a moment where it fails, and the log captures the issue:

awaitqueue rejecting task [name:transport.produce()]: DataCloneError: Failed to execute 'structuredClone' on 'Window': #<Object> could not be cloned. +5ms

UPDATE: The error log indicates that the issue lies in this line:

const producer = await transport.produce({ track, zeroRtpOnPause: true });

Log:

mediasoup-client:Chrome111 send() [kind:audio, track.id:35412c36-2c31-49e5-97f3-a3cbef895ece] +4ms

mediasoup-client_lib_types.js?v=96f720fc:1469 awaitqueue rejecting task [name:transport.produce()]: DataCloneError: Failed to execute 'structuredClone' on 'Window': #<Object> could not be cloned. +1ms

from mediasoup-client.

I'm afraid your app is passing some JS proxy object somewhere to mediasoup-client. The error is clear:

DOMException: Proxy object could not be cloned.

Where from? No idea, but mediasoup-client doesn't use proxy objects at all, so maybe your app is storing retrieved router rtpCapabilities in a mobx store (or similar observable stuff) and then it reads those rtpCapabilities from that store (so no longer a pure JS object but a proxy object now) when it comes to pass them to device.load().

The reason why it fails only in latest versions is because, as I said before, we no longer clone JS objects using JSON.xxxx() methods but the more efficient structuredClone() method. Perhaps the former doesn't complain when trying to clone a proxy object, but that's not a bug in mediasoup-client (proxy objects should not be used as arguments in mediasoup-client API).

BTW which device handler are your app using? Auto detection? Or a forced one? Can you print device.handlerName when in Chrome and when in Firefox?

from mediasoup-client.

Same here.

try {

  stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true })
  const track = stream.getVideoTracks()[0];
  const audioTrack = stream.getAudioTracks()[0];
  const params = { track };
  console.log(track)

  params.encodings = [
    { rid: "r0", active: true, maxBitrate: 100000 },
    { rid: "r1", active: true, maxBitrate: 300000 },
    { rid: "r2", active: true, maxBitrate: 900000 }
  ];
  params.codecOptions = {
    videoGoogleStartBitrate : 1000
  };

  console.log('Params', params)
  producer.value = await producerTransport.value.produce(params);
  console.log('Producer', producer.value)
  const audio_params = { track: audioTrack  };
  audioTrack.codecOptions = {
    opusStereo : 1,
    opusDtx    : 1
  }
  audioProducer.value = await producerTransport.value.produce(audio_params);
  console.log('audioProducer', audioProducer.value)
} catch (err) {
  console.log('HIi----')
  console.log(peerVideos.value)
  console.log('Stream Failed', err)
}

from mediasoup-client.

Guys, I'm afraid I don't see any useful info in those provided logs or screenshots. Please do this instead:

In mediasoup-client/lib/utils.js add a log like this:

function clone(value) {
    console.log('---- utis.clone() | value:', value);

Then reproduce the problem and paste that log here, please.

from mediasoup-client.

Hi, I'm having the same problem. I've tried all the suggestions above but getting this same error.

        const stream = await navigator.mediaDevices.getUserMedia({
            audio: true,
        })
        
        audioTrack = stream.getAudioTracks()[0]
        
        if (!this._sendTransport) throw Error('!this._sendTransport undefined')
        
        this._micProducer = await this._sendTransport.produce({ track: audioTrack })

from mediasoup-client.

I suggested in my previous comment adding that log in the clone() function, but nobody did it so I'm afraid I cannot help much.

from mediasoup-client.

I'm uncertain whether I'm approaching this correctly. If there are specific details or actions you'd like me to log, please let me know—I'm eager to assist. Currently, I've attempted the following steps, but I'm not seeing any output in the console.

import { clone } from 'mediasoup-client/lib/utils'


            audioTrack = stream.getAudioTracks()[0]

            const clonedValue = clone(audioTrack)

            console.log('---- utis.clone() | value:', clonedValue)

            if (!this._sendTransport) throw Error('!this._sendTransport undefined')

            this._micProducer = await this._sendTransport.produce({ track: audioTrack })

from mediasoup-client.

If there are specific details or actions you'd like me to log, please let me know

I meant this: #290 (comment)

from mediasoup-client.

Here is the log of audioTrack = stream.getAudioTracks()[0], right before passing it to transport.produce()

from mediasoup-client.

I found my problem. The following error

failed:DOMException: Failed to execute 'structuredClone' on 'Window': #<Object> could not be cloned

Was due to storing the RoomClient.ts instance in vue ref const roomClient = ref<RoomClient | null>(null)

Now when I am storing it like this let roomClient: RoomClient the error gone.

The error is gone, but I loose vue reactivity.

from mediasoup-client.

Here is the log of audioTrack = stream.getAudioTracks()[0], right before passing it to transport.produce()

I don't understand. mediasoup-client never calls its utils.clone() method with a track as argument. Why does it happen in your app and how is that related to the fact that you are storing your app RoomClient in Vue?

from mediasoup-client.

Here is the log of audioTrack = stream.getAudioTracks()[0], right before passing it to transport.produce()

I don't understand. mediasoup-client never calls its utils.clone() method with a track as argument. Why does it happen in your app and how is that related to the fact that you are storing your app RoomClient in Vue?

You can ignore utils.clone(), I didn't know what to do with it.

from mediasoup-client.

I'm gonna close this issue because obviously it is not related to mediasoup-client. I still don't understand why utils.clone() was called with a MediaStreamTrack (as told here #290 (comment)) but neither I get an answer so cannot keep this issue open forever.

from mediasoup-client.

@ibc , I tried to add the log within utils.js. thet logged value was a proxy. However I could not figure out where in my application was I passing a a proxy to device.load or with rtpCapabilities. I was able to fix it by modifying utlis.js

from mediasoup-client.

I was able to fix it by modifying utlis.js

That's not a real fix but a workaround for a bug in your app or usage of the libary. In mediasoup-client we never pass a Proxy object to utils.clone(). If we pass a Proxy is because the app passed a Proxy object to some mediasoup-client API, which is wrong. We cannot do try/catch to survive to app errors.

from mediasoup-client.