The following function is used to generate an accessToken for the rooms connection.
public function joinRoom($roomName)
{
// A unique identifier for this user
$identity = Auth::user()->name;
\Log::debug("joined with identity: $identity");
$token = new AccessToken($this->sid, $this->key, $this->secret, 3600, $identity);

	$videoGrant = new VideoGrant();
	$videoGrant->setRoom($roomName);

	$token->addGrant($videoGrant);

	return view('room.room', [ 'accessToken' => $token->toJWT(), 'roomName' => $roomName ]);
}

The accessToken was passed to the frontend where it is consumed by the following javascript:
var room_data = @JSON(['accessToken' => $accessToken, 'roomName' => $roomName]);
Twilio.Video.createLocalTracks({
   audio: true,
   video: { width: 300 }
}).then(function(localTracks) { console.log(room_data['accessToken'], room_data['roomName'])
   return Twilio.Video.connect(room_data['accessToken'], {
       name: room_data['roomName'],
       tracks: localTracks,
       video: { width: 300 }
   });
}).then(function(room) {
   console.log('Successfully joined a Room: ', room.name);

       room.participants.forEach(participantConnected);

       var previewContainer = document.getElementById(room.localParticipant.sid);
       if (!previewContainer || !previewContainer.querySelector('video')) {
           participantConnected(room.localParticipant);
       }

       room.on('participantConnected', function(participant) {
           console.log("Joining: '" + participant.identity + "'");
           participantConnected(participant);
       });

       room.on('participantDisconnected', function(participant) {
           console.log("Disconnected: '" + participant.identity + "'");
           participantDisconnected(participant);
       });
    }).catch( function(err) {
        console.log(err);
    });

Unfortunately, I got the following error:
TwilioError: Participant identity is invalid↵ at ParticipantIdentityInvalidError.TwilioError (https://media.twiliocdn.com/sdk/js/video/releases/1.6.0/twilio-video.min.js:94:27053)↵ at new ParticipantIdentityInvalidError (https://media.twiliocdn.com/sdk/js/video/releases/1.6.0/twilio-video.min.js:94:21063)↵ at createTwilioError (https://media.twiliocdn.com/sdk/js/video/releases/1.6.0/twilio-video.min.js:94:13281)↵ at getTwilioErrorFromRequestOrResponseBody (https://media.twiliocdn.com/sdk/js/video/releases/1.6.0/twilio-video.min.js:93:4338)↵ at getTwilioErrorFromRequestOrResponse (https://media.twiliocdn.com/sdk/js/video/releases/1.6.0/twilio-video.min.js:93:4909)↵ at InviteClientContext.disconnect (https://media.twiliocdn.com/sdk/js/video/releases/1.6.0/twilio-video.min.js:93:5167)↵ at InviteClientContext.g (https://media.twiliocdn.com/sdk/js/video/releases/1.6.0/twilio-video.min.js:103:25946)↵ at InviteClientContext.EventEmitter.emit (https://media.twiliocdn.com/sdk/js/video/releases/1.6.0/twilio-video.min.js:103:24433)↵ at InviteClientContext.failed (https://media.twiliocdn.com/sdk/js/video/releases/1.6.0/twilio-video.min.js:98:18113)↵ at InviteClientContext.receiveInviteResponse (https://media.twiliocdn.com/sdk/js/video/releases/1.6.0/twilio-video.min.js:99:11849)

Any idea what I'm doing wrong?

I'm generating an Access Token, returning it to my client side, then trying to connect to a room. On the back end, where I create the token and Video grant, I do assign the token an identity property:

const token = new AccessToken(
    <account sid variable>,
    <api key variable>,
    <api secret variable>
  );

  token.identity = identity;
  console.log("Identity used: "+token.identity);

  // Grant the access token Twilio Video capabilities, but limit to
  // the room for that lessonID
  const videoGrant = new VideoGrant({
    room: room
  });
  token.addGrant(videoGrant);

  // Serialize the token to a JWT string
  return token.toJwt();

The payload of the jwt for the access token looks like this:

{
  "jti": "SKe25dcf74ae5c6d14ec20df396e9a43ab-1503603118",
  "grants": {
    "video": {
      "room": "599374468247e824e297ba6d"
    }
  },
  "iat": 1503603118,
  "exp": 1503606718,
  "iss": "SKe25dcf74ae5c6d14ec20df396e9a43ab",
  "sub": "AC79ed9cfda81a51b8005ca41263813b94"
}

I noticed this issue was referring to virtually the same problem, but I am following the instructions recommended in that post, and don't notice the identity anywhere in the jwt. Any ideas @markandrus ?

Not a bug!

Video Quickstart app, not updated with the latest version of twilio-video.js.

Which is the latest javascript SDK CDN that need's to be included in the html file?

The web app works fine when I use <script src="//media.twiliocdn.com/sdk/js/video/releases/1.0.0-beta2/twilio-video.js"></script> but then when I use the latest sdk CDN that is available on the site the web app doesn't work anymore.
<script src="//media.twiliocdn.com/sdk/js/video/v1/twilio-video.min.js"></script>

And also using the old sdk, it doesnt support IOS .

Can someone help me with this?

I am trying to use video with twilio,
When I go to video room I get the following message:
Uncaught (in promise) DOMException: Requested device not found

and there is no video appears.

I tried to install ssl, but I had the same problem.

I searched over internet about a solution, but I did not find article for twiloi.

I am using laravel framework

Hi there, has anyone tried or successfully deployed this on a cloud (e.g. Azure or Heroku, which is what I have tried?). I admit that I am not an expert with Node at all, so learning through the fire hose right now. But the issue seems to be with the build of npm-run-clean
2017-10-14T09:41:57.264888+00:00 app[web.1]: > npm-run-all clean:*
2017-10-14T09:41:57.264889+00:00 app[web.1]:
2017-10-14T09:41:57.270239+00:00 app[web.1]: sh: 1: npm-run-all: not found
2017-10-14T09:41:57.274248+00:00 app[web.1]:
2017-10-14T09:41:57.281360+00:00 app[web.1]: npm ERR! Linux 3.13.0-128-generic
2017-10-14T09:41:57.281564+00:00 app[web.1]: npm ERR! argv "/app/.heroku/node/bin/node" "/app/.heroku/node/bin/npm" "run" "clean"

Any pointers would be appreciated. I'm raising it here simply out of ignorance as I am not sure if I am doing the wrong thing or if this is by design.
Thanks

switch media devices option not exist on master branch

If I add the env variables, run npm install, run npm start (I see in terminal that some files are being copied, and the message saying the express server is running on *:3000), and go to http://localhost:3000 clicking the preview camera button doesn't display any video in the preview video block. I click on the button and nothing gets logged to console or to terminal. I'm able to join / create rooms but there's no video. Any idea what could be the issue? I am on a mac, using chrome, and am working on the javascript video quickstart repo on github.

Hi,
Do you know if is possible use some "invite" event in order to ask to the people connected to the room to answer at the call incoming before start the conversation?
Or more in general just how create a new event.

Thank you

Not sure if this is a special use case but I couldn't find any issues on this so it seems worth noting here.

As getUserMedia is only available from secure contexts and I wanted to test with a client who obviously can't reach localhost, we weren't able to do so. This lead to me changing the server to use https:

var fs = require('fs');
var server = require('https').createServer({
    key: fs.readFileSync('/path/to/key.pem'),
    cert: fs.readFileSync('/path/to/cert.pem')
}, app);
var port = process.env.PORT || 3000;
server.listen(port, function() {
  console.log('Express server running on *:' + port);
});

Of course this needs a valid SSL-certificate and your server to be publicly visible.

Hi Team,
There is an issue while connecting to room , I got the error 53000, signaling connection disconnected when trying to connect to room. But it was working fine till yesterday. Any suggestions?

Failed to load resource: the server responded with a status of 500 (Internal Server Error) in node js

I have Safari 11 updated (Version 11.0 (12604.1.38.1.7)), but the basic quickstart example doesn't work. It works the same sample project with Chrome, Firefox and between them, but using Safari can not connect.

Hi all,

document.getElementById('stop-video').onclick = function() {
        var localParticipant = room.localParticipant;
         localParticipant.videoTracks.forEach(function (videoTrack) {
            videoTrack.stop();
         });
      };

This code works but I want to show an avatar instead of the video stopped for the remote people.
Do you have any idea ?

How can i enable/disable(mute/unmute) audio of other participants. I have a user case in my application in which i have to mute other participants audio on my end only.
I have used below code:
allParticipant.audioTracks.forEach(function (audioTrack) {
if (audioTrack.isEnabled) {
audioTrack.disable();
}
});

audioTrack.disable is not a function i am getting this error.

Hi,

We have implemented approach to allow the user to record a call whenever user wants to start/stop record and we are facing video quality dropped out the issue.
Case is,
I am connected in room1(without recording On) with 1 user and now I am unpublishing video and Audio track and then connecting in room2(With Recording On) with the same user and the video quality is very poor in room2 then the quality we have seen in room 1, And now I am disconnecting room2 and republishing my audio and video track to room1 then also quality is poor in room1 compare to the quality of room1 we have seen before connecting to the room2. Is there in extra parameter need to set after connecting and disconnecting to he room2?

I am getting below error when connecting to room.

Could not connect to Twilio: Invalid Access Token signature

Running this under npm start and using URL: http://localhost:3000/quickstart/

Please check this link https://github.com/twilio/twilio-php/issues/516

I suspect that there is missing check the tracks on the Participant once "participantConnected" fires ... based on:
https://www.twilio.com/docs/video/javascript-v1-getting-started#display-a-remote-participants-video
and
twilio/twilio-video.js#125 (comment)

Hello,
I am using Twilio to broadcast a video and I have option for choosing camera. It is showing all options (camera's) but when I switch between them , then it is broadcasting from the default camera and from I chosed.

Is there capability to record the source video stream at full quality, without subjecting the recording to network-related quality degradation? Maybe a client side recording at full res, uploaded non-real-time?

What's the best way to change a local participants media devices while a video chat is running? What methods do I call to update that while a video chat is running? I was hoping the Media Device Selection example would cover this but it only shows how to change it locally.

Thanks!

The chrome console gives me the following error:

Error: accountSid is required at new AccessToken (D:\video-quickstart-js\node_modules\twilio\lib\jwt\AccessToken.js:184:28) at D:\video-quickstart-js\server\index.js:44:15 at Layer.handle [as handle_request] (D:\video-quickstart-js\node_modules\express\lib\router\layer.js:95:5) at next (D:\video-quickstart-js\node_modules\express\lib\router\route.js:137:13) at Route.dispatch (D:\video-quickstart-js\node_modules\express\lib\router\route.js:112:3) at Layer.handle [as handle_request] (D:\video-quickstart-js\node_modules\express\lib\router\layer.js:95:5) at D:\video-quickstart-js\node_modules\express\lib\router\index.js:281:22 at Function.process_params (D:\video-quickstart-js\node_modules\express\lib\router\index.js:335:12) at next (D:\video-quickstart-js\node_modules\express\lib\router\index.js:275:10) at expressInit (D:\video-quickstart-js\node_modules\express\lib\middleware\init.js:40:5)

This is my .env file
TWILIO_ACCOUNT_SID=[my-account-sid]
TWILIO_API_KEY=[my-api-key]
TWILIO_API_SECRET=[my-api-secret-key]

I slightly modified the media preview code a bit to pause/unpause tracks after they have been created. The screen is going black as expected, but the camera light remains on.

// Preview LocalParticipant's Tracks.
document.getElementById('button-preview').onclick = function() {
  var localTracksPromise = previewTracks
    ? previewTracks.forEach(function(track) { track.enable(!track.isEnabled) })  //Toggle if exists
    : Video.createLocalTracks().then(function(tracks) {
    window.previewTracks = previewTracks = tracks;
    var previewContainer = document.getElementById('local-media');
    if (!previewContainer.querySelector('video')) {
      attachTracks(tracks, previewContainer);
    }
  }, function(error) {
    console.error('Unable to access local media', error);
    log('Unable to access Camera and Microphone');
  });
};

The desired behavior is for the user to toggle their videoTrack as they please (which is why LocalVideoTrack.stop() is not ideal), but because the user still sees the green light next to their webcam they understandably believe they are still streaming video. Is there another way I can force the webcam off while my videoTracks are disabled? Or will I have to resort to stopping tracks on disable and replacing it with a new one on enable (which I would then have to stitch together to make a single playback)?

Thank You!

function attachTracks(tracks, container) {
tracks.forEach(function(track) {
container.appendChild(track.attach());
});
}

function attachParticipantTracks(participant, container) {
var tracks = Array.from(participant.tracks.values());
attachTracks(tracks, container);
}

Every participant has many tracks such as video/audio/share screen, so the question is when the track is audio track, what can we get?

Thanks,
Guijin

It's not really clear from the examples or documentation what is the way to enable or disable a local track (audio or video)

Also, it's not clear to me what track.attach() is doing and if should be called for both video and audio tracks..

Thanks for clarifying

Is there any sample that shows how to use room recording API to just show the recordings in a chronological order after the call was made?

I am successful to run the sample, thank you. However, I want to port it to PHP, but I don't know what is the minimum files I need to port. The "npm start" command seems to do a lot steps. The node_modules directory is huge. Are these just the Node runtime files, or are they part of the Twilio Video SDK?

I'm looking for a minimum, easy to start sample, that's easy to follow and read. Let me know if you have such a sample. Note, I can generate access tokens using my Twilio Function (https://www.youtube.com/watch?v=5lrdYBLEk60).

We would like turn off the local microphone in our browser application. Is this possible in the Javascript client SDK for Twilio Video, and how ?

Hello,
I want to first join the room without adding video track first. And then any participant joins the same room then and then only i want to add video track to that room.
The main goal of this is to save bandwidth of user if call is not connected with someone.

when I disconnect call it detach the remote and local tracks and release the view but camera is not turning off.
var token = resp.call_token;
var room_name = resp.room_name;
//creating local tracks and join room
var videoWidth = $("#chatwindowdiv").width();
console.log("Joining room '" + $scope.room_name + "'...");
var connectOptions = {
name: $scope.room_name,
//tracks: previewTracks,
//logLevel: 'debug'
};

    if (previewTracks) {
      connectOptions.tracks = previewTracks;
    }

    // Join the Room with the token from the server and the
    // LocalParticipant's Tracks.
    Video.connect(token, connectOptions).then(roomJoined, function(error) {
      console.log('Could not connect to Twilio: ' + error.message);
    });
    $scope.roomDisconnect= function() {
      console.log('Leaving room...');
      activeRoom.disconnect();
    };

function roomJoined(room) {
window.room = activeRoom = room;

console.log("Joined as '" + identity + "'");
// Attach LocalParticipant's Tracks, if not already attached.
var previewContainer = document.getElementById('local-media');
if (!previewContainer.querySelector('video')) {
attachParticipantTracks(room.localParticipant, previewContainer);
}

// Attach the Tracks of the Room's Participants.
room.participants.forEach(function(participant) {
console.log("Already in Room: '" + participant.identity + "'");
var previewContainer = document.getElementById('remote-media');
attachParticipantTracks(participant, previewContainer);
});

// When a Participant joins the Room, log the event.
room.on('participantConnected', function(participant) {
console.log("Joining: '" + participant.identity + "'");
});

// When a Participant's Track is subscribed to, attach it to the DOM.
room.on('trackSubscribed', function(track, publication, participant) {
console.log("Subscribed to " + participant.identity + "'s track: " + track.kind);
console.log(participant);
var videoWidth = $("#chatwindowdiv").width();
document.getElementById('remote-media').style.width=videoWidth+"px";
document.getElementById('local-media').style.width="210px";
var previewContainer = document.getElementById('remote-media');
attachTracks([track], previewContainer);
});

// When a Participant's Track is unsubscribed from, detach it from the DOM.
room.on('trackUnsubscribed', function(track, publication, participant) {
console.log("Unsubscribed from " + participant.identity + "'s track: " + track.kind);
$scope.call_inprogress = false;
console.log(track);
detachTracks([track]);
});

// When a Participant leaves the Room, detach its Tracks.
room.on('participantDisconnected', function(participant) {
console.log("RemoteParticipant '" + participant.identity + "' left the room");
$('#button-leave').addClass('ng-hide');
$scope.call_inprogress = false;
if (previewTracks) {
console.log('inside preview tracks');
previewTracks.forEach(function(track) {
track.stop();
var detachedElement = track.detach();
detachedElement.forEach(element => element.remove());
});
}
console.log(room.localParticipant);
console.log(participant);
detachParticipantTracks(room.localParticipant);
detachParticipantTracks(participant);
});

// Once the LocalParticipant leaves the room, detach the Tracks
// of all Participants, including that of the LocalParticipant.
room.on('disconnected', function() {
console.log('Left');
if (previewTracks) {
previewTracks.forEach(function(track) {
track.stop();
});
}
detachParticipantTracks(room.localParticipant);
room.participants.forEach(detachParticipantTracks);
activeRoom = null;
});
}

I have been studying and trying out the implementation of twilio video conferencing. The video calling and recording have worked pretty seamlessly. When I tried the implementation of recording composition API, I faced the below error.

It seems to have occurred in twilio source code. On searching for a solution, I was suggested to downgrade twilio version as composition API is working properly below version 3.0.
Could you please guide me through the issue or point me towards right direction if I'm missing something. Thanks in Advance!

Disconnecting a call doesn't remove the tracks and the camera still stays on. I'm in the development mode on Mac OS High Sierra v 10.13.3 and Chrome Version 64.0.3282.186.

My React function to disconnect the call is:

disconnectCall() {
    let { currentRoom } = this.state;
    console.log("The current room is", currentRoom);
    if (currentRoom != null) {
      this.token = null;
      this.setState({ tracks: {counterparty: {}, local: []}, disconnected: true });
      currentRoom.disconnect();
    }
}

The console log gives me all the proper information about the room so ideally, it should work. But it doesn't seem to be doing anything and the second console.log gives me the same room information including the tracks for the localParticipant. From what I understand these should be removed by calling disconnect right? Please let me know if there's something wrong with my understanding or if I need to take an additional step to disconnect the camera.

Huys, I just spent one hour trying to figure out what the hell is going on, following the official instructions from https://www.twilio.com/docs/api/video/javascript-v1-getting-started

// Attach the Participant's Media to a <div> element.
room.on('participantConnected', function(participant) {
  console.log("Participant '" +  participant.identity  + "' connected");

  participant.tracks.forEach(track => {
    document.getElementById('remote-media-div').appendChild(track.attach());
  });
});

This is not working, because the tracks are empty at that moment, you need to wait for trackAdded event.. Please update the docs, this is really not cool

We have been using the room recording feature and now would like to go back and look at recordings. However, we aren't sure how to piece them back together into something that can be watched.

As far as we can tell, each participant is recorded into two files, one for video (VP8) and one audio (opus). It is straightforward to combine these with ffmpeg into a webm file.

Combining participants seems possible with ffmpeg and a filter to place the streams side-by-side.

However, there seem to be separate pairs of files for each time a participant joins/leaves? Plus it isn't clear how to synchronize any of the participants together?

I am confused as to how anyone could use these recordings in their current form?

This may be somewhat related to #31 as a client side recording might do this, but then what is the recording feature for?

Hi,

Installed successfully. But in my screen enter the room functionality missed. room-controls are not working

I was changed all keys in .env file also.

Thanks

Sat Apr 27 2019 14:45:31 GMT+0500 (Pakistan Standard Time) | sip.transport | received WebSocket text message:

SIP/2.0 400 Bad request
CSeq: 1608 INVITE
Call-ID: rjgacbtk3rk303u98763
From: sip:[email protected];tag=fgpktpkuth
To: sip:[email protected];tag=24266129_6772d868_35579777-b8a9-4edf-9100-0e495637b722
Via: SIP/2.0/WSS 127.0.0.1:56436;branch=z9hG4bK3267259;rport=56436
Server: Twilio
Contact: sip:172.18.52.248:443;transport=wss
Supported: room-signaling
Require: timer
Session-Expires: 120;refresher=uac
Content-Type: application/room-signaling+json
X-Twilio-CallSid: CA503edccab11bb9baf91fdb2ea2fec3f0
X-Twilio-LegInfo: external
X-Twilio-TlsVerify: true
Content-Length: 160

{"version":1,"type":"error","participants":[],"code":53103,"message":"Unable to create Room","subscribe":{"revision":1,"rules":[{"type":"include","all":true}]}}

When a participant pauses a video track track.disable();, the container element turns blank most of the times but sometimes it shows a frozen track.

How do I get rid of the frozen track?

I'm working on porting the backend here to Rails for work. Would the maintainers be interested in adopting a minimal version of it for open usage? I'd be willing to put in a few hours of dev time cleaning it up and making sure it's up to any relevant code standards.

While getting the composition media URL we had set the TTL to 7 days but still, the link expires within 6 hours.

Expected Behaviour:

URL should be valid for 7 days

Current Behaviour:

URL expires within 6 hours.

Here's the scenario :
User 1 enables screen share mode. Puts the app in background. Opens up Youtube/any other video player.
User 2 should be able to listen to both the microphone output of User 1 as well as the output of what's being played by Youtube/video.

Currently, The User 1's mic output is received successfully by User 1 but the third party app's output is not available.

Any direction/help on how to go about solve this ?

Thanks

With WebRTC Support coming to Safari in iOS 11 and High Sierra, is the Twilio video SDK going to work with Safari?

Hello,

I am wrapping up video-quickstart demo with my CI application but I am repetitively getting "Participant identity is invalid" error.

Can you please help me out with what I am doing wrong ?

Need help asap.

Many thanks.

Current behaviour:

1. Follow the readme steps
2. Preview camera
   • green light displayed on computer
   • camera preview loads in browser
3. Enter a room name
4. Join room
5. Leave room
   • green light displayed on computer
   • camera preview unloads in browser

Expected behaviour:

5. Leave room

• green light no longer displays on computer
• camera preview unloads in browser

video-quickstart-js version: 1.0.0-dev

I am newbie node.I want to use the this.But i do not know how to create configuration file.Node server throw exception du to lack of SID.But i do not know how write it.

Hi all,
I have run the app, previewed my camera and joined a room. When I leave the room, then I am not able to preview my camera again and when I join a new room, the camera doesn't work.

We would like to record both sides of video call. We would use group rooms, but we ran into a show stopping bug: twilio/video-quickstart-android#266

It also seems like p2p connections have much higher quality and reliability.

There is one previous issue that shows how to record local video: #31

But it seems like it only works for local videos. For instance, if we do this for a remote video track I get a video with 0 length (though it seems to show one frame of the video?). This snippet below is inside of a react app, but you get the idea.

Do you know how to record remote tracks in the browser?

Thanks!

static startRecording(track){
    if (track.kind=="audio") {
      return;
    }

    const mediaStream = new MediaStream();
    mediaStream.addTrack(track.mediaStreamTrack);
    this.recorder = new MediaRecorder(mediaStream);

    this.recordedBlobs = [];

    this.recorder.addEventListener('dataavailable', (e) => {
      // e.data
      console.log("recorder got blob :" + e.data.size);
      if (e.data.size > 0){
        this.recordedBlobs.push(e.data);
      }
    });

    this.recorder.addEventListener('stop', (e) => {
      console.log('recorder onstop');

      console.log("Have blobs: " + this.recordedBlobs.length);
      var blob = new Blob(this.recordedBlobs, {mimeType: 'video/webm'});
      this.recordedVideo = URL.createObjectURL(blob);
      console.log(this.recordedVideo);
    });

    console.log("Start recording");
    this.recorder.start(1000);

    setTimeout(() => {console.log("Stop recorder"); this.recorder.stop()}, 5000);
  }

Hello Team,

Here i faced two issues:
Issue 1:
-> When i joined room first time then everything works fine.
-> When i refresh (soft refresh) browser tab, then video disconnect.
-> When i join again then video rendered without stream(black screen)
-> When i try again 2-3 time randomly then automatically working. it is happening every test.
Issue 2:
-> When i disconnect room or track.stop it can not stop video access from my camera, light is on.

OS : Ubuntu 14.4 LTS
Browser : Chrome - Version 58.0.3029.110 (64-bit)

Any idea how to stop camera access when call stop ?