`width` attribute for the `<iframe>` (Cameras/Stream Type/HTTP page)

[balthisar]

Is your feature request related to a problem? Please describe

When adding cameras via the Fluidd UI, we have the option to specify a stream type with the value HTTP page, which will load a website via an iframe instead of a direct camera feed. The requirement to specify the height of the iframe functions, but because no width is specified in the rendered iframe, the iframe is defaulted to 300px, which presents a poor aspect ratio. For example:

<iframe data-v-3b58d080="" src="https://prettygcode.local/" height="480" frameborder="0" class="camera-image"></iframe>

Please see screencap "Additional information" field, below.

Describe the solution you'd like

Either:

• Apply a fixed, width="100%" to the iframe, e.g.,

  <iframe data-v-3b58d080="" src="https://prettygcode.local/" height="480" width="100%" frameborder="0" class="camera-image"></iframe>

• Or add the ability to provide a user-specified width to the Add Camera UI.

Describe alternatives you've considered

None.

Additional information

[ayufan]

@balthisar Thanks for this issue.

I'm facing the same problem that I noticed while working on WebRTC feed to https://github.com/ayufan-research/camera-streamer/tree/webrtc#webrtc-support. The width: 100% seems to do the trick. The WebRTC requires RTCPeerConnection handshake in order to feed <video> tag.

A quick workaround:

sed -i.bak 's/frameBorder:"0"/frameBorder:"0",width:"100%"/g' js/app.48149f8d.js

[ayufan]

However, this might not be good way. Whether we need width or heigh does depend on screensize. This is how it looks on iOS.

[Noguai]

I'm also using the iframe camera type to embed a WebRTC stream and have pretty much the same issue.

Though I think for the purpose of embedding camera streams, setting a specified aspect ratio would be much more useful than a specific width/height as it is now. That way the card containing the stream would be properly displayed regardless of screen size or desktop or mobile use.

My current workaround for this is to set the iframe height in the camera settings to -1 and manually change the style sheet for the iframe (by editing the respective css file on the raspberry) as seen in the screen shot below:

[matmen]

The iframes now fill the elements width in the newest release. In the next release we're going to implement aspect-ratio based sizing (still filling the available width (because it's the static component here), but with a height derived from that width; it hasn't landed in this release yet because it's a breaking change, see #867).

[ayufan]

Wow. Thank you @matmen!

[ayufan]

This works great now.