Problem with Stream component and URL

Developers Stream
1

Hi, I have a problem with the Reacta Stream component. When I pass the ID in the src property, the player does not fetch the video itself. The ID is passed from the other component as a property. It looks like this:

First component:

function VideoList() {
  // ... //
  const [videoID, setVideoID] = useState('')

  const seeDetails = (file) => {
    setVideoID(file.videoID)
  }

  return (
    <>
    <section>
      <h2>
        All video
      </h2>
      <ul className='grid grid-cols-4'>
        {video.map((file) => (
          <li
            key={file.name}
            onClick={(e) => seeDetails(file)}
          >
            <img
              src={encodeURI(file.cover)}
              alt={file.name}
            />
          </li>
        ))}
      </ul>
    </section>

      <DetailsVideo
        videoID={videoID}
      />
    </>
  )
}

Second component:


const DetailsVideo = ({ videoID }) => {
  const videoRef = createRef(null)

  const playVideo = () => {
    videoRef.current.play()
  }

  return (
    <>
      <Stream
        src={videoID}
        streamRef={videoRef}
        controls
      />
      <div className='flex'>
        <button
          onClick={playVideo}
          type='button'
        >
          Watch
        </button>
      </div>
    </>
  )
}

All the video data is stored in the database. I also tried in the src property such a notation:

<Stream src={`https://iframe.videodelivery.net/${videoID}`} streamRef={videoRef} controls />

But in the response the component generates such code:

<iframe src="https://iframe.videodelivery.net/https://iframe.videodelivery.net/852a3fuc72m4cc2ab0934960a0e9ffd8d330da3?preload=metadata" ...

When I use the <iframe src={`https://iframe.videodelivery.net/${videoID}} tag instead of the React component…
Everything works as expected.

I get additional errors in the console:

Source map error:

Error: request failed with status 404
URL source: https://embed.videodelivery.net/embed/sdk-iframe-integration.fla9.latest.js?video=iframe.videodelivery.net
URL source map: sdk-iframe-integration.fla9.86f0598.js.map

XHRGEThttps://videodelivery.net/iframe.videodelivery.net/metadata/playerEnhancementInfo.json
[HTTP/2 404 Not Found 38ms]

XHRGEThttps://videodelivery.net/iframe.videodelivery.net/manifest/video.mpd?parentOrigin=http://localhost:3000
[HTTP/2 404 Not Found 51ms]

2

You need to specify the video ID in the <Stream> component like this without iframe.videodelivery.net in the domain name.

<Stream src={videoID}...
3

That’s what I tried to do, too. For some reason the id is not passed to the component this way. The result is that I get an empty url just like this one:
https://iframe.videodelivery.net/?preload=metadata.

I can see in the console that the videoID variable changes its values every time I click in the first component, it is correctly passed to the second component, but for some reason the Stream component is not reading it.

4

@user5666 to clarify, is the <Stream /> component receiving just the video ID as the src prop like the example shown below? (this works)

<Stream controls src="5d5bc37ffcf54c9b82e996823bffbb81" />

Or is it receiving the iframe embed URL? (this is incorrect)

<Stream controls src="https://iframe.videodelivery.net/5d5bc37ffcf54c9b82e996823bffbb81" />

5

I clarify that I have tried both versions and neither works - either the correct one or the incorrect one.