Read external video

[geourjoa]

• Read from Youtube
• Read from Peertube

[geourjoa]

I use React Player to read video from external source.

On one issue i find someone that have haved PeerTube support

cookpete/react-player#1544

He published his custom package :
https://www.npmjs.com/package/@celluloid/react-player

And used it in this project :
https://github.com/celluloid-camp/celluloid

Usage
https://github.com/search?q=repo%3Acelluloid-camp%2Fcelluloid%20react-player&type=code

The production app
https://celluloid.huma-num.fr/project/4878b2b9-706b-46b7-af9b-b2a0eb23eae7

The app read video from MSH Paris Nord PeerTube instance
https://video.mshparisnord.fr/w/5GPbYsxX97Kxo8uLviWG4i

When reading the video from Celluloid

[geourjoa]

I faced ORB issue.

When examinating Request headers

Fetching from Mirador Video

Fetching from Celluloid
https://celluloid.huma-num.fr/project/4878b2b9-706b-46b7-af9b-b2a0eb23eae7

One way to explore is : Sec-Fetch-mode

[geourjoa]

I have cloned and run Celluloid/ReactPlayer

I was able to run some video from peertube inside the react demo app.

[geourjoa]

When reading source code from demo of Celluloird/ReactPlayer

I suspect reading directly from IFrame

I need to investigate that way

[geourjoa]

I resolve ORB issue by using right config for ReactPlayer

Afterward i Have issue from ref management. I have been able to solve it with playerRef.current.getInternalPlayer to get the ref on the video element.

Now I'm facing positionning issue and scale issue. Basically css must be the way

[geourjoa]

When fixing annotation I discover issue on Youtube video playing.

VideoViewer include two main components : ReactPlayer and AnnotationOverlayVideo

AnnotationOvelrayVideo use a ref to communicate with the video element. At this moment, it's not so clear why AnnotationOverlayVideo need to control video on ComponentDidUpdate.

i discover different comportment between classic file and Youtube playing.
It seems the videoRef object is not exactly the same.

With classique file I can use video.paused or video.play(). With Youtube I can use video.playVideo().
All the logic in AnnotationOverlayVideo:componentDidUpdate is concerned y this issue.

[geourjoa]

Some explication come from ReactPlayer Docs.

https://github.com/cookpete/react-player

Two way to go further :

• Create a wrapper masking the current player (ugly at least)
• Update the code of Annotation Overlay to use ReactPlayer high level method. (not sure to have everything available)

[geourjoa]

Not exhaustive list of bug :

• Viewer crashing when opening Youtube or PeerTube (causing by AnnotationOverlayVideo, see problem above)
• Not able to seek to specific time (all manifests)
• Desynchronisation when :
  • Opening video (all type)
  • Play some seconds
  • Pause
  • Move time cursor further
  • Play again
  • --> Video time is not synchronize to Mirador controller time

[geourjoa]

Positionning issues, need to implement :

• Files video
  • if (videoRatio < container ratio)
    • height 100% width: auto
      else
    • height auto% width: 100%
• External video (video ratio must be force to 16/9)
  • if (videoRatio < container ratio)
    - height 100% width: auto
    else
    • height auto% width: 100%
      aspectRatio : 16/9

[geourjoa]

A big part of the playing issues are solved

We migrate to React Player.
We have residual issue like : #9

Available inside MV 1.0.10 package.