Fullscreen

Users will be able to view the video in fullscreen by clicking the fullscreen button in the controls:

In order to implement a fullscreen option for the video, we will use the screenfull npm module to track when the view is in fullscreen, and findDOMNode from react-dom to specify which DOM element will be made fullscreen with screenfull.

To set up the fullscreen code, we first install screenfull:

npm install screenfull --save

Then import screenfull and findDOMNode into the MediaPlayer component.

mern-mediastream/client/media/MediaPlayer.js:

import screenfull from 'screenfull'import { findDOMNode } from 'react-dom'

When the MediaPlayer ...

Get Full-Stack React Projects now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.