Delete old dailyjs folder
This commit is contained in:
Ashley Blewer
parent
b51a0786c4
commit
44e9006992
|
|
@ -1,4 +0,0 @@
|
|||
{
|
||||
"presets": ["next/babel"],
|
||||
"plugins": ["inline-react-svg"]
|
||||
}
|
||||
|
|
@ -1,46 +0,0 @@
|
|||
# Live Transcription
|
||||
|
||||
|
||||
|
||||
### Live example
|
||||
|
||||
**[See it in action here ➡️](https://dailyjs-live-transcription.vercel.app)**
|
||||
|
||||
---
|
||||
|
||||
## What does this demo do?
|
||||
|
||||
- Use `startTranscription()` and `stopTranscription()` methods to create a transcript of a call
|
||||
- Integrates Deepgram transcription service into Daily calls
|
||||
- Listen for incoming transcription messages using the call object `app-message` event
|
||||
- Extend the basic call demo with a transcription provider and aside
|
||||
- Show a notification bubble on transcript tray button when a new message is received
|
||||
|
||||
Please note: this demo is not currently mobile optimised
|
||||
|
||||
### Getting started
|
||||
|
||||
```
|
||||
# set both DAILY_API_KEY and DAILY_DOMAIN
|
||||
mv env.example .env.local
|
||||
|
||||
yarn
|
||||
yarn workspace @dailyjs/live-transcription dev
|
||||
```
|
||||
|
||||
### Setting up transcription
|
||||
|
||||
For testing the transcription service, you will have to register for a Deepgram API key and configure your Daily domain with that key.
|
||||
|
||||
TODO: Add more instructions here, or point to docs when ready.
|
||||
|
||||
## How does this example work?
|
||||
|
||||
In this example we extend the [basic call demo](../basic-call) with the ability to generate transcription of the meeting in real time and log that in a side panel.
|
||||
|
||||
We pass a custom tray object, a custom app object (wrapping the original in a new `TranscriptionProvider`) as well as add our `TranscriptionAside` panel. We also symlink both the `public` and `pages/api` folders from the basic call.
|
||||
|
||||
|
||||
## Deploy your own on Vercel
|
||||
|
||||
[](https://vercel.com/new/daily-co/clone-flow?repository-url=https%3A%2F%2Fgithub.com%2Fdaily-demos%2Fexamples.git&env=DAILY_DOMAIN%2CDAILY_API_KEY&envDescription=Your%20Daily%20domain%20and%20API%20key%20can%20be%20found%20on%20your%20account%20dashboard&envLink=https%3A%2F%2Fdashboard.daily.co&project-name=daily-examples&repo-name=daily-examples)
|
||||
|
|
@ -1,13 +0,0 @@
|
|||
import React from 'react';
|
||||
|
||||
import App from '@dailyjs/basic-call/components/App';
|
||||
import { TranscriptionProvider } from '../../contexts/TranscriptionProvider';
|
||||
|
||||
// Extend our basic call app component with the Live Transcription context
|
||||
export const AppWithTranscription = () => (
|
||||
<TranscriptionProvider>
|
||||
<App />
|
||||
</TranscriptionProvider>
|
||||
);
|
||||
|
||||
export default AppWithTranscription;
|
||||
|
|
@ -1 +0,0 @@
|
|||
export { AppWithTranscription as default } from './App';
|
||||
|
|
@ -1,97 +0,0 @@
|
|||
import React, { useEffect, useRef, useState } from 'react';
|
||||
import Aside from '@dailyjs/shared/components/Aside';
|
||||
import { Button } from '@dailyjs/shared/components/Button';
|
||||
import { useCallState } from '@dailyjs/shared/contexts/CallProvider';
|
||||
import { useParticipants } from '@dailyjs/shared/contexts/ParticipantsProvider';
|
||||
import { useUIState } from '@dailyjs/shared/contexts/UIStateProvider';
|
||||
import { useTranscription } from '../../contexts/TranscriptionProvider';
|
||||
|
||||
export const TRANSCRIPTION_ASIDE = 'transcription';
|
||||
|
||||
export const TranscriptionAside = () => {
|
||||
const { callObject } = useCallState();
|
||||
const { showAside, setShowAside } = useUIState();
|
||||
const { transcriptionHistory } = useTranscription();
|
||||
const [isTranscribing, setIsTranscribing] = useState(false);
|
||||
const { isOwner } = useParticipants();
|
||||
|
||||
const msgWindowRef = useRef();
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
if (msgWindowRef.current) {
|
||||
msgWindowRef.current.scrollTop = msgWindowRef.current.scrollHeight;
|
||||
}
|
||||
}, [transcriptionHistory?.length]);
|
||||
|
||||
if (!showAside || showAside !== TRANSCRIPTION_ASIDE) {
|
||||
return null;
|
||||
}
|
||||
|
||||
async function startTranscription() {
|
||||
setIsTranscribing(true);
|
||||
await callObject.startTranscription();
|
||||
}
|
||||
|
||||
async function stopTranscription() {
|
||||
setIsTranscribing(false);
|
||||
await callObject.stopTranscription();
|
||||
}
|
||||
|
||||
return (
|
||||
<Aside onClose={() => setShowAside(false)}>
|
||||
{isOwner && (
|
||||
<div className="owner-actions">
|
||||
|
||||
<Button
|
||||
fullWidth
|
||||
size="tiny"
|
||||
disabled={isTranscribing}
|
||||
onClick={() =>
|
||||
startTranscription()
|
||||
}
|
||||
>
|
||||
{isTranscribing ? 'Transcribing' : 'Start transcribing'}
|
||||
</Button>
|
||||
<Button
|
||||
fullWidth
|
||||
size="tiny"
|
||||
disabled={!isTranscribing}
|
||||
onClick={() =>
|
||||
stopTranscription()
|
||||
}
|
||||
>
|
||||
Stop transcribing
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
<div className="messages-container" ref={msgWindowRef}>
|
||||
{transcriptionHistory.map((msg) => (
|
||||
<div key={msg.id}>
|
||||
<span className="sender">{msg.sender}: </span>
|
||||
<span className="content">{msg.message}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<style jsx>{`
|
||||
.owner-actions {
|
||||
display: flex;
|
||||
font-weight: bold;
|
||||
align-self: center;
|
||||
gap: var(--spacing-xxxs);
|
||||
margin: var(--spacing-xs) var(--spacing-xxs);
|
||||
}
|
||||
.messages-container {
|
||||
flex: 1;
|
||||
overflow-y: scroll;
|
||||
margin-left: var(--spacing-xs);
|
||||
}
|
||||
.messages-container .sender {
|
||||
font-weight: bold;
|
||||
}
|
||||
`}</style>
|
||||
</Aside>
|
||||
);
|
||||
};
|
||||
|
||||
export default TranscriptionAside;
|
||||
|
|
@ -1 +0,0 @@
|
|||
export { TranscriptionAside as default } from './TranscriptionAside';
|
||||
|
|
@ -1,26 +0,0 @@
|
|||
import React from 'react';
|
||||
|
||||
import { TrayButton } from '@dailyjs/shared/components/Tray';
|
||||
import { useUIState } from '@dailyjs/shared/contexts/UIStateProvider';
|
||||
import { ReactComponent as IconTranscription } from '@dailyjs/shared/icons/chat-md.svg';
|
||||
import { useTranscription } from '../../contexts/TranscriptionProvider';
|
||||
import { TRANSCRIPTION_ASIDE } from '../TranscriptionAside/TranscriptionAside';
|
||||
|
||||
export const Tray = () => {
|
||||
const { toggleAside } = useUIState();
|
||||
const { hasNewMessages } = useTranscription();
|
||||
|
||||
return (
|
||||
<TrayButton
|
||||
label="Transcript"
|
||||
bubble={hasNewMessages}
|
||||
onClick={() => {
|
||||
toggleAside(TRANSCRIPTION_ASIDE);
|
||||
}}
|
||||
>
|
||||
<IconTranscription />
|
||||
</TrayButton>
|
||||
);
|
||||
};
|
||||
|
||||
export default Tray;
|
||||
|
|
@ -1 +0,0 @@
|
|||
export { Tray as default } from './Tray';
|
||||
|
|
@ -1,86 +0,0 @@
|
|||
import React, {
|
||||
createContext,
|
||||
useCallback,
|
||||
useContext,
|
||||
useEffect,
|
||||
useState,
|
||||
} from 'react';
|
||||
import { useCallState } from '@dailyjs/shared/contexts/CallProvider';
|
||||
import { nanoid } from 'nanoid';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
export const TranscriptionContext = createContext();
|
||||
|
||||
export const TranscriptionProvider = ({ children }) => {
|
||||
const { callObject } = useCallState();
|
||||
const [transcriptionHistory, setTranscriptionHistory] = useState([]);
|
||||
const [hasNewMessages, setHasNewMessages] = useState(false);
|
||||
const [isTranscribing, setIsTranscribing] = useState(false);
|
||||
|
||||
const handleNewMessage = useCallback(
|
||||
(e) => {
|
||||
const participants = callObject.participants();
|
||||
// Collect only transcription messages, and gather enough
|
||||
// words to be able to post messages at sentence intervals
|
||||
if (e.fromId === 'transcription' && e.data?.is_final) {
|
||||
|
||||
// Get the sender's current display name or the local name
|
||||
const sender = e.data?.session_id !== participants.local.session_id
|
||||
? participants[e.data.session_id].user_name
|
||||
: participants.local.user_name;
|
||||
|
||||
setTranscriptionHistory((oldState) => [
|
||||
...oldState,
|
||||
{ sender, message: e.data.text, id: nanoid() },
|
||||
]);
|
||||
}
|
||||
|
||||
setHasNewMessages(true);
|
||||
},
|
||||
[callObject]
|
||||
);
|
||||
|
||||
const handleTranscriptionStarted = useCallback(() => {
|
||||
console.log('💬 Live stream started');
|
||||
setIsTranscribing(true);
|
||||
}, []);
|
||||
|
||||
const handleTranscriptionStopped = useCallback(() => {
|
||||
console.log('💬 Live stream stopped');
|
||||
setIsTranscribing(false);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (!callObject) {
|
||||
return false;
|
||||
}
|
||||
|
||||
console.log(`💬 Transcription provider listening for app messages`);
|
||||
|
||||
callObject.on('app-message', handleNewMessage);
|
||||
|
||||
callObject.on('transcription-started', handleTranscriptionStarted);
|
||||
callObject.on('transcription-stopped', handleTranscriptionStopped);
|
||||
|
||||
return () => callObject.off('app-message', handleNewMessage);
|
||||
}, [callObject, handleNewMessage, handleTranscriptionStarted, handleTranscriptionStopped]);
|
||||
|
||||
return (
|
||||
<TranscriptionContext.Provider
|
||||
value={{
|
||||
isTranscribing,
|
||||
transcriptionHistory,
|
||||
hasNewMessages,
|
||||
setHasNewMessages,
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</TranscriptionContext.Provider>
|
||||
);
|
||||
};
|
||||
|
||||
TranscriptionProvider.propTypes = {
|
||||
children: PropTypes.node,
|
||||
};
|
||||
|
||||
export const useTranscription = () => useContext(TranscriptionContext);
|
||||
|
|
@ -1,8 +0,0 @@
|
|||
# Domain excluding 'https://' and 'daily.co' e.g. 'somedomain'
|
||||
DAILY_DOMAIN=
|
||||
|
||||
# Obtained from https://dashboard.daily.co/developers
|
||||
DAILY_API_KEY=
|
||||
|
||||
# Daily REST API endpoint
|
||||
DAILY_REST_DOMAIN=https://api.daily.co/v1
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
import { useEffect, useMemo } from 'react';
|
||||
|
||||
import { useSound } from '@dailyjs/shared/hooks/useSound';
|
||||
import { debounce } from 'debounce';
|
||||
|
||||
/**
|
||||
* Convenience hook to play `join.mp3` when participants join the call
|
||||
*/
|
||||
export const useMessageSound = () => {
|
||||
const { load, play } = useSound('assets/message.mp3');
|
||||
|
||||
useEffect(() => {
|
||||
load();
|
||||
}, [load]);
|
||||
|
||||
return useMemo(() => debounce(() => play(), 5000, true), [play]);
|
||||
};
|
||||
|
||||
export default useMessageSound;
|
||||
|
|
@ -1 +0,0 @@
|
|||
// Note: I am here because next-transpile-modules requires a mainfile
|
||||
|
|
@ -1,13 +0,0 @@
|
|||
const withPlugins = require('next-compose-plugins');
|
||||
const withTM = require('next-transpile-modules')([
|
||||
'@dailyjs/shared',
|
||||
'@dailyjs/basic-call',
|
||||
]);
|
||||
|
||||
const packageJson = require('./package.json');
|
||||
|
||||
module.exports = withPlugins([withTM], {
|
||||
env: {
|
||||
PROJECT_TITLE: packageJson.description,
|
||||
},
|
||||
});
|
||||
|
|
@ -1,25 +0,0 @@
|
|||
{
|
||||
"name": "@dailyjs/live-transcription",
|
||||
"description": "Basic Call + Transcription Example",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "next dev",
|
||||
"build": "next build",
|
||||
"start": "next start",
|
||||
"lint": "next lint"
|
||||
},
|
||||
"dependencies": {
|
||||
"@dailyjs/shared": "*",
|
||||
"@dailyjs/basic-call": "*",
|
||||
"next": "^11.0.0",
|
||||
"pluralize": "^8.0.0",
|
||||
"react": "^17.0.2",
|
||||
"react-dom": "^17.0.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"babel-plugin-module-resolver": "^4.1.0",
|
||||
"next-compose-plugins": "^2.2.1",
|
||||
"next-transpile-modules": "^8.0.0"
|
||||
}
|
||||
}
|
||||
|
|
@ -1,12 +0,0 @@
|
|||
import React from 'react';
|
||||
import App from '@dailyjs/basic-call/pages/_app';
|
||||
import AppWithTranscription from '../components/App';
|
||||
|
||||
import TranscriptionAside from '../components/TranscriptionAside';
|
||||
import Tray from '../components/Tray';
|
||||
|
||||
App.asides = [TranscriptionAside];
|
||||
App.customAppComponent = <AppWithTranscription />;
|
||||
App.customTrayComponent = <Tray />;
|
||||
|
||||
export default App;
|
||||
|
|
@ -1 +0,0 @@
|
|||
../../basic-call/pages/api
|
||||
|
|
@ -1,13 +0,0 @@
|
|||
import Index from '@dailyjs/basic-call/pages';
|
||||
import getDemoProps from '@dailyjs/shared/lib/demoProps';
|
||||
|
||||
export async function getStaticProps() {
|
||||
const defaultProps = getDemoProps();
|
||||
|
||||
// Pass through domain as prop
|
||||
return {
|
||||
props: defaultProps,
|
||||
};
|
||||
}
|
||||
|
||||
export default Index;
|
||||
|
|
@ -1,14 +0,0 @@
|
|||
<svg width="80" height="32" viewBox="0 0 80 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M21.5886 27.0149C23.8871 27.0149 25.7976 25.6716 26.6035 24.0896V26.6866H30.9021V4H26.6035V13.403C25.7379 11.8209 24.1856 10.7164 21.6782 10.7164C17.7677 10.7164 14.8125 13.7313 14.8125 18.8657V19.1045C14.8125 24.2985 17.7976 27.0149 21.5886 27.0149ZM22.8722 23.6418C20.7229 23.6418 19.2304 22.1194 19.2304 19.0149V18.7761C19.2304 15.6716 20.5737 14.0299 22.9916 14.0299C25.3498 14.0299 26.7229 15.6119 26.7229 18.7164V18.9552C26.7229 22.1194 25.1409 23.6418 22.8722 23.6418Z" fill="#121A24"/>
|
||||
<path d="M37.9534 27.0149C40.4011 27.0149 41.7743 26.0597 42.6698 24.806V26.6866H46.8787V16.5075C46.8787 12.2687 44.1623 10.7164 40.3414 10.7164C36.5205 10.7164 33.5951 12.3582 33.3265 16.0597H37.416C37.5951 14.7164 38.3713 13.8507 40.0728 13.8507C42.0429 13.8507 42.6101 14.8657 42.6101 16.7164V17.3433H40.8489C36.0728 17.3433 32.7295 18.7164 32.7295 22.3582C32.7295 25.6418 35.1175 27.0149 37.9534 27.0149ZM39.2369 24C37.6548 24 36.9683 23.2537 36.9683 22.1194C36.9683 20.4478 38.431 19.9104 40.9384 19.9104H42.6101V21.2239C42.6101 22.9552 41.1474 24 39.2369 24Z" fill="#121A24"/>
|
||||
<path d="M49.647 26.6866H53.9456V11.0746H49.647V26.6866ZM51.7665 8.95522C53.1694 8.95522 54.2441 7.9403 54.2441 6.59702C54.2441 5.25373 53.1694 4.23881 51.7665 4.23881C50.3933 4.23881 49.3187 5.25373 49.3187 6.59702C49.3187 7.9403 50.3933 8.95522 51.7665 8.95522Z" fill="#121A24"/>
|
||||
<path d="M56.9765 26.6866H61.275V4H56.9765V26.6866Z" fill="#121A24"/>
|
||||
<path d="M70.5634 32L78.9917 11.0746H74.8711L71.3499 20.4478L67.5589 11.0746H62.9021L69.1523 25.1953L66.3779 32H70.5634Z" fill="#121A24"/>
|
||||
<path d="M0 32H4.1875L17.0766 0H12.9916L0 32Z" fill="url(#paint0_linear)"/>
|
||||
<defs>
|
||||
<linearGradient id="paint0_linear" x1="8.88727" y1="-0.222885" x2="8.88727" y2="30" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#1BEBB9"/>
|
||||
<stop offset="1" stop-color="#FF9254"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.9 KiB |
|
|
@ -1,14 +0,0 @@
|
|||
<svg width="80" height="32" viewBox="0 0 80 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M21.5886 27.0149C23.8871 27.0149 25.7976 25.6716 26.6035 24.0896V26.6866H30.9021V4H26.6035V13.403C25.7379 11.8209 24.1856 10.7164 21.6782 10.7164C17.7677 10.7164 14.8125 13.7313 14.8125 18.8657V19.1045C14.8125 24.2985 17.7976 27.0149 21.5886 27.0149ZM22.8722 23.6418C20.7229 23.6418 19.2304 22.1194 19.2304 19.0149V18.7761C19.2304 15.6716 20.5737 14.0299 22.9916 14.0299C25.3498 14.0299 26.7229 15.6119 26.7229 18.7164V18.9552C26.7229 22.1194 25.1409 23.6418 22.8722 23.6418Z" fill="white"/>
|
||||
<path d="M37.9534 27.0149C40.4011 27.0149 41.7743 26.0597 42.6698 24.806V26.6866H46.8787V16.5075C46.8787 12.2687 44.1623 10.7164 40.3414 10.7164C36.5205 10.7164 33.5951 12.3582 33.3265 16.0597H37.416C37.5951 14.7164 38.3713 13.8507 40.0728 13.8507C42.0429 13.8507 42.6101 14.8657 42.6101 16.7164V17.3433H40.8489C36.0728 17.3433 32.7295 18.7164 32.7295 22.3582C32.7295 25.6418 35.1175 27.0149 37.9534 27.0149ZM39.2369 24C37.6548 24 36.9683 23.2537 36.9683 22.1194C36.9683 20.4478 38.431 19.9104 40.9384 19.9104H42.6101V21.2239C42.6101 22.9552 41.1474 24 39.2369 24Z" fill="white"/>
|
||||
<path d="M49.647 26.6866H53.9456V11.0746H49.647V26.6866ZM51.7665 8.95522C53.1694 8.95522 54.2441 7.9403 54.2441 6.59702C54.2441 5.25373 53.1694 4.23881 51.7665 4.23881C50.3933 4.23881 49.3187 5.25373 49.3187 6.59702C49.3187 7.9403 50.3933 8.95522 51.7665 8.95522Z" fill="white"/>
|
||||
<path d="M56.9765 26.6866H61.275V4H56.9765V26.6866Z" fill="white"/>
|
||||
<path d="M70.5634 32L78.9917 11.0746H74.8711L71.3499 20.4478L67.5589 11.0746H62.9021L69.1523 25.1953L66.3779 32H70.5634Z" fill="white"/>
|
||||
<path d="M0 32H4.1875L17.0766 0H12.9916L0 32Z" fill="url(#paint0_linear)"/>
|
||||
<defs>
|
||||
<linearGradient id="paint0_linear" x1="8.88727" y1="-0.222885" x2="8.88727" y2="30" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#1BEBB9"/>
|
||||
<stop offset="1" stop-color="#FF9254"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.9 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
Before Width: | Height: | Size: 50 KiB |
Loading…
Reference in New Issue