Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Master #87

Open
wants to merge 97 commits into
base: 1.x
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
97 commits
Select commit Hold shift + click to select a range
682bec1
JSDK-1973 Updating twilio-video.js to 2.x.
manjeshbhargav Aug 10, 2018
5242f66
Merge pull request #52 from twilio/2.x
manjeshbhargav Aug 10, 2018
0222790
Fix for https://github.com/twilio/video-quickstart-js/issues/51
manjeshbhargav Sep 4, 2018
521ef3b
Upgrading to [email protected]
manjeshbhargav Dec 1, 2018
f5aa15e
Adding Unified Plan customer advisory to README.md.
manjeshbhargav Dec 11, 2018
7cecbc5
Setting ttl to 4 hours.
manjeshbhargav Mar 14, 2019
b27dd7c
Update twilio-video.js to 2.0.0-beta9
manjeshbhargav May 3, 2019
f737dd5
JSDK-2353 Adding an example for capturing screen using getDisplayMedi…
manjeshbhargav May 14, 2019
5703a7e
JSDK-2352: Update Video JS QuickStart app to listen to events on the …
makarandp0 May 17, 2019
e7d3494
JSDK-2354 - quickstart sample to demonstrate dominant speaker detecti…
makarandp0 May 29, 2019
384703b
JSDK-2356: quick start sample for room state change events (#76)
makarandp0 Jun 3, 2019
4e4ad99
JSDK-2355 QuickStart example for Network Quality API (#81)
manjeshbhargav Jun 6, 2019
0a62e24
media selection sample that works on mobile devices and connect to ro…
makarandp0 Jun 10, 2019
12f5c1e
minor change to helper.js
makarandp0 Jun 10, 2019
ecb4390
Add advisory for breaking changes in Firefox.
manjeshbhargav Jun 10, 2019
420cdf8
Merge branch 'master' of https://github.com/twilio/video-quickstart-js
manjeshbhargav Jun 10, 2019
5e5eaaf
Pin latest release version until 2.0 GA
syerrapragada Jun 11, 2019
adf2fc2
Merge pull request #84 from twilio/syerrapragada-patch-1
syerrapragada Jun 11, 2019
c2cd5b9
Added links to navigate between quick-start and example pages (#91)
aymenn Sep 10, 2019
81ebb44
remove stale advisory
makarandp0 Nov 14, 2019
2a42d23
update to beta15 (#93)
makarandp0 Dec 2, 2019
13fc1e0
update to [email protected] (#99)
makarandp0 Dec 21, 2019
ff7fb46
Added all the necessary folders and files
PikaJoyce Jan 24, 2020
b9f605c
Added example to example html file. Link doesn't go anywhere yet.
PikaJoyce Jan 27, 2020
20f461c
Got the beginnings of the enabling disabling example up and running.
PikaJoyce Jan 28, 2020
ef1fb5f
Got the code snippet to render
PikaJoyce Jan 28, 2020
c73ef74
Got the participants into the same room, working on appending tracks …
PikaJoyce Jan 28, 2020
4a9413a
Audio muting works. Can't get video to unmount from dom on mute
PikaJoyce Jan 29, 2020
32e6394
Cleaned up muting button functions
PikaJoyce Jan 29, 2020
183ceb3
Fixing event handlers
PikaJoyce Jan 29, 2020
4e9e889
Fixed a bug where audio and video buttons were touching each other, p…
PikaJoyce Jan 29, 2020
e7d5a1c
forgot to commit all day. tinkering with some logic for getting the m…
PikaJoyce Jan 31, 2020
d3513b0
Added SVG glyphicons
PikaJoyce Jan 31, 2020
aeebe49
Mute buttons work. Now they're kind of buggy though. I need to go bac…
PikaJoyce Jan 31, 2020
ecda8c2
Attempting to fix some button issues
PikaJoyce Jan 31, 2020
a3ac334
Clean up. Still attempting to fix the buttons not working on the very…
PikaJoyce Jan 31, 2020
8e25dc3
This fixes button not working the first time
PikaJoyce Jan 31, 2020
e143e0b
Shifted some logic out to helper functions
PikaJoyce Jan 31, 2020
5cf9b78
Added more descriptions, removed console logs
PikaJoyce Jan 31, 2020
027274d
Ha more styling for buttons
PikaJoyce Jan 31, 2020
3b214df
I'm done I think
PikaJoyce Jan 31, 2020
c6ac448
Removed function that wasn't being used anymore
PikaJoyce Jan 31, 2020
9821a72
Last minor changes
PikaJoyce Jan 31, 2020
f0dabae
Changed file name, and path to localmediacontrols
PikaJoyce Feb 3, 2020
205a0d1
Added buttons and appropriate click handlers so we arent using innerh…
PikaJoyce Feb 3, 2020
91a6db7
Added requested changes
PikaJoyce Feb 3, 2020
e1fc76c
Fixed helper function issue with video and audio not being removed fr…
PikaJoyce Feb 4, 2020
9c5601a
Some styling changes
PikaJoyce Feb 4, 2020
cfe01d0
Implemented requested changes
PikaJoyce Feb 5, 2020
5e5ed22
Finishing touches
PikaJoyce Feb 5, 2020
09630ce
Removed SVGs replaced with font awesome icons, refactored logic for m…
PikaJoyce Feb 5, 2020
6b15d32
Button restyling
PikaJoyce Feb 5, 2020
f408383
Fixed indentation and added all my semicolons
PikaJoyce Feb 6, 2020
6f5281d
Merge pull request #106 from PikaJoyce/AddExampleForEnablingAndDisabl…
PikaJoyce Feb 6, 2020
219b48d
Updating twilio-video.js to ^2.x
manjeshbhargav Feb 10, 2020
77312da
Added updated styling to be more consistent with examples
PikaJoyce Feb 6, 2020
07e7341
Added icon next to preview my camera button
PikaJoyce Feb 6, 2020
6ee67dc
Removal of name on leaving room for both local and remote participant
PikaJoyce Feb 8, 2020
c851e69
Removing div containers instead of just the name
PikaJoyce Feb 10, 2020
27bb5cc
Added new image that reflects what quickstart UI looks like.
PikaJoyce Feb 10, 2020
184273a
Reverted last env variable change
PikaJoyce Feb 11, 2020
95d7198
Merge pull request #109 from PikaJoyce/RedesignQuickstartUI
PikaJoyce Feb 11, 2020
b124ce3
Fixed API_KEY to API_SID in env file
PikaJoyce Feb 13, 2020
4dc029a
Changed env template back, fixed server file instead.
PikaJoyce Feb 13, 2020
256b928
Merge pull request #111 from twilio/fixingEnvTemplate
PikaJoyce Feb 13, 2020
32ed21d
JSDK-2666: Add remote participant reconnection example (#112)
PikaJoyce Feb 26, 2020
215ea85
Linking to twilio-video-app-react.
manjeshbhargav Mar 13, 2020
86ba2c1
explicitly call getuserMedia before enumerateDevices (#110)
makarandp0 Mar 25, 2020
6aae58e
Adding link to best practices guide. (#114)
manjeshbhargav Apr 13, 2020
5981a29
JSDK-2754: Implement recommendations in best practices guide. (#115)
manjeshbhargav Apr 20, 2020
77124e5
Demonstrating the usage of the isSupported flag. (#124)
manjeshbhargav May 6, 2020
ac8006d
JSDK-2770-QuickstartMobileUI (#122)
PikaJoyce May 7, 2020
a7f035a
JSDK-2770 Mobile Friendly Quickstart Examples (#125)
PikaJoyce May 20, 2020
2182b47
Fix deviceId accessor in mediadevices example (#117)
Jun 22, 2020
4c09139
JSDK-2820 Data Tracks Example (#134)
PikaJoyce Jun 22, 2020
044b869
JSDK-2894 Media Devices Fix (#140)
PikaJoyce Jul 7, 2020
9cf4585
JSDK-2867- Error Handling in Quickstart changes (#144)
PikaJoyce Jul 15, 2020
b2da4f0
JSDK-2911 Update MediaDevices example to use track.restart (#145)
PikaJoyce Jul 21, 2020
f71d413
Updating twilio-video.js to 2.7.2.
manjeshbhargav Oct 2, 2020
cd40b43
JSDK-3015 Adding in CDN for mute/unmute icons (#166)
PikaJoyce Jan 28, 2021
023a46d
JSDK-3564 - Adding Remote view in screen share example (#170)
PikaJoyce Feb 17, 2021
d591843
VIDEO-3563 Small patch to fix audio level indicator (#171)
PikaJoyce Feb 23, 2021
5e0079c
VIDEO-3525 - Adopt VideoProcessor API (#176)
manjeshbhargav Mar 4, 2021
920968b
VIDEO-3928 Fix LocalVideoSnapshot (#180)
PikaJoyce Apr 8, 2021
e9b198f
use only positive adjectives (#181)
kwhinnery Apr 20, 2021
59627b4
VIDEO-5326 Removing renderConnectOptions replacing with new hints con…
PikaJoyce May 13, 2021
de923f1
VIDEO-5327 Manual Render Hints example (#183)
PikaJoyce Jun 15, 2021
595b122
VIDEO-5729 - Auto Render Hints example (#185)
PikaJoyce Jul 6, 2021
3ce440f
VIDEO-6370 - Clean up detached track elements (#192)
PikaJoyce Jul 27, 2021
31580e4
Update twilio-video to 2.18 (#203)
PikaJoyce Oct 27, 2021
6f83377
VIDEO-7710 - Fixing Media Device Selection for Audio Output (#209)
PikaJoyce Feb 3, 2022
cc6cb2e
Update browserify version to fix complie error
Aug 18, 2022
2734a08
Merge pull request #214 from twilio/fix-browserify-issue
Aug 23, 2022
0300c9f
Update README.md with Twilio Video EOL banner
anna-vasilko Dec 6, 2023
f276837
Update README.md with Twilio Video EOL banner
anna-vasilko Dec 6, 2023
dd39ee7
docs: remove the EOL warning banner
luisrivas Oct 15, 2024
52f018a
docs: remove the EOL warning banner (#225)
luisrivas Oct 18, 2024
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Removing div containers instead of just the name
  • Loading branch information
PikaJoyce committed Feb 11, 2020
commit c851e6972f3204f540c401073b8778a92db63188
4 changes: 2 additions & 2 deletions .env.template
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
TWILIO_ACCOUNT_SID=ACxxxxxxxxxx
TWILIO_API_KEY=SKxxxxxxxxxx
TWILIO_API_SECRET=xxxxxxxxxx
TWILIO_API_KEY_SID=SKxxxxxxxxxx
TWILIO_API_KEY_SECRET=xxxxxxxxxx
6 changes: 3 additions & 3 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,12 +10,12 @@ own video apps with Twilio Video. Before we begin, we need to collect
all the config values we need to run the application:

* Account SID: Your primary Twilio account identifier - find this [in the console here](https://www.twilio.com/console).
* API Key: Used to authenticate - [generate one here](https://www.twilio.com/console/runtime/api-keys).
* API Secret: Used to authenticate - [just like the above, you'll get one here](https://www.twilio.com/console/runtime/api-keys).
* API Key Sid: Used to authenticate - [generate one here](https://www.twilio.com/console/runtime/api-keys).
* API Key Secret: Used to authenticate - [just like the above, you'll get one here](https://www.twilio.com/console/runtime/api-keys).

## A Note on API Keys

When you generate an API key pair at the URLs above, your API Secret will only
When you generate an API key pair at the URLs above, your API Key Secret will only
be shown once - make sure to save this in a secure location,
or possibly your `~/.bash_profile`.

Expand Down
6 changes: 3 additions & 3 deletions quickstart/public/index.css
Original file line number Diff line number Diff line change
Expand Up @@ -19,11 +19,11 @@ div#remote-media {

div#remote-media video {
border: 1px solid #272726;
/* margin: 3em 2em; */
/* height: 70%; */
max-width: 80% !important;
background-color: #272726;
background-repeat: no-repeat;
background-color: lightgrey !important;
background-image: url("https://static0.twilio.com/marketing/bundles/archetype/img/logo-wordmark.svg");
background-position: 50%;
}

div#controls div#room-controls,
Expand Down
87 changes: 43 additions & 44 deletions quickstart/src/index.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
"use strict";
'use strict';

var Video = require("twilio-video");
var Video = require('twilio-video');

var activeRoom;
var previewTracks;
Expand All @@ -19,31 +19,30 @@ function attachTracks(tracks, container) {
});
}

// Detach given track from the DOM
// Detach given track from the DOM.
function detachTrack(track) {
track.detach().forEach(function(element) {
element.remove();
});
}

// Appends remoteParticipant name to the DOM
// Appends remoteParticipant name to the DOM.
function appendName(identity, container) {
const name = document.createElement("p");
const name = document.createElement('p');
name.id = `participantName-${identity}`;
name.className = "instructions";
name.className = 'instructions';
name.textContent = identity;
container.appendChild(name);
}

// Removes remoteParticipant name from the DOM
// Removes remoteParticipant container from the DOM.
function removeName(participant) {
if (participant) {
let { identity } = participant;
const container = document.getElementById(
`participantContainer-${identity}`
);
const name = document.getElementById(`participantName-${identity}`);
container.removeChild(name);
container.parentNode.removeChild(container);
}
}

Expand All @@ -52,21 +51,21 @@ function trackPublished(publication, container) {
if (publication.isSubscribed) {
attachTrack(publication.track, container);
}
publication.on("subscribed", function(track) {
log("Subscribed to " + publication.kind + " track");
publication.on('subscribed', function(track) {
log('Subscribed to ' + publication.kind + ' track');
attachTrack(track, container);
});
publication.on("unsubscribed", detachTrack);
publication.on('unsubscribed', detachTrack);
}

// A RemoteTrack was unpublished from the Room.
function trackUnpublished(publication) {
log(publication.kind + " track was unpublished.");
log(publication.kind + ' track was unpublished.');
}

// A new RemoteParticipant joined the Room
function participantConnected(participant, container) {
let selfContainer = document.createElement("div");
let selfContainer = document.createElement('div');
selfContainer.id = `participantContainer-${participant.identity}`;

container.appendChild(selfContainer);
Expand All @@ -75,10 +74,10 @@ function participantConnected(participant, container) {
participant.tracks.forEach(function(publication) {
trackPublished(publication, selfContainer);
});
participant.on("trackPublished", function(publication) {
participant.on('trackPublished', function(publication) {
trackPublished(publication, selfContainer);
});
participant.on("trackUnpublished", trackUnpublished);
participant.on('trackUnpublished', trackUnpublished);
}

// Detach the Participant's Tracks from the DOM.
Expand All @@ -89,25 +88,25 @@ function detachParticipantTracks(participant) {

// When we are about to transition away from this page, disconnect
// from the room, if joined.
window.addEventListener("beforeunload", leaveRoomIfJoined);
window.addEventListener('beforeunload', leaveRoomIfJoined);

// Obtain a token from the server in order to connect to the Room.
$.getJSON("/token", function(data) {
$.getJSON('/token', function(data) {
identity = data.identity;
document.getElementById("room-controls").style.display = "block";
document.getElementById('room-controls').style.display = 'block';

// Bind button to join Room.
document.getElementById("button-join").onclick = function() {
roomName = document.getElementById("room-name").value;
document.getElementById('button-join').onclick = function() {
roomName = document.getElementById('room-name').value;
if (!roomName) {
alert("Please enter a room name.");
alert('Please enter a room name.');
return;
}

log("Joining room '" + roomName + "'...");
var connectOptions = {
name: roomName,
logLevel: "debug"
logLevel: 'debug'
};

if (previewTracks) {
Expand All @@ -117,13 +116,13 @@ $.getJSON("/token", function(data) {
// Join the Room with the token from the server and the
// LocalParticipant's Tracks.
Video.connect(data.token, connectOptions).then(roomJoined, function(error) {
log("Could not connect to Twilio: " + error.message);
log('Could not connect to Twilio: ' + error.message);
});
};

// Bind button to leave Room.
document.getElementById("button-leave").onclick = function() {
log("Leaving room...");
document.getElementById('button-leave').onclick = function() {
log('Leaving room...');
activeRoom.disconnect();
};
});
Expand All @@ -144,39 +143,39 @@ function roomJoined(room) {
window.room = activeRoom = room;

log("Joined as '" + identity + "'");
document.getElementById("button-join").style.display = "none";
document.getElementById("button-leave").style.display = "block";
document.getElementById('button-join').style.display = 'none';
document.getElementById('button-leave').style.display = 'block';

// Attach LocalParticipant's Tracks, if not already attached.
var previewContainer = document.getElementById("local-media");
if (!previewContainer.querySelector("video")) {
var previewContainer = document.getElementById('local-media');
if (!previewContainer.querySelector('video')) {
attachTracks(getTracks(room.localParticipant), previewContainer);
}

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

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

// When a Participant leaves the Room, detach its Tracks.
room.on("participantDisconnected", function(participant) {
room.on('participantDisconnected', function(participant) {
log("RemoteParticipant '" + participant.identity + "' left the room");
detachParticipantTracks(participant);
removeName(participant);
});

// Once the LocalParticipant leaves the room, detach the Tracks
// of all Participants, including that of the LocalParticipant.
room.on("disconnected", function() {
log("Left");
room.on('disconnected', function() {
log('Left');
if (previewTracks) {
previewTracks.forEach(function(track) {
track.stop();
Expand All @@ -187,36 +186,36 @@ function roomJoined(room) {
room.participants.forEach(detachParticipantTracks);
room.participants.forEach(removeName);
activeRoom = null;
document.getElementById("button-join").style.display = "block";
document.getElementById("button-leave").style.display = "none";
document.getElementById('button-join').style.display = 'block';
document.getElementById('button-leave').style.display = 'none';
});
}

// Preview LocalParticipant's Tracks.
document.getElementById("button-preview").onclick = function() {
document.getElementById('button-preview').onclick = function() {
var localTracksPromise = previewTracks
? Promise.resolve(previewTracks)
: Video.createLocalTracks();

localTracksPromise.then(
function(tracks) {
window.previewTracks = previewTracks = tracks;
var previewContainer = document.getElementById("local-media");
if (!previewContainer.querySelector("video")) {
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");
console.error('Unable to access local media', error);
log('Unable to access Camera and Microphone');
}
);
};

// Activity log.
function log(message) {
var logDiv = document.getElementById("log");
logDiv.innerHTML += "<p>&gt;&nbsp;" + message + "</p>";
var logDiv = document.getElementById('log');
logDiv.innerHTML += '<p>&gt;&nbsp;' + message + '</p>';
logDiv.scrollTop = logDiv.scrollHeight;
}

Expand Down
8 changes: 4 additions & 4 deletions server/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,8 @@
* Load Twilio configuration from .env config file - the following environment
* variables should be set:
* process.env.TWILIO_ACCOUNT_SID
* process.env.TWILIO_API_KEY
* process.env.TWILIO_API_SECRET
* process.env.TWILIO_API_KEY_SID
* process.env.TWILIO_API__KEY_SECRET
*/
require('dotenv').load();

Expand Down Expand Up @@ -67,8 +67,8 @@ app.get('/token', function(request, response) {
// containing the grant we just created.
var token = new AccessToken(
process.env.TWILIO_ACCOUNT_SID,
process.env.TWILIO_API_KEY,
process.env.TWILIO_API_SECRET,
process.env.TWILIO_API_KEY_SID,
process.env.TWILIO_API_KEY_SECRET,
{ ttl: MAX_ALLOWED_SESSION_DURATION }
);

Expand Down