Skip to content

Instantly share code, notes, and snippets.

Avatar

Kimberlee Johnson kimberleejohnson

View GitHub Profile
@kimberleejohnson
kimberleejohnson / share-video.html
Created Apr 14, 2021
A Daily hack for streaming a local video file during a call.
View share-video.html
<html>
<head>
<title>stream local video file</title>
<script src="https://unpkg.com/@daily-co/daily-js"></script>
</head>
<body onload="main()">
<div id="local-controls" style="width: 50%; float: left; visibility: hidden">
<input id="vid-file-picker" type="file" accept="video/*"" />
<button onclick="shareVideo()" />share video through screenshare stream</button>
<hr />
@kimberleejohnson
kimberleejohnson / Tray.js
Created Sep 10, 2020
Buttons that call call object methods in React video chat app powered by Daily
View Tray.js
// In Tray.js
function toggleCamera() {
callObject.setLocalVideo(isCameraMuted);
}
function toggleMic() {
callObject.setLocalAudio(isMicMuted);
}
@kimberleejohnson
kimberleejohnson / Tray.js
Created Sep 10, 2020
Event listener in participant menu bar in React Daily video chat
View Tray.js
// In Tray.js
function getStreamStates(callObject) {
let isCameraMuted,
isMicMuted,
isSharingScreen = false;
if (
callObject &amp;&amp;
callObject.participants() &amp;&amp;
callObject.participants().local
@kimberleejohnson
kimberleejohnson / Tile.js
Last active Mar 19, 2021
Passing saved audio tracks down to unique tile components in Daily video chat React app
View Tile.js
// In Tile.js
export default function Tile(props) {
const videoEl = useRef(null);
const audioEl = useRef(null);
// ...
function getVideoComponent() {
return videoTrack && <video autoPlay muted playsInline ref={videoEl} />;
@kimberleejohnson
kimberleejohnson / Call.js
Last active Mar 19, 2021
Loop over call state and pass participant audio tracks to individual tile components
View Call.js
function getTiles() {
let largeTiles = [];
let smallTiles = [];
Object.entries(callState.callItems).forEach(([id, callItem]) => {
const isLarge =
isScreenShare(id) ||
(!isLocal(id) && !containsScreenShare(callState.callItems));
const tile = (
<Tile
key={id}
@kimberleejohnson
kimberleejohnson / callState.js
Last active Mar 19, 2021
Map over call state to determine how many tiles to display
View callState.js
// In callState.js
function getCallItems(participants) {
let callItems = { ...initialCallState.callItems }; // Ensure we *always* have a local participant
for (const [id, participant] of Object.entries(participants)) {
callItems[id] = {
videoTrackState: participant.tracks.video,
audioTrackState: participant.tracks.audio,
};
if (shouldIncludeScreenCallItem(participant)) {
@kimberleejohnson
kimberleejohnson / callState.js
Last active Mar 19, 2021
Sample component state for a Daily video chat app built in React
View callState.js
{
local: {
videoTrackState: null,
audioTrackState: null,
},
<other-participant-1>: {
/*...*/
},
<other-participant-1>-screen: {
/*...*/
@kimberleejohnson
kimberleejohnson / Call.js
Created Sep 9, 2020
Sample code for wiring up event listeners in a Daily-powered React video chat app
View Call.js
// In Call.js
useEffect(() => {
if (!callObject) return;
const events = [
"participant-joined",
"participant-updated",
"participant-left"
];
@kimberleejohnson
kimberleejohnson / App.js
Created Sep 9, 2020
Sample code for leaving a Daily video call In a React app
View App.js
// In App.js
/**
* Starts leaving the current call.
*/
const startLeavingCall = useCallback(() => {
if (!callObject) return;
// update component state to a "leaving" state...
callObject.leave();
}, [callObject]);
@kimberleejohnson
kimberleejohnson / App.js
Last active Sep 9, 2020
Sample code for joining a Daily video call In a React app
View App.js
// In App.js
/**
* Starts joining an existing call.
*/
const startJoiningCall = useCallback(url => {
const callObject = DailyIframe.createCallObject();
// update component state to a "joining" state...
callObject.join({ url });
}, []);