feat(useVideoTexture): now accepting a src that is a MediaStream

.storybook/stories/useVideoTexture.stories.tsx

@@ -1,26 +1,28 @@
 import * as React from 'react'
+import { useState } from 'react'
 import * as THREE from 'three'
 
 import { Setup } from '../Setup'
 
-import { Plane, useVideoTexture } from '../../src'
+import { Plane, useVideoTexture, useTexture } from '../../src'
 
 export default {
-  title: 'Loaders/VideoTexture',
+  title: 'Misc/useVideoTexture',
   component: useVideoTexture,
   decorators: [(storyFn) => <Setup>{storyFn()}</Setup>],
 }
 
+//
+// simple
+//
+
 function VideoTexturedPlane() {
-  const videoTexture = useVideoTexture(
-    'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/Sintel.mp4',
-    {}
-  )
+  const texture = useVideoTexture('http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4')
 
   return (
     <>
-      <Plane>
-        <meshBasicMaterial side={THREE.DoubleSide} map={videoTexture} toneMapped={false} />
+      <Plane args={[4, 2.25]}>
+        <meshBasicMaterial side={THREE.DoubleSide} map={texture} toneMapped={false} />
       </Plane>
     </>
   )
@@ -38,3 +40,79 @@ export const UseVideoTextureSceneSt = () => <UseVideoTextureScene />
 UseVideoTextureSceneSt.story = {
   name: 'Default',
 }
+
+//
+// Suspense
+//
+
+function VideoTexturedPlane2() {
+  return (
+    <>
+      <Plane args={[4, 2.25]}>
+        <React.Suspense fallback={<FallbackMaterial url="images/sintel-cover.jpg" />}>
+          <VideoMaterial src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/Sintel.mp4" />
+        </React.Suspense>
+      </Plane>
+    </>
+  )
+}
+
+function VideoMaterial({ src }) {
+  const texture = useVideoTexture(src)
+  return <meshBasicMaterial side={THREE.DoubleSide} map={texture} toneMapped={false} />
+}
+
+function FallbackMaterial({ url }: { url: string }) {
+  const texture = useTexture(url)
+  return <meshBasicMaterial map={texture} toneMapped={false} />
+}
+
+function UseVideoTextureScene2() {
+  return (
+    <React.Suspense fallback={null}>
+      <VideoTexturedPlane2 />
+    </React.Suspense>
+  )
+}
+
+export const UseVideoTextureSceneSt2 = () => <UseVideoTextureScene2 />
+UseVideoTextureSceneSt2.story = {
+  name: 'Suspense',
+}
+
+//
+// getDisplayMedia (Screen Capture API)
+//
+
+function VideoTexturedPlane3() {
+  const [mediaStream, setMediaStream] = useState(new MediaStream())
+
+  return (
+    <>
+      <Plane
+        args={[4, 2.25]}
+        onClick={async (e) => {
+          const mediaStream = await navigator.mediaDevices.getDisplayMedia({ video: true })
+          setMediaStream(mediaStream)
+        }}
+      >
+        <React.Suspense fallback={<FallbackMaterial url="images/share-screen.jpg" />}>
+          <VideoMaterial src={mediaStream} />
+        </React.Suspense>
+      </Plane>
+    </>
+  )
+}
+
+function UseVideoTextureScene3() {
+  return (
+    <React.Suspense fallback={null}>
+      <VideoTexturedPlane3 />
+    </React.Suspense>
+  )
+}
+
+export const UseVideoTextureSceneSt3 = () => <UseVideoTextureScene3 />
+UseVideoTextureSceneSt3.story = {
+  name: 'MediaStream',
+}

src/core/useVideoTexture.tsx

@@ -8,7 +8,7 @@ interface VideoTextureProps extends HTMLVideoElement {
   start?: boolean
 }
 
-export function useVideoTexture(src: string, props: Partial<VideoTextureProps>) {
+export function useVideoTexture(src: string | MediaStream, props?: Partial<VideoTextureProps>) {
   const { unsuspend, start, crossOrigin, muted, loop, ...rest } = {
     unsuspend: 'loadedmetadata',
     crossOrigin: 'Anonymous',
@@ -19,11 +19,12 @@ export function useVideoTexture(src: string, props: Partial<VideoTextureProps>)
     ...props,
   }
   const gl = useThree((state) => state.gl)
-  const texture = suspend<[url: string], () => Promise<THREE.VideoTexture>>(
+  const texture = suspend(
     () =>
       new Promise((res, rej) => {
         const video = Object.assign(document.createElement('video'), {
-          src,
+          src: (typeof src === 'string' && src) || undefined,
+          srcObject: (src instanceof MediaStream && src) || undefined,
           crossOrigin,
           loop,
           muted,
@@ -34,7 +35,7 @@ export function useVideoTexture(src: string, props: Partial<VideoTextureProps>)
         video.addEventListener(unsuspend, () => res(texture))
       }),
     [src]
-  )
+  ) as THREE.VideoTexture
   useEffect(() => void (start && texture.image.play()), [texture, start])
   return texture
 }