search

pchen66 / panolens.js

Javascript panorama viewer based on Three.js
https://pchen66.github.io/Panolens/
MIT License
2.78k stars 496 forks source link

Livestream 360 video #234

Open iamtheonly opened 4 years ago

iamtheonly commented 4 years ago
Description

Hi, I'm looking for a way to display livestream video using the panolens player. I don't see anything in the docs, and simply doing below doesn't work for me. I've tried mpd, m3u8, files and also on demand .mp4, .mov etc.

Test streams below:

https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8 http://livesim.dashif.org/livesim/testpic_2s/Manifest.mpd rtsp://wowzaec2demo.streamlock.net/vod/mp4:BigBuckBunny_115k.mov

panorama_main_video = new PANOLENS.VideoPanorama(https://bitmovin-a.akamaihd.net/content/playhouse-vr/mpds/105560.mpd, { autoplay: false, muted: true, loop: false });

Any guides how to support livestreams?

Browser
OS
pchen66 commented 4 years ago

Currently it doesn't support streaming out of box, but I've been thinking about supporting this for a while. I'll Investigate into this.

iamtheonly commented 4 years ago

Thank you, is it possible to have an ETA? Since I'm familiar with panolens I'd like to work with this framework rather than look for something else :) I have about 4 weeks untill deadline for my project, do you consider this doable?

pchen66 commented 4 years ago

Here's a quick demo with HLS and DASH (https://codepen.io/pchen66/pen/gOaVzqK) with panolens update. Looking at minified hls.js(232KB) and dash.js (603KB) while panolens.min.js is (115KB), currently it's probably leave it outside the scope for now unless a huge demand for it.

rtsp is a little bit tricky to setup but I'm sure it's totally possible. The idea behind supporting live streaming is to let Panolens.VideoPanorama takes a streaming HTML5 video element as input then draw it as texture.

Note that the doesn't seem to work on iOS (but works on desktop browsers and Android Chrome)

atlas1119 commented 4 years ago

yes，when IOS work？

pchen66 commented 4 years ago

Mostly it'll be hls.js compatibility:

iOS Safari "Mobile" does not support the MediaSource API. Safari browsers have however built-in HLS support through the plain video "tag" source URL. See the example above (Getting Started) to run appropriate feature detection and choose between using Hls.js or natively built-in HLS support.

detail here: https://github.com/video-dev/hls.js#compatibility