React-native-youtube: How to embed a live stream?

[christiansaiki]

Hi I've got the following video that I want to display
https://www.youtube.com/embed/live_stream?channel=UCHk3Xtz3k8H1Ms6CtodmawQ

I want to display in that way because it is a live stream and the videoId keeps changing.

Nevertheless if I put

render () {
    return (
      <YouTube
        apiKey={API_KEY}
        videoId='live_stream?channel=UCHk3Xtz3k8H1Ms6CtodmawQ'   // The YouTube video ID
        play             // control playback of video with true/false
        showFullscreenButton
        onReady={e => this.setState({ isReady: true })}
        onChangeState={e => this.setState({ status: e.state })}
        onChangeQuality={e => this.setState({ quality: e.quality })}
        onError={e => this.setState({ error: e.error })}
        style={{ height: 300 }}
      />
    )
  }

It renders

What should I do?
Best Regards

[silkyland]

You just need only youtube ID from its URL

[srinusonly]

Any update on this?

[christiansaiki]

Hey @srinusonly
I am using this componentDidMount trick to get the videoId

componentDidMount () {
    fetch(`${YOUTUBE_API}`)
      .then((response) => response.json())
      .then((responseJson) => {
        if (responseJson && responseJson.items[0]) this.setState({ videoId: responseJson.items[0].id.videoId })
      })
      .catch((error) => {
        console.error(error)
      })
  }

where YOUTUBE_API is

const YOUTUBE_API = `https://www.googleapis.com/youtube/v3/search?part=snippet&channelId=${CHANNEL_ID}&eventType=live&type=video&key=${API_KEY}`

and then in render method

  render () {
    const { videoId } = this.state
    return (
      <YouTube
        apiKey={API_KEY}
        videoId={videoId}   // The YouTube video ID
        showFullscreenButton
        onReady={e => this.setState({ isReady: true })}
        onChangeState={e => this.setState({ status: e.state })}
        onChangeQuality={e => this.setState({ quality: e.quality })}
        onError={e => this.setState({ error: e.error })}
        style={{ height: 300 }}
        />
    )
  }
}

[srinusonly]

Good work around.

Thanks for the help

Sent from my iPhone

On 21-May-2018, at 18:59, Christian Saiki [e-mail] wrote:

Hey @srinusonly
I am using this componentDidMount trick to get the videoUrl

componentDidMount () {
fetch(${YOUTUBE_API})
.then((response) => response.json())
.then((responseJson) => {
if (responseJson && responseJson.items[0]) this.setState({ videoId: responseJson.items[0].id.videoId })
})
.catch((error) => {
console.error(error)
})
}
where YOUTUBE_API is
const YOUTUBE_API =https://www.googleapis.com/youtube/v3/search?part=snippet&channelId=${CHANNEL_ID}&eventType=live&type=video&key=${API_KEY}``

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub, or mute the thread.

[jdadojr]

Only works on IOS, not on Android..
Android will just spin the circle forever

[mayconmesquita]

Would be nice this working on Android

[davidohayon669]

@mayconmesquita Whatever abilities this library provide, depends on the official utils YouTube provide for iOS and Android, in your case YouTube Android Player API

This lib is just a RN wrapper around those, if they provide some functionality that is not covered here, please suggest it

[HarshitMadhav]

I can confirm that workaround provided by @christiansaiki works in both android and iOS.

[mayconmesquita]

@HarshitMadhav thanks! I will test soon.