Is it possible to add watermarks to recorded videos using threejs instead of Aframe?

Technical Support
, ,
1

In the docs, i see how to add watermarks to recorded videos using Aframe as follows:

<xrextras-capture-config
  watermark-image-url="//cdn.8thwall.com/web/img/mediarecorder/8logo.png"
  watermark-max-width="100"
  watermark-max-height="10"
  watermark-location="bottomRight"
></xrextras-capture-config>

Is it possible to add a watermark to recorded videos using Threejs?

2

Hey Sina! You can use XR8.MediaRecorder.configure() in three.js projects.

For example: three.js: Face Effects | 8th Wall | 8th Wall

3

Great. i got that to work but I only see the xr8extras in the example you sent, but I dont see the parameters in the docs. Do you know where i can find the docs for XRExtras.MediaRecorder.configure?

  XRExtras.MediaRecorder.configure({
    watermarkImageUrl: require('./assets/Logos/8logo.png'),  // Adds watermark to photo/video
    watermarkMaxWidth: 100,
    watermarkMaxHeight: 10,
  })

These are the parameters i see in the example, but im trying to find how i can replicate the watermark-location from Aframe into threejs

4

I see - there is definitely room for improvement in our documentation here. Try using watermarkLocation. The values should be the same (one of topLeft, topMiddle, topRight, bottomLeft, bottomMiddle, bottomRight).

5

Perfect. Works! Thanks so much.