Support srcObject attribute for video element

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: https://github.com/facebook/react/pull/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”

[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} />
}

[gaearon]

Please see my reply in https://github.com/facebook/react/pull/9146#issuecomment-355584767 for why we’re not doing this.