Code Injection that Allows Download of Custom Clips on Frigate 0.12

[MrCaspan]

So I have seen that others have had the same issue that I had that if you have recordings but no events there seemed to be no easy way to download a copy of that recording. I found out that there is a back end system that allows you to manually download records but if you are not a techy person then this can be difficult and it required converting dates and times to Unix time stamps... So I careted a chunk of code that when injected into a cameras recording page it will allow you to download that 1 hour recording that you are currently on. It does require that you install a Chrome Plugin so that you can inject the code to the page but all the code is commented to exapling what it is doing!! This in no way affects Frigates base code its just get the current URL and generates a URL for downloading that recording. Nothing is alterd or changed in Frigate!!

Steps to get it to work:

1. Download Code Injector form Google Chrome Store - https://chromewebstore.google.com/detail/code-injector/edkcmfocepnifkbnbkmlcmegedeikdeb
2. Open the plugin and create a new Rule
3. The way I created the code is that you have to manaully inject it ONLY when you want to download a clip. This way its not adding code to other pages by mistake or when you dont want to use it. So in the URL patern at the top enter somthing like http:https://222.222 just to make it happy that somthing is in it.
4. Take my JavaScript Code below and enter it in the JavaScript section. Select on Page load so the code gets executed after the page loads fully, then clilck save.
5. You MUST be on a cameras recording page AND selected an hour from the side menu. I program for a hobby not as a job so I did my best to add in error checking but dont inject this code on any other pages
6. When you are on a recording page you should see in the URL bar a URL that looks like recording/camera_name/yyyy-mm-dd/hh I use the URL to generate the download URL for frigate
7. When you are ready click on the plugin icon and to the right of your code you jsut added you can click the drop down and there should be an inject option in the menu.
8. Disable popup blockers for frigate site or else it might block the popup window that it uses to download your file
9. Right click the new file and download it.
10. Do this as many times as you want jsut clicking on the inject option on the recroding you want. and disable teh code when you dont need it to ensure its not doing anythign bad!

Known bugs: if you try to download the most recent hour camera recording, Because it takes the current hour you are looking at and adds 1 hour to it you are trying to get clips from the future that dont exist and it will error out. I will add some code later that will check to see if the time you selected +1 hour is in the future then just use the time now and the end time not +1 hour.

Hopefully this helps someone else because even the new 0.13 export menu is not really user friendly and this make it really simple to download 1 hour clips from Frigate! Please be nice I am not a programmer by trade I do it as a hobby so this code migh be gross to some hardcore JavaScript people. If you want to help clean it up be my guest!

Please note this will most likley NOT work with 0.13 as they are now using the /api/export/ feature i have not tested it with 0.13 but if someone else can test as maybe this old backend code got left in this might still work!

JavaScript Code

// Get the current URL, we do this so we can get the Camera name and the data and time as it will be in the URL
var currentURL = window.location.href;

// Test to see if /recording/ is found anywhere in the URL
if (currentURL.indexOf('/recording/') > -1) {

    // Take the URL and split it on the /
    var the_arr = currentURL.split('/');

    // If the length of the array returned is less that 7 then they are not on the right page
    // You need to be on a /recording page that has a camera name and the date and time after it in the URL for this script to work
    if (the_arr.length < 7) {
        alert('It looks like you are on the recordings page for a camera but you may not have selected and hour of footage to view from the right side menu. Please select an hour of footage to view from the right menu and then inject this code again!');
    } else {

        // Pop off the very last item which will be the hour that you are currently viewing
        var hour = the_arr.pop();

        // Pop off the next part which will be the date in the format of YYYY-MM-DD
        var fullDate = the_arr.pop();

        // Pop off the next pert which will be the camera name
        var cameraName = the_arr.pop();

        // Dont care about the part that says we are in the recording section so just pop it off and loose it
        the_arr.pop();

        // Save the beginning of the user liek the host and port
        var beginningURL = the_arr.pop();

        // Convert the date and hour we got from the URL and create a date object
        var startDate = new Date(`${fullDate} ${hour}:00`);

        // Take the time we are currently looking at and add 1 hour to it
        var endDate = new Date(startDate.getTime() + 3600000); //add 1 hour to epoch

        // Frigate uses Unix time stamps which is measured in seconds and the date object uses miliseconds so we ahve to / 1000 to get seconds
        // We use the Math Round function to make sure we dont get a decimal
        var startTime = Math.round(startDate.getTime() / 1000);
        var endTime = Math.round(endDate.getTime() / 1000);
        var newURL = `http:https://${beginningURL}/api/${cameraName}/start/${startTime}/end/${endTime}/clip.mp4`;

        const response = confirm("You are about to be taken to a new tab to load your custom clip. It may take a few moments depending on your clip size to generate your clip. It might be blocked as it might conside this new tab as a popup, you will have to allow it and then refresh the page and inject this code again.\r\n\r\nOnce done you can right click on the video to save it!");

        // If they answered Okay to the dialog
        if (response) {
            window.open(newURL, '_blank').focus();
            // Comment the above line and uncomment below line for testing
            // console.log(newURL);
        };

    } // End of if

// '/Recording/' was not found in the URL
} else {
    
    alert("It looks like you are not on a Frigate Camera recording page! Please click on Cameras on the left menu, then select 'Recordings' under the camera you want to download a recording from! Then select the hour before injecting this code again!");

} // End of if


// Please note the file name MUST be clip.mp4 if you name it anything else you will get a 404
// Also for me a 1920x1080 15 FPSH264 1 hour clicp was about 256MB so make sure you ahve enough cache to store this file!

// Below is a sample of a URL and what it will look like
// http:https://192.168.86.232:30058/api/Baby/start/1704308400/end/1704312000/clip.mp4