Skip to content

Instantly share code, notes, and snippets.


Kimberlee Johnson kimberleejohnson

View GitHub Profile
kimberleejohnson / App.js
Created Sep 9, 2020
Sample code for creating a Daily room URL In a video chat app with React
View App.js
// In App.js
* Creates a new call room.
const createCall = useCallback(() => {
// update component state to a "creating" state...
return api
.then(room => room.url)
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 / 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"/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}>
<ChannelHeader />
<MessageList />
<MessageInput />
<Thread />
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 -->
<title>basic video call events/control demo</title>
<!-- this library, bundled and minimized -->
<script src=""></script>
<!-- helper script to create a demo room under the
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
<title>Simple eject sample code</title>
<script src=""></script>
<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
{Phone Number},
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.
.then(stream => {
console.log('Yay, we’re streaming:', stream);
.catch(error => {
console.error('Whoops, could not access devices:', error);
View leftCall.html
<!-- -->
// ...Our variables are initialized here
async function startCall() {
// ...Here we set up our iframe
// Other event listeners here
.on("left-meeting", leftCall)
.on("participant-left", updateParticipantList)