Westbrook commented 7 years ago

References https://github.com/philnash/twilio-video-chat-web-component/issues/1

@philnash this is my current thoughts on getting the new specs and APIs pulled into this component. Looking forward to your thoughts on getting this into a good place to update your blog post with and officially publish to webcomponents.org.

Westbrook commented 7 years ago

Would love to get your thoughts on this approach to v1 and the new Twilio APIs. Am using it as source material for a more fully formed/featured Polymer version at https://github.com/Westbrook/lingo-live-video-chat so if there were any gotchas or suggestions it would be very appreciated.

philnash commented 6 years ago

I'm sorry I haven't got to take a look at this just yet. Got a lot going on at the moment. I should find time next week to properly look it over though.

philnash commented 6 years ago

The work to update to the latest Twilio Video seems spot on, got no problems there.

Can you point out explicitly what the updates in Web Component specs have been? I've not kept up with recent changes and I'm just interested.

Westbrook commented 6 years ago

Thanks for the notes @philnash. I believe I've covered all of them and maybe a couple of other clean up pieces here and there.

As to the changes needed to get to V1, the biggest one in the context of this component is the move from document.registerElement to window.customElements.define. A decision that seems to be in favor of a growing web components community in that we're already seeing non-Chrome browsers (http://caniuse.com/#feat=custom-elementsv1) begin to develop and ship support for it. One of the underlying points to this version of the specification is that it will only ever be available in modern browsers, so it is engineered to work specifically with ES6 classes, hence the larger part of the code organization herein.

Beyond that, the changes in the shadow DOM spec are pretty small, so small I had almost forgotten to make them till just now. You'll see the move to this.attachShadow({mode: 'open'}) from this.createShadowRoot(), which seems to have had a similar effect on the community http://caniuse.com/#feat=shadowdomv1. The mode argument that this surfaces allows the developer to outline whether the DOM interior to the shadow boundary can be accessible via JS. The most explicit difference between the two is the loss of the native this.shadowRoot accessor to content in the shadow DOM. However, I've not seen any good arguments for using closed, so I've used open here.

Separately

In trying to stay to the spirit of your previous version I didn't include any polyfills, though it would be pretty simple to tie in some conditional polyfills via https://github.com/webcomponents/webcomponentsjs/blob/master/webcomponents-loader.js. It doesn't really belong here, but either an application of this element or an extension of this application would really benefit from a clear walk through on how to get Safari support for the Twilio API. For the general Twilio community, but particularly to this context as Safari has shown a good amount of support for the web components APIs. To that end, I've been doing something like:

const curl = require('curlrequest');
const express = require('express')
const app = express()

app.get('/create', function (req, res) {
  curl.request({
    url: 'https://' + userName + ':' + password + '@video.twilio.com/v1/Rooms/',
    method: 'POST',
    data: {
      'Type': 'group',
      'VideoCodecs': 'H264',
      'UniqueName': 'roomName'
    }
  }, function(err, stdout) {
    res.send(stdout);
  });
});

But, for some reason getting from your blog post/docs to that was much harder than I feel it should have been, so it's probably that I'm missing something.

philnash / twilio-video-chat-web-component

WIP: V1 component and most recent Twilio APIs #2

Separately