I’m encountering an issue while attempting to cast a HTML page from the web that contains an iframe for the media source. Below is an example of the HTML structure:
<code><html>
<head>
<title>Dashboard</title>
</head>
<body>
<iframe width="1920px" height="1080px" id="dashboard" scrolling="no" src="https://sportyapp.co.za/assets/images/SportyAppLoading.png"></iframe>
</body>
</html>
</code>
<code><html>
<head>
<title>Dashboard</title>
</head>
<body>
<iframe width="1920px" height="1080px" id="dashboard" scrolling="no" src="https://sportyapp.co.za/assets/images/SportyAppLoading.png"></iframe>
</body>
</html>
</code>
<html>
<head>
<title>Dashboard</title>
</head>
<body>
<iframe width="1920px" height="1080px" id="dashboard" scrolling="no" src="https://sportyapp.co.za/assets/images/SportyAppLoading.png"></iframe>
</body>
</html>
However, when running my Expo app with the provided React Native code snippet:
<code>import React, { useEffect } from 'react';
import { CastButton, useRemoteMediaClient } from 'react-native-google-cast';
export default function ChromeCast() {
const client = useRemoteMediaClient();
const receiverUrl = 'http://sportyapp.co.za/test.html';
useEffect(() => {
const loadReceiverUrl = async () => {
try {
if (client) {
await client.loadMedia({
mediaInfo: {
contentUrl: receiverUrl,
contentType: 'text/html'
},
autoplay: true, // Optional: autoplay the loaded content
});
}
} catch (error) {
console.error('Error loading custom receiver URL:', error);
}
};
loadReceiverUrl();
return () => {
// Clean up any resources if needed
};
}, [client, receiverUrl]);
return <CastButton style={{ width: 24, height: 24, tintColor: 'blue', marginRight: 20 }} />;
}
</code>
<code>import React, { useEffect } from 'react';
import { CastButton, useRemoteMediaClient } from 'react-native-google-cast';
export default function ChromeCast() {
const client = useRemoteMediaClient();
const receiverUrl = 'http://sportyapp.co.za/test.html';
useEffect(() => {
const loadReceiverUrl = async () => {
try {
if (client) {
await client.loadMedia({
mediaInfo: {
contentUrl: receiverUrl,
contentType: 'text/html'
},
autoplay: true, // Optional: autoplay the loaded content
});
}
} catch (error) {
console.error('Error loading custom receiver URL:', error);
}
};
loadReceiverUrl();
return () => {
// Clean up any resources if needed
};
}, [client, receiverUrl]);
return <CastButton style={{ width: 24, height: 24, tintColor: 'blue', marginRight: 20 }} />;
}
</code>
import React, { useEffect } from 'react';
import { CastButton, useRemoteMediaClient } from 'react-native-google-cast';
export default function ChromeCast() {
const client = useRemoteMediaClient();
const receiverUrl = 'http://sportyapp.co.za/test.html';
useEffect(() => {
const loadReceiverUrl = async () => {
try {
if (client) {
await client.loadMedia({
mediaInfo: {
contentUrl: receiverUrl,
contentType: 'text/html'
},
autoplay: true, // Optional: autoplay the loaded content
});
}
} catch (error) {
console.error('Error loading custom receiver URL:', error);
}
};
loadReceiverUrl();
return () => {
// Clean up any resources if needed
};
}, [client, receiverUrl]);
return <CastButton style={{ width: 24, height: 24, tintColor: 'blue', marginRight: 20 }} />;
}
I receive the following error:
<code>ERROR Error loading custom receiver URL: [Error: Media control channel status code 2100]
</code>
<code>ERROR Error loading custom receiver URL: [Error: Media control channel status code 2100]
</code>
ERROR Error loading custom receiver URL: [Error: Media control channel status code 2100]
Steps to Reproduce:
- Run the provided Expo app with the given code.
- Attempt to cast the HTML page with the iframe as the media source.
- Observe the error encountered.
Expected Behavior:
I expect the HTML page with the iframe to be successfully casted as the media source without encountering any errors.
Additional Information:
- Platform: React Native
- Environment: Expo
- Package Used:
react-native-google-cast
-My for testing
https://github.com/noahschwagele/react-native-ffmpeg-sportyapp
Ive tried Displaying a normal image with the following code and it seems to work:
<code>import React, { useEffect } from 'react';
import { CastButton, useRemoteMediaClient } from 'react-native-google-cast';
export default function ChromeCast() {
const client = useRemoteMediaClient();
const receiverUrl = 'http://sportyapp.co.za/assets/images/SportyAppLoading.png';
useEffect(() => {
const loadReceiverUrl = async () => {
try {
if (client) {
await client.loadMedia({
mediaInfo: {
contentUrl: receiverUrl,
contentType: 'image/*'
},
});
}
} catch (error) {
console.error('Error loading custom receiver URL:', error);
}
};
loadReceiverUrl();
return () => {
// Clean up any resources if needed
};
}, [client, receiverUrl]);
return <CastButton style={{ width: 24, height: 24, tintColor: 'blue', marginRight: 20 }} />;
}
</code>
<code>import React, { useEffect } from 'react';
import { CastButton, useRemoteMediaClient } from 'react-native-google-cast';
export default function ChromeCast() {
const client = useRemoteMediaClient();
const receiverUrl = 'http://sportyapp.co.za/assets/images/SportyAppLoading.png';
useEffect(() => {
const loadReceiverUrl = async () => {
try {
if (client) {
await client.loadMedia({
mediaInfo: {
contentUrl: receiverUrl,
contentType: 'image/*'
},
});
}
} catch (error) {
console.error('Error loading custom receiver URL:', error);
}
};
loadReceiverUrl();
return () => {
// Clean up any resources if needed
};
}, [client, receiverUrl]);
return <CastButton style={{ width: 24, height: 24, tintColor: 'blue', marginRight: 20 }} />;
}
</code>
import React, { useEffect } from 'react';
import { CastButton, useRemoteMediaClient } from 'react-native-google-cast';
export default function ChromeCast() {
const client = useRemoteMediaClient();
const receiverUrl = 'http://sportyapp.co.za/assets/images/SportyAppLoading.png';
useEffect(() => {
const loadReceiverUrl = async () => {
try {
if (client) {
await client.loadMedia({
mediaInfo: {
contentUrl: receiverUrl,
contentType: 'image/*'
},
});
}
} catch (error) {
console.error('Error loading custom receiver URL:', error);
}
};
loadReceiverUrl();
return () => {
// Clean up any resources if needed
};
}, [client, receiverUrl]);
return <CastButton style={{ width: 24, height: 24, tintColor: 'blue', marginRight: 20 }} />;
}
Which works and shows the image
Ive also know it is possible to do so with html content as ive seen people do it before but cant seem to replicate it with this package or might be missing something
Any guidance or assistance on resolving this issue would be greatly appreciated. Thank you!
New contributor
Noah Schwagele is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.