browsers not rendering media content

Off Topic
1

Hi all,

I’m asking this in off topic - because I don’t believe it’s directly related to Media Soup (though… it could easily be related to my implementation/usage). I think it’s more to do with what I’m trying to do within a React app with media tracks. I’m looking for anyone who’s potentially experienced similar behavior (and what might resolve it).

I’m setting up multiple consumers and streaming data within a react app. So the browser ends up with multiple media streams displaying at a single time. I’ve got a “main” element - which is centered and I essentially toggle those streams in to the “main” element (the user selects which stream they want to be large and centered). This works, but I’m finding that after toggling, the video element is blank until I do some interaction, as if playback isn’t starting within that main element - So I just get a blank space until I either do something with the dom or tab to another window and back.

I thought that this must have been an auto-play policy within the browser - but having muted attributes on the elements doesn’t seem to help.

I then thought it might have needed some pause/resume actions - so I ensured that consumers were created as paused and then resumed after created (this idea was taken from the docs which indicate that it’s best practice to create consumers in paused state).

Next thing I thought was that maybe that toggling the video between elements in the app may need new keyframes as if it were starting playback as a new stream. I tried more pausing/resuming experiments and keyframe requesting - which did not seem to help.

then I got to where I am at now… wondering if just the act of dynamically moving tracks around between elements is just nasty…

would love to know if other people have any thoughts.
thanks!

2

You are probably missing something like this to make sure video is played as soon as possible:

preview.onloadedmetadata = () => {
    preview.play();
};

But doens’t match the description precisely. Check the demo app as a working example.

3

It’s unclear what does “interaction” mean here.

4

In some cases (combination of browsers versions / privacy policies settings / mobile devices) this is not enough. The solution in this case is:

  • verify if video.play() throws an exception;
  • if yes, attach some event handlers to mouse actions (mousemove, click, tap, etc.) with addEventListener, execute play() on all media elements and then disconnect the signals immediately with removeEventListener.
5

thanks everyone, I will check this suggestions and let you know if it makes a difference - @snnz by interaction, I mean some user actions - such as clicking things on the page, “doing stuff” - it was for this reason why I thought it was looking like an autoplay issue - but I’ll update this thread once I’ve tried the suggestions - again many thanks for the quick replies, really appreciate it.

6

Hi all,

managed to eventually sort this out. Nothing at all to do with media soup, or even the browsers - there was a lot going on on the page - lots of re-rendering and dynamic content. Tweaking a few bits here and there has resolved. Thanks to all for your input - it was a very specific issue to the setup of our app.