CODEWITHSUNDEEP
google-cloud-platformvideo-streaminggoogle-cloud-storage
sparklyCode
sparklyCode

Reputation: 157

How to stream the videos stored on google cloud storage bucket?

I have stored videos on google cloud storage browser. I want to play these videos on my frontend. For that I need the video URL. But the problem is, whenever I navigate to that URL, the file gets downloaded.

What do I need to do to get the streaming video URL of my stored object?

Upvotes: 9

Views: 13310

Answers (2)

Mayeru
Mayeru

Reputation: 1094

Cloud Storage does support streaming transfers using gcloud. You can also do do streaming transfers on the backend of your application using the third party Boto python lib.

But since you want this solution to be implemented with a fronted I'm guessing you are actually looking for a media player.

So, you will need to:

1.- Generate a SignedUrl of the object (your video):

using gcloud command:

gsutil signurl -d 10m Desktop/private-key.json gs://example-bucket/cat.jpeg

using python lib:

from google.cloud import storage
import datetime
    
def generate_download_signed_url_v4(bucket_name, blob_name):
    """
    Generates a signed URL for downloading a blob.
    
    Note that this method requires a service account key file. You can not use
    this if you are using Application Default Credentials from Google Compute
    Engine or from the Google Cloud SDK.
    """

    storage_client = storage.Client.from_service_account_json('key.json')
    bucket = storage_client.get_bucket(bucket_name)
    blob = bucket.blob(blob_name)
    
    url = blob.generate_signed_url(
         # This URL is valid for 15 minutes
         expiration=datetime.timedelta(minutes=15),
         # Allow GET requests using this URL.
         method='GET'
        )
    
    print('Generated GET signed URL:')
    print(url)
    print('You can use this URL with any user agent, for example:')
    print('curl \'{}\''.format(url))
    return url
    
generate_download_signed_url_v4("example-id", "example.mp4")

2.- Initialize an HMTL5 media player with that url:

<!DOCTYPE html>
<html>
    <body>
    <video width="320" height="240" controls>
      <source src="video-signedurl.mp4" type="video/mp4">
    Your browser does not support the video tag.
    </video>
    </body>
</html>

Upvotes: 5

sparklyCode
sparklyCode

Reputation: 157

I accomplished this using video.js.

<html>
<head>
<link href="https://unpkg.com/video.js/dist/video-js.css" rel="stylesheet">
<style>
  .video-js {
    width: 600px;
    height: 600px;
  }
</style>
</head>
<body>
<video-js controls data-setup="{}">
  <source src="https://storage.cloud.google.com/bucketName/folderName/recordingName.flv" type="video/flv">
</video-js>

<script src="https://unpkg.com/video.js/dist/video.min.js"></script>
<script src="https://unpkg.com/videojs-flash/dist/videojs-flash.min.js"></script>
</body>
</html>

Upvotes: 5

Related Questions