Unity Notifications & Annotations Guide

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

Unity setup

1. Open up “ClockStreams.cs”

2. Declare 3 variables: “int previousSecond”, “bool canSendAnnotation”, and “bool canSendNotification”

   1. We will send a notification and annotation every time the clock hits a 15 second interval. We will only send one per strike of 15 seconds so we need to track the previous second that sent both the streams.

3. Create a function “void Update()” and put the following in the body:

4.         int second = System.DateTime.Now.Second;
           if (second % 15 == 0 && second != previousSecond)
           {
         
               canSendAnnotation = true;
               canSendNotification = true;
               previousSecond = second;
           }

5. Every flip the booleans to true and track the second that flipped the boolean

6. Create a function “void Start()” and put the following in the body:

7.         previousSecond = System.DateTime.Now.Second;

8. This is to initialize the value

9. Create a function “public void SutbmitTimeChangeAnnotation(string streamId)” and put the following in the body:

10.         if (!canSendAnnotation)
                return;
    
    
            if (GenvidPlugin.Instance.IsInitialized && GenvidPlugin.Instance.enabled)
            {
          
                DateTime now = DateTime.Now;
                Message annotation = new Message()
                {
          
                    second = now.Second,
                };
                GenvidPlugin.Instance.SessionManager.Session.Data.SubmitAnnotationJSON(streamId, annotation);
    
    
                canSendAnnotation = false;
            }

11. If the annotation bool is false then exit and do nothing

12. Once the bool is true - we send the current second as an annotation and flip the bool to false

13. Create a function “public void SubmitTimeChangeNotification(string streamId)” and put the following in the body:

14.         if (!canSendNotification)
                return;
    
    
            if (GenvidPlugin.Instance.IsInitialized && GenvidPlugin.Instance.enabled)
            {
          
                DateTime now = DateTime.Now;
    
    
                Message notification = new Message()
                {
          
                    second = now.Second,
                };
    
    
                GenvidPlugin.Instance.SessionManager.Session.SubmitNotificationJSON(streamId, notification);
    
    
                canSendNotification = false;
            }

15. This works exactly as the Annotations function but instead checks the notification bool and calls the notification function

16. In unity go back to your “Parameters” folder. Create two new stream parameters. One named “ClockAnnotationStream” and another named “ClockNotificationStream”

    • The Id’s will be “ClockAnnotation” and “ClockNotification” in there parameters

17. In your scene click on your “Genvid Plugin” object.

    • Add 2 more array elements to “Streams/Settings”. One for each new parmeter. Add the parameters to the elements created.

18. Now go to your “Streams Listener” object. Add 2 more array elements to “Listeners”.

    • One will have the parameter of “ClockAnnotationStream”, Framerate of 30, “On Submit Stream” pointing to itself again and the “SubmitTimeChangeAnnotation” function we created with the value “ClockAnnotation” for the parameter field

    • The other will have the parameter of “ClockNotificationStream”, Framerate of 30, “On Submit Stream” pointing to itself and the “SubmitTimeChangeNotification” function we created with the value “ClockNotification” for the parameter field

GenvidPlugin with the two new streams

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. Build 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