OT is not defined #1

alveshelio · 2017-02-13T22:34:12Z

Hi,

I'm trying out TokBox with Meteor and React and I'm running into a problem.

In my file I've imported the following:
import { OTSession, OTPublisher, OTStreams, OTSubscriber, createSession } from 'opentok-react';

And I have this code:

{
          this.state.token && video.currentSessionId && video.sessionOn &&
          <OTSession
            apiKey={Meteor.settings.public.toxbox.apiKey}
            sessionId={video.currentSessionId}
            token={this.state.token}
          >
            <OTPublisher />
            <OTStreams>
              <OTSubscriber />
            </OTStreams>
          </OTSession>
        }

However, whenever I start a session, I get this error
_Exception from Tracker recompute function:
meteor.js?hash=e3f53db…:930 ReferenceError: OT is not defined
at createSession (modules.js?hash=97a78a9…:64952)
at OTSession.componentWillMount (modules.js?hash=97a78a9…:64850)
at modules.js?hash=97a78a9…:16742
at measureLifeCyclePerf (modules.js?hash=97a78a9…:16469)
at ReactCompositeComponentWrapper.performInitialMount (modules.js?hash=97a78a9…:16741)
at ReactCompositeComponentWrapper.mountComponent (modules.js?hash=97a78a9…:16652)
at Object.mountComponent (modules.js?hash=97a78a9…:9577)
at Object.updateChildren (modules.js?hash=97a78a9…:16215)
at ReactDOMComponent._reconcilerUpdateChildren (modules.js?hash=97a78a9…:15731)
at ReactDOMComponent.updateChildren (modules.js?hash=97a78a9…:15835)

Any idea what could be causing this problem?

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

aiham · 2017-02-13T22:54:39Z

@alveshelio Thanks for using opentok-react!

You would get OT is not defined if you haven't included opentok.js before your application. Have you followed the following instruction from the README:

Include opentok.js before your application:
<script src="//static.opentok.com/v2/js/opentok.min.js"></script>

If you have done that, maybe you can give me more information about your setup because nothing else comes to mind.

alveshelio · 2017-02-14T00:15:05Z

Hi @aiham,

I had not added this script.
I'm not sure about this one:

Include opentok.js before your application:
<script src="//static.opentok.com/v2/js/opentok.min.js"></script>

I've added <script src="//static.opentok.com/v2/js/opentok.min.js"></script> to my main.html file, this is what I have:

<body>
  <div id="react-root"></div>
  <script src="//static.opentok.com/v2/js/opentok.min.js"></script>
</body>

Because the tutorial says, include opentok.js before your application and I've checked your example and you are indeed loading this before the bundle.js file. However, I'm using Meteor and in my html file I do not have the bundle.js file that is called.

When I add <script src="//static.opentok.com/v2/js/opentok.min.js"></script> right before the tag, I get this error:
Refused to load the script 'http://static.opentok.com/v2/js/opentok.min.js' because it violates the following Content Security Policy directive: "script-src 'self' 'unsafe-inline'".

aiham · 2017-02-14T00:36:09Z

@alveshelio I just deleted my previous comment, I believe it's wrong.

I think you should load opentok.js using https:

<script src="https://static.opentok.com/v2/js/opentok.min.js"></script>

I will update the README now.

alveshelio · 2017-02-14T00:40:49Z

Hi @aiham,

Unfortunately with both methods:
meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline' static.opentok.com"
and

I'm still getting the same error.

I've tried on Chrome, Firefox and Safary and I have the same error in all three.

aiham · 2017-02-14T00:48:33Z

@alveshelio What if you try adding the following before </head>:

<meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline' static.opentok.com">

This is setting a Content Security Policy which trusts static.opentok.com. See:

I suspect Meteor is setting a Content Security Policy which only trusts the same origin. Can you open your page with the dev tools open, navigate to the Network tab and click on the request which loads the HTML page. Can you see if there is a response header called Content-Security-Policy there?

alveshelio · 2017-02-14T01:00:42Z

so I've added
<meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline' static.opentok.com">

and checked the Network tab, in "XHR" I don't see anything related to Content-Security-Policy, in "Other" i see "opentok.min.js" withs Status "(blocked:scp)"

aiham · 2017-02-14T01:11:07Z

@alveshelio The CSP header will be in the network request for the HTML page itself, not XHR. Open the network tab and press refresh, it should be the first request in the list.

alveshelio · 2017-02-14T01:27:10Z

I don't see any SCP at the top, here's what I have: http://prntscr.com/e8fn9l

The request to opentok.min.js comes almost at the end, check here: http://prntscr.com/e8fmzp,

aiham · 2017-02-14T01:41:05Z

@alveshelio What about before Clipper.js? There must be a HTML page that loads first. You need to press refresh after you open the dev tools

aiham · 2017-02-14T01:43:34Z

Also, the Content Security Policy is shown once you click on the request, under the Response Headers section:

aiham · 2017-02-14T01:45:35Z

I haven't got much experience with Meteor so I can't say for sure, but it's probably adding the CSP header. You will likely need to add static.opentok.com to the list of trusted domains for static content. There is likely a module to help you with this: https://blog.meteor.com/defense-in-depth-securing-meteor-apps-with-content-security-policy-8fd5ffa503ee

alveshelio · 2017-02-14T02:00:10Z

Hi @aiham,

Thank you very much for your precious help. Actually I was getting this error because I was using package: browser-policy, you've put me in the right track.

I simply need to add this to my code:

Meteor.startup( () => {
  BrowserPolicy.content.allowInlineScripts('static.opentok.com');
  BrowserPolicy.content.allowOriginForAll('static.opentok.com');
})

Here's an article talking about it: Using the Browser Policy Package

Thank you again for your help.

alveshelio closed this as completed Feb 14, 2017

aiham added the question label Mar 15, 2017

jovanchohan mentioned this issue Nov 5, 2020

Failed to acquire functional stream in iOS #86

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

OT is not defined #1

OT is not defined #1

alveshelio commented Feb 13, 2017

aiham commented Feb 13, 2017

alveshelio commented Feb 14, 2017

aiham commented Feb 14, 2017

alveshelio commented Feb 14, 2017 •

edited

Loading

aiham commented Feb 14, 2017

alveshelio commented Feb 14, 2017

aiham commented Feb 14, 2017

alveshelio commented Feb 14, 2017

aiham commented Feb 14, 2017

aiham commented Feb 14, 2017

aiham commented Feb 14, 2017

alveshelio commented Feb 14, 2017 •

edited

Loading

OT is not defined #1

OT is not defined #1

Comments

alveshelio commented Feb 13, 2017

aiham commented Feb 13, 2017

alveshelio commented Feb 14, 2017

aiham commented Feb 14, 2017

alveshelio commented Feb 14, 2017 • edited Loading

aiham commented Feb 14, 2017

alveshelio commented Feb 14, 2017

aiham commented Feb 14, 2017

alveshelio commented Feb 14, 2017

aiham commented Feb 14, 2017

aiham commented Feb 14, 2017

aiham commented Feb 14, 2017

alveshelio commented Feb 14, 2017 • edited Loading

alveshelio commented Feb 14, 2017 •

edited

Loading

alveshelio commented Feb 14, 2017 •

edited

Loading