82
Views
4
Comments
[PWA Camera & Microphone] How can I take the video recording and save it directly to the local DB or server DB?
pwa-camera-microphone
Reactive icon
Forge asset by Ruben Goncalves
Application Type
Mobile, Reactive
Service Studio Version
11.12.2 (Build 49949)
Platform Version
11.13.0 (Build 31107)

How can I take the video recording from this component and save it directly into the local DB or server DB as binary, instead of downloading it locally?


2023-10-27 15-23-54
Jonathan Sullivan
Staff

I added Javascript in the MediaRecordingOnClick action after the recording stop to grab base64 through a file reader. Then you can convert to binary from b64 with binary component or binary client components before saving to DB or something like S3:

var reader = new window.FileReader();

reader.readAsDataURL($parameters.Object); // JS Input param of Type Object from StopRecording's recorded object

reader.onloadend = function(){    

   var fulltext = reader.result;   

   var justb64 = fulltext.substr(fulltext.indexOf('base64,')+7)    //B64 data starts after 'base64,'

   $parameters.b64Out = justb64;     //Output of base64 that can be converted to binary

   $resolve();    //To await the filereader promise and set output param correctly

};

2024-07-17 07-59-24
Pratya Homhual

Can I swap front and back camera.

2023-10-27 15-23-54
Jonathan Sullivan
Staff

Hi @Pratya Homhual please create a new question for separate questions in the future. 

That being said, I don't have a nice example for this, but theoretically you could clone the PWA_CameraMicrophone module or edit yours directly if you prefer.  Under Interface, Scripts in Service Studio, you can adjust the MediaController Script to allow for an input type of front or back camera and use that value in line 24 which currently reads: 

let mediaPromise = navigator.mediaDevices.getUserMedia({ audio: isAudio, video: isVideo }); 

To pass in the correct facing mode selection into the video property as described here: 

https://stackoverflow.com/questions/52812091/getusermedia-selecting-rear-camera-on-mobile

Then update your consumer module to pass the input parameter correctly. 

2024-07-17 07-59-24
Pratya Homhual

Sorry, I'll do in next time. Firstly I appreciate the things you do so much indeed. This solve my issue.


Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.