@matlo you'll want to use something like hls.js and the HLS manifest URL

NNat @matlo you'll want to use something like hls.js and the HLS manifest URL

M

matlo•8/25/23, 2:34 PM

thanks! I'll try that.

NNat @matlo you'll want to use something like hls.js and the HLS manifest URL

M

matlo•8/25/23, 3:05 PM

thanks so much, it works.
Leaving here my svelte component if anyone needs it in the future:

<script>
  import Hls from "hls.js";
  import { onMount } from "svelte";
  export let src;

  let videoElement;
  let hlsInstance;

  // force to 1080p
  const targetQualityIndex = 4; 

  onMount(() => {
    if (Hls.isSupported()) {
      hlsInstance = new Hls();
      hlsInstance.loadSource(src);
      hlsInstance.attachMedia(videoElement);

      hlsInstance.on(Hls.Events.MANIFEST_PARSED, () => {
        // Check if the chosen quality index is valid
        console.log(hlsInstance.levels);
        if (targetQualityIndex < hlsInstance.levels.length) {
          hlsInstance.currentLevel = targetQualityIndex;
        }
      });
    } else if (videoElement.canPlayType("application/vnd.apple.mpegurl")) {
      videoElement.src = src;
    }

    return () => {
      if (hlsInstance) {
        hlsInstance.destroy();
      }
    };
  });
</script>

<video
  bind:this={videoElement}
  muted
  autoplay
  playsinline
  loop
  class="w-full h-full object-cover"
>
  Your browser does not support the video tag.
</video>

<script>
  import Hls from "hls.js";
  import { onMount } from "svelte";
  export let src;

  let videoElement;
  let hlsInstance;

  // force to 1080p
  const targetQualityIndex = 4; 

  onMount(() => {
    if (Hls.isSupported()) {
      hlsInstance = new Hls();
      hlsInstance.loadSource(src);
      hlsInstance.attachMedia(videoElement);

      hlsInstance.on(Hls.Events.MANIFEST_PARSED, () => {
        // Check if the chosen quality index is valid
        console.log(hlsInstance.levels);
        if (targetQualityIndex < hlsInstance.levels.length) {
          hlsInstance.currentLevel = targetQualityIndex;
        }
      });
    } else if (videoElement.canPlayType("application/vnd.apple.mpegurl")) {
      videoElement.src = src;
    }

    return () => {
      if (hlsInstance) {
        hlsInstance.destroy();
      }
    };
  });
</script>

<video
  bind:this={videoElement}
  muted
  autoplay
  playsinline
  loop
  class="w-full h-full object-cover"
>
  Your browser does not support the video tag.
</video>

<script>
  import Hls from "hls.js";
  import { onMount } from "svelte";
  export let src;

  let videoElement;
  let hlsInstance;

  // force to 1080p
  const targetQualityIndex = 4; 

  onMount(() => {
    if (Hls.isSupported()) {
      hlsInstance = new Hls();
      hlsInstance.loadSource(src);
      hlsInstance.attachMedia(videoElement);

      hlsInstance.on(Hls.Events.MANIFEST_PARSED, () => {
        // Check if the chosen quality index is valid
        console.log(hlsInstance.levels);
        if (targetQualityIndex < hlsInstance.levels.length) {
          hlsInstance.currentLevel = targetQualityIndex;
        }
      });
    } else if (videoElement.canPlayType("application/vnd.apple.mpegurl")) {
      videoElement.src = src;
    }

    return () => {
      if (hlsInstance) {
        hlsInstance.destroy();
      }
    };
  });
</script>

<video
  bind:this={videoElement}
  muted
  autoplay
  playsinline
  loop
  class="w-full h-full object-cover"
>
  Your browser does not support the video tag.
</video>

<script>
  import Hls from "hls.js";
  import { onMount } from "svelte";
  export let src;

  let videoElement;
  let hlsInstance;

  // force to 1080p
  const targetQualityIndex = 4; 

  onMount(() => {
    if (Hls.isSupported()) {
      hlsInstance = new Hls();
      hlsInstance.loadSource(src);
      hlsInstance.attachMedia(videoElement);

      hlsInstance.on(Hls.Events.MANIFEST_PARSED, () => {
        // Check if the chosen quality index is valid
        console.log(hlsInstance.levels);
        if (targetQualityIndex < hlsInstance.levels.length) {
          hlsInstance.currentLevel = targetQualityIndex;
        }
      });
    } else if (videoElement.canPlayType("application/vnd.apple.mpegurl")) {
      videoElement.src = src;
    }

    return () => {
      if (hlsInstance) {
        hlsInstance.destroy();
      }
    };
  });
</script>

<video
  bind:this={videoElement}
  muted
  autoplay
  playsinline
  loop
  class="w-full h-full object-cover"
>
  Your browser does not support the video tag.
</video>

M

matlo•8/25/23, 3:05 PM

most of it was generated by chatgpt but it works

N

NatOP•8/25/23, 3:06 PM

That was fast

right on!

NNat That was fast 😄 right on!

M

matlo•8/25/23, 3:07 PM

thanks chatgpt

[[FMU][BR] Alexandre Schneider Hey! First time been here o/ Just a quick intro: MY name is Alex, i'm from Bra...

S

sl0wik•8/25/23, 5:26 PM

Bom dia. Yes. "The global rate limit for the Cloudflare API is 1200 requests per five minutes." and to lift it up you need enterprise account. As far I know it can be lifted to 9999 per 5 minutes but you would need to spend $2k+ per month.

J

Jonathan Malko•8/25/23, 7:35 PM

figured out how to craft the tus endpoint in PHP. The sample code in the docs is wrong. Can I PR those?

Ttsmith Yeah that'd be awesome! Where did you find the error?

J

Jonathan Malko•8/25/23, 7:46 PM

on https://developers.cloudflare.com/api/operations/stream-videos-initiate-video-uploads-using-tus

the PHP cURL and guzzle samples read like this:

<?php

$curl = curl_init();

curl_setopt_array($curl, [
  CURLOPT_URL => "https://api.cloudflare.com/client/v4/accounts/account_identifier/stream",
  CURLOPT_RETURNTRANSFER => true,
  CURLOPT_ENCODING => "",
  CURLOPT_MAXREDIRS => 10,
  CURLOPT_TIMEOUT => 30,
  CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
  CURLOPT_CUSTOMREQUEST => "POST",
  CURLOPT_POSTFIELDS => "",
  CURLOPT_HTTPHEADER => [
    "Content-Type: application/json",
    "Tus-Resumable: 1.0.0",
    "Upload-Creator: ",
    "Upload-Length: ",
    "Upload-Metadata: ",
    "X-Auth-Email: "
  ],
]);

$response = curl_exec($curl);
$err = curl_error($curl);

curl_close($curl);

if ($err) {
  echo "cURL Error #:" . $err;
} else {
  echo $response;
}

<?php

$curl = curl_init();

curl_setopt_array($curl, [
  CURLOPT_URL => "https://api.cloudflare.com/client/v4/accounts/account_identifier/stream",
  CURLOPT_RETURNTRANSFER => true,
  CURLOPT_ENCODING => "",
  CURLOPT_MAXREDIRS => 10,
  CURLOPT_TIMEOUT => 30,
  CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
  CURLOPT_CUSTOMREQUEST => "POST",
  CURLOPT_POSTFIELDS => "",
  CURLOPT_HTTPHEADER => [
    "Content-Type: application/json",
    "Tus-Resumable: 1.0.0",
    "Upload-Creator: ",
    "Upload-Length: ",
    "Upload-Metadata: ",
    "X-Auth-Email: "
  ],
]);

$response = curl_exec($curl);
$err = curl_error($curl);

curl_close($curl);

if ($err) {
  echo "cURL Error #:" . $err;
} else {
  echo $response;
}

<?php

$curl = curl_init();

curl_setopt_array($curl, [
  CURLOPT_URL => "https://api.cloudflare.com/client/v4/accounts/account_identifier/stream",
  CURLOPT_RETURNTRANSFER => true,
  CURLOPT_ENCODING => "",
  CURLOPT_MAXREDIRS => 10,
  CURLOPT_TIMEOUT => 30,
  CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
  CURLOPT_CUSTOMREQUEST => "POST",
  CURLOPT_POSTFIELDS => "",
  CURLOPT_HTTPHEADER => [
    "Content-Type: application/json",
    "Tus-Resumable: 1.0.0",
    "Upload-Creator: ",
    "Upload-Length: ",
    "Upload-Metadata: ",
    "X-Auth-Email: "
  ],
]);

$response = curl_exec($curl);
$err = curl_error($curl);

curl_close($curl);

if ($err) {
  echo "cURL Error #:" . $err;
} else {
  echo $response;
}

<?php

$curl = curl_init();

curl_setopt_array($curl, [
  CURLOPT_URL => "https://api.cloudflare.com/client/v4/accounts/account_identifier/stream",
  CURLOPT_RETURNTRANSFER => true,
  CURLOPT_ENCODING => "",
  CURLOPT_MAXREDIRS => 10,
  CURLOPT_TIMEOUT => 30,
  CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
  CURLOPT_CUSTOMREQUEST => "POST",
  CURLOPT_POSTFIELDS => "",
  CURLOPT_HTTPHEADER => [
    "Content-Type: application/json",
    "Tus-Resumable: 1.0.0",
    "Upload-Creator: ",
    "Upload-Length: ",
    "Upload-Metadata: ",
    "X-Auth-Email: "
  ],
]);

$response = curl_exec($curl);
$err = curl_error($curl);

curl_close($curl);

if ($err) {
  echo "cURL Error #:" . $err;
} else {
  echo $response;
}

Cloudflare API Documentation

Interact with Cloudflare's products and services via the Cloudflare API

J

Jonathan Malko•8/25/23, 7:47 PM

but this does not prompt curl to return headers (1) and it does not help you to return headers for any tus uploader (2)

J

Jonathan Malko•8/25/23, 7:51 PM

in order to fetch headers from curl the way we need, gotta slot in a couple extra params:

CURLOPT_HEADER => true,
CURLOPT_NOBODY => true,

CURLOPT_HEADER => true,
CURLOPT_NOBODY => true,

CURLOPT_HEADER => true,
CURLOPT_NOBODY => true,

CURLOPT_HEADER => true,
CURLOPT_NOBODY => true,

and then we get the headers back as a string - so I ended up doing this:

          if ($err) {    
      
            echo "cURL Error #:" . $err;    
                                                         
          } else {    
              // parse response headers from string to array    
              $response_headers = [];    
              $response_headers_string = substr($response, 0, strpos($response, "\r\n\r\n"));    
              foreach (explode("\r\n", $response_headers_string) as $i => $line) {    
                  if ($i === 0) {    
                      $response_headers['http_code'] = $line;    
                  } else {    
                      list ($key, $value) = explode(': ', $line);    
                      $response_headers[$key] = $value;    
                  }    
              }                                                 
                                                            
              $destination = $response_headers["Location"];    
              return response()    
                  ->noContent()    
                  ->header('Access-Control-Expose-Headers', 'Location')    
                  ->header('Access-Control-Allow-Headers', '*')    
                  ->header('Access-Control-Allow-Origin', '*')                                              
                  ->header('Location', $destination);    
          }

          if ($err) {    
      
            echo "cURL Error #:" . $err;    
                                                         
          } else {    
              // parse response headers from string to array    
              $response_headers = [];    
              $response_headers_string = substr($response, 0, strpos($response, "\r\n\r\n"));    
              foreach (explode("\r\n", $response_headers_string) as $i => $line) {    
                  if ($i === 0) {    
                      $response_headers['http_code'] = $line;    
                  } else {    
                      list ($key, $value) = explode(': ', $line);    
                      $response_headers[$key] = $value;    
                  }    
              }                                                 
                                                            
              $destination = $response_headers["Location"];    
              return response()    
                  ->noContent()    
                  ->header('Access-Control-Expose-Headers', 'Location')    
                  ->header('Access-Control-Allow-Headers', '*')    
                  ->header('Access-Control-Allow-Origin', '*')                                              
                  ->header('Location', $destination);    
          }

          if ($err) {    
      
            echo "cURL Error #:" . $err;    
                                                         
          } else {    
              // parse response headers from string to array    
              $response_headers = [];    
              $response_headers_string = substr($response, 0, strpos($response, "\r\n\r\n"));    
              foreach (explode("\r\n", $response_headers_string) as $i => $line) {    
                  if ($i === 0) {    
                      $response_headers['http_code'] = $line;    
                  } else {    
                      list ($key, $value) = explode(': ', $line);    
                      $response_headers[$key] = $value;    
                  }    
              }                                                 
                                                            
              $destination = $response_headers["Location"];    
              return response()    
                  ->noContent()    
                  ->header('Access-Control-Expose-Headers', 'Location')    
                  ->header('Access-Control-Allow-Headers', '*')    
                  ->header('Access-Control-Allow-Origin', '*')                                              
                  ->header('Location', $destination);    
          }

          if ($err) {    
      
            echo "cURL Error #:" . $err;    
                                                         
          } else {    
              // parse response headers from string to array    
              $response_headers = [];    
              $response_headers_string = substr($response, 0, strpos($response, "\r\n\r\n"));    
              foreach (explode("\r\n", $response_headers_string) as $i => $line) {    
                  if ($i === 0) {    
                      $response_headers['http_code'] = $line;    
                  } else {    
                      list ($key, $value) = explode(': ', $line);    
                      $response_headers[$key] = $value;    
                  }    
              }                                                 
                                                            
              $destination = $response_headers["Location"];    
              return response()    
                  ->noContent()    
                  ->header('Access-Control-Expose-Headers', 'Location')    
                  ->header('Access-Control-Allow-Headers', '*')    
                  ->header('Access-Control-Allow-Origin', '*')                                              
                  ->header('Location', $destination);    
          }

J

Jonathan Malko•8/25/23, 7:52 PM

making these changes would make it work in place of the JS/webworker example in your "get it working fast" example, which I assume you want devs to copy-paste to see how easy it is: https://developers.cloudflare.com/stream/uploading-videos/direct-creator-uploads/#advanced-upload-flow-using-tus-for-large-videos

Direct creator uploads · Cloudflare Stream docs

Direct creator uploads let your end users to upload videos directly to Cloudflare Stream, without exposing your API token to clients.

J

Jonathan Malko•8/25/23, 7:52 PM

*the response would need to be reworked for plain PHP, i'm using laravel

J

Jonathan Malko•8/25/23, 7:53 PM

you're welcome, I hope it helps!

S

Spunkie•8/25/23, 8:50 PM

Does the

Run and edit this code...

Run and edit this code...

link here work for anyone else?
https://developers.cloudflare.com/stream/examples/stream-player/

Stream Player · Cloudflare Stream docs

Run and edit this code in your browser on StackBlitz.

뽀

뽀삐2•8/27/23, 5:50 AM

Does Cloudflare Stream charge $1 per 1,000 minutes of streaming regardless of the number of viewers when streaming with the whip protocol?

Y

yapa•8/27/23, 7:44 PM

hey guys, i have a 201MB video, ( DOWNLOAD Mbps 125.85,UPLOAD Mbps 11.18)i cannot upload long videos whereas 36MB videos upload smoothly what might be getting wrong(once uploaded it plays seamlessly ), what might be wrong

Y

yapa•8/27/23, 7:44 PM

?

J

jivan•8/28/23, 4:44 AM

Streams webhook are not working.
I want webhooks to fire when stream start & stop, but it seems they are not being fired.
Here's my account ID - 51f88263baaa48f7b80752a2b3f6576a
Is it a bug or it needs to be enable ?

A

alphaβiota | Ekonavi•8/28/23, 5:36 PM

Hi! How can I get bundle without canceling images and risking interruption of service? I just want to add video steaming. This feels like bad UX to me. Please help!

M

mailman•8/28/23, 5:53 PM

Hi! I've had some videos that I've streamed get stuck with their status as "Live" even when I stop streaming to that Live Input. Whenever I go to delete the video, I get a "Not Implemented (Code: 10046)" error with message "You cannot delete in-progress live video. Conclude the live stream and try again.". Because of this, I've slowly had a pile up of videos that are stuck on "Live" that I cannot delete. Does anyone know how to resolve this issue? Alternatively, is there an API-based workaround to reset/force deletion?

Here is the video id of one such video: d2561f193e79399456e9e52a1ed163a0

Aalphaβiota | Ekonavi Hi! How can I get bundle without canceling images and risking interruption of se...

N

NatOP•8/28/23, 6:06 PM

I got stuck on the same thing. I thankfully ran into this before launching my product but I agree, its rough UX for anyone building a user-facing product.

Jjivan Streams webhook are not working. I want webhooks to fire when stream start & sto...

J

jivan•8/29/23, 1:49 PM

Webhook notifications for stream start and stop are not triggering. Can anyone help here please ?

J

Jeff•8/29/23, 2:02 PM

Is it possible to specify allowed origins within a signed URL?

I need to dynamically change the domains allowed for a stream often enough that hitting the Cloudflare API to do this for each video wouldn't be possible

J

Jeff•8/29/23, 7:29 PM

Is there a way to start a video at a specific point in time when the video loads?

Normally on youtube you can add ?t=120 to the URL to do this...does Stream have that functionality?

Lla.x.rc Did it happen recently or it has been happening for a while?

M

mailman•8/29/23, 8:16 PM

I have 6 videos stuck in this state, the oldest one is from 3 months ago and the most recent one is from 22 days ago

R

rnewmanjr•8/29/23, 9:24 PM

Possibly a dumb question but I am really new to live stream. I have 1000 minutes a month. If I send to facebook and youtube as live does the minutes viewed on their platforms count against my minutes or just the total time sent to their platforms? I send 60 minutes live to fb and yt. 1 viewer each platform. thats 120 minutes total.

L

leesus•8/30/23, 10:52 AM

I am creating direct upload URLs for users to upload video. These are set to expire after 5 minutes. If a user starts to upload a file and then cancels the upload, the “pending upload” links remain in the dashboard indefinitely.

My webhook is not called with an upload failure as I would expect, and the links are not deleted from the dashboard after 5 minutes as I’d expect either.

Are these bugs, or expected behaviour? The former issue is problematic for my app, but the latter issue leads me to believe we will be charged for all these expired pending uploads.

Can anyone from Cloudflare side help with this? I reached out to support over a month ago and have had no response.

A

Altrius•8/31/23, 6:32 PM

I would be interested in a version of Stream which was built for audio content, instead of just video content

not sure if thats niche or not though haha

A

arggh•9/1/23, 12:12 PM

BUG: Playing a vertical aspect ratio video clips the top off and shows a large black bar between the actual video content and the player's control bar on Mac OS / Safari 16.6. Other browsers seem unaffected. Regular landscape format video also works as expected.

J

jivan•9/1/23, 5:42 PM

Hi folks ... Seems like I can not run 24x7 stream. It's stopping automatically after 5 hours. Is this a limitation or I'm doing something wrong here ...?

U

Unsmart•9/1/23, 6:00 PM

You can stream 24x7. I would check you settings and ensure you bitrate isnt too high and that your internet is not having issues causing disconnects.

U

Unsmart•9/1/23, 6:04 PM

Only limitations really for streaming 24x7 is that recordings of a 24x7 stream will be limited to the first 7 days. Disconnects can happen at any point regardless though due to many factors so make sure you reconnect on any issues.

AAltrius I would be interested in a version of Stream which was built for audio content, ...

G

Gagan Suie•9/1/23, 7:43 PM

The Mage-Web repository has examples of just doing audio. It's just using WebRTC Whip/Whep but sending audio only. You would consume that in a <video> element.

UUnsmart Only limitations really for streaming 24x7 is that recordings of a 24x7 stream w...

J

jivan•9/1/23, 8:06 PM

Thanks for the suggestion.
Also Webhook notifications for stream start and stop are not triggering. Can you help with that ?

U

Unsmart•9/1/23, 8:07 PM

Never used them so not sure how they work at all. All I can offer at the docs: https://developers.cloudflare.com/stream/stream-live/webhooks/

UUnsmart Never used them so not sure how they work at all. All I can offer at the docs: <...

J

jivan•9/1/23, 8:10 PM

Following doc Already subscribed to but not reciving alerts of stream strat or stop. Additionalaly I read somewhere in doc that webhooksnneeds to be enabled in account. So for that whom should I contact ?

Jjivan Following doc Already subscribed to but not reciving alerts of stream strat or s...

J

jivan•9/1/23, 8:13 PM

I believe we have enterprise plan as well.

Jjivan Following doc Already subscribed to but not reciving alerts of stream strat or s...

E

Erisa•9/1/23, 8:58 PM

?support

@matlo you'll want to use something like hls.js and the HLS manifest URL

Similar Threads

Similar Threads

Similar Threads