Coder Social home page Coder Social logo

twilio / twilio-video.js Goto Github PK

View Code? Open in Web Editor NEW
563.0 81.0 216.0 53.65 MB

Twilio’s Programmable Video JavaScript SDK

Home Page: https://www.twilio.com/docs/video/javascript

License: Other

JavaScript 90.32% HTML 0.14% TypeScript 8.97% Dockerfile 0.30% Shell 0.27%
twilio video webrtc

twilio-video.js's People

Contributors

anna-vasilko avatar aymenn avatar charliesantos avatar denisssazanovs avatar dependabot[bot] avatar donaltoomey avatar idelgado avatar innerverse avatar kainosnoema avatar ksmth avatar makarandp0 avatar manjeshbhargav avatar markandrus avatar mgroshans-twilio avatar mhuynh5757 avatar philnash avatar pikajoyce avatar rfbrazier avatar ruescar avatar ryan-rowland avatar schayapathi avatar seancoleman2 avatar swarnava avatar syerrapragada avatar timmydoza avatar twilio-ci avatar twilio-product-security avatar vincentwoo avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

twilio-video.js's Issues

Microphone is not working

I'm trying to implement the library on a ionic/cordova android application, the video is working good so far but I have a problem with the output audio.

Do you have a way to debug if the microphone is available or turned on/off?

I have this log from the library but I'm not sure if is the only way

Wed Nov 23 2016 17:23:16 GMT-0500 (COT) | sip.transport | received WebSocket text message:

INFO sip:[email protected]:52670;transport=wss;ob SIP/2.0
CSeq: 10 INFO
From: <sip:orchestrator@ACc9fe82bb691d2ed8e9f100a7e4408ffa.endpoint.twilio.com>;tag=08662237_6772d868_1ccf8c5b-489f-409f-a8f5-6f78ab835fbf
To: <sip:54da90fdcc79b81900c96a1b@ACc9fe82bb691d2ed8e9f100a7e4408ffa.endpoint.twilio.com>;tag=litdpm5vma
Call-ID: 80ji83hgr2mapbprbqc6
Max-Forwards: 69
Via: SIP/2.0/WSS 172.18.13.146:443;branch=z9hG4bK1ccf8c5b-489f-409f-a8f5-6f78ab835fbf_6772d868_8397195495503101
Content-Type: application/room-signaling+json
Recv-Info: room-signaling
Info-Package: room-signaling
Supported: room-signaling
User-Agent: Twilio Gateway
X-Twilio-CallSid: CA917ec1b37b04825c01abfb8b815277e6
Content-Length: 525

{"version":1,"type":"update","sid":"RM120af3d21645764e456e96a266cc2162","name":"RM120af3d21645764e456e96a266cc2162","participant":{"sid":"PA8f387c5e55d80ea47d22cc175bf200dc","identity":"54da90fdcc79b81900c96a1b"},"participants":[{"sid":"PA0553f563bb49c4187818794c8c2ccc22","identity":"54ff084ada5dae0f00265651","tracks":[{"kind":"audio","id":"413e1c6e69add49df48b7e92796b27e6b524","enabled":true},{"kind":"video","id":"034527b65d47ca4a3a1560d9874c158bd743","enabled":true}],"revision":3,"state":"connected"}],"_record":false}

Using twilio-conversations in node

Hi guys,

This is not really an issue because I assume this library was only meant to be used in a browser, but I am trying to use this library in node. Here is the code I'm trying to run in node

`
var accessToken = "my access token";

    var accessManager = new Twilio.AccessManager(accessToken);
    this.conversationsClient = new Twilio.Conversations.Client(accessManager);
    this.conversationsClient.listen().then(
        function() {
            console.log('ready for invites');
            conversationsClient.on('invite', function (invite) {
                console.log('Incoming invite from: ' + invite.from);
            });
        },
        function (error) {
            console.log('Could not connect to Twilio: ' + error.stack);
        }
    );`

I then send an invite from the starter app to this client and then I get the following

 ready for invites
  node_modules/sip.js/src/SIPMessage.js:485
  this.server_transaction.receiveResponse(code, response).then(onSuccess, onFailure);
                         ^

TypeError: Cannot read property 'receiveResponse' of null
    at Object.IncomingRequest.reply (node_modules/sip.js/src/SIPMessage.js:485:26)
    at EventEmitter.UA.receiveRequest (node_modules/sip.js/src/UA.js:665:19)
    at Object.Transport.onMessage (node_modules/sip.js/src/Transport.js:308:17)
    ...

This looks like the same issue as this @markandrus posted to sip.js https://github.com/onsip/SIP.js/issues/75. Do you have any suggestions on how to get around this?

Edge compatibility

Hi,

I would like to know if in the futur Twilio-Video will be compatible with Microsoft Edge ?

Thx.

Unhandled rejection CONFIGURATION_ERROR.

Hi. Have some problems.

On local machine everything works well. But when I do a production build and open a page with video conversation, I got this error.

Using lib from cdn
//media.twiliocdn.com/sdk/js/video/v1/twilio-video.min.js

Unhandled rejection CONFIGURATION_ERROR: Invalid value "[email protected]" for parameter "uri"
    at http://media.twiliocdn.com/sdk/js/video/releases/1.0.0-beta4/twilio-video.min.js:95:16878
    at Object.r.80 (http://media.twiliocdn.com/sdk/js/video/releases/1.0.0-beta4/twilio-video.min.js:95:16905)
    at s (http://media.twiliocdn.com/sdk/js/video/releases/1.0.0-beta4/twilio-video.min.js:89:280)
    at http://media.twiliocdn.com/sdk/js/video/releases/1.0.0-beta4/twilio-video.min.js:89:331
    at module.exports (http://media.twiliocdn.com/sdk/js/video/releases/1.0.0-beta4/twilio-video.min.js:97:18349)
    at Object.<anonymous> (http://media.twiliocdn.com/sdk/js/video/releases/1.0.0-beta4/twilio-video.min.js:91:31288)
    at Object.r.38.sip.js/src/SIP (http://media.twiliocdn.com/sdk/js/video/releases/1.0.0-beta4/twilio-video.min.js:91:31434)
    at s (http://media.twiliocdn.com/sdk/js/video/releases/1.0.0-beta4/twilio-video.min.js:89:280)
    at http://media.twiliocdn.com/sdk/js/video/releases/1.0.0-beta4/twilio-video.min.js:89:331
    at Object.r.37.../../sip (http://media.twiliocdn.com/sdk/js/video/releases/1.0.0-beta4/twilio-video.min.js:91:24169)
From previous event:

does any one can help?

<video> tag does not have src attribute after conversation.localMedia.attach() [Firefox Only]

Firefox Version - 47.0

Twilio Conversations Version: 0.13.7

Steps to Replicate:

  1. Clone Javascript Quickstart from https://github.com/twilio/video-quickstart-javascript
  2. Generate an access token from https://www.twilio.com/console/video/dev-tools/testing-tools
  3. Set access token in quickstart.js
  4. Run start-server_server.sh
  5. Open localhost:8000/quickstart.html(or whichever port the server is running on) in Firefox.
  6. Click on 'Preview my Camera'
  7. Allow access to camera and microphone.
  8. Inspect the preview window in the firefox developer console.

The video tag within the div#local-media element does not have any attribute associated with it.

Expected behavior would be to have a src attribute or a source tag as a child.

We are trying to display the video feed on fullscreen(in addition to his preview) when a user clicks on his local media preview. On chrome, we do this by parsing the src attribute of the video tag and creating a new video tag and setting the src attribute on it. This fails on Firefox since the video tag does not have a src attribute.

So, the question is, how do we get the video feed url on Firefox after previewMedia.attach('#local-media');?

Relevant code: https://github.com/twilio/video-quickstart-javascript/blob/master/quickstart.js#L92

Unable to attach participant media

I'm building a video conference application, previously which was using Twilio conversation API.
As per recent updates from Twilio, I tried the Rooms API with reference of twilio's quick start app.
I'm facing problem attaching the remote participant media and trying to figure out for more than a week.
Please find code sample here and logs for the same.

I have posted for the same in stackoverflow and got some suggestions which didn't help me.

Note: I'm using Ember JS on front and Ruby on Rails on back end. I also use action-cable to share details between participants.

Ember Environment:
ember-cli: 2.4.3
node: 4.4.3
os: linux x64, 14.04

Ruby Environment:
Ruby version: 2.3.1
Rails version: 5.0.0.1
Rails action cable: 5.0.0.1

Uncaught GATEWAY_DISCONNECTED | Connection to Twilio's servers was lost

Hi,

I downloaded the starter kit for programmable video. The standalone code works but when I integrated the code with my react app, it gives me this strange error
Uncaught GATEWAY_DISCONNECTED | Connection to Twilio's servers was lost
I have left all the quickstart.js as it is except that when my video component mounts, i am calling an init function which run all the twilio related code. The logs just say that the call failed but provide no explanation.

Please help!

invitation to the call

Hi,
I'd like to know how can I get something like an invitation to the room before connecting to it.
From the blog post I can see that earlier version used client.on('invite' ... handler.
What I'm trying to achieve is that I don't keep open connection to the room but I can get some message when someone has connected.

Firefox room remote participant no audio or video streams

No errors are displayed and attachments are there for the participants media object but streams show nothing and no video is displayed... all the while the same code and room when loaded with chrome works just fine... any ideas? Or is this a bug?

ParticipantConnected Event is not triggered if 2 participants join at the same time

If 2 participants are invited to a conversation at the same time, the participantConnected event is not triggered on the new participant's side.

Expected Behavior:

  1. User1 invites User2 & User3 to a conversation _at the same time._
  2. participantConnected event should be triggered twice on all 3 User's clients.

Actual Behavior:

  1. User1 invites User2 & User3 to a conversation at the same time.
  2. participantConnected event is triggered twice on User1's client(browser)
  3. participantConnected event is triggered only once on User2's side (for the join of User1)
  4. participantConnected event is triggered only once on User3's side (for the join of User1)

At this point, User2 & User3 have no way of knowing that they are in the same conversation.

The issue can be replicated on the javascript quickstart - https://github.com/twilio/video-quickstart-javascript

Steps to Replicate:

  1. Clone the Quickstart Repo into 3 different folders i.e. have 3 separate folders with quickstart.html & quickstart.js files.
  2. Navigate to https://www.twilio.com/console/video/dev-tools/testing-tools after login and create 3 separate access tokens.
  3. Set the 3 access tokens in the 3 different quickstart.js files.
  4. Start all 3 servers. (You might have to edit the start_server.sh file to edit the port numbers since all 3 will try to serve on port 8000. Or you can start your own server with python -m SimpleHTTPServer in the parent directory of the 3 folders and access the html file through localhost:8000/folder1/quickstart.html
  5. Open up all three quickstart.html files in browser in separate tabs.
  6. Invite User2 & User3 to a conversation from User1's tab _at the same time_ (You will need quick fingers for this)
  7. Expected behavior would be that after the invites have successfully completed, all 3 participants should be able to see each other. Actual behavior is that User1 sees both the users. User2 & User3 only see User1 who invited them.

This only happens when users are invited at the same time though. The following sequence of steps work perfectly fine:

  1. Invite User2 from User1
  2. Wait for User2 to join.
  3. Invite User3 from User1

In this case, All 3 users can see each other.

Is there any work around for this? Is there any way to instantiate a new participant on the client side and stream their media if the participantConnected event is not triggered?

13.2 - npm install broken

When I try to install 13.2 via npm I get the following error:

    Error: ENOENT: no such file or directory, symlink '../lib' -> 'node_modules/lib'
    at Error (native)
    at Object.fs.symlinkSync (fs.js:945:18)
    at Object.<anonymous> (../node_modules/twilio-conversations/scripts/postinstall.js:4:41)
    at Module._compile (module.js:398:26)
    at Object.Module._extensions..js (module.js:405:10)
    at Module.load (module.js:344:32)
    at Function.Module._load (module.js:301:12)
    at Function.Module.runMain (module.js:430:10)
    at startup (node.js:141:18)
    at node.js:980:3

I am running npm 3.3.15 on Ubuntu 14.04 LTS.
Also tried it with executing npm cache clean before.

Help with Programmable Video

Hi, greetings from Ecuador. My team and I have a few questions about using Programmable Video SDK (PHP + Javascript).

  1. Recording a video call, is it possible to end up with a video file with the audio (voices) separated in individual channels?. One for the voice of the user A and the other for the user B so that we can discard the voice channel of user B and only keep the voice of the user A. We wish to perform some sort of voice analysis but just for one user of the video call.

  2. In our application, we first set up an appointment and later we do the call. Is it possible to generate the room in server side, store its name and then let the users connect to it ?

  3. How can we use Programmable Video and Programmable chat in the same window?

Thank you for your help.

Access to raw streams

participant.media.attach(document.body);

Works great if you want to just display the users video, but for my app I'm doing processing against the stream and need access to it.

Included SIP.js fails to parse constructed SIP URI

Issue tracking isn't enabled on the twilio/SIP.js repo so I hope this OK.

master as of now fails initializing Twilio.Video.Client due to a parse failure:
Invalid value "identity@account_sid.endpoint.twilio.com" for parameter "uri"

This is bubbled up from a call to SIP.Grammar.parse that looks like:
SIP.Grammar.parse('sip:identity@account_sid.endpoint.twilio.com', 'SIP_URI');

My fix involved forking twilio/SIP.js and merging in upstream SIP.js changes then rebuild this project using it. Let me know if you'd like PRs.

Error on IncomingInvite.reject()

Im using twilio sdk to connect to another client, and when i want to reject an incoming call, i get the following error message:

Error: Cannot read property 'once' of undefined TypeError: Cannot read property 'once' of undefined at r._dialogCreated (twilio-conversations.min.js:90) at r._onInviteSuccess (twilio-conversations.min.js:90) at dynamics_browser.js:51.

Have checked the docs on the proper way to do a reject call and cannot see what i'm doing wrong so far

Heroku deploy fails


npm ERR! [email protected] postinstall: `cd src/Grammar && mkdir -p dist && pegjs --extra-options-file peg.json src/Grammar.pegjs dist/Grammar.js`
npm ERR! spawn ENOENT
npm ERR! 
npm ERR! Failed at the [email protected] postinstall script 'cd src/Grammar && mkdir -p dist && pegjs --extra-options-file peg.json src/Grammar.pegjs dist/Grammar.js'.

For some reason the postinstall step fails. Could it be that we need dots in the paths (./src/Grammar)? Or maybe add pegjs as a devDependency in the SIP.js fork.

I'm using this buildpack
https://github.com/tfarla/heroku-buildpack-meteor

Uncaught (in promise) TypeError: Cannot read property 'close' of undefined(…)


import Video from 'twilio-video';

class VideoComponent extends React.Component {
	componentDidMount(){


		const client = new Video.Client('My Key');
		const localMedia = new Video.LocalMedia();

		Video.getUserMedia().then(mediaStream => {localMedia.addStream(mediaStream);});


                client.connect({ to: 'my-room', localMedia: localMedia}).then(room => {console.log('Connected to the Room "%s"', room.name);
}, error => { console.error('Failed to connect to the Room', error);});
	}
	render(){
		return <div>Video Component</div>
	}
}

I am running into Uncaught (in promise) TypeError: Cannot read property 'close' of undefined(…)

I only get it when I'm calling client.connect.

e.play is not a function(…)

Hello. I've got this when tried to initialize local Camera Preview:

twilio-conversations.min.js:89 Uncaught (in promise) TypeError: e.play is not a function(…)


this.get('client').listen().then(() => {
  console.log('Connected to Twilio!');
  if (this.get('conversation') === null) {
    this.displayCameraPreview();
    ...
displayCameraPreview() {
  var previewMedia = new Twilio.Conversations.LocalMedia();
  previewMedia.addCamera().then(function(cameraTrack) {
    // attach to a <video> element
    cameraTrack.attach('.chat .left-part .video .preview-video');
  }, function(error) {
    console.error('Unable to get access to the local camera.' + error.message);
  } );
},

Twilio video room chat not working in cordova hybrid app.

Twilio video room chat is not working with Cordova Hybrid apps. Local video loads in mobile but remote video does not load at all. The same code is running fine in all web brtowsers including desktops and on Android devices. How do we fix this error? Whitelist and intent we are using as follows:

access  @origin="*"/>
<allow-intent href="http://*/*"/>
<allow-intent href="https://*/*"/>
<allow-intent href="tel:*"/>
<allow-intent href="sms:*"/>
<allow-intent href="mailto:*"/>
<allow-intent href="geo:*"/>
<allow-intent href="market:*"/>
<allow-intent href="data:*"/>
<allow-intent href="*://*.ezhealthpal.com/*"/>
<allow-intent href="*://*.media.twiliocdn.com/*"/>
<allow-intent href="*://*.apis.google.com/*"/>
<allow-intent href="video:*"/>
<allow-intent href="audio:*"/>
<allow-intent href="blob:*"/>
<allow-intent href="*"/>
<allow-navigation href="*"/>

"Open failed" on client.connect in iOS Telerik WebView [Cordova]

I realize this is not officially supported, but we're developing an app using Cordova. Our client is in telemedicine. Because of our use of Cordova and the ease of just dropping in the JavaScript desktop code, we're using the Twilio Video JavaScript client + plugins for media access.

On Android, this is working perfectly because WebRTC is supported in Chromium on newer Android devices.

On iOS, we install the cordova-plugin-iosrtc plugin to give the Safari browser WebRTC functions, but are still getting an "Open failed" error when calling client.connect and trying to enter a room.

I noticed access to wss://AC86a124ac4f3a1675b3bfe5385af4c820.endpoint.twilio.com, sip:// addresses, and others. I've been trying to get access to the logger (this.logger=t.getLogger("sip.clientcontext") in the minified file) to get a fuller log of what's happening.

From my experience so far with iOS, this could be any number of things (permissions, lacking features, features not assigned the identifiers in Safari being expected by the Twilio APIs, etc.). Would be nice if we could get a little support as far as how to debug this further. Since this is something other people want to do, we would be happy to share how to get things working with the broader community once we get to that point.

But first things first, how can I further debug and identify what this issue is? I think we're 90% of the way toward having Twilio Video working on Cordova Android and Cordova iOS and we'd like to overcome that final 10% that's in our way.

We tried building twilio-video from source to help us debug, but the non-min'd twilio-video.js in the dist folder still contains a lot of unresolved references to things like require('../package') and './client' for example.

trackAdded gets triggered inconsistently during a conversation

This issue might be related to your SIP/TURN server, but I'm posting here in case it isn't.

I've been setting up a webrtc based video-chat for a project (with all clients using twilio-conversations.js), but have been running into some stability issues.

When switching tracks on a device (i.e. switching cameras on a mobile device), the other participant of the conversation only receives the trackAdded event roughly 80% of the time, with the other 20% just not receiving anything (but the previous track being disabled, since your javascript sdk only supports one track at the time).

In case this is SIP related and I end up being stuck with this problem, is there a way for me to be able to re-poll the other participant for updated tracks?

I've also noticed that this becomes more unreliable if I switch tracks faster (>1/sec), so I feel like this could be due to how you receive async events on your server (eg could they be getting flattened without consideration for the order they were sent in?).

FR: Add Network test to SDK

Hey guys,

would it be possible to provide an interface for testing the client constraints with the SDK?
Sth. like here: https://networktest.twilio.com/
Just without the UI part.

I also asked Rob Brazier for it, he told me it is considered to be shipped with the rooms api, however I can't find it atm.

Best,
Patrick

Pass in contraints for localMedia

Hi folks,

i am running into some problems when I try to force a specific video resolution.
I am creating my localMedia-object like this:

return Twilio.Video.LocalMedia.getLocalMedia(this.E_VIDEO_SETTINGS).then((localMedia: any) => {
where E_VIDEO_SETTINGS is defined as

E_VIDEO_SETTINGS = {
    audio: true,
    video: {
      width: {ideal: 1280, max: 1920},
      height: {ideal: 720, max: 1080}
    }
  };

From what I see in your code this should be piped through the whole process and be passed in to the native getUserMedia-Api as contraints object. Nvtl. my resulting mediaStream instance is 4:3 and low res.

Any ideas what goes wrong here (my webcam supports 720p)?

Best,
Patrick

Tested on: Chrome 56 and Vivialdi 1.6 on Ubuntu 16.04

IntersectionObserver warning in Chrome 56 and earlier

We're tracking a Chrome bug here, Issue 693166: muted, autoplay videos triggered IntersectionObserver warning. twilio-video.js creates such a muted, autoplay <video> that is never attached to the DOM in order to raise "dimensionsChanged" and "started" events. This results in Chrome 56 (Stable) and some earlier versions raising the following warning in the logs:

IntersectionObserver.observe(target): target element is not a descendant of root.

This warning is neither an error, nor fatal, but very annoying.

Websocket errors when using Pace JS

While upgrading from the old twilio-commons and twilio-conversations libraries, I experienced a rather strange bug when setting up conversations. The client setup would go fine but connecting to a room would cause a Websocket is closed error that was visible in the SIP JS debug log.

Eventually it turned out to be caused by Pace, a tiny lib that we use to indicate page load and AJAX call progress. Still don't know what exactly went wrong but in the network tab of the dev console, one could see that the Twilio websocket connection iniator was pace instead of twilio-video.

In our case, Pace was loaded in the HTML head so that it would also give a page load indication. Removing it and bundling it with the rest of our Javascript fixed our problems.

Don't know who is 'to blame' of this, but thought that some trace of this behaviour might help to prevent debugging headaches for others.

AMD support

I looked at the dist files and it appeared there was support for AMD modules, however, utilizing require.js to bundle and almond.js on the client, I recieve the following error: Uncaught Error: See almond README: incorrect module build, no module name which traces back to the following (dist/twilio-conversations.js line 26525):

define([], function() { return Conversations; });

Updating to the following seems to work for my use case:

define('twilio-conversations', function() { return Conversations; });

https://github.com/requirejs/almond/blob/master/README.md#incorrect-module-build-no-module-name provides additional information on the subject.


Are there tests in place to confirm AMD is working correctly? I can dig deeper here and try to submit a PR if we are in agreement that the current code is not working as expected.

Works great with <script> tags but failes with npm package

I've been playing around with the Twilio Video and if I use the script tags I can create a new Twilio.AccessManager, new Twilio.Conversations.Client and so on.

If I try to load the library through npm and webpack, browserify, whatever the same code just doesn't work.

Any pointers on this?

Add / Remove video during call

  • How is it possible to dettach the local video during the call?
  • How is it possible to limit the framerate to reduce CPU processing needs?

Thank you

Need method of determining whether conversation is connected or not

In the most recent build of the library the following error has been occurring:
Cannot transition from "disconnected" to "disconnected"

This error makes sense to me, but at times it may be convenient to be able to write something along these lines when cleaning things up:

if (conversation.isConnected()) {
    conversation.disconnect();
}

Audio-only mode still shows video icon in Chrome.

My application uses both a video + audio and an audio-only mode for video conferencing and audio conferencing respectively. When I use the audio-only version (i.e. client.connect({video: false})), the video icon still shows up in the Chrome browser like so:

screen shot 2017-02-12 at 4 41 30 pm

screen shot 2017-02-12 at 4 41 40 pm

This creates a poor user experience because it gives users the impression that the video is activated when it is not.

How can this be fixed?

Add / Update stream during call

Hi,

I'd like to add a separate or change the current video stream/track during a call. Is this or will this be possible? I guess there would need to be some renegotiation.

End goal being screen sharing.

ERROR in [Client #1]: Failed to get ICE servers from ECS: network_traversal_service not available

I randomly started experience the following error:

ERROR in [Client #1]: Failed to get ICE servers from ECS: network_traversal_service not available
  1. Package was installed with npm.
  2. I am using the master branch since beta-4 is not out yet. My project is based on create-react-app.
  3. It says auth token experienced, not sure what that is. All I provided was the test access token I generated in the console (it was not expired yet).

EDIT

I fixed it by refreshing the page where you generate access tokens, however without refreshing it, it did not seem to work so there is probably a small bug there. I'll re-open if i find anything, closing for now.

bower install --save twilio-video resolves to twilio-conversations

actually your versioning is quite confusing.

bower twilio-video#*        not-cached https://github.com/twilio/twilio-video.js.git#*
bower twilio-video#*           resolve https://github.com/twilio/twilio-video.js.git#*
bower twilio-video#*          download https://github.com/twilio/twilio-video.js/archive/0.13.10.tar.gz
bower twilio-video#*           extract archive.tar.gz
bower twilio-video#*      invalid-meta for:/var/folders/cx/9900fxfj7zx_nqwz4d861n5m0000gn/T/simonfakir/bower/fa46d7c94a7d9aaaff8ed773fe391d04-10105-DOe6jp/bower.json
bower twilio-video#*      invalid-meta The "main" field cannot contain minified files
bower twilio-video#*          resolved https://github.com/twilio/twilio-video.js.git#0.13.10
bower twilio-conversations#^0.13.10          install twilio-conversations#0.13.10

twilio-conversations#0.13.10 client/bower_components/twilio-conversations

So in the end I got a twilio-conversations.js 0.13.10 from bower, which seems to be wrong.
On your CDN i found twilio-video.js 1.0.0-beta3 (copyright 2015?) this should be the latest version right?

Update: looks like npm instsall works fine and you just need to fix your bower repo.

thank you.

Unable to handle localMedia

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

Video orientation issue in Chrome for Android from iOS

Hello,

I am currently integrating Twilio SDK for video calls. I have an issue when the video is streamed from iOS to web on Android, the video is rotated 90deg.
When streaming web (desktop or Android) to web (desktop or Android), it is fine. It is also fine when streaming from iOS to desktop browser.

I am not sure which party might be at fault in this case. If you have any clue for me, I would appreciate it! Thanks.

Module not supported w/ react

Trying to npm install twilio-video in react and seeing the following error:

Error in ./~/xmlhttprequest/lib/XMLHttpRequest.js
Module not found: 'child_process' in /node_modules/xmlhttprequest/lib

 @ ./~/xmlhttprequest/lib/XMLHttpRequest.js 15:12-36

Video freezes or browser crash with 3 or more participants

Hello,

We have been trying to use Twilio Video conference feature for one of our application.

We are facing few of the below mentioned issues in our application as well as in sample demo app provided by Twilio deployed on Heroku

One or more participant video stream freezes in ongoing video session randomly
One or more participant browser crashes randomly showing blank window. Once blank window pops up we are not even able to right click in window.
This issue happens if we have 3 or more participants joining video call.

Issue can be replicated in demo app deployed in Heroku

URL: https://twilio-demo-1.herokuapp.com/

Organizer can generate three sample access tokens in Twilio account and invite two participants to join the call using identifier of access tokens

Can somebody please help to resolve this issue.

Thanks,

Signaling connection disconnected when trying to connect to room

I'm having an issue connecting to a room that I am giving a random string name. The client connects fine but I get error 53001 when trying to connect to a room which I also saw wasn't in the twilio error code manual. Any suggestions? I tried the started project and it worked perfectly.

`var request = $.ajax({
url: "/token",
type: "POST",
dataType: "json",
data: {symptoms : arrayIt},

  success: function(response) {
    identity = response.identity;
    toke = response.token;
    roomName = response.identifier;

    videoClient = new Twilio.Video.Client(toke);
    if (videoClient)
        videoClient.connect({ to: roomName}).then(roomJoined,
        function(error) {
          log('Could not connect to Twilio: ' + error.message);
        });
  },
  error: function( errorThrown){
    console.log(errorThrown);
    }
});`

Error packaging twilio-conversations in ember.js app with bower on ubuntu

I know this is a pretty cryptic error message, but I've been able to isolate the issue to importing twilio-conversations#0.13.4 in my app. The application builds fine on OSX, but our build server w/ Ubuntu is blowing up with this error message.

not ok 1 PhantomJS 1.9 - Global error: Error: Could not find module `ember-resolver` imported from `frontend/resolver` at http://localhost:7357/assets/vendor.js, line 173
    ---
        Log: |
            { type: 'error',
              text: 'Error: Could not find module `ember-resolver` imported from `frontend/resolver` at http://localhost:7357/assets/vendor.js, line 173\n' }
    ...
not ok 2 PhantomJS 1.9 - Global error: Error: Assertion Failed: The tests file was not loaded. Make sure your tests index.html includes "assets/tests.js". at http://localhost:7357/assets/vendor.js, line 15822
    ---
        Log: |
            { type: 'error',
              text: 'Error: Assertion Failed: The tests file was not loaded. Make sure your tests index.html includes "assets/tests.js". at http://localhost:7357/assets/vendor.js, line 15822\n' }

Raise and error/Output Debug info if no dialog exists while inviting a participant.

Steps to Replicate:

  1. Create a Conversation Client.
  2. Invite a new Participant. (A new conversation gets created at this point)
  3. Disconnect the new Participant. (Network down/Tab closed etc)
  4. Invite a participant with the same conversation object. (Number of participants is now 0 and 0 dialogs exist).

The above steps fail silently without any debug info/error.

Relevant code:

https://github.com/twilio/twilio-conversations.js/blob/32c8ceabfa34c97da2c6ce3a74a6d3f44a22145f/lib/signaling/v1/conversation.js#L360

Twilio Video Error Chrome : Uncaught ReferenceError: Promise is not defined

Hi,

Video chat example works in some browser.
But some browser gives me error as below.

Uncaught ReferenceError: Promise is not defined twilio-video.js:5670
Uncaught ReferenceError: Twilio is not defined quickstart.js:20

Browser: Chrome : Version 55.0.2883.87 (64-bit)(Works Fine)

Browser: Chrome : Version 31.0.1650.57**(Giving Me Error)**

Please help me to solve this problem.

Thanks

Shrinivas

Expose ended event on MediaStreams/Tracks

As mentioned in issue #43, it would be nice to have 'ended' be an event exposed on the twilio-video MediaStreams/VideoTracks wrappers to handle cases like chrome's 'Stop Screensharing' button. Currently, I'm digging into the native mediastreams and assigning handlers there, but it would be nice to have it as part of the twilio-video api so I can just work with that abstraction instead. Happy to submit a PR for this if I get the time.

Twilio Video Error with Firefox and Chrome

Hi,

When I remove and add track from chrome and see the results in firefox the following error is generated in chrome.

Unhandled rejection TwilioError: Client is unable to apply a remote media description

Browser: Chrome 56, Mac and Firefox 51

Retrieve remote participants mediaStreams

Hello,
As an initial setup I took the Ruby getting started application which uses the twillio video 1.0.0-beta2 version, as the remote participant connects to the room, the media is attached properly and is visible on the webpage, but what I want to achieve is to iterate other the participant.media.mediaStreams which appears to be empty.

  videoClient = new Twilio.Video.Client(data.token);
  videoClient.connect({ to: roomName, localMedia: previewMedia}).then(roomJoined,
      function(error) { 
          log('Could not connect to Twilio: ' + error.message);
  });
  previewMedia = new Twilio.Video.LocalMedia();
  Twilio.Video.getUserMedia().then(
  function (mediaStream) {
    previewMedia.addStream(mediaStream);
    previewMedia.attach('#local-media');
  },
  function (error) {
    console.error('Unable to access local media', error);
    log('Unable to access Camera and Microphone');
  });

   room.on('participantConnected', function (participant) {
    var participantMedia = participant.media;

    participantMedia.attach('#remote-media');
    participantMedia.mediaStreams.forEach(function(stream) {
      log('Logging stream');
    })
  });

onaddstream is deprecated! Use peerConnection.ontrack instead.

onaddstream is deprecated! Use peerConnection.ontrack instead.

I have this issue in Firefox and sometimes local video preview not showing up.

Twilio.Conversations.LocalMedia.getLocalMedia().then((cameraTrack)=>{
    // attach to a <video> element
    cameraTrack.attach('.chat .left-part .video .preview-video');
  }, (error)=>{
    console.error('Unable to get access to the local camera.' + error.message);
    this.set('cameraDisabled', true);
  }
);

Cannot resolve 'file' or 'directory' ../package

On start application i catch error. (v.1.0.0-beta4)

ERROR in ./~/twilio-video/lib/index.js Module not found: Error: Cannot resolve 'file' or 'directory' ../package in E:\Projects\eurekly_js\node_modules\twilio-video\lib @ ./~/twilio-video/lib/index.js 3:14-35

and

ERROR in ./~/twilio-video/lib/client.js Module not found: Error: Cannot resolve 'file' or 'directory' ../package in E:\Projects\eurekly_js\node_modules\twilio-video\lib @ ./~/twilio-video/lib/client.js 18:14-35

as an option, you can replace:
var version = require('../package').version;
on
var version = require('../package.json').version;

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.