Post Closed
98
Views
7
Comments
Solved
[PWA Camera & Microphone] How can I play the blob?
pwa-camera-microphone
Reactive icon
Forge asset 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

2020-03-01 17-52-33
Nikhil Gaur
Solution

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.


CameraMicrophoneSample.oml
2020-03-01 17-52-33
Nikhil Gaur

Hi Denis,

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


ReactiveSamples.oml
UserImage.jpg
Denis Orlandi de Souza

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;

2020-03-01 17-52-33
Nikhil Gaur

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;

UserImage.jpg
Denis Orlandi de Souza

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


CameraMicrophoneSample.oml
2020-03-01 17-52-33
Nikhil Gaur

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


UserImage.jpg
Denis Orlandi de Souza

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...


CameraMicrophoneSample.oml
2020-03-01 17-52-33
Nikhil Gaur
Solution

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.


CameraMicrophoneSample.oml