Unreal Notifications & Annotations Guide

This guide was written as a quick reference step by step guide for setting up a simple Unreal notification/annotation. For more in depth information on each step please check the documentation at https://www.genvidtech.com/for-developers/sdk-latest/

Blueprint Implementation

1. On your GenvidStreams blueprint create 2 boolean variables. One called “ShouldSendNotification” and the other called “ShouldSendAnnotation”

2. Create another variable of type integer called “PreviousUsedSecond”

3. In the event graph add the following code:

4. GenvidStreams Code
   

   
   

5. Make sure the Tick event used is actually ticking (there will be one that won’t actually tick)

6. This flips both booleans created above to true the first tick that the current second is 0, 15, 30, or 45. We also save the second value that flipped the booleans

7. In BeginPlay add the following:

8. GenvidStreamsCode

   
   

   
   

9. We add annotation and notification streams to the built in streams property

10. ClockNotification collapsed graph

    
    

    
    

11. ClockNotification creates a genvid stream called “ClockNotification” with FrameRate value 30 and binds it to a new event

12. The new event only proceeds with the boolean created above is true

13. We send the second that flipped the boolean as a notification

14. Note that SubmitNotification exists on the GenvidSession and not the GenvidStream

15. We flip the boolean to make sure it fires only once

16. Function in GenvidStreams that forms the JSON

    
    

    
    

17. We form the JSON string using the second that flipped the boolean

18. ClockAnnotation will work similarly:

19. ClockAnnotation CollapsedGraph

    
    

    
    

20. The main differences is SubmitAnnotation is on GenvidStream, we name the GenvidStream “ClockAnnotation”, we flip the proper boolean, and we call a different function to form the JSON string

21. Forming a JSON string again

    
    

    
    

22. The new function works exactly the same way and can be combined into one if desired

Web Implementation

1. Go back to your Web/public folder. Open index.html

2. Add two divs. One for notification and one for annotation:

3.         <div class="child" id="notification"></div>
           <div class="child" id="annotation"></div>

4. Open overlay.js. Create two new functions. One called notificationUpdate and one the other called annotationUpdate. Both take in a parameter called data:

5. function notificationUpdate(data) {
        
       document.getElementById("notification").innerHTML = "Notification: " + Math.round(data.second);
   }
   
   
   function annotationUpdate(data) {
         
       document.getElementById("annotation").innerHTML = "Annotation: " + Math.round(data.second);
   }

6. We set the divs created with the second value we sent in the above steps

7. In the existing genvidClient.onDraw function add the following code after the existing “ClockTime” stream code:

8. if ("ClockAnnotation" in frame.annotations && frame.annotations["ClockAnnotation"].length)
   {
             
   for (let gameAnnotation of frame.annotations["ClockAnnotation"])
       {
         
           if (gameAnnotation && gameAnnotation.user)
           {
         
               annotationUpdate(gameAnnotation.user);
           }
               }
   }

9. We check to see if a ClockAnnotation data value exists. If we pass the parsed JSON value to annotationUpdate. (It is already being parsed in onStreamsRecieved)

10. Similarly to genvidClient.onDraw we will define another function on genvidClient called “onNotificationsReceived” that triggers whenever a notification is sent:

11. genvidClient.onNotificationsReceived(function (notifications)
    {
          
        for (let notification of notifications.notifications) 
    {
          
            try 
    {
          
                notification.user = JSON.parse(notification.data);
                notificationUpdate(notification.user);
            }
            catch (e) {
          
                console.log(e, notification);
            }
        }
    });

12. We parse the notification received and pass in the data to notificationUpdate

Putting it all together

1. Package your project making sure that .exe ends up in the same location as before so that it can be picked up by the web code

   • If you need to - recreate your bastion instance, setup the genvid-sdk, and load using the python script

2. Open up your genvid monitor page using genvid-sdk monitor. Hit start all and open up your stream

3. Note that the annotation updates in sync with the video whenever the seconds hand hits a 15 second interval

4. Note that the notification updates out of sync with the video ASAP when the second hand hits a 15 second interval