Unable to handle localMedia

[ZuSe]

Hello guys,

I had time to try out the new rooms api today.
Unfortunately I am unable to join a room when following the getting started.
I spend the last couple of hours in debugging my code and afterwards going through your SDK code.

I figured out that getLocalMedia in twilio-video.js does not succeed for me.

function getLocalMedia(client, options, handleLocalMedia) { options.shouldStopLocalMedia = !options.localMedia && !options.localStream; console.log('Stopping Local Media?', options.shouldStopLocalMedia); return client._getLocalMedia(options).then(function getLocalMediaSucceeded(localMedia) { var promise = handleLocalMedia(localMedia); promise.catch(function handleLocalMediaFailed() { console.log('handleMedia Failed!!!'); if (options.shouldStopLocalMedia) { localMedia.stop(); } }); return promise; }); }
as my debug output ('handleMedia Failed!!!) is thrown.
My code can be found here: https://paste.ubuntu.com/23360934/
I am also able to render LocalMedia to a local container.

Are there any other cases where this happened before?

Best, ZuSe

---

ENVs:
Chrome 53 on Ubuntu 16.04 with twilio-video.beta2.
also tested on Opera 40 on Windows 10

[manjeshbhargav]

Hi @ZuSe ,

Can you re-run your example, but this time while creating the Twilio Video Client, pass a log level parameter in the constructor options like this:

var twilioClient = new Twilio.Video.Client(token, { logLevel: 'debug' });

I'd be interested to see the logs that you generate.
Thanks for trying out twilio-video.js@1.0.0-beta2!

[ZuSe]

Hi @manjeshbhargav,

I did this before and posted it in my support ticket.
Here we go:

https://paste.ubuntu.com/23359036/

Best,
ZuSe

[ZuSe]

I ran again, here the full log from the beginning:
https://paste.ubuntu.com/23361271/

Just ignore my debug output, that was to narrow down the error in twilio-video.js

[manjeshbhargav]

Hi @ZuSe,

Thanks for the logs. I was wondering how you created the local media this._videoService.localMedia. Can you paste the code where you created this object?

[ZuSe]

There we go:

declare var Twilio: any;

@Injectable()
export class VideoService {
  public localMedia: any = Twilio.Video.LocalMedia();
...
Twilio.Video.getUserMedia().then(
      (mediaStream: any) => {
        if (!this.displayingLocal) {
          this.localMedia.addStream(mediaStream);
          try {
            this.localMedia.videoTracks.values().next().value.attach(element);
          } catch (error) {
            this._logger.debug(`[${this.constructor.name}] ERROR BINDING WEBCAM STREAM!!!`, error);
          }
        }
        this.displayingLocal = true;
      });

it's pretty much the same as described in the getting start.
I also tried out the static method LocalMedia.getLocalMedia -> same result

Best,
ZuSe

[manjeshbhargav]

Hi @ZuSe,

Thanks for your help. I'll try to reproduce this issue on my and and let you know soon.

[manjeshbhargav]

Hi @ZuSe,

In the meantime, can you try connecting to a room with media constraints instead of local media like this:

twilioClient.connect({ to: roomId, audio: true, video: true }).then(room => {...});

Let me know if this works or not.

[ZuSe]

@manjeshbhargav

thanks for helping me. I tried out the contraints, unfortunatley i run into the same problem.
Here is the log https://paste.ubuntu.com/23363186/ (Windows 10, Opera 40)

When you try to reproduce it, keep in mind that we are using Angular2. It should actually not affect it, but might play somehow into it. With the old consultations API we never had any probs in TypeScript.

[ZuSe]

@manjeshbhargav @markandrus
Here a small plunker showing the issue to reduce complexity:

https://plnkr.co/edit/9JdX4q7vawIJldUm07Cf?p=info

Just generate a valid access token via the dev tools and paste it in.

[markandrus]

Hi @ZuSe,

Thanks a lot for the plnkr, it was very helpful. Our current theory is that Zone.js (a dependency of Angular2) may be interacting poorly with twilio-video.js. For the most part, twilio-video.js's usage of Promises is pretty basic, although we do return a "CancelablePromise" from the connect call. Zone.js overrides the global Promise with its own ZoneAwarePromise. We will have to look into whether or not this is causing problems.

[ZuSe]

Hi @markandrus

Yeah that might cause it. Maybe it could be fixed by providing types for it.

However, you should really test compatibility with the most common JS-Frameworks like Angular or React :) I mean, who does really develop with plain JS these days?

Best,
ZuSe

[markandrus]

However, you should really test compatibility with the most common JS-Frameworks like Angular or React :) I mean, who does really develop with plain JS these days?

Point taken. I can confirm support for React (it's what I write our internal video-dialer in), but I personally haven't played with Angular that much. We're going to add more integration testing with other frameworks, including Ember, based on your feedback, so thank you :-)

As for the issue you are seeing, it is arising from a poor interaction between our own CancelablePromise implementation and Zone.js's ZoneAwarePromise. We can simply remove the inherits call (and, in the meantime, I hope Zone.js responds to the issues and PR we have opened against them). Please see 3e28936 for the relevant change. @manjeshbhargav and I hope to land this in an upcoming -beta3 release.