feat: WebcamVideoTexture and ScreenVideoTexture (#2240)

* 1st commit

* ScreenVideoTexture

* doc

* doc

* src/web

.storybook/stories/ScreenVideoTexture.stories.tsx

@@ -0,0 +1,39 @@
+import * as THREE from 'three'
+import * as React from 'react'
+import { Suspense } from 'react'
+import { Meta, StoryObj } from '@storybook/react'
+
+import { Setup } from '../Setup'
+
+import { Plane, ScreenVideoTexture } from '../../src'
+
+export default {
+  title: 'Misc/ScreenVideoTexture',
+  component: ScreenVideoTexture,
+  decorators: [
+    (Story) => (
+      <Setup>
+        <Story />
+      </Setup>
+    ),
+  ],
+} satisfies Meta<typeof ScreenVideoTexture>
+
+type Story = StoryObj<typeof ScreenVideoTexture>
+
+function ScreenVideoTextureScene(props: React.ComponentProps<typeof ScreenVideoTexture>) {
+  return (
+    <Plane args={[4, 2.25]}>
+      <Suspense fallback={<meshBasicMaterial color="gray" />}>
+        <ScreenVideoTexture {...props}>
+          {(texture) => <meshBasicMaterial side={THREE.DoubleSide} map={texture} toneMapped={false} />}
+        </ScreenVideoTexture>
+      </Suspense>
+    </Plane>
+  )
+}
+
+export const ScreenVideoTextureSt = {
+  render: (args) => <ScreenVideoTextureScene {...args} />,
+  name: 'Default',
+} satisfies Story

.storybook/stories/WebcamVideoTexture.stories.tsx

@@ -0,0 +1,39 @@
+import * as THREE from 'three'
+import * as React from 'react'
+import { Suspense } from 'react'
+import { Meta, StoryObj } from '@storybook/react'
+
+import { Setup } from '../Setup'
+
+import { Plane, WebcamVideoTexture } from '../../src'
+
+export default {
+  title: 'Misc/WebcamVideoTexture',
+  component: WebcamVideoTexture,
+  decorators: [
+    (Story) => (
+      <Setup>
+        <Story />
+      </Setup>
+    ),
+  ],
+} satisfies Meta<typeof WebcamVideoTexture>
+
+type Story = StoryObj<typeof WebcamVideoTexture>
+
+function WebcamVideoTextureScene(props: React.ComponentProps<typeof WebcamVideoTexture>) {
+  return (
+    <Plane args={[4, 2.25]}>
+      <Suspense fallback={<meshBasicMaterial color="gray" />}>
+        <WebcamVideoTexture {...props}>
+          {(texture) => <meshBasicMaterial side={THREE.DoubleSide} map={texture} toneMapped={false} />}
+        </WebcamVideoTexture>
+      </Suspense>
+    </Plane>
+  )
+}
+
+export const WebcamVideoTextureSt = {
+  render: (args) => <WebcamVideoTextureScene {...args} />,
+  name: 'Default',
+} satisfies Story

docs/loaders/screen-video-texture.mdx

@@ -0,0 +1,26 @@
+---
+title: ScreenVideoTexture
+sourcecode: src/web/ScreenVideoTexture.tsx
+---
+
+[![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.pmnd.rs/?path=/story/misc-screenvideotexture) ![](https://img.shields.io/badge/-suspense-brightgreen)
+
+<Intro>Create a video texture from [`getDisplayMedia`](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getDisplayMedia)</Intro>
+
+```tsx
+export type ScreenVideoTextureProps = Omit<VideoTextureProps, 'src'> & {
+  options?: DisplayMediaStreamOptions
+}
+```
+
+```jsx
+<ScreenVideoTexture>
+  {(texture) => <meshBasicMaterial map={texture} />}
+```
+
+or exposed via `ref`:
+
+```jsx
+const textureRef = useRef()
+<ScreenVideoTexture ref={textureRef} />
+```

docs/loaders/webcam-video-texture.mdx

@@ -0,0 +1,26 @@
+---
+title: WebcamVideoTexture
+sourcecode: src/web/WebcamVideoTexture.tsx
+---
+
+[![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.pmnd.rs/?path=/story/misc-webcamvideotexture) ![](https://img.shields.io/badge/-suspense-brightgreen)
+
+<Intro>Create a video texture from [`getUserMedia`](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia)</Intro>
+
+```tsx
+export type WebcamVideoTextureProps = Omit<VideoTextureProps, 'src'> & {
+  constraints?: MediaStreamConstraints
+}
+```
+
+```jsx
+<WebcamVideoTexture>
+  {(texture) => <meshBasicMaterial map={texture} />}
+```
+
+or exposed via `ref`:
+
+```jsx
+const textureRef = useRef()
+<WebcamVideoTexture ref={textureRef} />
+```

src/web/ScreenVideoTexture.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react'
+import { forwardRef, useEffect } from 'react'
+import { suspend, clear } from 'suspend-react'
+import { VideoTexture, VideoTextureProps } from '..'
+
+export type ScreenVideoTextureProps = Omit<VideoTextureProps, 'src'> & {
+  options?: DisplayMediaStreamOptions
+}
+
+/**
+ * Create a video texture from [`getDisplayMedia`](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getDisplayMedia)
+ */
+export const ScreenVideoTexture = /* @__PURE__ */ forwardRef<THREE.VideoTexture, ScreenVideoTextureProps>(
+  ({ options = { video: true }, ...props }, fref) => {
+    const mediaStream = suspend(() => navigator.mediaDevices.getDisplayMedia(options), [])
+
+    useEffect(() => {
+      return () => {
+        mediaStream?.getTracks().forEach((track) => track.stop())
+        clear([])
+      }
+    }, [mediaStream])
+
+    return <VideoTexture ref={fref} {...props} src={mediaStream} />
+  }
+)

src/web/WebcamVideoTexture.tsx

@@ -0,0 +1,35 @@
+import * as React from 'react'
+import { forwardRef, useEffect } from 'react'
+import { suspend, clear } from 'suspend-react'
+import { VideoTexture, VideoTextureProps } from '..'
+
+export type WebcamVideoTextureProps = Omit<VideoTextureProps, 'src'> & {
+  constraints?: MediaStreamConstraints
+}
+
+/**
+ * Create a video texture from [`getUserMedia`](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia)
+ */
+export const WebcamVideoTexture = /* @__PURE__ */ forwardRef<THREE.VideoTexture, WebcamVideoTextureProps>(
+  (
+    {
+      constraints = {
+        audio: false,
+        video: { facingMode: 'user' },
+      },
+      ...props
+    },
+    fref
+  ) => {
+    const mediaStream = suspend(() => navigator.mediaDevices.getUserMedia(constraints), [])
+
+    useEffect(() => {
+      return () => {
+        mediaStream?.getTracks().forEach((track) => track.stop())
+        clear([])
+      }
+    }, [mediaStream])
+
+    return <VideoTexture ref={fref} {...props} src={mediaStream} />
+  }
+)

src/web/index.ts

@@ -14,6 +14,10 @@ export * from './View'
 // Gizmos
 export * from './pivotControls'
 
+// Loaders
+export * from './ScreenVideoTexture'
+export * from './WebcamVideoTexture'
+
 // Controls
 export * from './FaceControls'
 export { DragControls } from './DragControls'