Streaming Media

[hawkrives]

• Streaming Media PRs Welcome
  • Implementation unclear
  • Reading Flash media might not be easy, all streaming at olaf is currently through ShockWave Flash

It is, but the webcams at least are also available as a raw MP4 stream, IIRC. I'll look around for the URL again.

This is being developed in the streaming-media branch.

[hawkrives]

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.

[hawkrives]

Camera names:

himom
bcplaza
eastquad
tomsonwest
tomsoneast
alumniwest

[hawkrives]

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

In VLC:

[elijahverdoorn]

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?

[drewvolz]

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

[hawkrives]

Hmm. Lemme try some things.

[hawkrives]

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.

[drewvolz]

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

Otherwise, see this particular thread.

[hawkrives]

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

[hawkrives]

So. Current status:

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

- but loading the URL directly in a `` doesn't work.So. Current status: - You can play the video by opening the m3u8 URL directly in Safari on both iOS and macOS.

- but loading the URL directly in a `` doesn't work.

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.

[drewvolz]

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

[hawkrives]

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)

[hawkrives]

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

[hawkrives]

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

[hawkrives]

It's bedtime for me now. 😴

[drewvolz]

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?

[hawkrives]

Maybe. I was tired of fighting the layout system 😂

[drewvolz]

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

[drewvolz]

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

[drewvolz]

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

[elijahverdoorn]

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

[elijahverdoorn]

oops

[drewvolz]

Sure. That child story now lives at #127.

[elijahverdoorn]

Closing this one, see #137

[hawkrives]

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