CODEWITHSUNDEEP
javascriptphpazureazure-blob-storageazure-media-services
Dalibor Karlović
Dalibor Karlović

Reputation: 568

Upload a file to Azure Media Services asset via Javascript and PHP combo

I'm looking into enabling my users to upload own video files. For this, I'd like to use Azure Media Services. As users will be uploading directly from their device to Azure, the only route seems to be using Shared Access Signatures.

As seen otherwise, the common flow is:

  1. client requests the URL to upload to via a web API
  2. web API will create an asset via AMS SDK (which is a Storage container)
  3. web API will create an write-only SAS URL for that container
  4. web API will return the SAS URL
  5. client does a new request directly to that URL

This all seems good, but most/all examples of doing this are in C# and I need it in PHP. The official SDK closed the issue which asked for the support, there's another one which is open for a year.

I've created a SAS link (using beberlei/azure-blob-storage)

https://media[redacted].blob.core.windows.net/asset-adc73a5d-1500-80c5-173d-f1e5d00fd8b2?st=2016-02-10T15%3A58%3A44.0000000Z&se=2016-02-10T16%3A33%3A44.0000000Z&sr=c&sp=w&sig=O9p6jyAoYltWwUHughaC9g3mBacdBnZEbuBDahPfCFA%3D

but whatever I do, I'm always getting a message:

Signature did not match. String to sign used was w 2016-02-10T15:58:44.0000000Z 2016-02-10T16:33:44.0000000Z /media[redacted]/asset-adc73a5d-1500-80c5-173d-f1e5d00fd8b2

So:

  1. is my understanding of the proper workflow correct here? Do I create the asset first, then create a SAS token on the asset as if it's a plain blob container?
  2. is there an up-to-date PHP library / SDK which I can use to do this?

Upvotes: 1

Views: 1028

Answers (2)

Mingfei Yan
Mingfei Yan

Reputation: 645

If you are uploding video file via JavaScript, you need to set CORS on the storage account under your media services account. Please refer to this documentation to set CORS setting on your blob storage (enable your site to write to storage):https://msdn.microsoft.com/en-us/library/azure/dn535601.aspx. I believe there are some handy tools allow you to that also without writing code.

Upvotes: 1

Dalibor Karlović
Dalibor Karlović

Reputation: 568

As I was typing this question, I came across the answer, hope it helps somebody else so I won't delete it.

The reason it failed because I was using my Media services account name / key for both access to AMS API and for SAS generation. This is wrong. I needed to:

  1. use AMS account / key for creating the asset
  2. use linked storage account / key for creating the SAS URL

I'm getting a CORS-related error here which seems like a step in the right direction, will update if it failed.

Edit 1: it did in fact fail. I needed to update my API calls version to 2013-08-13 and up, this changed the proper SAS checksum generation. Note that the current official PHP SDK will only use storage version 2012-02-12 so you'll be unable to enable CORS with it.

My code is as follows (it's super-messy as I'm doing this as a prototype):

<?php
use Beberlei\AzureBlobStorage\SharedAccessSignature;
use WindowsAzure\Common\Internal\MediaServicesSettings;
use WindowsAzure\Common\ServicesBuilder;
use WindowsAzure\MediaServices\MediaServicesRestProxy;
use WindowsAzure\MediaServices\Models\Asset;

require 'vendor/autoload.php';

$fileName = $_GET['blobName'];
$accountName = '<AMS account>';
$accessKey = '<AMS key>';
$settings = new MediaServicesSettings($accountName, $accessKey);

/** @var MediaServicesRestProxy $proxy */
$proxy = ServicesBuilder::getInstance()->createMediaServicesService($settings);
$asset = new Asset(Asset::OPTIONS_NONE);
$asset->setName($fileName);

/** @var Asset $asset */
$asset = $proxy->createAsset($asset);
$assetId = $asset->getId();
$path = parse_url($asset->getUri(), PHP_URL_PATH);

$startTime = new \DateTime('now -5 minutes');
$expiryTime = new \DateTime('now +30 minutes');
$signatureGenerator = new SharedAccessSignature('<storage account>', '<storage key>');
$signature = $signatureGenerator->createSignedQueryString(
    $path,
    '',
    'c',
    'w',
    isoDate($startTime),
    isoDate($expiryTime)
);

die($asset->getUri().'?'.$signature);

function isoDate(\DateTime $dateTime)
{
    $tz = date_default_timezone_get();
    date_default_timezone_set('UTC');
    $returnValue = str_replace('+00:00', '.0000000Z', date('c', $dateTime->getTimestamp()));
    date_default_timezone_set($tz);

    return $returnValue;
}

Upvotes: 2

Related Questions