360 projection not working with RTMP live stream

ccamero8 commented 5 years ago

Description

I have local RTMP stream that I am trying to display in a local webapp. The stream displays, but it just shows as a 'flat image', i.e. not in the projection that I need it to be (360/Spherical).

Results

Expected

For my video element to be projected onto a sphere.

Actual

When I add the one line of code to globally project the viewer onto a sphere and then hit the play button, the video stays black and I see the following error message in the web console:

Error output

VIDEOJS: ERROR: TypeError: Cannot read property 'style' of undefined
    at o.s.init (videojs-vr.min.js:176)
    at a.n (videojs.min.js:1)
    at HTMLDivElement.n (videojs.min.js:1)
    at HTMLDivElement.n.dispatcher.n.dispatcher (videojs.min.js:1)
    at fe (videojs.min.js:1)
    at a.trigger (videojs.min.js:1)

Additional Information

I have tried to project a local, pre-recorded video, and that works as expected. However, when I switch the source of the video to my RTMP stream, it breaks.

Here is the code I'm using:

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <body>
    <video id="my-player" class="video-js" controls>
        <source src="rtmp://xxx.xx.xx/live/local" type="rtmp/mp4"> 
        <p class="vjs-no-js">
          not support
        </p>
    </video>
    <script type="text/javascript">
      var player = videojs('my-player',{
        width:1280,
        heigh:800
      });

      player.vr({projection: "360"});
    </script>
  </body>
</html>

versions

videojs

what version of videojs does this occur with? 7.5.4

browsers

what browser are affected? chrome

OSes

what platforms (operating systems and devices) are affected? centos7

plugins

are any videojs plugins being used on the page? If so, please list them below. videojs-vr and videojs-flash

gkatsev commented 5 years ago

Thanks for asking, unfortunately, I do not think we will ever be able to handle RTMP streams. RTMP streams require Flash playback but this project relies on the video element and displaying the video content into a canvas element. We do not currently have APIs to write out the flash data onto a canvas and have no plans to enable that. I would recommend converting the RTMP stream into HLS or DASH instead.

ccamero8 commented 5 years ago

Thanks for the quick response. So if there is a way to convert RTMP to HLS on the fly, will videojs-vr be able to project it onto a sphere?

gkatsev commented 5 years ago

Yes, HLS should work either natively (Safari) or via VHS (which is built into Video.js 7.x, for browsers like chrome).

videojs / videojs-vr