marek-simonik / record3d-wifi-streaming-and-rgbd-mp4-3d-video-demo

MIT License
29 stars 7 forks source link

Is that possible to put RGBD video into aframe #7

Open jamess922 opened 1 year ago

jamess922 commented 1 year ago

Hi marek-simonik: I working with aframe right now ,so just want to know is that possible to put RGBD video from record3d into aframe like your ar demo with three.js

marek-simonik commented 1 year ago

Hi, I'm not sure if I understood your question correctly. The ar.html file shows how to render an RGBD mp4 video (exported by Record3D) via AFrame, using three.js. Let me know if you have any follow-up questions.

jamess922 commented 1 year ago

Hi Thank you for your reply,I mean render RGBD mp4 directly via aframe like aframe example, not very familiar with three.js

marek-simonik commented 1 year ago

Oh, I think I understand now. You want to use only AFrame to render the RGBD videos, without using three.js? So ideally something like this?

<a-scene>
  <a-r3d-video src="https://<some-server>/r3d-rgbd-video.mp4"></a-r3d-video>
</a-scene>

I'm not as familiar with AFrame to be able to implement this feature, and I'm afraid that even when creating such a wrapper HTML tag, three.js would still be required, because it's used to specify vertex/fragment shader that renders the point cloud using HW acceleration, which makes the whole demo playable in real-time. Moreover, AFrame uses three.js internally too.

If all you want is not to deal with three.js-related code, then you can treat the JS classes that this demo provides (e.g. Record3DVideo, OfflineVideoSource) as a library (i.e. just use its API, without worrying about the three.js-related internals). After all, the ar.html demo is quite simple: here is the relevant code — that is pretty much all you need to know to use this demo in your own project. That portion of code is similar to the following:

<a-scene vr-mode-ui="enabled:false;"
         renderer="logarithmicDepthBuffer: true;"
         embedded="true" 
         aris="trackingMethod: best; sourceType: webcam;debugUIEnabled: false;">

    <a-marker-camera preset="hiro">

        <a-entity>
            <!-- This AFrame object does internally hold a Three.js point cloud
                 provided by this Record3D demo. JS is used to populate the internal 3D object
                 of this <a-entity> tag by a three.js 3D object (the point cloud):

                     let offlineVideo = new Record3DVideo(videoSource);
                     let ptCloudObj = offlineVideo.videoObject;
                     aEntity.object3D.add(ptCloudObj);

               You can then use the interface/API of Record3DVideo to play/pause the video and more.
            -->
        <a-entity> 

    </a-marker-camera>

</a-scene>
jamess922 commented 1 year ago

First Record3D is the coolest app I've ever seen,and about the VideoSource ,What should I do if I want to use just a local videosource

jamess922 commented 1 year ago

Try withlet offlineVideo = new Record3DVideo(assets/myvideo.mp4); not work

marek-simonik commented 1 year ago

Thanks :)

The ar.html file already allows you to load a local file stored on your phone via a <input type="file"> tag (JS doesn't have direct access to the filesystem, so you can only read local files that the user explicitly grants you access to via the file upload form (that's why it's not as simple as using a string with a local file path).

Try withlet offlineVideo = new Record3DVideo(assets/myvideo.mp4); not work

Please take a closer look at the ar.html file and you will see it demonstrates two ways how to load an mp4 video:

The Record3DVideo class takes as a parameter one of the VideoSource classes, so you cannot directly pass a string with a video URL to it. See this excerpt.

jamess922 commented 1 year ago

I see, i will check the code again I'm going to use a new Iphone, so I'm trying to import the data from the Record3D on the old Iphone to the new Iphone, but I can't find a way,So how to do that in Record3D

marek-simonik commented 1 year ago

To transfer your 3D videos from the old iPhone to the new iPhone, you can can export all videos into the "Shareable/Internal format (.r3d)". Note that it's possible to export multiple (or all) videos at once (tap the "Edit" button in the top right corner of the Library).

An exported r3d file take about the same amount of disk space as the 3D video itself, so make sure you have enough disk space if you plan to export all 3D videos into .r3d at once. Alternatively, you can export your videos in smaller-sized batches.

Once you will have the videos exported into .r3d on your old iPhone, you can copy them to the new iPhone in several ways; here are some of the possibilities:

Via AirDrop

You can send each .r3d video manually one-by-one and once received on your new iPhone, open the .r3d file in Record3D and it will be automatically imported into the Library.

Via the Files app or File Sharing

If you have a lot of 3D videos, it might be tedious to import them one-by-one. An alternative is to use either the iOS Files app or the File Sharing feature of iTunes (if you are on Windows) / Files (if you are on macOS) to copy the .r3d file from your old iPhone and put them in the root of the "Record3D" folder (iOS Files app > [On my iPhone] > Record3D > dump all .r3d files here).

Then just open Record3D and wait until all the .r3d videos get automatically imported into the Library.

Once they will be imported, switch between the Library and Record tabs in Record3D to update the Library and check that all your videos have been imported. Once you will confirm that all videos have been successfully imported, then you can safely remove the .r3d files from the root of the Record3D folder in the Files app.

Once you remove the .r3d files via the Files app, don't forget to remove the .r3d files also from Trash in the Files app, otherwise your disk space will not be freed.

jamess922 commented 1 year ago

Thank you ! your are so nice.