Streaming Media about aao-react-native HOT 25 CLOSED

yeah, it's just not doing much of anything for me at the moment. thanks for the links!

from aao-react-native.

Current status:

Problems: um, they all load at once. Do we want a list of the webcams and then push on a new screen just for the video? (neé AAO 1.0)

from aao-react-native.

Here we go: from https://www.stolaf.edu/multimedia/webcams/webcams.js,

{file: 'http://stolaf-flash.streamguys.net/webcams/' + cam + '.stream/playlist.m3u8'}

So each camera feed lives at http://stolaf-flash.streamguys.net/webcams/$cam.stream/playlist.m3u8.

.m3u8 is an mp4 playlist file. IIRC most things can read them and load the implied media automatically.

It might be worth seeing how easy it would be to use these.

from aao-react-native.

Camera names:

himom
bcplaza
eastquad
tomsonwest
tomsoneast
alumniwest

from aao-react-native.

so one example URL would be http://stolaf-flash.streamguys.net/webcams/himom.stream/playlist.m3u8.

In VLC:

from aao-react-native.

I dug into this earlier in the summer, and I found the same thing, but VLC wouldn't open them for me. (and if VLC doesn't open it, I assume that nothing can!) Given that, feel like coding something basic up?

from aao-react-native.

From only a minute of research, I have not found anything that can stream the m3u8 streams in React Native. Needs more research?

from aao-react-native.

Hmm. Lemme try some things.

from aao-react-native.

I'm going to try https://github.com/react-native-community/react-native-video first. It's in my history as something I've visited before.

from aao-react-native.

Check out the issues related to the keyword m3u8 on that one. It might work as is?

Otherwise, see this particular thread.

from aao-react-native.

So. Current status:

• You can play the video by opening the m3u8 URL directly in Safari on both iOS and macOS.

Then I remembered that you can put custom html into the web view, so I tried building a little html snippet to load the video:

<video autoplay muted>
    <source src="$url/playlist.m3u8" type="application/x-mpegURL">
</video>

Which worked in desktop Safari!

And … partially worked in the app.

So that's current status.

from aao-react-native.

Nice work! Webviews seem to handle it well (from what I can see)

from aao-react-native.

https://github.com/StoDevX/AAO-React-Native/tree/streaming-media

from aao-react-native.

Or we could load a static thumbnail of each video from the feed and show that in the list.

from aao-react-native.

It's bedtime for me now. 😴

from aao-react-native.

Is it possible to display them all on this screen, full width and normal height, and then allow rotation to put it in full screen? Or tapping?

from aao-react-native.

Maybe. I was tired of fighting the layout system 😂

from aao-react-native.

I recognize we are getting closer to having these display in a Webview. If we do ever decide to render these another way, here are a couple possibilities.

• rnwbnr
• videoPlayer

from aao-react-native.

With our current implementation of separate webviews, one can play the stream multiple times if they pinch out of a stream instead of hitting the "Done" button. That's not entirely ideal, so we should most likely move forward with passing the stream url onwards to a separate view... and be sure that the "Done" button on the stream does not prevent us from opening the view again.

Also, rotation only works in the simulator but not on the actual device. I am now testing on iOS 10.

See #123

from aao-react-native.

Another thought for Streaming media is the potential to provide access (with rss/json) to the events via the streams up on multimedia

from aao-react-native.

That's a good plan, something for another version. Maybe make an issue to track it?

from aao-react-native.

oops

from aao-react-native.

Sure. That child story now lives at #127.

from aao-react-native.

Closing this one, see #137

from aao-react-native.

We still need Weekly Movie info (#141) and a non-silly webcams view (#142).

from aao-react-native.