View Cameras Live with WebRTC and the Frigate Card. Part 4 of the Frigate NVR series.

this is part four of my frigate nvr series we're going to talk about displaying live video feeds from your cameras using web rtc and we're also going to talk about the frigate card that's designed to work directly with frigate and at the end we'll talk about my thoughts on blue iris versus the frigate mbr and whether or not i recommend one over the other so stay tuned and let's get started [Music] in order to use webrtc to display live feeds from your cameras you're going to need to install a component and there is a component here called the webrtc component and what this component does it allows you to view ip cameras using their rtsp streams in real time and it uses the web rtc protocol and also the msc technology webrtc is used internally on your network and sometimes you can't create a webrtc communication stream outside of your network so it defaults back to or reverts back to mse and so you can use um this both internally and externally from your network which makes it really nice so let's go over a couple of things that it talks about here why use webrtc in the beginning or in the first place it works with any modern browser even on mobiles it's the only browser technology with minimal camera stream delay so half a second or below and i've verified that some of the frigate or some of the the home assistant camera entity or picture entity cards are 10 15 seconds and i've heard some people say minutes delayed when i want to watch live stream from my cameras through home assistant i just use this um this card right here this the webrtc component and it's real time works well with an unstable channel does not use transcoding it doesn't load the cpu so it goes straight from your rtsp stream on your camera over to your card and just displays it there and it can support camera streams with sound so webrtc is a way to display your cameras in live almost live fashion uh with less than a half a second delay in most cases directly in your browser so in order to use this you actually have to install the web rtc component and you can do that in home assistant using h-a-c-s i recommend using h-a-c-s for all your external application installs you have to be on a supported version of home assistant to use it but it makes installing these custom components so much easier so let me take you through installing this using hacs and on that i'll show you my development or my test raspberry pi and we'll go over to hacs it's it's super simple go to integrations and it's super simple what we'll do is we'll just go over here to the explore and add repositories button click on that and then we'll just search for webrtc you can see i've started typing it here and we'll just click on that and then you can read through all this information right here and if you agree with what it says or you don't see any issues with it go ahead and install it and you can either use the beta version or you can use the the um the stable version i'm going to use stable version 2.1.1 and we'll install it and now what it'll do is you'll go down here to the bottom and you'll see that it says you probably need to restart your home assistant instance in order for it to work so here we go says pending restart so we'll go over to our configuration and our server controls and always check your configuration before you restart and if it's valid then go and restart it and this is going to go ahead and install the web rtc integration that you just built now a note about this is that you will have to install web rtc anyway in order to use the frigate card which i'll show later in the video the frigate card is a card that was designed to be used with the frigate nvr you can stream either from directly from frigate or you can use webrtc but you can't use webrtc unless you have actually installed it so you can see here that it's all up and running again now if we go over to configuration integrations and we add an integration here we can also and look for webrtc as well and you'll see here that it's installing it now it's created the configuration for webrtc now there's nothing here to configure unless you need to do some uh testing or you need to do something outside of what is normal and when you do that you click configure and the only thing you can really set here is the minimum and maximum udp ports so if you have a need to set up udp ports let's say you're forwarding this through a firewall or something and you need a range of ports then you would set those up here i didn't have to do any of that at all i just left it as it was now we have webrtc set up and the integration configured so how do we use this card or how do we use it so let me show you how we create a couple of cameras to view with the webrtc card so i've got a blank dashboard here with a blank view and i'm just going to add a card now there's no web rtc card so you need to specify a card that you can auto or you can do the code manually that's what's called a manual card so we're going to add a manual card here we've got to give it a type and we've got to give it some other information now looking on the site here you can see that the minimal configuration for that card is type custom webrtc camera so we'll just go ahead and put that as the type of the card and we have to specify what our entity our url is going to be now you can do a url here of your rtsp stream now remember we're doing rtsp streams with webrtc you can either do it this way or if you've configured camera entities like i've shown you shown you in my other videos for this series you can use the entity name that allows you to keep a central location for all your camera configurations and just use the entity type to display them in the card so i'm going to go ahead and use the entity name in our in this case so my entity for the camera is in this case the driveway camera so we have custom web rtc camera and entity driveway now there's some other things you can put on here uh to make it a little more customized for example you can give it a title i don't do that because when i'm looking at the cameras i know where it is uh a poster or a splash stream and or splash screen that just gives you a still image to show while the camera itself is loading up you have an intersection which means it's auto pause the stream when less than x percent of video element is in the screen it's 50 by default you can also set the sound to be disabled or muted by uh by default if you want to unmute it then you would just change this to tr uh to false it's defaulted to true so it is muted you just if you want to hear sound on your cameras you gotta un you got to set this to true or to false i'm sorry and then you can do custom video controls default is false and then the background uh if you have a ptz camera you can set up ptc uh stuff in here as well and then you can disable msc or web rtc if you if you only want webrtc ever to play you would disable msc here if we're using panned tilt and zoom configurations here's how you would set that up here you would have a ptz control opacity so you would have the opacity of the controls on the camera screen your service would be the ptc service for your camera and then the data that you send to it now every this is for a sonoff camera you have every uh a whole bunch of different kinds of cameras here but i'm not going to dig into that on this video if you have a ptz camera you'll have to do some experimentation so right now you can see that we have a single camera set up here so let's go ahead and save it and now this camera is displayed on this dashboard just like this and it's in real time you can see here if i don't hover over it you can see that the clock is ticking up and it's just going in real time now there's some other information here that you can look at that tells you what the icons mean and by the way there's a bunch of known working cameras here you can set up with different uh urls to get to the rtsp streams there's some discussion about webrtc external as access and i'll link this down below in the comments it's just the github site for the webrtc card and then these status icons which you really can't see very well but if you look at this particular thing now you can see that i have a little looks like a little well it's just changed it's now got the little flowerish looking square thing which is i guess the webrtc symbol what that tells me and it's this symbol right here which you can't really see on the video stream is being played with webrtc if your stream is being played with mse uh or starting connection with msc there is a icon there which is hard to see i can't even see it on this yep no way to see that stream is played with msc which is what it starts out with and then you've got these starting connections connecting remote loading video so if you're trying to trouble troubleshoot this and it's doing something and it's spinning and uh you want to know what's hap what is happening check some of these icons here and these icons are displayed again up in this top right corner the other thing to consider is this is playing an rtsp stream directly from your camera so if you are concerned about bandwidth or something else make sure that you take into consideration what you're doing when you're displaying this let's say in a remote location you're uploading the bandwidth from your connection and then downloading it to wherever you're at so keep that in mind this is a single card now i'm going to add a second webrtc card because i want to show you kind of how i do things now you'll notice here i have a title called front cams and i have two cameras in the front and i want to be able to display those cameras by themselves in the front and then i have two cameras in the back i want to be able to display those cameras by themselves and then i have what i call the front three which is the garage plus the two front whatever combination you want to set up you can put all five of the cameras or however many you have on a single screen just consider the bandwidth pull whenever you do that if you need to see all five of them or whatever it is if you have 10 or 15 cameras i don't know how well that's going to work with this setup you're just going to have to experiment and see if you have issues number one if you're doing 15 cameras with rtsp streams your network has to handle 15 rtsp streams you can use the substream or the mainstream when you're displaying this i want to display the mainstream because i want the full resolution of the camera when i'm looking at it in this this method or that with this method all right let me add that second card here it's exactly the same as we did before it's going to be a manual card and we're going to call this type is again webrtc or custom so custom web rtc camera and then our entity is going to be camera dot front porch if i get this right now these camera entities have to name the be the name same name as what you have in your frigate.yml and we'll let this set up you'll notice here the icon it's doing the same thing that we talked about a moment ago and if we look at the icons that particular icon means that it is connecting to remote using webrtc if i'm reading that right or starting with one of these two let's see if it's done it by now i'm just going to save it so it'll try to load that camera up and here we have two cards side by side now if you want to be able to display these cards in what we call the panel mode which is a single card you're going to have to build a grid of cards and i use the grid cards to do that and let me show you how i've done that in my other example here so let's get out of this and we'll go over to my live camera view so let's first of all let's take a look at the difference here are the two cameras and i suppose you could just kind of blow them up by increasing the size of the browser by you know doing the the zoom on your browser so i'm 125 percent if i go back to 100 here then it brings these back down to normal actually it messes them up but if you want to put both of these cards kind of in a panel view side by side let me show you how i did that with my production cameras i have a camera here and you'll see what i talked about a minute ago right front front three so i have three cameras here and then i have back and now my back cameras so my front two cameras in order to display these in a panel where you can see here that i have it in panel mode it only allows a single card in panel mode but if i go into the configuration you'll see that in fact let's go down here to edit you'll see that i've done this in a grid card format so i have one grid card and in that grid card i have two different camera cards and that allows me to put this in a grid format or in a panel view format with both cards kind of side by side on the display and that's kind of what i was going for here i want those two cameras to be side by side not one on top of the other i have a whole video on grid cards and how to set that up you can play around with this and make this look however you want to based on how your dashboards are set up or whatever your needs are i just happen to like it this way so that i can see these cards full size as big as they will be on the screen and then in kind of the panel view mode okay so that's webrtc so let's talk about the frigate card now the frigate card is a card that's designed to work with frigate it has some controls on it that allow it to to pull up clips and things like that and snapshots and everything else and let's just give you a sample of what it looks like here is a picture of the frigate card it's got a a button here for the menu you can look at um i think these are clips or no this is live view you can look at clips you can look at snapshots and you can go directly to the url where your frigate stuff is in home assistant it'll just pull up the single camera on the frigate nvr display itself now this is a frigate levelless card for live viewing clips and snapshots via a mini gallery automatic updating to continually show the latest clip or snapshot support for filtering events by zone and label arbitrary entity access via menu so motion sensor access full loveless editing theme friendly and support for web rtc you must and you must install the webrtc like we talked about a moment ago just like we did with the other stuff you're going to install this via the hacs system and it's going to be a front-end rather than an integration because it's just a card it's not an actual integration so i've already got that installed what i'm going to take you through here is how i actually set up a frigate card so let's go over into my home assistant setup and let's build a frigate card or add a free git card and for that i've got a little section already set up for us to use here we're going to go ahead and edit the dashboard and we are going to add a card up here now this card if you installed it right and you've done everything correctly uh restarted if you had to or whatever you'll be able to type in frigate card you'll see custom frigate card this is available directly from the ui and we're going to go through and we're going to go ahead and set up the configuration for this card and our camera camera entity is going to be one of our cameras now this is a place where it's required that you set up the cameras beforehand and you have all the entities set up you can't go in and specify a url for this portion of the card you can set up a url if you're using the webrtc i'll show you here in just a minute so again we're going to pick the front uh camera the driveway camera here and you need a frigate url now this is where it gets a little bit crazy if you're planning on accessing your clips and your snapshots and things like that you need a valid url and it's easy to specify your home assistant instance if you are using a local ip address and you're not using ssl on your local ip address because you can't mix and match ssl and non-ssl that's the https stuff what you have to do if you're using ssl and it's different than your uh your certificate's different than what you're trying to put in your frigate rail you're gonna forget url you're gonna have to use a reverse proxy that's this gets a little bit complicated a little bit um [Music] crazy when you're trying to do this stuff i'm gonna skip over the part about the uh the reverse proxy i do have a video on doing reverse proxies look at my nginx reverse proxy stuff on my reverse proxy all i did was specify the frigate url port 5000 which is where frigate sits on the home assistant server now if you're running frigate somewhere else in your network you just point it to that and you figure this out that way but you have to have the frigate url in here or won't work so in my case i set up a dummy domain that's only accessible internally and this is the url that goes to my reverse proxy and then my reverse proxy takes this and sends it to my frigate server on port 5000 now the reason again i had to do that is i have a dna or a https or ssl enabled domain for home assistant i also have to have an ssl enabled domain for this frigate url and since it's a required field you have to have it in here i know that gets confusing i will help you in discord or in your comments if you have questions about this but i'm not going to go into the full details of the reverse proxy on this video all right so we'll go to optional settings now if you want to have the motion stuff set up here you can pick one of your sensors from the camera now remember if you set up person detail or detection on your cameras you're going to have an entity for every one of those detections so in this case for the driveway camera if i look at driveway here i've got a cat motion dog motion person motion and then my zones i can also use those but we won't i'm going to say i only want to be notified if there's a person here for my motion sensor the frigate camera name is important if you want to have this uh when you click the camera icon or the the globe icon it takes you to the camera settings within or the camera page in the friggin mdr default view is up to you you can either start with a live view a clip gallery which you can see here those are the clips so if i were to click on these it would play the clip then you have a snapshot gallery these are all the snapshots and then you have latest clip or latest snapshot so i'm going to just start with live view for today menu mode is hidden overlay above or below so if we click any of these first of all it's already hidden you can see here there's no menu here if we do overlay it puts all the menu icons up here over top of the image now i don't like that because it takes up too much of the image there's stuff back here that i want to see but the menu is in the way you can go with an above which then takes up some real estate but it leaves the full image available you can go below same thing it takes up real estate on your your dashboard or whatever page but it gives you the full image without the menu or you can go back to what's called hidden and then the only time the menu shows up is if you click it i think that's the best of both worlds i'm going to leave it that way the view timeout in seconds is how long it'll play when you're when you have an alert or whatever i have this um set to about 30 seconds because most of my clips are in the 30 second range and then under advanced we have a couple of things that i'm not going to use today but you can have a zone filter and you can have an object filter so if you created zones in your configuration you can use a frigate zone in order uh to filter out what happens with this camera view and you can even filter that down to a type of object so you can have close in and person so only people close in or persons close in will trigger this camera and then here is the web rtc parameters these are optional again you must have webrtc installed like i showed you before in order to use this so if we click on webrtc and again you can use frigate if you want to but if we click on webrtc then you need the web or the camera entity to use i don't know if you can specify the url url here but we again need to specify the camera that we're going to be displaying when we click on the webrtc stuff and then we'll save this and you'll see here that we have this full screen image on this page now if i go up here and i change this to and it's because we're in panel mode if we change this to masonry mode the default will have the mini image here and this is what i talked about before if you want to use grid cards you need to use the grid cards to make a single image or a single card that has multiple camera cameras in it or frigate cards in and then you can kind of split display those all together so if i save this or get out of edit mode now what we'll see is we have the menu where we can go to live mode which is what we default to we can go to our uh clips mode here and for that we can click on any of the clips and we can auto play these clips or play these clips and we can go back over here to uh snapshot mode and we can look at any of the snapshots and you can go to this world and it will take you directly to uh the camera within the frigate nvr and it pops it out in a new tab so you don't have to go back and then of course we can always go back to live view i find this very very handy and the reason why is if i have a whole bunch of these cards on here all my cameras and i want to take a quick glance at what's going on in terms of the clips or the snapshots then what i have is i have just a whole listing of these snapshots and you can actually scroll down through all of these snapshots and you can pick out any one of these things that you want to view and you can view these snapshots let's see where i'm at uh let's see here's one of me here talking to the neighbor so i can go back in my history and just in this frigga's card i can go back and i can look at all of the clips here and man this is super handy that doesn't mean i have that means i don't have to go to the media browser that means i don't have to go to back to advance or whatever else i can go directly from this camera that makes the frigate card really really nice the only thing that makes this complicated is the the need for the reverse proxy if that's what you're going to do so now you can take all of this information and just for the fun of it let's add a second frigate card uh just how we did it before we'll add another card and again we'll call it frigate and again we have to do all of this stuff so that's gonna be the front porch once let me find the f down here front porch and the frigate url again is my test url and again that's reverse proxied over to my frigate nvr on port 5000 because you need that on port 5000. now if you don't get a camera display up here you need to make sure you have the correct camera displayed uh i think this might be the right one here yep that's the right one and then under optional again we'll do this so same thing we'll do camera binary sensor front porch and i'll do person person motion forget camera name front f-r-o-n-t-p-r-c-h is the actual camera name default view will be live menu mode will be hidden as it is now view time out 30 seconds for my advanced we'll leave that alone and then my webrtc same thing we'll use webrtc for live and then we'll come down here and we'll find front porch person oops that's back porch let's go to front porch person now if you specify the wrong one it's either not going to work or it's going to show you the wrong camera okay it's important that this frigate camera name it says optional here but if you want to look at your clips or if you want to look at your uh your snapshots you need to make sure that this is correct because this is how it determines where to get your your eclipse from it's also important that it's correct when you click this button to take you to the camera directly in the nvr so you got to make sure that you have that correct as well and so if we close out of the editor we have two cameras here let me refresh the screen two cameras each with the ability to show clips and snapshots you can also look at motion detection here now i don't find this very useful by clicking here it gives me a timeline of motion but that doesn't really mean anything to me specifically so anyway it makes it very handy for you to be able to pull through and look at all these clips and all of these snapshots if you're recording both of those for each of your cameras and then of course the live view so you can just kind of watch things in real time so there you have the frigate card and the webrtc card both of those are ways for you to display the live camera feeds as well as manipulate or change or work with the clips and the recordings that you have for the cameras directly in home assistant on the ui and you can put these in your dashboard you can put these on your tablets or whatever else you want to do so it makes it really nice and really handy to work with the cameras so having used blue iris for a few years and then moving over to frigate let's talk about a few of the high points that i feel to me are important and whether or not they work in either one of the systems so the first thing is real-time viewing that is available in blue iris and by what i'm showing you here is actually available in frigate as well it's native and blue iris so it's easier to set up in blue iris than it is in frigate but you can do it multiple os capability uh blue iris only runs on windows so no frigate will run on a multiple of of operating systems since it is a docker container and it is an add-on to home assistant which is even a better plus object detection yes for blue iris um yes for frigate however blue iris requires an external program either a cloud-based service or something like deep stack to be installed facial recognition blue iris with an external like something like deep stack will do that but frigate will do person detection but doesn't actually do facial recognition as of this recording it's still being worked on so we'll see if that comes out can you get up and running quickly blue iris has a lot of buttons and a lot of switches and a lot of a lot of a lot of stuff so it takes a little bit of learning to get blue iris up and running frigate for me was out of the box up and running in about 10 minutes there's some learning there but it seems to be easier because there's less stuff to mess with in frigate than there is in blue iris 24 7 recording is available both in blue iris and in frigate external storage yes for blue iris not so much for frigate on home assistant in blue iris you can mount your shares and record directly to the shares via your windows normal window shares and frigate on home assistant it records to the media folder but the media folder is not is not exposed to the point where it's available to your your external storage like a nas so that's an that's not a that's an issue especially if you're recording on a raspberry pi now i use what's called data ctl to move all of my heavy duty home assistant directories and stuff that are being written to you to my external usb drive and if you're booting off a usb drive and home assistant then you have the ability to have more storage so that may or may not be an issue for you overall i i like them both i like blue iris for it being an nvr it does what it's supposed to all the time i like frigate because it does what it's supposed to i've had very little issues with frigate if any at all as a matter of fact blue iris requires me to run up my super heavy hot powered server all the time frigate runs on my home assistant blue that's been running everything else so it's lower power consumption lower heat generation so that's a definite plus in the power category would i recommend either over the other uh not really blue iris just does what it's supposed to and it's been great for 50 bucks a year that thing runs all the time great does everything it's supposed to frigate is free open source um you have um the ability to do most of what you do with blue iris so it's really down to preference whatever whichever one you think is best for your use case so i enjoy them both um and that's part four of my four-part series for frigate now let me just preface this by saying 0.9 uh release candidate is being worked on and that's going to change the configuration options and a whole bunch of things in the way the recordings and the clips and things are stored uh within frigate so we're we'll stay tuned for that i'll make a video on that when it's out and ready to go but it will be some configuration changes and it will be a difference in the way this stuff is stored on your storage medium and the way clips are pulled and recordings are done etc etc i hope you enjoyed this four-part series let me know if you have any other questions or comments put those down below i'm available on discord uh if you're not a channel subscriber please uh subscribe to the channel help support this as i go along and we will see you on the next video cheers [Music] you

Channel: mostlychris

Views: 2,459

Keywords: Smart Home, Home Assistant, webrtc, frigate, camera, live view

Id: SH9n3KhmTiM

Length: 31min 43sec (1903 seconds)

Published: Sun Sep 26 2021