useVideoTexture doesn't work in react native

[ivanoikon]

• three version: 0.164.1
• @react-three/fiber version: 8.16.3
• @react-three/drei version: 9.105.6
• node version: 21.4.0
• npm version: 10.2.4

Problem description:

useVideoTexture throws an error:
TypeError: Cannot read property 'href' of undefined
This error is located at:
in Unknown
in FiberProvider
in CanvasWrapper (created by App)
in RCTView (created by View)
in View (created by App)
in App
in RCTView (created by View)
in View (created by AppContainer)
in RCTView (created by View)
in View (created by AppContainer)
in AppContainer
in RN3FDemo(RootComponent), js engine: hermes

Relevant code:

import React, {Suspense} from 'react';
import {Canvas} from '@react-three/fiber/native';
import {useVideoTexture} from '@react-three/drei/native';
import * as THREE from 'three';

...

function Dome() {
  const videoTexture = useVideoTexture(require('./vr_demo.mp4'));

  return (
    <mesh>
      <sphereGeometry attach="geometry" args={[500, 60, 40]} />
      <meshBasicMaterial
        map={videoTexture}
        side={THREE.BackSide}
      />
    </mesh>
  );
}

function App(): React.JSX.Element {

  return (
<View style={{flex: 1}}>
      <Canvas camera={{position: [0, 0, 0.1]}}>
        <Suspense fallback={null}>
          <Dome />
        </Suspense>
      </Canvas>
</View>
  );
}

export default App;

Any solution?

[netgfx]

I'm guessing it is due to this line: https://github.com/pmndrs/drei/blob/bed21ea90e8de8a1bfc0dc8129dbf723dd634699/src/core/useVideoTexture.tsx#L46C3-L46C80

Perhaps we should add:

let baseUrl;
if (IS_BROWSER) {
  // In a browser environment (React)
  baseUrl = window.location.href;
} else {
  // In a React Native environment
  baseUrl = undefined
}

 const url = new URL(typeof src === 'string' ? src : '', baseUrl)

according to MSDN undefined is the default option for base option on the URL constructor

[ivanoikon]

I'm guessing it is due to this line: https://github.com/pmndrs/drei/blob/bed21ea90e8de8a1bfc0dc8129dbf723dd634699/src/core/useVideoTexture.tsx#L46C3-L46C80

Perhaps we should add:

let baseUrl;
if (IS_BROWSER) {
  // In a browser environment (React)
  baseUrl = window.location.href;
} else {
  // In a React Native environment
  baseUrl = undefined
}

 const url = new URL(typeof src === 'string' ? src : '', baseUrl)

according to MSDN undefined is the default option for base option on the URL constructor

Probably there's a problem with 'document' in line 54 too

[netgfx]

If HTML Video element cannot be created then I guess useVideoTexture can't work in ReactNative at all

[ivanoikon]

If HTML Video element cannot be created then I guess useVideoTexture can't work in ReactNative at all

It seems you are right considering #1738. Any workaround?