Skip to content

Instantly share code, notes, and snippets.

View kimberleehowley's full-sized avatar

Kimberlee Howley kimberleehowley

43 followers · 32 following
View GitHub Profile
@kimberleehowley
kimberleehowley / test-embed.html
Created October 18, 2021 22:55
Circle.so + Daily
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Daily - Circle Integration Test</title>
<link rel="stylesheet" href="/style.css" />
<script src="/script.js" defer></script>
</head>
@kimberleehowley
kimberleehowley / share-video.html
Created April 14, 2021 19:31
A Daily hack for streaming a local video file during a call.
<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 />
@kimberleehowley
kimberleehowley / Tray.js
Created September 10, 2020 02:06
Buttons that call call object methods in React video chat app powered by Daily
// In Tray.js
function toggleCamera() {
callObject.setLocalVideo(isCameraMuted);
}
function toggleMic() {
callObject.setLocalAudio(isMicMuted);
}
@kimberleehowley
kimberleehowley / Tray.js
Created September 10, 2020 01:59
Event listener in participant menu bar in React Daily video chat
// In Tray.js
function getStreamStates(callObject) {
let isCameraMuted,
isMicMuted,
isSharingScreen = false;
if (
callObject &amp;&amp;
callObject.participants() &amp;&amp;
callObject.participants().local
@kimberleehowley
kimberleehowley / Tile.js
Last active March 19, 2021 23:57
Passing saved audio tracks down to unique tile components in Daily video chat React app
// 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} />;
@kimberleehowley
kimberleehowley / Call.js
Last active March 19, 2021 23:33
Loop over call state and pass participant audio tracks to individual tile components
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}
@kimberleehowley
kimberleehowley / callState.js
Last active March 19, 2021 23:07
Map over call state to determine how many tiles to display
// 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)) {
@kimberleehowley
kimberleehowley / callState.js
Last active March 19, 2021 23:05
Sample component state for a Daily video chat app built in React
{
local: {
videoTrackState: null,
audioTrackState: null,
},
<other-participant-1>: {
/*...*/
},
<other-participant-1>-screen: {
/*...*/
@kimberleehowley
kimberleehowley / Call.js
Created September 9, 2020 22:19
Sample code for wiring up event listeners in a Daily-powered React video chat app
// In Call.js
useEffect(() => {
if (!callObject) return;
const events = [
"participant-joined",
"participant-updated",
"participant-left"
];
@kimberleehowley
kimberleehowley / App.js
Created September 9, 2020 21:25
Sample code for leaving a Daily video call In a React app
// In App.js
/**
* Starts leaving the current call.
*/
const startLeavingCall = useCallback(() => {
if (!callObject) return;
// update component state to a "leaving" state...
callObject.leave();
}, [callObject]);