Issue with opentok.js and Vuejs

Question

I am integrating openjs in my Vuejs project. But i am stuck at the moment. the code below which is very simple give me the following error.

Code

<template>
</template>
<script>
  export default {
    // eslint-disable-line no-unused-vars
    name: 'Video-call',
    created () {
    }
  }
  var session = OT.initSession('apikey', 'sessionid')
  var publisher = OT.initPublisher()
  session.connect('token', function (err) {
    console.log(err)
  })
  console.log(session)
  console.log(publisher)
  session.publish(publisher)
  session.on('streamCreated', function (event) {
    session.subscribe(event.stream)
  })
</script>

Exception details

uncaught TypeError: Cannot convert undefined or null to object
    at slice (<anonymous>)
    at nodeListToArray (opentok.js:19284)
    at selectorToElementArray (opentok.js:19327)
    at new ElementCollection (opentok.js:19360)
    at module.exports (opentok.js:19255)
    at Object.browserAjax.request (opentok.js:20174)
    at Object.browserAjax.post (opentok.js:20217)
    at opentok.js:42190
    at loop (opentok.js:42373)
    at QueueRunner.run (opentok.js:42377)

I cannot find what i am doing wrong.

score 0 · Accepted Answer · answered Jul 15 '18 at 15:36

try this: `

import OT from 'YOUR PATH'
export default {
    name: 'Video-call',
    created () {
var session = OT.initSession('apikey', 'sessionid')
  var publisher = OT.initPublisher()
  session.connect('token', function (err) {
    console.log(err)
  })
  console.log(session)
  console.log(publisher)
  session.publish(publisher)
  session.on('streamCreated', function (event) {
    session.subscribe(event.stream)
  })
    }
  }

`

score 0 · Answer 2 · answered Jul 16 '18 at 05:05

When I run that code (without vuejs) I get an error about needing to be connected before you publish. You need to move the session.publish call inside the session.connect callback.

That other TypeError you are getting looks like you are passing in an object instead of an element id, either to OT.initPublisher, session.publish or to session.subscribe. Each of these methods have an argument that should either be an HTMLNode or an id of an HTMLNode. You get that error if you pass in eg. an Object instead and internally opentok tries to do a document.querySelectorAll(object) and gets null back.

Issue with opentok.js and Vuejs

2 Answers2