View source for Digital Measurement Video TizenTv

{{Breadcrumb|}} {{Breadcrumb|Digital}} {{Breadcrumb|DCR & DTVR}}  {{CurrentBreadcrumb}}
[[Category:Digital]]

__NOTOC__
== Introduction ==
The following document will highlight the steps needed to run Browser SDK (BSDK) on Samsung Smart TV using TIzen Studio for app development.
The tutorial should be used in conjunction with the documentation at [https://docs.tizen.org/application/web/get-started/tv/first-samsung-tv-app/ Create Your First Samsung Smart TV Web Application] to build an app with BSDK integration for content measurement. In this tutorial we will create a native app and highlight the different permissions required to run the BSDK.

== Step 1: Install Tizen Studio ==

Navigate [https://developer.tizen.org/development/tizen-studio/download here] and install Tizen Studio.
During installation make sure to install the '''TV Extension package''' from the Package Manager.

== Step 2: Generate Security Profile ==

Navigate [https://docs.tizen.org/application/tizen-studio/common-tools/certificate-registration here] and generate the security profile in order to run applications.

== Step 3: Create Basic Project ==

Follow the [https://docs.tizen.org/application/web/get-started/tv/first-samsung-tv-app/ step-by-step guide] and create the Basic Project template. 
Replace the code in the<syntaxhighlight>index.html</syntaxhighlight>file with the code snippet below and update the App ID with a Nielsen provided App ID during SDK initialization.
<syntaxhighlight lang="javascript">
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DCR Video Tizen Sample</title>
    <script>
        // Static Queue Snippet
        !function (e, n) {
            function t(e) {
                return "object" == typeof e ? JSON.parse(JSON.stringify(e)) : e
            }
            e[n] = e[n] ||
            {
                nlsQ: function (o, r, c) {
                    var s = e.document,
                        a = s.createElement("script");
                    a.async = 1,
                        a.src = ("http:" === e.location.protocol ? "http:" : "https:") + "//cdn-gl.imrworldwide.com/conf/" + o + ".js#name=" + r + "&ns=" + n;
                    var i = s.getElementsByTagName("script")[0];
                    return i.parentNode.insertBefore(a, i),
                        e[n][r] = e[n][r] || {
                            g: c || {},
                            ggPM: function (o, c, s, a, i) { e[n][r].q = e[n][r].q || []; try { var l = t([o, c, s, a, i]); e[n][r].q.push(l) } catch (e) { console && console.log && console.log("Error: Cannot register event in Nielsen SDK queue.") } },
                            trackEvent: function (o) { e[n][r].te = e[n][r].te || []; try { var c = t(o); e[n][r].te.push(c) } catch (e) { console && console.log && console.log("Error: Cannot register event in Nielsen SDK queue.") } }
                        },
                        e[n][r]
                }
            }
        }(window, "NOLBUNDLE");

        // Replace (PXXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX) with CLIENT APP ID
        var nSdkInstance = NOLBUNDLE.nlsQ("PXXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX", "videoSdkInstance", {
            nol_sdkDebug: "debug",
        });

        var contentMetadata = {
            type: 'content',
            assetid: 'VID-123456',
            program: 'program name',
            title: 'episode title with season and episode number',
            length: 'length in seconds',
            airdate: '20210321 09:00:00',
            isfullepisode: 'y',
            adloadtype: '2'
        };
    </script>
    <style>
        body {
            background-color: white;
        }
    </style>
</head>
<body>
    <h1>DCR Video Tizen Sample App</h1>
    <div>
      <video controls src="https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4"
        poster="https://peach.blender.org/wp-content/uploads/title_anouncement.jpg?x11217" width="620">

        Sorry, your browser doesn't support embedded videos,
        but don't worry, you can <a href="https://archive.org/details/BigBuckBunny_124">download it</a>
        and watch it with your favorite video player!
      </video>
    </div>
  </main>
    <script>
        var media = document.querySelector('video');
        var playheadPosition = 0;
        var metadataLoaded = false;

        // Loadmetadata
        // Load contentMetadata object
        media.addEventListener('loadedmetadata', (event) => {
            // Call SDK loadmetadata event
            if (!metadataLoaded) {
                nSdkInstance.ggPM("loadmetadata", contentMetadata);
                metadataLoaded = true;
            }
        });

        media.addEventListener('play', (event) => {
            // Call SDK play event
            if (!metadataLoaded) {
                nSdkInstance.ggPM("loadmetadata", contentMetadata);
                metadataLoaded = true;
            }
        });

        // Player paused
        media.addEventListener('pause', function (e) {
            nSdkInstance.ggPM("pause", playheadPosition);
        });

        // Set playhead position
        media.addEventListener('timeupdate', function (e) {
            var currTime = Math.floor(media.currentTime);
            if (playheadPosition < currTime) {
                playheadPosition = currTime;
                nSdkInstance.ggPM("setplayheadposition", playheadPosition);
            }
        });

        // End
        media.addEventListener('ended', function (e) {
            nSdkInstance.ggPM("end", playheadPosition);
            metadataLoaded = false;
            playheadPosition = 0;
        });
    </script>
</body>
</html>
</syntaxhighlight>
<br>

==Step 4: Run Project==
<syntaxhighlight lang="javascript">Right click on the project > Run As > Tizen Web Simulator Application (Samsung TV)</syntaxhighlight>
<br>
[[File:Tizen 1 Step4.png||600px|center|]]
<br>
Extra configurations must be done to run and debug the application on a Target Device, please reference the following [[TizenTv_Debugging|guide]] for more information

== Step 5: Debug App==
Right click anywhere in the Simulator to open the Web Inspector > navigate to the Console tab > check for BSDK initialization and content measurement.
[[File:Tizen 1 Step5.png||600px|center|]]

Debug Logging: Disable logging by deleting <syntaxhighlight lang="javascript">{nol_sdkDebug: 'debug'}</syntaxhighlight> from initialization call

== Remote control events ==
Build out the app further by including [https://developer.samsung.com/smarttv/develop/guides/user-interaction/remote-control.html remote control events] and attaching the player events to corresponding <syntaxhighlight lang="javascript">keyCode </syntaxhighlight> or using Tizen registered keys:
<syntaxhighlight lang="javascript">

var media = document.querySelector('video');
window.addEventListener("keydown", function (e) {
    switch (e.keyCode) {
        case 10252: // MediaPlayPause
            if(!media.paused) {
                media.pause(); // pause video
                nSdkInstance.ggPM("pause", playheadPosition); // SDK call
                break;
            }

            media.play(); // play video
            nSdkInstance.ggPM("play", contentMetadata); // SDK call
            break;
        case 10009: // Back
            nSdkInstance.ggPM("stop", playheadPosition); // SDK call
            break;
        ...
        default:
            break;
    }
});

</syntaxhighlight>

== Next steps ==

For further testing Samsung Tizen TV apps, refer to this [https://docs.tizen.org/application/web/tutorials/process/run-debug-app/ guide]. If there are any questions or concerns then please reach out to the BSDK team. Reference the following guides for product specific information:

* [[DCR_Video_Browser_SDK|DCR Video]]
* [[DCR_Static_Browser_SDK_(6.0.0)|DCR Static]]
* [[DTVR_Browser_SDK|DTVR]]
<br>
For further technical details or a sample application, please contact your Technical Account Manager (TAM).