search

SCENE-CE / mirador-video

An open-source, web-based 'multi-up' viewer that supports zoom-pan-rotate functionality, ability to display/compare simple images, and images with annotations.
https://projectmirador.org
Apache License 2.0
4 stars 0 forks source link

Read external video #7

Open geourjoa opened 6 days ago

geourjoa commented 6 days ago
geourjoa commented 5 days ago

I use React Player to read video from external source.

On one issue i find someone that have haved PeerTube support

https://github.com/cookpete/react-player/pull/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 image

geourjoa commented 5 days ago

I faced ORB issue.

image

When examinating Request headers

Fetching from Mirador Video

Screenshot from 2024-11-16 23-31-33

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

image

One way to explore is : Sec-Fetch-mode

geourjoa commented 5 days ago

I have cloned and run Celluloid/ReactPlayer

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

geourjoa commented 5 days ago

When reading source code from demo of Celluloird/ReactPlayer

I suspect reading directly from IFrame

image

I need to investigate that way

geourjoa commented 3 days ago

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 commented 3 days ago

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 commented 3 days ago

Some explication come from ReactPlayer Docs.

image

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

Two way to go further :

geourjoa commented 3 days ago

Not exhaustive list of bug :