I'm trying the sample on Chrome 67.0.3396.99 and Firefox 60.0.2 on MacOS and can't hear any stereo audio. Panning doesn't work either.

Is this sample broken?

This is what's happening:
When trying to implement or include opentok library into an angular application (v8) I am getting this error:

[19260:0705/181920.936:ERROR:rtp_receiver.cc(121)] AudioRtpReceiver::OnSetVolume: No audio channel exists.

This message appears from starting the app.

Notes:

• This is an electron.js app with an embedded angular application.
• I am able to do all the one-2-one live chat session and the result of the recording is fine, it has video and audio.
• There is no sound on the electron app

environment versions:

{ node: '12.0.0',
  v8: '7.3.492.27-electron.0',
  uv: '1.27.0',
  zlib: '1.2.11',
  brotli: '1.0.7',
  ares: '1.15.0',
  modules: '70',
  nghttp2: '1.34.0',
  napi: '4',
  llhttp: '1.1.1',
  http_parser: '2.8.0',
  openssl: '1.1.0',
  icu: '63.1',
  unicode: '11.0',
  electron: '5.0.6',
  chrome: '73.0.3683.121' }

Steps to reproduce:

1. Create angular app
2. add electron to angular app
3. add opentok/client to angular app
4. reference it on any component

Web video is black screen when testing a sample between web (Windows7 Chrome) and android (Chrome)

Hi,

When i run the project i get the follwing error in session.vue

Error in created hook: "TypeError: Cannot convert undefined or null to object"

the error occours in

var nodeListToArray = function nodeListToArray(nodes) {
if (env.name !== 'IE' || env.version > 9) {
return Array.prototype.slice.call(nodes);
}

it cannot find nodes

I'm using Basic-Video-Chat example for group video chat. (https://tokbox.com/developer/tutorials/web/basic-video-chat/)
There are 2 clients connected to a session.
After 1 client disconnects ( session.disconnect() ) and connects again with initializeSession()
I get 3 clients (1-st disconnected is exists yet).
The problem is that on session.disconnect() client doesn't removed from client list but on re-connection
it creates new client.
After refreshing page on disconnect it works as it should be, but I need a functionality to do re-initialization with code.

👍 if you would like to see a sample application that shows you how to set different constraints, (eg. the framerate and resolution) and then uses the getStats API to show you the stats on the other side. Similar to https://webrtc.github.io/samples/src/content/peerconnection/constraints/

👍 This if you would like to see a sample that shows you how to adjust UI and other options for publishers and subscribers, using the following:

• Options for the OT.initPublisher() method.
• Publisher.publishAudio(), Publisher.publishVideo(), Publisher.setStyle(),
  Publisher.cycleVideo()
• Options for the Session.subscribe() method
• Subscriber.setAudioVolume(), Subscriber.subscribeToAudio(),
  Subscriber.subscribeToVideo()
• Subscriber [videoDisabled][10],[videoDisableWarning][11], [videoDisableWarningLifted][12] events

Note that you can already test many of these options in
[OpenTok Playground][13].

[10]: https://tokbox.com/developer/sdks/js/reference/Subscriber.html#event:videoDisabled https://tokbox.com/developer/sdks/js/reference/Subscriber.html#event:videoDisableWarning
[12]: https://tokbox.com/developer/sdks/js/reference/Subscriber.html#event:videoDisableWarningLifted
[13]: https://tokbox.com/developer/tools/playground/

Hi I try use session.disconnect() for disconnect clients and i got this error

Invalid state transition: Event 'disconnect' not possible in state 'disconnected'

My session is already connect so i dont understand

@msach22 ?

Thanks

I downloaded this sample as is and it worked like a charm. Upon creating a new project using ng new myapp and placing the same module in my code as in this sample. Session does not gets created and session state stays as 'Connecting'

There are no errors or warnings reported. Session created listener never gets triggered.

Environment Specs:

Angular CLI: 1.7.3
Node: 8.10.0
OS: win32 x64
Angular: 5.2.9 

@angular-devkit/build-optimizer: 0.3.2
@angular-devkit/core: 0.3.2
@angular-devkit/schematics: 0.3.2
@ngtools/json-schema: 1.2.0
@ngtools/webpack: 1.10.2
@schematics/angular: 0.3.2
@schematics/package-update: 0.3.2
typescript: 2.5.3
webpack: 3.11.0

Browser

1. Chrome Version 65.0.3325.162 (Official Build) (64-bit)
2. Firefox Quantum 58.0.2 (64-bit)

Is there a way we can put or bind some extra (custom) payload (as an id) with each new connection (client) connect to a session?

I downloaded this code, and tested. When open second window with same url, the first window is not updating like demo. Is there any specific version in angular/tokbox to make it work?

Screen sharing for Electron does not work on the 2.13 JS SDK. Please use the 2.12 JS SDK if you need to use the screen sharing feature on Electron applications.

Getting the following error when using OpenTok JS SDK on a simple page. I have looked everywhere for an answer and have also tried changing versions but no luck.

index.js:18 Uncaught TypeError: Cannot convert undefined or null to object at slice (<anonymous>) at s (index.js:18) at index.js:57 at new a (index.js:90) at e.exports (shorthandSelector.js:6) at Object.o.name.a.request (browser.js:52) at Object.o.name.a.post (browser.js:95) at analytics.js:23 at e (QueueRunner.js:22) at e.t.run (QueueRunner.js:26) at e.t.add (QueueRunner.js:9) at analytics.js:21 at e.exports.logEvent (analytics.js:136) at analytics.js:90 at guid_storage.js:118 at guid_storage.js:23 s @ index.js:18 (anonymous) @ index.js:57 a @ index.js:90 e.exports @ shorthandSelector.js:6 o.name.a.request @ browser.js:52 o.name.a.post @ browser.js:95 (anonymous) @ analytics.js:23 e @ QueueRunner.js:22 t.run @ QueueRunner.js:26 t.add @ QueueRunner.js:9 (anonymous) @ analytics.js:21 logEvent @ analytics.js:136 (anonymous) @ analytics.js:90 (anonymous) @ guid_storage.js:118 (anonymous) @ guid_storage.js:23 s.get @ guid_storage.js:96 t.logEvent @ analytics.js:80 logEvent @ index.js:535 logConfigurationFileEvent @ index.js:549 connect @ index.js:817 initializeSession @ xGksBHvv:210 (anonymous) @ xGksBHvv:235

Doing npm start returns: http://prntscr.com/k09kfy

My config.js looks like this
var SAMPLE_SERVER_BASE_URL = '' var API_KEY = ' '; var TOKEN = ''; var SESSION_ID = ' ';

on my app.js

var apiKey;
var sessionId;
var token;
function initializeSession() {
  var session = OT.initSession(apiKey, sessionId);

  // Subscribe to a newly created stream
  session.on('streamCreated', function streamCreated(event) {
    var subscriberOptions = {
      insertMode: 'append',
      width: '100%',
      height: '100%'
    };
    window.subscriber = session.subscribe(event.stream, 'subscriber', subscriberOptions, handleError);
  });

  session.on('sessionDisconnected', function sessionDisconnected(event) {
    console.log('You were disconnected from the session.', event.reason);
  });

  // initialize the publisher
  var publisherOptions = {
    insertMode: 'append',
    width: '100%',
    height: '100%'
  };
  var publisher = window.publisher = OT.initPublisher('publisher', publisherOptions, handleError);

  // Connect to the session
  session.connect(token, function callback(error) {
    if (error) {
      handleError(error);
    } else {
      // If the connection is successful, publish the publisher to the session
              setTimeout(() => {
          document.getElementById('CallingPatient').style.display = 'none'; 
          document.getElementById('remoteVideoDiv').style.display = 'inline'; 
        }, 5000);
       
      session.publish(publisher, handleError);
    }
  });
}

if (API_KEY && TOKEN && SESSION_ID) {
 apiKey = API_KEY;
 sessionId = SESSION_ID;
 token = TOKEN;
 initializeSession();
} else if (SAMPLE_SERVER_BASE_URL) {
 // Make an Ajax request to get the OpenTok API key, session ID, and token from the server
 $.get('/myrouteReturnSessiondetails').then(function(res) {
   console.log("res ",res)
  
   apiKey = res.apiKey;
   sessionId = res.sessionId;
   token = res.token;
  
 }).catch(function catchErr(error) {
   handleError(error);
   alert('Failed to get opentok sessionId and token. Make sure you have updated the config.js file.');
 });
}
} 

The connection is getting established with black remote screen.My publisher is on desktop browser and subscriber is on mobile browser.

if I hardcode the value of apiKey, token, and sessionId in config.js then it works pretty well. I have console log inside initializeSession and it gives correct apiKey, sessionId and token.

Please let me know if anyone else have similar issues

At the end of a video / voice call I call publisher.destroy() and session.disconnect() And I get the following warning:

Video element paused, auto-resuming. If you intended to do this, use publishVideo(false) or subscribeToVideo(false) instead.

I think this shouldn't happen, when we're destroying everything.

I'm seeing this error message in my FireFox (72.0.2) console when I'm in a video session with another client, and the other client unpublishes or disconnects from their stream - e.g. the other client calls:

mySession.unpublish(myPublisher);

In my client, I've registered a "streamDestroyed" listener for my session:

mySession.on('streamDestroyed', function (event) {
console.log('subscriber stream destroyed');
});

When the other client unpublishes, I'm seeing the expected 'subscriber stream destroyed' message in my console, which is immediately followed in the console by:

OpenTok:Subscriber:error Invalid state transition: Event 'fail' not possible in state 'disconnected'

My Opentok setup used to work but recently I started getting an error. The browser I'm using is:
-Chrome Version 69.0.3497.100 (Official Build) (64-bit)
macOS Sierra Version 10.12 Beta
ruby '2.5.1
gem 'opentok', '> 3.0.3'
gem 'rails', '> 5.2.1'

Please see below the error I'm getting:

index.js:20 Uncaught TypeError: Cannot convert undefined or null to object
at slice ()
at nodeListToArray (index.js:20)
at selectorToElementArray (index.js:70)
at new ElementCollection (index.js:103)
at module.exports (shorthandSelector.js:6)
at Object.browserAjax.request (browser.js:52)
at Object.browserAjax.post (browser.js:95)
at analytics.js:17
at loop (QueueRunner.js:22)
at QueueRunner.run (QueueRunner.js:26)

// Connect to the Session using a 'token'
session.connect(token, function(error) {
if (error) {
console.log("Error connecting: ", error.name, error.message);
} else {
debugger
var publisher = OT.initPublisher('publisher-div', {
frameRate: 80,
insertMode: 'append',
width: '300px',
height: '220px'
}
);
session.publish(publisher);
console.log("Connected to the session.");
}
});
The error comes from this file: webpack:///./src/js/common-js-helpers/elementCollection/index.js

// A helper for converting a NodeList to a JS Array
const nodeListToArray = function nodeListToArray(nodes) {
if (env.name !== 'IE' || env.version > 9) {
return Array.prototype.slice.call(nodes); // <=---- This line returns the error because nodes is undefined
}

// IE 9 and below call use Array.prototype.slice.call against
// a NodeList, hence the following
const array = [];

for (let i = 0, num = nodes.length; i < num; ++i) {
array.push(nodes[i]);
}

return array;
};
My token, api and sessionId are already set up and are correct.

👍 this if you would like to see a face tracking sample application. https://github.com/aullman/opentok-camera-filters is a good example of using https://github.com/auduno/clmtrackr with OpenTok to do face detection. We could do a simpler sample here though.

👍 This if you would like to see a sample that shows you how to select devices. It would list available microphones/cameras and allow you to select one and publish. We already have https://github.com/opentok/opentok-hardware-setup.js but a sample here could be a bit simpler.

👍 this if you would like to see a screensharing sample application added. We already have https://github.com/opentok/screensharing-extensions which shows you how to build your own Chrome extension but a sample here could put everything together including how to install a screensharing extension using inline installation.

We already have an Archiving sample which shows you how to use the OpenTok Archiving API. But there is a new MediaRecorder API available in some browsers that lets you record streams to your local machine. 👍 this if you would like to see a sample of how to do that with OpenTok. Similar to this one here https://webrtc.github.io/samples/src/content/getusermedia/record/

I am getting following issue while incorporating tokbox with angular 6 app.
I am using this in a child module and I have followed the code as provided for angular sample.

Cannot convert undefined or null to object
at slice ()
at nodeListToArray (opentok.js:19338)
at selectorToElementArray (opentok.js:19381)
at new ElementCollection (opentok.js:19414)
at module.exports (opentok.js:19309)
at Object.browserAjax.request (opentok.js:20228)
at Object.browserAjax.post (opentok.js:20271)
at opentok.js:42289
at loop (opentok.js:42472)
at QueueRunner.run (opentok.js:42476)

However, if I try the sample with a fresh app using opentok in app-component, there is no issue.

Hi, our company is using opentok for a while. We had tried to publish video from a video source. The workflow is good. But the stream subscribed by subscribers from the publisher video is very fuzzy, as shown in the following screenshot:

The original video(a 1280x720 video) is on the bottom left, the subscriber stream is on the right which looks very fuzzy. I had tried to set the resolution to 1280x720, but it didn't work:

callProperties: {
    fitMode: 'contain',
    videoSource,
    audioSource,
    resolution: '1280x720'
},

I also went over the related docs, it says that resolution is ignored when publishing video from a video source. So any ideas to fix the issue? Thanks!

Angular4

this.historyArray=[]
this.opentokService.initSession().then((session: OT.Session) => {
  this.session = session;
  this.session.on('signal', (event) => {
    if(event.type=="signal:msg"){
    this. historyArray.push({msg:event.data,id:"history-received",time:this.now});
    console.log("Received Message"+event);
console.log(this.historyArray);
    }else{
      this.historyArray.push({msg:event.data,id:"history-sent",time:this.now});
      console.log("Sent Message"+event);
console.log(this.historyArray);
  }
  });
})

//i am implementing in angular 4,currently generating time locally

It does not work! The publisher gets denied! Waaaahhhhhhhhh

Updated the sample angular app with the 2.17.0 package of opentok/client build and hosted he application;
On all mobile browsers the safari,chrome, firefox, only subscriber works but publisher fails to publish the video although the browser is allowed to access mic and camera of the device.

I am trying the open tokbox samples to try the cyclevideo function before we actually implement it within our product.

I frequently get the "OT_HARDWARE_UNAVAILABLE" exception. This is the only tab that is consuming the media sources. What could be the reason for this exception and what is the best way to handle this?

Hi, I have this exacly example code working in my app:

https://github.com/opentok/opentok-web-samples/blob/master/React-Basic-Video-Chat/src/App.js

It's ok, but how finish call?

I'm using a Vue.js app and I adapted the codes from opentok-web-samples/Archiving to run in a SPA.

The problem is when I wrote the script to test, using Jest, I receive a very mysterious message right in the import:

TypeError: Cannot read property 'getAttribute' of undefined

      20 | 
      21 | <script>
    > 22 | import OT from "@opentok/client";

So I tried to mock the whole opentok/client module, the same mysterious error message appears:

TypeError: Cannot read property 'getAttribute' of undefined

    > 1 | const OT = jest.genMockFromModule('@opentok/client')

What can I do here?
I'd appreciate a more supportive documentation for modern JS frameworks too 😬

PS: I'm using the paid version

👍 this if you would like to see a sample app of how to build and OpenTok app using Web Components.

It turns out that if you try to subscribe in Safari it times out with the error:

ICEWorkflow: Subscriber PeerConnection with connection (not found) failed: OT.Subscriber failed to subscribe to a stream in a reasonable amount of time

Thanks mate you have done so good work! I really appreciate.

I'm facing issues to disconnect the session and I called this.session.disconnect() but when I start new session its throwing error

OpenTok:Session:warn OT.Session: Cannot connect, the session is already undefined +0ms

Please help me if you can

Thanks!

We are publishing videos through canvas, and since chrome 66, it has stopped working properly..
Even your sample is now broken.
Can you please help how we can fix this, as we can't ask all our users to go and disable chrome hardware acceleration.

With one end running on Laptop (macOS/Safari in my case) and the other end running on (IOS/Safari) works like charm. But using (Android/Chrome) doesn't. I have tried possible options of trying different browsers and stuff. This doesn't seem to work on Android phones.
Something like 'Hardware/Software required to process this video is not supported on your device'

I am trying to use a video URL from S3 bucket and whenever I try to execute the following code:

          var video = document.getElementById('publisherVideo');
          video.crossOrigin = 'anonymous';
          const stream = video.captureStream();

it give me the following error:

Uncaught DOMException: Failed to execute 'captureStream' on 'HTMLMediaElement': Cannot capture from element with cross-origin data.

Please tell me how to go about it. I cannot upload the videos to my EC2 server. I tried with one video and it worked but I want to get video from S3 and play it.

Using opentok with angular server side rendering throws following error.
ReferenceError: window is not defined.

Error origin :
Exploring the code, I found that the error is originated from following function

var isOldIE = memoize(function () {
// Test for IE <= 9 as proposed by Browserhacks
// @see http://browserhacks.com/#hack-e71d8692f65334173fee715c222cb805
// Tests for existence of standard globals is to allow style-loader
// to operate correctly into non-standard environments
// @see webpack-contrib/style-loader#177
return window && document && document.all && !window.atob;
});

There are also other references to document, window and other browser specific components, that breaks the angular app if it is using server side rendering.

I am getting this error. when i try to create the object of opentok package. this package is working fine with sample app. but not working with angular 8. i have the same package in both angular versions. i have installed that WebSocket package as well but it is not working. gload object in opentok.js getting undefined.

If you refresh one of the participants you don't get the subscriber

Hello,

I try Basic Video Chat example on Safari (11.1.2) and get:

Unhandled Promise Rejection: AbortError: The operation was aborted.
OpenTok:Publisher:error OT.Publisher.onPublishingTimeout +0ms
OpenTok:GlobalExceptionHandler:error OT.exception :: title: Unable to Publish (1500) msg: ICEWorkflow +0ms

OpenTok:Session:error 
1500 +0ms – "Session.publish :: Could not publish in a reasonable amount of time"
s {code: 1500, message: "Session.publish :: Could not publish in a reasonable amount of time", name: "OT_TIMEOUT", stack: "nt@https://static.opentok.com/v2/js/opentok.min.js…static.opentok.com/v2/js/opentok.min.js:23:118806"}

The opentok min file is big 657kb it there any way to make it smaller?

How to Share audio while Screen Sharing

Is there additional configurations needed to have https://github.com/opentok/opentok-web-samples/tree/master/Publish-Canvas work in sync when the user goes incognito? Because right now when a user opens the window in two locations, the canvas is not in sync.

ngAfterViewInit() {

const subscriber = this.session.subscribe(this.stream, this.subscriberDiv.nativeElement, (err) => {
  if (err) {
    alert(err.message);
  }
});

}

i didn't change anything from the sample code but its showing error as
[ts] Type '(err: any) => void' has no properties in common with type 'SubscriberProperties'. in subscriber.component.ts in ngAfterViewInit Method on (err) => .

Got the error: zone.js:1022 GET https://xxxxxx.herokuapp.com//session 404 (Not Found).
It seems the "fetch" function in line 22 of opentok.services.ts converted the single forward slash to double forward slashes! Do you have any solution to fix that? (Fixed. The forward slash was added in the config.ts)

Apparently due to Chrome's new autoplay policy, there are some issues running this example.

https://support.tokbox.com/hc/en-us/articles/360001896999-Chrome-s-Audio-AutoPlay-Policy-included-with-Chrome-v71

There were some changes added to the JS SDK Subscriber API and I'm not sure if that is reflected in this tutorial.

Please let us know where it can be fixed!

How can I create a button on my view to call publisher.cycleVideo

html: input type="button" value="Switch Cameras" onclick="toggleCamera();"
js appended at the bottom of app.js from the example code.

function toggleCamera() {
publisher.cycleVideo().catch(console.error);
}
but I get an error:
Uncaught TypeError: publisher.cycleVideo is not a function

I'm sure I'm missing something simple, thx in advance.