[PWA Camera & Microphone] How can I play the blob?

Forge Component
(0)
Published on 12 Mar by Ruben Goncalves
0 votes
Published on 12 Mar by Ruben Goncalves

Hi,


I'm trying to figure out how I can play the blob on the browser.


Would you have any example for Reactive app?


Thanks.


Denis Orlandi de Souza

Hi Denis,

PFA one small sample for displaying video in an HTML video tag using blob URL


Nikhil Gaur wrote:

Hi Denis,

PFA one small sample for displaying video in an HTML video tag using blob URL


Hi Nikhil. 

Thanks for your prompt answer.


In this case I should pass the blob on the first line, instead of the upload element?

From:
var fileItem = document.getElementById($parameters.UploadId).getElementsByTagName('input')[0];


To:
var fileItem = blob;

No, if you already have your blob URL then you can skip the first 4 line which are actually for reading file from upload widget and creating object url.

Just use your URL to assign in below statement in the sample app

video.src = blob;

Nikhil Gaur wrote:

No, if you already have your blob URL then you can skip the first 4 line which are actually for reading file from upload widget and creating object url.

Just use your URL to assign in below statement in the sample app

video.src = blob;

Hi Nikhil.


Could you have a look on the sample attached please? I passed the Object (blob) as input parameter to the javascript and replaced the variable on the createObjectURL($Parameter), but it is not working.


Screen: SimpleUsage Action: MediaRecordingOnClick


Try to play your blob in a different video tag than existing one. Your existing tag is already in use by below action.

SyntaxEditor Code Snippet

StartCaptureAudioAndVideo


Nikhil Gaur wrote:

Try to play your blob in a different video tag than existing one. Your existing tag is already in use by below action.

SyntaxEditor Code Snippet

StartCaptureAudioAndVideo


I added a second player, but it does nothing...


Here you go.... PFA updated oml

Issue with your code was that you had two video tags in your screen and you were still picking the first tag in JS to set your blob URL. Change it from getElementsByTagName and picking from 0 index to getElementById.