2 quick questions 
would you be so nice and share it how did you do that ?
Oh sorry, yes, showPTzControls is a custom extension. It works like the door entry tile. Just a convenience flag to add a set of PTZ controls to the camera popup. In fact you could just use the door entry tile for this, the layout is configurable.
To get two different cameras on the static tile and the popup, an easy way to get this without too many modifications is to change the way the popup acquires the camera entity ids. In index.html (line 80 onwards), getItemEntity is called to get the cameras and make them selectively visible. You can replace this call (see main.js) to grab a different camera instead, maybe just by removing the _lowres postfix on the entity name. Something like:
var camera_hires_id = item.id;
if( camera_hires_id.endsWith("_lowres") ) camera_hires_id = camera_hires_id.slice(0, -7);
(Don’t mind the bad Javascript, I’m a C++ guy 
)
That’s what I did at first, before rewriting this in a cleaner and more custom way, it worked pretty well.
does anybody know how to bring light sliders in a pop-up window? (outside the light div)
thx for response …
actually I’m using door entry tile as I added some buttons to move camera to predefined position, open gates etc
Anyway … I’m still having problem with showing high quality streams in tileboard … they are ok in HA lovelance but not showing up in tileboard
so again question … have you change anything in order to make it work or this is just my local issue ?
just for reference i tried different combinations of:
non of those combinations worked for me in tileboard 
only platform synology works for me in both: HA lovelace and tileboard
cameras are HikVision DS-2DE2A404IW-DE3
Thank you so much! Lucky for me it was very easy to setup with my Arlo cameras (I use the aarlo integration which has built in streaming support).
I still have some fine tuning to do with the UI but it works great.
{
position: [0, 0],
id: 'camera.aarlo_front_door',
type: TYPES.CAMERA_THUMBNAIL,
bgSize: 'cover',
width: 3,
height: 1.2,
state: false,
fullscreen: {
objFit: 'contain',
type: TYPES.CAMERA_STREAM,
entity: 'camera.aarlo_front_door',
}
refresh: 30000, // 30 secs
}
No, I didn’t change anything in the actual streaming code. The stream processing is done differently in Lovelace vs Tileboard. Alexey uses HLS.js for stream processing and rendering, which is a third party HLS client library. It’s a pretty complex piece of code, but it seems to be quite advanced. There are lots of options you can tweak. But except for the cache size (which just changes the steam latency), I didn’t change anything.
You need to make sure to use a h264 stream on the primary stream of your camera. h265 does not work (yet ?). This is my config:
The secondary stream is not used in my case, as I use a proxy to downscale. You can then access this using the RTSP URL. Try it with VLC first to see if it works and if it outputs a h264 stream. You should use the generic camera platform with stream_source, the ffmpeg platform is obsolete.
So what exactly happens for you in Tileboard ?
Glad to know it worked !
Two little things: you can remove the ‘entity’ under ‘fullscreen’, that was a custom modification in my code. It would obviously be nice if that would be supported by TileBoard directly
And for the refresh, you should use the anonymous function that returns a slightly randomized value rather than a fixed one. Otherwise you might run into problems where your browser caches the result without updating it.
OMG … I’m blind
in fullscreen: section I’ve used TYPES.CAMERA instead of TYPES.CAMERA_STREAM
inexplicably it was ok for synology stream
Now all seems to be ok with generic hq stream … thank you
one last question … is it normal that stream in TB is delayed ? In my case is is approx 1 min … quite long or ?
Yes that’s normal. But you can do something about it.
There are two sources of delay. First is the HA stream component, which will take the camera h264 stream and convert it to hls. Because there is no reencoding done (would take too much CPU on platforms like the pi), the hls segments are always cut on an I frame. So the only way to reduce latency on that component is to add more I frames into the stream. That will increase the required bandwidth. Not all cameras support this. Hikvisions usually do (see the config shot I posted above). I’m using an iframe every 20 frames, with a framerate of 10 frame per second. That means that each hls segment can be around 2 seconds long.
Second source of latency (which adds to the first) is hls.js used in Tileboard. What this code does is basically consume the hls segments produced by HA, restitch them together and display them as video on the client. Hls has a buffer. By default it’s 30 seconds, which is HUGE. You can make it smaller to reduce latency.
Open directives.js, go to where it defines the cameraStream directive and replace this code:
var hls = new Hls();
By this:
var config = {
maxBufferLength: 5,
maxMaxBufferLength: 5,
};
var hls = new Hls(config);
You can experiment with different buffer sizes. Don’t make them too small, or your stream won’t play back smoothly anymore if your internet connection isn’t perfectly stable (like for example a 4G connection).
so i’ve been looking around the code and i was able to put the light sliders in a different pop-up window, everything is fine until i try to change the value, i get “property ‘id’ of undefined”, the problem is here
var serviceData = {entity_id: item.id};
Thank you … I played with settings and now latency is just few (acceptable) seconds
I have a strange situation with the TYPES.CAMERA_STREAM mode. It works fine on Android devices, but not on iOS devices. Why is this happening, does anyone have such a problem?
Is it possible to create an icon in the sidebar (just like we do for pages) but that runs a function when pressed instead of flipping to a page?
I’d like to add a “reload”/“refresh” button in the page icon bar. I know we can do this with a tile on the page but I would like to save actual page real estate for other items.
Also, does anyone know of any tutorials on how to creat new/custom tiles?
Thanks,
-Joni-
Nice find. I really didn’t have any time to look into the library when I implemented HLS streaming. Would you like to create a PR for that? Including optional entity_id for fullscreen looks like a good idea as well.
Perhaps we could make it possible to override HLS config from the definition of tile just like we do for charts.
You can add a tile with negative position (see bottom left corner). But I do not know how to get it on top of z-stack. Pages menu overlapping it, and not allow to click.
So I’ve done with reload icon in the header (see top right corner).
Header icon example:
right: [
{
type: HEADER_ITEMS.CUSTOM_HTML,
html: '<div class="pages-menu--item" onClick="document.location.reload(true)"> \
<i class="mdi mdi-reload"></i> \
</div> \
',
},
],
and negative position tile:
{
//title: 'First group',
width: 3,
height: 3,
items: [
.......
{
position: [-0.5,2.5],
width: 0.5,
height: 0.5,
type: TYPES.CUSTOM,
id: {},
customHtml: '<div class="pages-menu--item"> <i class="mdi mdi-reload"></i> \
</div> \
',
action: function() {
document.location.reload(true);
}
}
Sure I can do that.
Edit: OK, done. I added the possibility to specify a different camera entity for the popup view, as well as to configure the HLS buffer size. I did not expose the entire hlsjs config object. I think that would be overkill. The hls.js options are extremely specific, mostly around stream QoS, sync, subtitles, audio. So all very important when you write a VOD client, but not very useful for what we do here. It could still be added if needed, of course.
Here’s an example:
{
position: [0, 0.4],
id: 'camera.hikvision1_lowres',
type: TYPES.CAMERA_THUMBNAIL,
title: 'Front yard',
bgSize: 'cover',
width: 3,
height: 1.6,
state: false,
fullscreen: {
objFit: 'contain',
type: TYPES.CAMERA_STREAM,
id: 'camera.hikvision1_hires',
bufferLength: 3
},
refresh: function() { return 3000 + Math.random() * 500; },
}
Would you be so kind and share with us your PZT urls ?
I know how to call one of preset positions (/ISAPI/PTZCtrl/channels/1/presets/1/goto) but don’t know how to pan up,down fill left,right and zoom + -
/ISAPI/PTZCtrl/channels/1/continuous
You need to send a PUT request to that URL with an XML payload according to this format:
<PTZData version=“2.0”>
<pan> [The amount to pan, -100..0..100] </pan>
<tilt> [The amount to tilt, -100..0..100] </tilt>
<zoom> [The amount to zoom, -100..0..100] </zoom>
</PTZData>
The camera will then move by the specified amount.
something like this:
camera_1_pzt_up_restcmd:
url: https://MYCamIP/ISAPI/PTZCtrl/channels/1/continuous
method: PUT
username: !secret camera_1_username
password: !secret camera_1_password
payload: '<PTZData version=“2.0”><pan>0</pan><tilt>10</tilt><zoom>0</zoom></PTZData>'
content_type: 'application/xml'
verify_ssl: false
above gives me error in log … Status code 400 