How to stream Video that are stored in Azure storage Blob using Xamarin

Question

I have uploaded video files to Azur Blob(Containers),I want to access them in the mobile app via Streaming.I have files with extention .mp4 . I have done code to download from blob and Store in local drive then play using default player , But I want to give user a option to stream instead of download. I have used this method

var credentials = new StorageCredentials("myaccountname", "mysecretkey");
    var account = new CloudStorageAccount(credentials, true);
    var container = account.CreateCloudBlobClient().GetContainerReference("yourcontainername");
    var blob = container.GetBlockBlobReference("yourmp4filename");
    var sas = blob.GetSharedAccessSignature(new SharedAccessBlobPolicy()
    {
        Permissions = SharedAccessBlobPermissions.Read,
        SharedAccessExpiryTime = DateTime.UtcNow.AddHours(1),//Set this date/time according to your requirements
    });
    var urlToBePlayed = string.Format("{0}{1}", blob.Uri, sas);//This is the URI which should be embedded in your video player.

Problem:- If I browse the Url(Blob Url) , It downloads the file instead of directly playing it .But in App , Nothing appears. Blank screen. I am using

<WebView Source="{Binding VideoUrl}" HeightRequest="200" WidthRequest="200"/>

In Vm:

VideoUrl=url;

Can you check the ContentType of your video blob? It impacts the behavior of how browser does upon it. If it's default value `application/octet-stream`, it's supposed to be downloaded, then you need to change it to `video/mp4`. — Zhaoxing Lu, Jul 26 '19 at 10:54
@ZhaoxingLu-Microsoft, Thanks for the reply . I have tried [this](https://stackoverflow.com/a/10040559/10223206) . Seems ListBlob is not available and for ListBlobsSegmentedAsync , I cant find one .I was hoping I could find one using ListBlobsSegmentedAsync .Can you help ? — Nancy Kanwar, Jul 26 '19 at 11:43
Is this what you need? https://stackoverflow.com/a/54934260/2995449 — Zhaoxing Lu, Jul 26 '19 at 12:37
No . I converted it using ListBlobsSegmentedAsync .Now it's playing in browser and App too..It was like solving one puzzle and jumping to another . Thanks @ZhaoxingLu-Microsoft :) — Nancy Kanwar, Jul 26 '19 at 12:45

score 2 · Accepted Answer · edited Sep 16 '19 at 13:56

First Change content Type : like @Zhaoxing Lu - Microsoft said

public async Task ChangeContentTypeAsync()
{
    try
    {
        UserDialogs.Instance.ShowLoading();
        BlobContinuationToken blobContinuationToken = null;
        var storageAccount = CloudStorageAccount.Parse(storageConnectionString);
        var blobClient = storageAccount.CreateCloudBlobClient();
        var container = blobClient.GetContainerReference("videos");
        var results = await container.ListBlobsSegmentedAsync(null, blobContinuationToken);
        blobContinuationToken = results.ContinuationToken;

        BlobResultSegment blobs = await blobClient
            .GetContainerReference("videos")
            .ListBlobsSegmentedAsync(blobContinuationToken)
            ;

        foreach (CloudBlockBlob blob in blobs.Results)
        {
            if (Path.GetExtension(blob.Uri.AbsoluteUri) == ".mp4")
            {
                blob.Properties.ContentType = "video/mp4";
            }
            //// repeat and  resume
            await blob.SetPropertiesAsync();
        }
        UserDialogs.Instance.HideLoading();
    }
    catch (Exception ex)
    {
        var m = ex.Message;
    }

}

Then Use this method :

private async Task StreamVideo(string filename)
{
    try
    {
        UserDialogs.Instance.ShowLoading();
        await azureBlob.ChangeContentTypeAsync();
        var secretkey = "xxxx";
        var credentials = new StorageCredentials("chatstorageblob", secretkey);
        var account = new CloudStorageAccount(credentials, true);
        var container = account.CreateCloudBlobClient().GetContainerReference("videos");
        var blob = container.GetBlockBlobReference(filename);
        var sas = blob.GetSharedAccessSignature(new SharedAccessBlobPolicy()
        {
            Permissions = SharedAccessBlobPermissions.Read,
            SharedAccessExpiryTime = DateTime.UtcNow.AddHours(1),//Set this date/time according to your requirements
        });
        var urlToBePlayed = string.Format("{0}{1}", blob.Uri, sas);//This is the URI which should be embedded in your video player.
        await Navigation.PushAsync(new VideoPlayerPage(urlToBePlayed));
        UserDialogs.Instance.HideLoading();
    }
    catch (Exception ex)
    {
        var m = ex.Message;
    }
}

How to stream Video that are stored in Azure storage Blob using Xamarin

1 Answers1