Mywikis at 02:53, 27 March 2024

2024-03-27T02:53:08Z

← Older revision		Revision as of 02:53, 27 March 2024
Line 16:		Line 16:
	Navigate [https://webostv.developer.lge.com/develop/tools/simulator-installation here] and install the webOS TV Simulator		Navigate [https://webostv.developer.lge.com/develop/tools/simulator-installation here] and install the webOS TV Simulator

	=== Step 3: Create App ===		== Step 3: Create App ==


Line 149:		Line 149:
	That is all that we need to run the app on the webOS TV Simulator. Please make sure to update the App ID for SDK initialization to view proper crediting		That is all that we need to run the app on the webOS TV Simulator. Please make sure to update the App ID for SDK initialization to view proper crediting

	===Step 4: Open up webOS TV Simulator===		== Step 4: Open up webOS TV Simulator ==

	Open up the webOS TV Simulator > navigate to File > Launch App > open the folder containing the app created in the previous step		Open up the webOS TV Simulator > navigate to File > Launch App > open the folder containing the app created in the previous step
Line 155:		Line 155:
	[[File:WEBOS 1.png\|\|600px\|center\|]]		[[File:WEBOS 1.png\|\|600px\|center\|]]

	==== Step 5: Debug app====		== Step 5: Debug app ==
	Click on the Inspect button on the remote to open up developer tools > navigate to the Console tab > check for BSDK initialization and measurement.		Click on the Inspect button on the remote to open up developer tools > navigate to the Console tab > check for BSDK initialization and measurement.
	[[File:LGwebos 2.png\|\|600px\|center\|]]		[[File:LGwebos 2.png\|\|600px\|center\|]]
Line 161:		Line 161:
	Note - Debug Logging: Disable logging by deleting <syntaxhighlight lang="javascript"> {nol_sdkDebug: 'debug'} </syntaxhighlight> from initialization call.		Note - Debug Logging: Disable logging by deleting <syntaxhighlight lang="javascript"> {nol_sdkDebug: 'debug'} </syntaxhighlight> from initialization call.

	==== Remote events ====		== Remote events ==
	Build out the app further by including [https://webostv.developer.lge.com/develop/guides/magic-remote remote events] and attaching the player events to corresponding <syntaxhighlight lang="javascript"> keycode: </syntaxhighlight>		Build out the app further by including [https://webostv.developer.lge.com/develop/guides/magic-remote remote events] and attaching the player events to corresponding <syntaxhighlight lang="javascript"> keycode: </syntaxhighlight>
	<syntaxhighlight lang="javascript">		<syntaxhighlight lang="javascript">
Line 187:		Line 187:
	<br>		<br>

	=== Next steps ===		== Next steps ==

	For further testing on webOS TV apps on the TV, refer to this [https://webostv.developer.lge.com/develop/getting-started/developer-mode-app guide]. If there are any questions or concerns then please reach out to BSDK team. Reference the following guides for product specific information:		For further testing on webOS TV apps on the TV, refer to this [https://webostv.developer.lge.com/develop/getting-started/developer-mode-app guide]. If there are any questions or concerns then please reach out to BSDK team. Reference the following guides for product specific information:

NickParrucci: Created page with "{{Breadcrumb|}} {{Breadcrumb|Digital}} {{Breadcrumb|DCR & DTVR}} {{CurrentBreadcrumb}} Category:Digital NOTOC == Introduction == The following document will highligh..."

2023-10-25T18:27:32Z

Created page with "{{Breadcrumb|}} {{Breadcrumb|Digital}} {{Breadcrumb|DCR & DTVR}} {{CurrentBreadcrumb}} Category:Digital __NOTOC__ == Introduction == The following document will highligh..."

New page

{{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 LG Smart TVs that are currently running webOS TV 23 on Chromium 94 web engine

The tutorial should be used in combination with the documentation at [https://webostv.developer.lge.com/develop/getting-started/build-your-first-web-app webOS TV Developer] to build an app and verify that the BSDK properly measures the video and static content. In the tutorial we will be using a [https://webostv.developer.lge.com/develop/getting-started/web-app-types#hosted-web-app hosted web app] which will host the content on the web server. We will also use the [https://webostv.developer.lge.com/develop/tools/simulator-introduction webOS TV Simulator] for app development.

== Step 1: Install the webOS TV CLI ==

Navigate [https://webostv.developer.lge.com/develop/tools/simulator-installation here] and install the webOS TV CLI

== Step 2: Install the webOS TV Simulator ==

Navigate [https://webostv.developer.lge.com/develop/tools/simulator-installation here] and install the webOS TV Simulator

=== Step 3: Create App ===

# We will begin creating the app by navigating [https://webostv.developer.lge.com/develop/getting-started/web-app-types#hosted-web-app here] and following the installation steps:
# Run <syntaxhighlight lang="javascript"> ares-generate -t hosted_webapp nlsn-bsdk-webOS </syntaxhighlight> to generate the app and accept all defaults
# Open the generated folder in a text editor or IDE and and create a new folder called app
# Add the following into a video.html file and make sure to update App ID with Nielsen provided App ID while creating the SDK instance

<br>

Add the following script tag to the website:
<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 webOS 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");

// INSERT 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 webOS 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>
Click [https://gitlab.com/nielsen-media/digital/shared/sdk/browser-sdk/misc/bsdk-client-documentation/-/wikis/DCR-Video-Quick-Start here] for more information on DCR Video implementation.

3. Navigate to <syntaxhighlight lang="javascript"> index.html </syntaxhighlight> at the root of the directory and update the <syntaxhighlight lang="javascript"> location.href </syntaxhighlight> url to point to <syntaxhighlight lang="javascript"> http://{{LOCAL_SERVER_URL}}/app/video.html </syntaxhighlight>

That is all that we need to run the app on the webOS TV Simulator. Please make sure to update the App ID for SDK initialization to view proper crediting

===Step 4: Open up webOS TV Simulator===

Open up the webOS TV Simulator > navigate to File > Launch App > open the folder containing the app created in the previous step
<br>
[[File:WEBOS 1.png||600px|center|]]

==== Step 5: Debug app====
Click on the Inspect button on the remote to open up developer tools > navigate to the Console tab > check for BSDK initialization and measurement.
[[File:LGwebos 2.png||600px|center|]]

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

==== Remote events ====
Build out the app further by including [https://webostv.developer.lge.com/develop/guides/magic-remote remote events] and attaching the player events to corresponding <syntaxhighlight lang="javascript"> keycode: </syntaxhighlight>
<syntaxhighlight lang="javascript">

var media = document.querySelector('video');
window.addEventListener("keydown", function (e) {
switch (e.keyCode) {
case 415: // Play
media.play(); // play video
nSdkInstance.ggPM("play", contentMetadata); // SDK call
break;
case 19: // Pause
media.pause(); // play video
nSdkInstance.ggPM("pause", playheadPosition); // SDK call
break;
case 461: // Back
nSdkInstance.ggPM("stop", playheadPosition); // SDK call
break;
default:
break;
}
});

</syntaxhighlight>
<br>

=== Next steps ===

For further testing on webOS TV apps on the TV, refer to this [https://webostv.developer.lge.com/develop/getting-started/developer-mode-app guide]. If there are any questions or concerns then please reach out to BSDK team. Reference the following guides for product specific information:

* [https://engineeringportal.nielsen.com/docs/DCR_Video_Browser_SDK DCR Video]
* [https://engineeringportal.nielsen.com/docs/DCR_Static_Browser_SDK_(6.0.0) DCR Static]
* [https://engineeringportal.nielsen.com/docs/DTVR_Browser_SDK DTVR]

webOS - Revision history

Mywikis at 02:53, 27 March 2024

NickParrucci: Created page with "{{Breadcrumb|}} {{Breadcrumb|Digital}} {{Breadcrumb|DCR & DTVR}} {{CurrentBreadcrumb}} Category:Digital __NOTOC__ == Introduction == The following document will highligh..."

NickParrucci: Created page with "{{Breadcrumb|}} {{Breadcrumb|Digital}} {{Breadcrumb|DCR & DTVR}} {{CurrentBreadcrumb}} Category:Digital NOTOC == Introduction == The following document will highligh..."