How to show youtube live video on Reactjs page

Question

How can I show youtube live video on my ReactJS page. I have youtube data api, channel id and live stream id.

Regards Alex

Answer 1

Maybe these links will give you in an easier way what your looking for:

• https://www.youtube.com/embed/live_stream?channel=CHANNEL_ID

• https://www.youtube.com/channel/CHANNEL_ID/live

Otherwise since you have the official embed YouTube video code by using on the YouTube desktop well-known interface below every video the Share button > Embed, remains only the question of getting the latest live video id:

There are two secure solutions to retrieve the YouTube video id of a channel's latest live:

1. Client-side (app) only: fetch https://www.youtube.com/channel/CHANNEL_ID and parse it as you can to know whether or not this channel is livestreaming and if so what is the video id otherwise search latest live in old videos in https://www.youtube.com/channel/CHANNEL_ID/videos
2. Master-slave model (1. but in a cleaner way): your client side asks a server side (web server using PhP for instance) which uses your YouTube Data API v3 API key to retrieve latest videos and then searching for latest live from the given channel your looking for by using Channels: list and PlaylistItems: list for instance cf this SO answer

Answer 2

This is how I retrieve the live video from youtube data api. So I got the live video when user stream. But I got the exceeded error.

The request cannot be completed because you have exceeded your \u003ca href=\"/youtube/v3/getting-started#quota\"\u003equota\u003c/a\u003e.

Code

import React, { useState, useEffect } from "react";
import axios from 'axios'
import YouTube from 'react-youtube';
import toast, { Toaster } from "react-hot-toast";
import constants from "../../constants";

const YouTubePage = () => {
  const [post, setPost] = useState();


  useEffect(() => {
    axios({
      method: "GET",
      url: "https://www.googleapis.com/youtube/v3/search",
      params: {
        part: "id,snippet",
        eventType: "live",
        channelId: "CHANNEL_ID",
        type: "video",
        key: "APIKEY",
        maxResults:"1",
        order:"date"
      },
    })
      .then((res) => {
        var post = {
            videoId: res.data.items[0].id.videoId,
            title: res.data.items[0].snippet.title,
            description: res.data.items[0].snippet.description,
            thumbnail: res.data.items[0].snippet.thumbnails.default.url,
        
        }
        setPost(post);
      })
      .catch((res) => {
        toast.error(`[YouTube ERROR]: ${res.response.data.error.message}`);
  });
    console.log(post);
  }, [post]);

  const opts = {
    height: "390",
    width: "640",
    playerVars: {
      // https://developers.google.com/youtube/player_parameters
      autoplay: 1,
      origin:"https://thitsarparami.org/"
    },
 };

 const _onReady = (event) => {
   // access to player in all event handlers via event.target
   event.target.pauseVideo();
 };

 return (
   <div>
      <div className="flex flex-col my-5 items-center">
        <div className="flex-1 px-2 mx-2 ">
          <div className="text-lg font-bold">{constants.youtube}</div>
        </div>
        {post ?
           (<div className="flex-1 px-2 mx-2 my-5">
             <div className="text-sm font-bold">
              {constants["radio-subtitle1"]}
            </div>
          </div>):  <div></div>
        } 
    
    
         {post ? (<YouTube videoId={post.videoId} opts={opts} onReady=. {_onReady} />) : <div></div>} 
    <YouTube videoId="683V0cV0qKk" opts={opts} />
    
  </div>
</div>
  );
};

export default YouTubePage;