Play HLS videos from S3 bucket using CloudFront as CDN and temporary URLs

To play HLS videos from an S3 bucket using CloudFront as a CDN and temporary URLs, you need to ensure that all parts of the HLS stream (the .m3u8 playlist, .ts segments, and .key files) are accessible via signed URLs. Here are the steps to achieve this:

1. Ensure CloudFront Distribution is Set Up Correctly:

   • Make sure your CloudFront distribution is configured to use your S3 bucket as the origin.
   • Ensure that the CloudFront distribution has the necessary permissions to access your S3 bucket.

2. Generate Signed URLs for HLS Components:

   • You need to generate signed URLs for the .m3u8 file, all .ts files, and .key files. Laravel's Storage facade can help you generate these URLs.

3. Serve the HLS Playlist with Signed URLs:

   • Modify the .m3u8 playlist to include signed URLs for each .ts segment and .key file.

Here is a step-by-step guide with code examples:

Step 1: Generate Signed URLs

First, generate signed URLs for the .m3u8 file, .ts files, and .key files using Laravel's Storage facade.

use Illuminate\Support\Facades\Storage;
use Carbon\Carbon;

// Generate a signed URL for the .m3u8 file
$m3u8Url = Storage::disk('s3')->temporaryUrl(
    'path/to/your/file.m3u8', 
    Carbon::now()->addMinutes(60)
);

// Generate signed URLs for .ts files
$tsFiles = [
    'path/to/your/file1.ts',
    'path/to/your/file2.ts',
    // Add all your .ts files here
];

$signedTsUrls = [];
foreach ($tsFiles as $tsFile) {
    $signedTsUrls[] = Storage::disk('s3')->temporaryUrl(
        $tsFile, 
        Carbon::now()->addMinutes(60)
    );
}

// Generate signed URLs for .key files
$keyFiles = [
    'path/to/your/file1.key',
    'path/to/your/file2.key',
    // Add all your .key files here
];

$signedKeyUrls = [];
foreach ($keyFiles as $keyFile) {
    $signedKeyUrls[] = Storage::disk('s3')->temporaryUrl(
        $keyFile, 
        Carbon::now()->addMinutes(60)
    );
}

Step 2: Modify the .m3u8 Playlist

You need to modify the .m3u8 playlist to include the signed URLs for the .ts segments and .key files. This can be done programmatically.

// Load the .m3u8 file content
$m3u8Content = Storage::disk('s3')->get('path/to/your/file.m3u8');

// Replace the .ts and .key file paths with signed URLs
foreach ($tsFiles as $index => $tsFile) {
    $m3u8Content = str_replace($tsFile, $signedTsUrls[$index], $m3u8Content);
}

foreach ($keyFiles as $index => $keyFile) {
    $m3u8Content = str_replace($keyFile, $signedKeyUrls[$index], $m3u8Content);
}

// Save the modified .m3u8 content to a new file or serve it directly
Storage::disk('s3')->put('path/to/your/signed_file.m3u8', $m3u8Content);

Step 3: Serve the Modified .m3u8 File

Finally, serve the modified .m3u8 file with signed URLs.

// Generate a signed URL for the modified .m3u8 file
$signedM3u8Url = Storage::disk('s3')->temporaryUrl(
    'path/to/your/signed_file.m3u8', 
    Carbon::now()->addMinutes(60)
);

// Return the signed URL to the client
return response()->json(['url' => $signedM3u8Url]);

Debugging Tips

• Ensure that the CloudFront distribution is correctly set up and has the necessary permissions to access the S3 bucket.
• Verify that the signed URLs are correctly generated and not expired.
• Check the .m3u8 file to ensure that the paths to the .ts and .key files are correctly replaced with signed URLs.
• Use tools like curl or Postman to test the signed URLs and ensure they are accessible.

By following these steps, you should be able to play HLS videos from an S3 bucket using CloudFront as a CDN with temporary URLs.