Stream Live Video

Comments

3 comments

  • Avatar
    Eyal Katz Talmon

    Hey Timothy, thanks for reaching out!

    When using the <Video> tag of the React SDK, a simple HTML <video> tag is created. Since most of the browsers do not support m3u8 playback out of the box, you cannot play m3u8 using an HTML <video> tag. 

    In order to play an m3u8, you can make use of Cloudinary's video player. Below is a simple example of implementing the live streaming, that includes a link with our video player embedded. Be sure to set your cloud-name, and a "broadcast" enabled upload preset in the JS section, and use the "Embed url" link when the stream is ready (can take up to 30 seconds)  -

    Live streaming example - https://codepen.io/eyalkt/pen/RwPPPvq

    Regards.

     

    0
    Comment actions Permalink
  • Avatar
    Tokmang Timothy Wang

    Thanks for the help, I was able to get it to stream but it takes quite a while for it to start streaming the videos (far above 30 seconds) and after waiting for a while, it does start streaming but only for a few minutes or so and stops again. I noticed I get this warning/error over and over again in my console.  

    GET https://res.cloudinary.com/stansonlycloud/video/upload/v1/pg_6/streams/blob_ilofo1.ts 404

    react_devtools_backend.js:2430 VIDEOJS: WARN: Problem encountered with the current HLS playlist. Trying again since it is the only playlist.

    The link I supply is:

    https://res.cloudinary.com/stansonlycloud/video/upload/v1607845738/streams/blob_ilofo1.m3u8.

    After my imports I setup the video player source like:

    const cld = new Cloudinary({cloud_name: 'stansonlycloud', secure: true});
    const player = cld.videoPlayer('streamVids');
    player.source(streamUrl);

     

    and Video Player like:

    <video
    id="streamVids"
    autoPlay
    className={classes.streamMedia}
    >

     

    Is there a reason it gives the warning while the video player seems to load unending and does a brief few minutes of stream the stops again?

     

    I am TESTING FROM LOCALHOST. 

     

    Thank you

    0
    Comment actions Permalink
  • Avatar
    Eyal Katz Talmon

    Hey Timothy,

    The m3u8 file is a manifest file that includes references for the player to play and in that case the "blob_ilofo1.ts" file.

    Looking at the logs for the failed request, it looks like the "blob_ilofo1.ts" file was requested before it was available. Note that 40x errors are cached in an exponential manner.

    Can you try initiating the stream, wait for 30 seconds, and only then perform a request for the video live stream? I can see that you have autoplay enabled for the video playback - can you disabled it for this purpose?

    Let me know if that helps.

    0
    Comment actions Permalink

Please sign in to leave a comment.