diff --git a/dailyjs/live-streaming/.babelrc b/dailyjs/live-streaming/.babelrc deleted file mode 100644 index a6f4434..0000000 --- a/dailyjs/live-streaming/.babelrc +++ /dev/null @@ -1,4 +0,0 @@ -{ - "presets": ["next/babel"], - "plugins": ["inline-react-svg"] -} diff --git a/dailyjs/live-streaming/README.md b/dailyjs/live-streaming/README.md deleted file mode 100644 index 65d4c26..0000000 --- a/dailyjs/live-streaming/README.md +++ /dev/null @@ -1,41 +0,0 @@ -# Live Streaming - -![Live Streaming](./image.png) - -### Live example - -**[See it in action here ➡️](https://dailyjs-live-streaming.vercel.app)** - ---- - -## What does this demo do? - -- Use [startLiveStreaming](https://docs.daily.co/reference#%EF%B8%8F-startlivestreaming) to send video and audio to specified RTMP endpoint -- Listen for stream started / stopped / error events -- Allows call owner to specify stream layout (grid, single participant or active speaker) and maximum cams -- Extends the basic call demo with a live streaming provider, tray button and modal -- Show a notification bubble at the top of the screen when live streaming is in progress - -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-streaming dev -``` - -## How does this example work? - -In this example we extend the [basic call demo](../basic-call) with live streaming functionality. - -We pass a custom tray object, a custom app object (wrapping the original in a new `LiveStreamingProvider`) and a custom modal. We also symlink both the `public` and `pages/api` folders from the basic call. - -Single live streaming is only available to call owners, you must create a token when joining the call (for simplicity, we have disabled the ability to join the call as a guest.) - -## 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-streaming/components/App/App.js b/dailyjs/live-streaming/components/App/App.js deleted file mode 100644 index 4749551..0000000 --- a/dailyjs/live-streaming/components/App/App.js +++ /dev/null @@ -1,13 +0,0 @@ -import React from 'react'; - -import App from '@dailyjs/basic-call/components/App'; -import { LiveStreamingProvider } from '../../contexts/LiveStreamingProvider'; - -// Extend our basic call app component with the live streaming context -export const AppWithLiveStreaming = () => ( - - - -); - -export default AppWithLiveStreaming; diff --git a/dailyjs/live-streaming/components/App/index.js b/dailyjs/live-streaming/components/App/index.js deleted file mode 100644 index c46acf2..0000000 --- a/dailyjs/live-streaming/components/App/index.js +++ /dev/null @@ -1 +0,0 @@ -export { AppWithLiveStreaming as default } from './App'; diff --git a/dailyjs/live-streaming/components/LiveStreamingModal/LiveStreamingModal.js b/dailyjs/live-streaming/components/LiveStreamingModal/LiveStreamingModal.js deleted file mode 100644 index 2cee300..0000000 --- a/dailyjs/live-streaming/components/LiveStreamingModal/LiveStreamingModal.js +++ /dev/null @@ -1,148 +0,0 @@ -import React, { useEffect, useState } from 'react'; -import { Button } from '@dailyjs/shared/components/Button'; -import { CardBody } from '@dailyjs/shared/components/Card'; -import Field from '@dailyjs/shared/components/Field'; -import { TextInput, SelectInput } from '@dailyjs/shared/components/Input'; -import Modal from '@dailyjs/shared/components/Modal'; -import { Well } from '@dailyjs/shared/components/Well'; -import { useCallState } from '@dailyjs/shared/contexts/CallProvider'; -import { useParticipants } from '@dailyjs/shared/contexts/ParticipantsProvider'; -import { useUIState } from '@dailyjs/shared/contexts/UIStateProvider'; -import { useLiveStreaming } from '../../contexts/LiveStreamingProvider'; - -export const LIVE_STREAMING_MODAL = 'live-streaming'; - -const LAYOUTS = [ - { label: 'Grid (default)', value: 'default' }, - { label: 'Single participant', value: 'single-participant' }, - { label: 'Active participant', value: 'active-participant' }, -]; - -export const LiveStreamingModal = () => { - const { callObject } = useCallState(); - const { allParticipants } = useParticipants(); - const { currentModals, closeModal } = useUIState(); - const { isStreaming, streamError } = useLiveStreaming(); - const [pending, setPending] = useState(false); - const [rtmpUrl, setRtmpUrl] = useState(''); - const [layout, setLayout] = useState(0); - const [maxCams, setMaxCams] = useState(9); - const [participant, setParticipant] = useState(0); - - useEffect(() => { - // Reset pending state whenever stream state changes - setPending(false); - }, [isStreaming]); - - function startLiveStream() { - setPending(true); - - const opts = - layout === 'single-participant' - ? { session_id: participant.id } - : { max_cam_streams: maxCams }; - callObject.startLiveStreaming({ rtmpUrl, preset: layout, ...opts }); - } - - function stopLiveStreaming() { - setPending(true); - callObject.stopLiveStreaming(); - } - - return ( - closeModal(LIVE_STREAMING_MODAL)} - actions={[ - , - !isStreaming ? ( - - ) : ( - - ), - ]} - > - {streamError && ( - - Unable to start stream. Error message: {streamError} - - )} - - - setLayout(Number(e.target.value))} - value={layout} - > - {LAYOUTS.map((l, i) => ( - - ))} - - - - {layout !== - LAYOUTS.findIndex((l) => l.value === 'single-participant') && ( - - setMaxCams(Number(e.target.value))} - value={maxCams} - > - - - - - - - - - - - - )} - - {layout === - LAYOUTS.findIndex((l) => l.value === 'single-participant') && ( - - setParticipant(e.target.value)} - value={participant} - > - {allParticipants.map((p) => ( - - ))} - - - )} - - - setRtmpUrl(e.target.value)} - /> - - - - ); -}; - -export default LiveStreamingModal; diff --git a/dailyjs/live-streaming/components/LiveStreamingModal/index.js b/dailyjs/live-streaming/components/LiveStreamingModal/index.js deleted file mode 100644 index 12ffdf0..0000000 --- a/dailyjs/live-streaming/components/LiveStreamingModal/index.js +++ /dev/null @@ -1,3 +0,0 @@ -export { LiveStreamingModal as default } from './LiveStreamingModal'; -export { LiveStreamingModal } from './LiveStreamingModal'; -export { LIVE_STREAMING_MODAL } from './LiveStreamingModal'; diff --git a/dailyjs/live-streaming/components/Tray/Tray.js b/dailyjs/live-streaming/components/Tray/Tray.js deleted file mode 100644 index fa22345..0000000 --- a/dailyjs/live-streaming/components/Tray/Tray.js +++ /dev/null @@ -1,25 +0,0 @@ -import React from 'react'; - -import { TrayButton } from '@dailyjs/shared/components/Tray'; -import { useUIState } from '@dailyjs/shared/contexts/UIStateProvider'; -import { ReactComponent as IconStream } from '@dailyjs/shared/icons/streaming-md.svg'; - -import { useLiveStreaming } from '../../contexts/LiveStreamingProvider'; -import { LIVE_STREAMING_MODAL } from '../LiveStreamingModal'; - -export const Tray = () => { - const { openModal } = useUIState(); - const { isStreaming } = useLiveStreaming(); - - return ( - openModal(LIVE_STREAMING_MODAL)} - > - - - ); -}; - -export default Tray; diff --git a/dailyjs/live-streaming/components/Tray/index.js b/dailyjs/live-streaming/components/Tray/index.js deleted file mode 100644 index 100bcc8..0000000 --- a/dailyjs/live-streaming/components/Tray/index.js +++ /dev/null @@ -1 +0,0 @@ -export { Tray as default } from './Tray'; diff --git a/dailyjs/live-streaming/contexts/LiveStreamingProvider.js b/dailyjs/live-streaming/contexts/LiveStreamingProvider.js deleted file mode 100644 index f0c4a51..0000000 --- a/dailyjs/live-streaming/contexts/LiveStreamingProvider.js +++ /dev/null @@ -1,71 +0,0 @@ -import React, { - useState, - createContext, - useContext, - useEffect, - useCallback, -} from 'react'; -import { useCallState } from '@dailyjs/shared/contexts/CallProvider'; -import { useUIState } from '@dailyjs/shared/contexts/UIStateProvider'; -import PropTypes from 'prop-types'; - -export const LiveStreamingContext = createContext(); - -export const LiveStreamingProvider = ({ children }) => { - const [isStreaming, setIsStreaming] = useState(false); - const [streamError, setStreamError] = useState(); - const { setCustomCapsule } = useUIState(); - const { callObject } = useCallState(); - - const handleStreamStarted = useCallback(() => { - console.log('📺 Live stream started'); - setIsStreaming(true); - setStreamError(null); - setCustomCapsule({ variant: 'recording', label: 'Live streaming' }); - }, [setCustomCapsule]); - - const handleStreamStopped = useCallback(() => { - console.log('📺 Live stream stopped'); - setIsStreaming(false); - setCustomCapsule(null); - }, [setCustomCapsule]); - - const handleStreamError = useCallback( - (e) => { - setIsStreaming(false); - setCustomCapsule(null); - setStreamError(e.errorMsg); - }, - [setCustomCapsule] - ); - - useEffect(() => { - if (!callObject) { - return false; - } - - console.log('📺 Live streaming provider listening for stream events'); - - callObject.on('live-streaming-started', handleStreamStarted); - callObject.on('live-streaming-stopped', handleStreamStopped); - callObject.on('live-streaming-error', handleStreamError); - - return () => { - callObject.off('live-streaming-started', handleStreamStarted); - callObject.off('live-streaming-stopped', handleStreamStopped); - callObject.on('live-streaming-error', handleStreamError); - }; - }, [callObject, handleStreamStarted, handleStreamStopped, handleStreamError]); - - return ( - - {children} - - ); -}; - -LiveStreamingProvider.propTypes = { - children: PropTypes.node, -}; - -export const useLiveStreaming = () => useContext(LiveStreamingContext); diff --git a/dailyjs/live-streaming/env.example b/dailyjs/live-streaming/env.example deleted file mode 100644 index 5ab7e03..0000000 --- a/dailyjs/live-streaming/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-streaming/image.png b/dailyjs/live-streaming/image.png deleted file mode 100644 index 9781261..0000000 Binary files a/dailyjs/live-streaming/image.png and /dev/null differ diff --git a/dailyjs/live-streaming/index.js b/dailyjs/live-streaming/index.js deleted file mode 100644 index 9044efc..0000000 --- a/dailyjs/live-streaming/index.js +++ /dev/null @@ -1 +0,0 @@ -// Note: I am here because next-transpile-modules requires a mainfile diff --git a/dailyjs/live-streaming/next.config.js b/dailyjs/live-streaming/next.config.js deleted file mode 100644 index 9a0a6ee..0000000 --- a/dailyjs/live-streaming/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-streaming/package.json b/dailyjs/live-streaming/package.json deleted file mode 100644 index a255016..0000000 --- a/dailyjs/live-streaming/package.json +++ /dev/null @@ -1,25 +0,0 @@ -{ - "name": "@dailyjs/live-streaming", - "description": "Basic Call + Live Streaming", - "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-streaming/pages/_app.js b/dailyjs/live-streaming/pages/_app.js deleted file mode 100644 index 7a097c4..0000000 --- a/dailyjs/live-streaming/pages/_app.js +++ /dev/null @@ -1,12 +0,0 @@ -import React from 'react'; -import App from '@dailyjs/basic-call/pages/_app'; -import AppWithLiveStreaming from '../components/App'; - -import { LiveStreamingModal } from '../components/LiveStreamingModal'; -import Tray from '../components/Tray'; - -App.modals = [LiveStreamingModal]; -App.customAppComponent = ; -App.customTrayComponent = ; - -export default App; diff --git a/dailyjs/live-streaming/pages/api b/dailyjs/live-streaming/pages/api deleted file mode 120000 index 999f604..0000000 --- a/dailyjs/live-streaming/pages/api +++ /dev/null @@ -1 +0,0 @@ -../../basic-call/pages/api \ No newline at end of file diff --git a/dailyjs/live-streaming/pages/index.js b/dailyjs/live-streaming/pages/index.js deleted file mode 100644 index 2668138..0000000 --- a/dailyjs/live-streaming/pages/index.js +++ /dev/null @@ -1,16 +0,0 @@ -import Index from '@dailyjs/basic-call/pages'; -import getDemoProps from '@dailyjs/shared/lib/demoProps'; - -export async function getStaticProps() { - const defaultProps = getDemoProps(); - - return { - props: { - ...defaultProps, - forceFetchToken: true, - forceOwner: true, - }, - }; -} - -export default Index; diff --git a/dailyjs/live-streaming/public/assets/daily-logo-dark.svg b/dailyjs/live-streaming/public/assets/daily-logo-dark.svg deleted file mode 100644 index ef3a565..0000000 --- a/dailyjs/live-streaming/public/assets/daily-logo-dark.svg +++ /dev/null @@ -1,14 +0,0 @@ - - - - - - - - - - - - - - diff --git a/dailyjs/live-streaming/public/assets/daily-logo.svg b/dailyjs/live-streaming/public/assets/daily-logo.svg deleted file mode 100644 index 534a18a..0000000 --- a/dailyjs/live-streaming/public/assets/daily-logo.svg +++ /dev/null @@ -1,14 +0,0 @@ - - - - - - - - - - - - - - diff --git a/dailyjs/live-streaming/public/assets/join.mp3 b/dailyjs/live-streaming/public/assets/join.mp3 deleted file mode 100644 index 7657915..0000000 Binary files a/dailyjs/live-streaming/public/assets/join.mp3 and /dev/null differ diff --git a/dailyjs/live-streaming/public/assets/message.mp3 b/dailyjs/live-streaming/public/assets/message.mp3 deleted file mode 100644 index a067315..0000000 Binary files a/dailyjs/live-streaming/public/assets/message.mp3 and /dev/null differ diff --git a/dailyjs/live-streaming/public/assets/pattern-bg.png b/dailyjs/live-streaming/public/assets/pattern-bg.png deleted file mode 100644 index 01e0d0d..0000000 Binary files a/dailyjs/live-streaming/public/assets/pattern-bg.png and /dev/null differ