Support srcObject attribute for video element

[drujensen]

Do you want to request a feature or report a bug?

feature

What is the current behavior?

currently you cannot set the srcObject for a video. You get an error:

Warning: React does not recognize the `srcObject` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `srcobject` instead. If you accidentally passed it from a parent component, remove it from the DOM element.

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem via https://jsfiddle.net or similar (template for React 16: https://jsfiddle.net/Luktwrdm/, template for React 15: https://jsfiddle.net/hmbg7e9w/).

return (
      <video srcObject={this.props.stream}>
)

There is another issue that was closed but the issue was never resolved: #1474

Firefox has deprecated using URL.createObjectURL() and Safari doesn't support it.

What is the expected behavior?

The ability to set the srcObject on a video element. This is common for WebRTC applications now.

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?

"react": "^16.0.0"

[frederikcreemers]

I'd love to create a PR for this.

[syranide]

#9146 (comment)

[gaearon]

Please see my reply in #9146 (comment) for why we’re not doing this.

[derwaldgeist]

The ability to set the srcObject on a video element. This is common for WebRTC applications now.

Are you sure this is even possible? According to the docs on MDN, srcObject seems to be a property of the HTMLMediaElement object:

https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/srcObject

but it's not an attribute of the HTML <video> element:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video

Your proposal would mean that React would have to add the stream programmatically. Cool, but maybe a bit beyond the scope a UI library should cover.

[gentlee]

Chrome says when using src:

[Deprecation] URL.createObjectURL with media streams is deprecated and will be removed in M69, around September 2018. Please use HTMLMediaElement.srcObject instead. See https://www.chromestatus.com/features/5618491470118912 for more details.

[riggs]

For future reference (& SEO), here's how to implement this yourself: https://stackoverflow.com/a/48603493/161366

[tjmehta]

Just wrap the video element with a custom video component:

import { VideoHTMLAttributes, useEffect, useRef } from 'react'

type PropsType = VideoHTMLAttributes<HTMLVideoElement> & {
  srcObject: MediaStream
}

export default function Video({ srcObject, ...props }: PropsType) {
  const refVideo = useRef<HTMLVideoElement>(null)

  useEffect(() => {
    if (!refVideo.current) return
    refVideo.current.srcObject = srcObject
  }, [srcObject])

  return <video ref={refVideo} {...props} />
}

[ttous]

This also works, and is recommended by React if you need to know when the element changes:

Keep in mind that useRef doesn’t notify you when its content changes. Mutating the .current property doesn’t cause a re-render. If you want to run some code when React attaches or detaches a ref to a DOM node, you may want to use a callback ref instead.

type VideoProps = VideoHTMLAttributes<HTMLVideoElement> & {
  srcObject: MediaStream;
};

export const Video = ({ srcObject, ...props }: VideoProps) => {
  const refVideo = useCallback(
    (node: HTMLVideoElement) => {
      if (node) node.srcObject = srcObject;
    },
    [srcObject],
  );

  return <video ref={refVideo} {...props} />;
};

I personally find it more elegant than the useRef + useEffect combo.

[reconbot]

@ttous with the callback approach how would you call, node.play() or the element's api outside of the callback? Store it in a useRef()?

[ttous]

@ttous with the callback approach how would you call, node.play() or the element's api outside of the callback? Store it in a useRef()?

@reconbot I did not need to access the node outside of the callback since my <video /> component has its autoPlay prop set to true in my app. However, in order to do so, you can store it in a simple state (there is no need to call useRef):

  type VideoProps = VideoHTMLAttributes<HTMLVideoElement> & {
    srcObject: MediaStream;
  };

  export const Video = ({ srcObject, ...props }: VideoProps) => {
+   const [node, setNode] = useState<HTMLVideoElement>();

    const refVideo = useCallback(
-     (node: HTMLVideoElement) => {
-       if (node) node.srcObject = srcObject;
+     (newNode: HTMLVideoElement) => {
+       if (newNode) newNode.srcObject = srcObject;
+       setNode(newNode);
      },
      [srcObject],
    );

-   return <video ref={refVideo} {...props} />;
+   return (
+     <>
+       <video ref={refVideo} {...props} />
+       <button onClick={() => node?.play()}>{'PLAY'}</button>
+       <button onClick={() => node?.pause()}>{'PAUSE'}</button>
+     </>
+   );
  };

I created a CodePen in case you would like to try the play/pause buttons 🙂.