Skip to content

Instantly share code, notes, and snippets.

Avatar

Kimberlee Johnson kimberleejohnson

View GitHub Profile
@kimberleejohnson
kimberleejohnson / App.js
Created Sep 9, 2020
Code sample for wiring up App.js for a video chat React app built with Daily.
View App.js
// In App.js
useEffect(() => {
if (!callObject) return;
const events = ["joined-meeting", "left-meeting", "error"];
function handleNewMeetingState(event) {
event && logDailyEvent(event);
switch (callObject.meetingState()) {
@kimberleejohnson
kimberleejohnson / streamPost.js
Last active Aug 28, 2020
Route that lives on Glitch that responds to a request by creating a new Stream Chat user.
View streamPost.js
// Create a new Stream Chat
const serverSideChat = new streamChat.StreamChat(streamKey, streamSecret);
// Add a new user to that chat
app.post("/join-chat", async (request, response) => {
try {
// Create a new Chat user
const { username } = request.body;
const { id } = request.body;
const user = { id: id, name: username };
View chatComponents.js
<Chat client={chatClient} theme={'messaging light'}>
<Channel channel={channel}>
<Window>
<ChannelHeader />
<MessageList />
<MessageInput />
</Window>
<Thread />
</Channel>
</Chat>
View addChat.js
// Added these variables to state:
const [channel, setChannel] = useState(null);
const [chatClient, setChatClient] = useState(null);
// Function to create a chat token with the user's data, so they can join chat
// I could refactor this to send user data from the event itself
function getChatToken(event) {
// Get the username and session_id from callObject.participants
const id = callObject.participants().local.session_id;
// 'Guest' if name not present; you could also generate
View showFullScreen.html
<!-- Testing out whether the showFullScreen button shows up in Firefox -->
<html>
<head>
<title>basic video call events/control demo</title>
<!-- this library, bundled and minimized -->
<script src="https://unpkg.com/@daily-co/daily-js"></script>
<!-- helper script to create a demo room under the api-demo.daily.co
domain. replace this in your production code with a function
that creates rooms within your own domain. -->
<script src="../shared-assets/create-demo-room.js"></script>
View eject_example.html
<html>
<head>
<title>Simple eject sample code</title>
<script src="https://unpkg.com/@daily-co/daily-js"></script>
</head>
<body onload="startCall()">
<!-- Other elements here -->
<iframe id="call-frame" allow="camera; microphone; autoplay"></iframe>
<!-- Other elements here -->
<div id="participants-list"></div>
View uniform_phone_numbers
CONCATENATE("+1",SUBSTITUTE(
SUBSTITUTE(
SUBSTITUTE(
SUBSTITUTE(
IF(
LEFT(
{Phone Number},
1
)='1',
RIGHT(
View getUserMedia.js
// Save the requirements Object in your console
const requirements = {'video': true, 'audio': true}
// Call navigator.mediaDevices.getUserMedia() passing in that object, and your camera should turn on.
navigator.mediaDevices.getUserMedia(requirements)
.then(stream => {
console.log('Yay, we’re streaming:', stream);
})
.catch(error => {
console.error('Whoops, could not access devices:', error);
View leftCall.html
<html>
<!-- -->
<script>
// ...Our variables are initialized here
async function startCall() {
// ...Here we set up our iframe
callFrame
// Other event listeners here
.on("left-meeting", leftCall)
.on("participant-left", updateParticipantList)
View updateParticipantList.html
<html>
<!-- -->
<script>
// ...Our variables are initialized here
async function startCall() {
// ...Here we set up our iFrame
callFrame
// Other event listeners here
.on("participant-joined", updateParticipantList)