Airplay in Media Chrome + MuxPlayer + React

[KushwahaVikashJ]

media-chrome (media-airplay-button) button is not working in mux-player-react for safari browser.
able to click on button but not showing the available device to cast in safari browser.

I'm attaching a codesandbox example for same : https://codesandbox.io/s/billowing-morning-qb9wvh?file=/src/Video.js

please respond for the same.

[dylanjha]

Hi @KushwahaVikashJ , thanks for the question

I'm not sure if this is what you're running into, but: <MuxPlayer /> already uses media chrome under the hood to build the UI, so you wouldn't want to do this:

<media-controller>
  <MuxPlayer slot="media" />
</media-controller>

<MuxPlayer /> is meant to be used standalone. To use Media Chrome with a Mux source, use <mux-video> (or the react equivalent <MuxVideo />:

• https://github.com/muxinc/elements/tree/main/packages/mux-video
• https://github.com/muxinc/elements/tree/main/packages/mux-video-react

So in your React app you can do:

<media-controller>
  <MuxVideo slot="media" />
</media-controller>