CODEWITHSUNDEEP
javascriptazurewebcamazure-media-services
Urielzen
Urielzen

Reputation: 506

Azure Media Service upload file directly from webcam

I have looked at the documentation for Azure Media Services, but I could not find any docs or samples that talk about uploading a video from a browser using the webcam.

I am already using MediaRecorder api in the browser to record the webcam video and then upload... but I was wondering if there was a better alternative than 'MediaRecorder'?

Since Microsoft already provides a media player to play the videos, I was wondering if in a similar way, Microsoft maybe had a js library to do the video recording on the frontend and upload accordingly?

Edit: My intent is not to live stream from the browser, but to upload the file to AMS and play in the Azure media player at a later time.

Upvotes: 0

Views: 442

Answers (1)

johndeu
johndeu

Reputation: 2512

EDIT: Originally answered this thinking you meant live... But I see now you meant on-demand recorded files. I will leave the live section below.

On-Demand:

For the on-demand scenario, you should also be able to use the Media Recorder API to save the asset into local storage.

There are some good examples of doing that recording to storage out there, but the main API doc is here and has some guidance on how to save the output. The output could be WebM or MP4 depending on browser capabilities. https://developer.mozilla.org/en-US/docs/Web/API/MediaStream_Recording_API

Once you have a local file, the steps to get that into AMS would be:

  1. Create an Asset
  2. Get the container name from the new Asset (we generate one for you, or you can pass the name of the container into the Asset create call)
  3. Use the Azure Blob storage SDK to get a writeable SAS locator to upload the file into the container.

Useful example code:

Example of creating an Asset with a specific Blob container name

Previous Stack thread on uploading from browser to blob storage container

Azure Storage Javascript client samples

// If one file has been selected in the HTML file input element
var file = document.getElementById('fileinput').files[0];

var customBlockSize = file.size > 1024 * 1024 * 32 ? 1024 * 1024 * 4 : 1024 * 512;
blobService.singleBlobPutThresholdInBytes = customBlockSize;

var finishedOrError = false;
var speedSummary = blobService.createBlockBlobFromBrowserFile('mycontainer', file.name, file, {blockSize : customBlockSize}, function(error, result, response) {
    finishedOrError = true;
    if (error) {
        // Upload blob failed
    } else {
        // Upload successfully
    }
});
refreshProgress();

Disclaimer from me...

Have not tried the above scenario at all myself. Just finding the right resources for you to check. Hope that helps! But, the below scenario I have done for live, and it does work..

Live Scenario:

It's tricky, because Media Services only supports RTMP ingest.

Media Recorder API just records to "slices" of webM or MP4 content in the browser. You have to then push those chunks of media someplace that is capable of sending that content into AMS as RTMP/S. Otherwise, no go.

There is a good example project from Mux up here called Wocket that demonstrates how you could go about building a solution that ingests content from the MediaRecorder API and send it to any RTMP server, but it has to go over a WebSocket connection to a middle tier Docker container that is running FFMPEG. The FFMPEG process receives the webM or MP4 chunks from the Media Recorder and forwards that onto Media Services.

https://github.com/MuxLabs/wocket

I built a demo recently that uses this in Azure, and it surprisingly works... but not really production ready solution - has lots of issues on iOS for example. Also, I had to move the Canvas drawing off the requestAnimationFrame timer and use worker-timers (node.js npm packager) to move the canvas drawing to a web worker. That way I could at least switch focus from different browser tabs or hide the browser without it stopping the webcam. Normally timers like setInterval or setTimeout in the browser will sleep or be throttled in modern browsers to save power and CPU.

Let me know if you want any more details after looking at the Wocket project.

Upvotes: 1

Related Questions