Following steps in set up docs - Uncaught ReferenceError: connectSDK is not defined #61

ghost · 2017-07-05T18:57:21Z

Hi all,

I am following the steps on the website to set up http://www.svlconnectsdk.com/docs/1-6-0/cordova/discover-connect/

I have installed the SDK successfully, built and run the Android build. I have the button on screen but i am getting an uncaught reference error when selecting the button?

Anyone able to assist?

Error:
index.js:36 Uncaught ReferenceError: connectSDK is not defined
at Object.showDevicePicker (index.js:36)
at HTMLButtonElement.onclick (index.html:41)

My HTML

        <meta http-equiv="Content-Security-Policy" content="default-src * gap: ws: https://ssl.gstatic.com;style-src * 'unsafe-inline' 'self' data: blob:;script-src * 'unsafe-inline' 'unsafe-eval' data: blob:;img-src * data: 'unsafe-inline' 'self' content:;fmedia-src mediastream;">
        <meta name="format-detection" content="telephone=no">
        <meta name="msapplication-tap-highlight" content="no">
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
        <link rel="stylesheet" type="text/css" href="css/index.css">
        <title>Hello World</title>
    </head>
    <body>
        <div class="app">
            <h1>Apache Cordova</h1>
			<button onclick="app.showDevicePicker()">Select a TV</button>
            <div id="deviceready" class="blink">
                <p class="event listening">Connecting to Device</p>
                <p class="event received">Device is Ready</p>
            </div>
        </div>
        <script type="text/javascript" src="js/index.js"></script>
</body

My JS File

[var app = {
    // Application Constructor
    initialize: function() {
        document.addEventListener('deviceready', this.onDeviceReady.bind(this), false);
    },
    // deviceready Event Handler
    //
    // Bind any cordova events here. Common events are:
    // 'pause', 'resume', etc.
    onDeviceReady: function() {
        this.receivedEvent('deviceready');
        app.setupDiscovery();
    },
    setupDiscovery: function () {
        connectSDK.discoveryManager.startDiscovery();
    },
    showDevicePicker: function () {
        connectSDK.discoveryManager.pickDevice();
    },
    // Update DOM on a Received Event
    receivedEvent: function(id) {
        var parentElement = document.getElementById(id);
        var listeningElement = parentElement.querySelector('.listening');
        var receivedElement = parentElement.querySelector('.received');

        listeningElement.setAttribute('style', 'display:none;');
        receivedElement.setAttribute('style', 'display:block;');

        console.log('Received Event: ' + id);
    }
};

app.initialize();

Thanks

The text was updated successfully, but these errors were encountered:

ghost · 2017-07-05T21:28:45Z

I realised i was missing the cordova.js script in my HTML:

New Code:

<html>
    <head>
        <!--
        Customize this policy to fit your own app's needs. For more guidance, see:
            https://github.com/apache/cordova-plugin-whitelist/blob/master/README.md#content-security-policy
        Some notes:
            * gap: is required only on iOS (when using UIWebView) and is needed for JS->native communication
            * https://ssl.gstatic.com is required only on Android and is needed for TalkBack to function properly
            * Disables use of inline scripts in order to mitigate risk of XSS vulnerabilities. To change this:
                * Enable inline JS: add 'unsafe-inline' to default-src
        -->
        <meta http-equiv="Content-Security-Policy" content="default-src * gap: ws: https://ssl.gstatic.com;style-src * 'unsafe-inline' 'self' data: blob:;script-src * 'unsafe-inline' 'unsafe-eval' data: blob:;img-src * data: 'unsafe-inline' 'self' content:;fmedia-src mediastream;">
        <meta name="format-detection" content="telephone=no">
        <meta name="msapplication-tap-highlight" content="no">
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
        <link rel="stylesheet" type="text/css" href="css/index.css">
        <title>Hello World</title>
    </head>
    <body>
        <div class="app">
            <h1>Apache Cordova</h1>
            <button onclick="app.showDevicePicker()">Select a TV</button>
            <div id="deviceready" class="blink">
                <p class="event listening">Connecting to Device</p>
                <p class="event received">Device is Ready</p>
            </div>
        </div>
        <script type="text/javascript" src="cordova.js"></script>
        <script type="text/javascript" src="js/index.js"></script>
</body>
</html>

Still no picker when built for android. When i load index.html directly in chrome i now get the following pop ups.

https://i.stack.imgur.com/qwS9J.jpg https://i.stack.imgur.com/Q1L81.jpg

If i cancel the pop ups i get these errors:

Unrecognized Content-Security-Policy directive 'fmedia-src'.

index.js:47 Received Event: deviceready

index.js:33 Uncaught ReferenceError: connectSDK is not defined
    at Object.setupDiscovery (index.js:33)
    at Object.onDeviceReady (index.js:30)
    at Channel.fire (cordova.js:822)
    at cordova.js:231

If i accept the pop ups i get these errors :

unrecognized Content-Security-Policy directive 'fmedia-src'.

25269 cordova.js:1083 processMessage failed: invalid message: ""

aditya27dev · 2017-09-13T12:01:28Z

try to run cordova plugin add cordova-plugin-connectsdk again and remove this line

<meta http-equiv="Content-Security-Policy" content="default-src * gap: ws: https://ssl.gstatic.com;style-src * 'unsafe-inline' 'self' data: blob:;script-src * 'unsafe-inline' 'unsafe-eval' data: blob:;img-src * data: 'unsafe-inline' 'self' content:;fmedia-src mediastream;">

mrdu3nde · 2018-04-07T22:53:07Z

Could you install the plugin? I have been trying for 6 days and nothing that I could, I get the following error:
failed: c: \ Windows \ system32 \ cmd.exe / s / c "git checkout tags / 1.6.0", have someone happened the same? or have a solution

aditya27dev · 2018-04-07T22:56:22Z

@mrdu3nde is this for me or somebody else?

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Following steps in set up docs - Uncaught ReferenceError: connectSDK is not defined #61

Following steps in set up docs - Uncaught ReferenceError: connectSDK is not defined #61

ghost commented Jul 5, 2017 •

edited by ghost

ghost commented Jul 5, 2017 •

edited by ghost

aditya27dev commented Sep 13, 2017 •

edited

mrdu3nde commented Apr 7, 2018

aditya27dev commented Apr 7, 2018

Following steps in set up docs - Uncaught ReferenceError: connectSDK is not defined #61

Following steps in set up docs - Uncaught ReferenceError: connectSDK is not defined #61

Comments

ghost commented Jul 5, 2017 • edited by ghost

ghost commented Jul 5, 2017 • edited by ghost

aditya27dev commented Sep 13, 2017 • edited

mrdu3nde commented Apr 7, 2018

aditya27dev commented Apr 7, 2018

ghost commented Jul 5, 2017 •

edited by ghost

ghost commented Jul 5, 2017 •

edited by ghost

aditya27dev commented Sep 13, 2017 •

edited