如何在React Native中使用srcObject

Question

我正在使用 React Native Web：

React-Native-Web：https://github.com/necolas/react-native-web

同样，我必须使用视频标签。 我使用 CreateElement 创建了一个视频组件。

这是视频组件

import { createElement } from "react-native-web";

const Video = (props) => {
  const attrs = {
    srcObject: props.source,
    poster: props.poster,
    controls: "controls"
  }
  return createElement("video", attrs)
}
export default Video

在组件中我像这样使用它

<Video
  source={this.state.stream}  //this is media stream object
  poster={'https://www.fillmurray.com/480/300'}
/>

但是上面的代码给了我错误。我该如何解决这个问题？

警告：React 无法识别 DOM 上的

srcObject

属性 元素。如果你故意希望它作为自定义出现在 DOM 中 属性，请将其拼写为小写

srcobject

。如果你 不小心从父组件传递了它，将其从 DOM 中删除 元素。

如果我在视频组件中将 srcObject 替换为小写“srcobject”，那么我会得到以下代码，并且视频无法播放。

<video srcobject="[object MediaStream]" controls=""></video>

Answer 1

我是这样完成的：

我真的很难让它发挥作用，但最终想通了。

常量相机 = () => {

const [hasPermission, setHasPermission] = useState(null);
const [stream, setStream] = useState(null);
const videoRef = useRef(null);
const canvasRef = useRef(null);

useEffect(() => {
    (async () => {
        try {
            const stream = await navigator.mediaDevices.getUserMedia({
                video: true,
            });
            setStream(stream);
            if (videoRef.current) {
                videoRef.current.srcObject = stream;
                videoRef.current.play();
            }
            setHasPermission(true);
        } catch (err) {
            console.error('Error accessing camera:', err);
            setHasPermission(false);
        }
    })();

}, []);

if (hasPermission === null) {
    return <div>Requesting camera permission...</div>
}
if (!hasPermission) {
    return <p>No access to camera</p>
}

return (
    <div style={styles.container}>
            <div>
                    <video ref={videoRef} style={{ width: '100%', height: '100%' }} />\
            </div>
        <canvas ref={canvasRef} style={styles.hiddenCanvas}></canvas>
    </div>
); };

导出默认相机；