{"id":13758406,"url":"https://github.com/ryancharris/react-livestream","last_synced_at":"2025-05-13T02:08:56.661Z","repository":{"id":42915750,"uuid":"245734017","full_name":"ryancharris/react-livestream","owner":"ryancharris","description":"Embed your Twitch, Mixer or YouTube stream in your website automatically when you're live","archived":false,"fork":false,"pushed_at":"2023-01-06T02:41:52.000Z","size":418,"stargazers_count":65,"open_issues_count":15,"forks_count":13,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-05-01T03:41:31.688Z","etag":null,"topics":["javascript","react","twitch"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ryancharris.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null},"funding":{"github":["ryancharris"],"patreon":null,"open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"custom":null}},"created_at":"2020-03-08T01:39:22.000Z","updated_at":"2024-07-18T17:46:11.000Z","dependencies_parsed_at":"2023-02-05T03:31:54.391Z","dependency_job_id":null,"html_url":"https://github.com/ryancharris/react-livestream","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ryancharris%2Freact-livestream","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ryancharris%2Freact-livestream/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ryancharris%2Freact-livestream/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ryancharris%2Freact-livestream/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ryancharris","download_url":"https://codeload.github.com/ryancharris/react-livestream/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253660814,"owners_count":21943817,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["javascript","react","twitch"],"created_at":"2024-08-03T13:00:29.630Z","updated_at":"2025-05-13T02:08:56.643Z","avatar_url":"https://github.com/ryancharris.png","language":"JavaScript","funding_links":["https://github.com/sponsors/ryancharris"],"categories":["Libraries"],"sub_categories":["JavaScript (Node.js)"],"readme":"# react-livestream\n\nAutomatically embed your livestream in your React app whenever you go live!\n\nThis package currently works with the following streaming platforms:\n\n1. [Twitch](https://www.twitch.tv/)\n2. [Mixer](https://www.mixer.com/)\n3. [YouTube](https://www.youtube.com/)\n\n### Instructions\n\n`react-livestream` allows you to use a React component called `\u003cReactLivestream /\u003e`, which will embed a responsive `\u003ciframe\u003e` into your site whenever your channel or account is live.\n\nIf you are not currently broadcasting, nothing will be rendered in the DOM unless you choose to pass in an optional JSX element as the `offlineComponent` prop. In this case, that component will render when you're offline.\n\n```javascript\nimport React from 'react'\nimport ReactLivestream from 'react-livestream'\n\n// Optional component to be rendered\n// when you're not streaming\nfunction OfflineComponent() {\n  return (\n    \u003cdiv\u003e\n      \u003cp\u003eI am offline now, but checkout my stream on Fridays at 5 PM EST\u003c/p\u003e\n    \u003c/div\u003e\n  )\n}\n\nfunction App() {\n  return (\n    \u003cdiv className=\"App\"\u003e\n      \u003cReactLivestream\n        platform=\"mixer\"\n        mixerChannelId\n        offlineComponent={OfflineComponent}\n      /\u003e\n\n      \u003cReactLivestream platform=\"twitch\" twitchDataUrl twitchUserName /\u003e\n\n      \u003cReactLivestream platform=\"youtube\" youtubeApiKey youtubeChannelId /\u003e\n    \u003c/div\u003e\n  )\n}\n\nexport default App\n```\n\nThe component takes these general props:\n\n- `platform` - \"mixer\", \"twitch\", or \"youtube\" (required)\n- `offlineComponent` - A JSX element that renders in place of the `\u003ciframe\u003e` when the user is **not** live (optional)\n\nIn addition, you need to pass in the following information based on your streaming platform:\n\n- `mixerChannelId` - Found in the Network tab of your developer tools when navigating to your Mixer channel. For example, mine is `https://mixer.com/api/v1/channels/102402534`, so my ID is `102402534`\n- `twitchDataUrl` - An endpoint that handles authenticating with the Twitch API and makes a request for stream infomation about the user specified below.\n- `twitchUserName` - The username associated with your Twitch account\n- `youtubeApiKey` - Obtain this from the Google Developers console\n- `youtubeChannelId` - This can be found in the URL to you YouTube channel. For example, my channel URL is `https://www.youtube.com/channel/UCwMTu04flyFwBnLF0-_5H-w`, so my channel ID is `UCwMTu04flyFwBnLF0-_5H-w`\n\n### Examples\n\nCurrently, it works with the three streaming services mentioned above. Below, are examples of how to use this component for each streaming platform.\n\n**Mixer**\n\n```javascript\n\u003cReactLivestream platform=\"mixer\" mixerChannelId={CHANNEL_ID} /\u003e\n```\n\n**Twitch**\n\n```javascript\n\u003cReactLivestream\n  platform=\"twitch\"\n  twitchDataUrl=\"ENDPOINT_URL\"\n  twitchUserName=\"USER_NAME\"\n/\u003e\n```\n\n**YouTube**\n\n```javascript\n\u003cReactLivestream\n  platform=\"youtube\"\n  youtubeApiKey=\"API_KEY\"\n  youtubeChannelId=\"CHANNEL_ID\"\n/\u003e\n```\n\n### Twitch and react-livestream\n\nIn April 2020, Twitch changed how their API works and you can no longer make authenticated calls from the client. Because of that, you will need to add some infrastructure to handle server-to-server request.\n\nCurrently, I am handling this with a [Netlify function](https://www.netlify.com/products/functions/). Feel free to copy and paste the snippet below for your own use. Just make sure to swap out the placeholder values.\n\n```javascript\nconst fetch = require('node-fetch')\nrequire('dotenv').config()\n\nfunction getTwitchData(token) {\n  console.log('Fetching broadcast info...')\n\n  const apiUrl = 'https://api.twitch.tv/helix/streams?user_login=YOUR_USER_NAME'\n\n  return fetch(apiUrl, {\n    method: 'GET',\n    headers: {\n      Authorization: `Bearer ${token}`,\n      'Client-ID': process.env.GATSBY_TWITCH_CLIENT_ID\n    }\n  })\n    .then(res =\u003e {\n      if (res.ok) {\n        return res.json()\n      } else {\n        throw new Error('Unable to authenticate with Twitch API')\n      }\n    })\n    .catch(err =\u003e err)\n}\n\nexports.handler = async function (event, context) {\n  console.log('Requesting token from Twitch API...')\n\n  const TWITCH_API = 'https://id.twitch.tv/oauth2/token'\n  const tokenUrl = `${TWITCH_API}?client_id=${process.env.GATSBY_TWITCH_CLIENT_ID}\u0026client_secret=${process.env.GATSBY_TWITCH_CLIENT_SECRET}\u0026grant_type=client_credentials`\n\n  const data = fetch(tokenUrl, {\n    method: 'POST',\n    headers: {\n      Accept: 'application/json',\n      'Client-ID': process.env.GATSBY_TWITCH_CLIENT_ID\n    }\n  })\n    .then(res =\u003e {\n      if (res.ok) {\n        return res.json()\n      } else {\n        throw new Error('Cannot retrieve access_token from Twitch API')\n      }\n    })\n    .then(async json =\u003e {\n      const token = json.access_token\n      return {\n        statusCode: 200,\n        body: JSON.stringify(await getTwitchData(token)),\n        headers: {\n          'Access-Control-Allow-Origin': '*'\n        }\n      }\n    })\n    .catch(err =\u003e {\n      return {\n        statusCode: 422,\n        body: String(err)\n      }\n    })\n\n  return data\n}\n```\n\n### Notes\n\nBuilt with [React](https://github.com/facebook/react) and [Microbundle](https://github.com/developit/microbundle).\n\nMaintained by [Ryan Harris](https://ryanharris.dev)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fryancharris%2Freact-livestream","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fryancharris%2Freact-livestream","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fryancharris%2Freact-livestream/lists"}