Smaf.tv presentation on GreeceJS #12

1. CHALLENGES FOR
DEVELOPING SMART TV
APPS
Created by / Ioannis Foukarakis foukarakis@infamouslabs.net

2. SMART TV - TV OR ...?
Let's see some of them

3. TV

4. SET TOP BOX

5. HDMI DONGLES

6. FIRST APP

7. FIRST APP
Select image category

8. FIRST APP
Select image category
Display images and navigate

9. TOOLS

10. PROBLEM #1
Remote control

11. SAMSUNG

12. LG

13. NEXUS

14. FIRETV

16. LET'S USE ARROW KEYS,
ENTER AND BACK.
document.onkeydown = function(e) {
e = e || window.event;
if (e.keyCode == 38) {
// up arrow
}
// More magic
}

17. PROBLEM #2
Key Codes

18. KEY CODES
Example: Up
Platform Value

19. KEY CODES
Example: Up
Platform Value
LG Web OS 38

20. KEY CODES
Example: Up
Platform Value
LG Web OS 38
Android TV 38

21. KEY CODES
Example: Up
Platform Value
LG Web OS 38
Android TV 38
FireTV 38

22. KEY CODES
Example: Up
Platform Value
LG Web OS 38
Android TV 38
FireTV 38
Samsung Tizen 38

23. KEY CODES
Example: Up
Platform Value
LG Web OS 38
Android TV 38
FireTV 38
Samsung Tizen 38
Samsung Smart TV 29460

24. KEY CODES
Example: Back
Platform Value

25. KEY CODES
Example: Back
Platform Value
LG Web OS 461

26. KEY CODES
Example: Back
Platform Value
LG Web OS 461
Android TV No event

27. KEY CODES
Example: Back
Platform Value
LG Web OS 461
Android TV No event
FireTV 27

28. KEY CODES
Example: Back
Platform Value
LG Web OS 461
Android TV No event
FireTV 27
Samsung Tizen 10009

29. KEY CODES
Example: Back
Platform Value
LG Web OS 461
Android TV No event
FireTV 27
Samsung Tizen 10009
Samsung Smart TV 88

30. PROBLEM #3
Application not loading

31. REASON
Some systems require additional JS libraries. E.g.
<script src="$MANAGER_WIDGET/Common/API/Widget.js"></script>
<script src="$MANAGER_WIDGET/Common/API/TVKeyValue.js"></script>

32. WORKAROUND

33. WORKAROUND
Detect platform

34. WORKAROUND
Detect platform
Inject scripts and wait

35. WORKAROUND
Detect platform
Inject scripts and wait
Callback when done

36. OTHER ISSUES

37. OTHER ISSUES
Different key press rates

38. OTHER ISSUES
Different key press rates
Browser engine

39. OTHER ISSUES
Different key press rates
Browser engine
Playing video

40. OTHER ISSUES
Different key press rates
Browser engine
Playing video
Device info

41. OTHER ISSUES
Different key press rates
Browser engine
Playing video
Device info
Local storage

42. OTHER ISSUES
Different key press rates
Browser engine
Playing video
Device info
Local storage
Incompatibilities with popular JS frameworks

43. CLI tools
JS SDK Dashboard

45. THANK YOU!
Questions?

46. WE'RE HIRING!
Javascript Engineers
info@infamouslabs.net