React: 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: 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"

[bigblind]

I'd love to create a PR for this.

[syranide]

https://github.com/facebook/react/pull/9146#issuecomment-319629271

[gaearon]

Please see my reply in https://github.com/facebook/react/pull/9146#issuecomment-355584767 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} />
}