diff --git a/dailyjs/live-transcription/.babelrc b/dailyjs/live-transcription/.babelrc deleted file mode 100644 index a6f4434..0000000 --- a/dailyjs/live-transcription/.babelrc +++ /dev/null @@ -1,4 +0,0 @@ -{ - "presets": ["next/babel"], - "plugins": ["inline-react-svg"] -} diff --git a/dailyjs/live-transcription/README.md b/dailyjs/live-transcription/README.md deleted file mode 100644 index fde27c3..0000000 --- a/dailyjs/live-transcription/README.md +++ /dev/null @@ -1,46 +0,0 @@ -# Live Transcription - -![Live Transcription](./image.png) - -### 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 - -[![Deploy with Vercel](https://vercel.com/button)](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) diff --git a/dailyjs/live-transcription/components/App/App.js b/dailyjs/live-transcription/components/App/App.js deleted file mode 100644 index b23d9ce..0000000 --- a/dailyjs/live-transcription/components/App/App.js +++ /dev/null @@ -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 = () => ( - - - -); - -export default AppWithTranscription; diff --git a/dailyjs/live-transcription/components/App/index.js b/dailyjs/live-transcription/components/App/index.js deleted file mode 100644 index a1726c9..0000000 --- a/dailyjs/live-transcription/components/App/index.js +++ /dev/null @@ -1 +0,0 @@ -export { AppWithTranscription as default } from './App'; diff --git a/dailyjs/live-transcription/components/TranscriptionAside/TranscriptionAside.js b/dailyjs/live-transcription/components/TranscriptionAside/TranscriptionAside.js deleted file mode 100644 index 0dd9cce..0000000 --- a/dailyjs/live-transcription/components/TranscriptionAside/TranscriptionAside.js +++ /dev/null @@ -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 ( - - ); -}; - -export default TranscriptionAside; diff --git a/dailyjs/live-transcription/components/TranscriptionAside/index.js b/dailyjs/live-transcription/components/TranscriptionAside/index.js deleted file mode 100644 index c9ef5c2..0000000 --- a/dailyjs/live-transcription/components/TranscriptionAside/index.js +++ /dev/null @@ -1 +0,0 @@ -export { TranscriptionAside as default } from './TranscriptionAside'; diff --git a/dailyjs/live-transcription/components/Tray/Tray.js b/dailyjs/live-transcription/components/Tray/Tray.js deleted file mode 100644 index 5da7e15..0000000 --- a/dailyjs/live-transcription/components/Tray/Tray.js +++ /dev/null @@ -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 ( - { - toggleAside(TRANSCRIPTION_ASIDE); - }} - > - - - ); -}; - -export default Tray; diff --git a/dailyjs/live-transcription/components/Tray/index.js b/dailyjs/live-transcription/components/Tray/index.js deleted file mode 100644 index 100bcc8..0000000 --- a/dailyjs/live-transcription/components/Tray/index.js +++ /dev/null @@ -1 +0,0 @@ -export { Tray as default } from './Tray'; diff --git a/dailyjs/live-transcription/contexts/TranscriptionProvider.js b/dailyjs/live-transcription/contexts/TranscriptionProvider.js deleted file mode 100644 index 83b5457..0000000 --- a/dailyjs/live-transcription/contexts/TranscriptionProvider.js +++ /dev/null @@ -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 ( - - {children} - - ); -}; - -TranscriptionProvider.propTypes = { - children: PropTypes.node, -}; - -export const useTranscription = () => useContext(TranscriptionContext); diff --git a/dailyjs/live-transcription/env.example b/dailyjs/live-transcription/env.example deleted file mode 100644 index 5ab7e03..0000000 --- a/dailyjs/live-transcription/env.example +++ /dev/null @@ -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 diff --git a/dailyjs/live-transcription/hooks/useMessageSound.js b/dailyjs/live-transcription/hooks/useMessageSound.js deleted file mode 100644 index 3324693..0000000 --- a/dailyjs/live-transcription/hooks/useMessageSound.js +++ /dev/null @@ -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; diff --git a/dailyjs/live-transcription/index.js b/dailyjs/live-transcription/index.js deleted file mode 100644 index 9044efc..0000000 --- a/dailyjs/live-transcription/index.js +++ /dev/null @@ -1 +0,0 @@ -// Note: I am here because next-transpile-modules requires a mainfile diff --git a/dailyjs/live-transcription/next.config.js b/dailyjs/live-transcription/next.config.js deleted file mode 100644 index 9a0a6ee..0000000 --- a/dailyjs/live-transcription/next.config.js +++ /dev/null @@ -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, - }, -}); diff --git a/dailyjs/live-transcription/package.json b/dailyjs/live-transcription/package.json deleted file mode 100644 index e271ed8..0000000 --- a/dailyjs/live-transcription/package.json +++ /dev/null @@ -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" - } -} diff --git a/dailyjs/live-transcription/pages/_app.js b/dailyjs/live-transcription/pages/_app.js deleted file mode 100644 index f64e96a..0000000 --- a/dailyjs/live-transcription/pages/_app.js +++ /dev/null @@ -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 = ; -App.customTrayComponent = ; - -export default App; diff --git a/dailyjs/live-transcription/pages/api b/dailyjs/live-transcription/pages/api deleted file mode 120000 index 999f604..0000000 --- a/dailyjs/live-transcription/pages/api +++ /dev/null @@ -1 +0,0 @@ -../../basic-call/pages/api \ No newline at end of file diff --git a/dailyjs/live-transcription/pages/index.js b/dailyjs/live-transcription/pages/index.js deleted file mode 100644 index d25e77e..0000000 --- a/dailyjs/live-transcription/pages/index.js +++ /dev/null @@ -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; diff --git a/dailyjs/live-transcription/public/assets/daily-logo-dark.svg b/dailyjs/live-transcription/public/assets/daily-logo-dark.svg deleted file mode 100644 index ef3a565..0000000 --- a/dailyjs/live-transcription/public/assets/daily-logo-dark.svg +++ /dev/null @@ -1,14 +0,0 @@ - - - - - - - - - - - - - - diff --git a/dailyjs/live-transcription/public/assets/daily-logo.svg b/dailyjs/live-transcription/public/assets/daily-logo.svg deleted file mode 100644 index 534a18a..0000000 --- a/dailyjs/live-transcription/public/assets/daily-logo.svg +++ /dev/null @@ -1,14 +0,0 @@ - - - - - - - - - - - - - - diff --git a/dailyjs/live-transcription/public/assets/join.mp3 b/dailyjs/live-transcription/public/assets/join.mp3 deleted file mode 100644 index 7657915..0000000 Binary files a/dailyjs/live-transcription/public/assets/join.mp3 and /dev/null differ diff --git a/dailyjs/live-transcription/public/assets/message.mp3 b/dailyjs/live-transcription/public/assets/message.mp3 deleted file mode 100644 index a067315..0000000 Binary files a/dailyjs/live-transcription/public/assets/message.mp3 and /dev/null differ diff --git a/dailyjs/live-transcription/public/assets/pattern-bg.png b/dailyjs/live-transcription/public/assets/pattern-bg.png deleted file mode 100644 index 01e0d0d..0000000 Binary files a/dailyjs/live-transcription/public/assets/pattern-bg.png and /dev/null differ