pannellum from canvas video

[aproni34f]

I am drawing a video on canvas and then I would like to display this in pannellum. The problem is the although canvas renders video with high quality, video in pannellum is poor quality (unlike with video-js example https://pannellum.org/documentation/examples/video/ )

Here is the code I used:

        <video id="panorama"   preload="auto" loop  muted autoplay crossorigin="anonymous">
            <source src="jfk.mp4" type="video/mp4"/>
        </video>

        <canvas id="canvas" width="640" height="360"></canvas>

        var canvas = document.getElementById("canvas");
        var ctx = canvas.getContext("2d");

        var video = document.getElementById("panorama");
        video.addEventListener('loadedmetadata', function() {

          video.play();  
          setTimeout(videoLoop, 5);

          pannellum.viewer('panorama_viewer', {
                "type": "equirectangular",
                "panorama": canvas,
                "dynamic": true,
                "dynamicUpdate": true,
                "autoLoad": true,
            })

        });

        function videoLoop() {
            if (video && !video.paused && !video.ended) {
                ctx.drawImage(video, 0, 0, 640, 360);
                setTimeout(videoLoop, 5);
            }
        }

Demo:

https://interactivepixel.net/tst/2/video.htm

[mpetroff]

You're displaying the video at 640x360 pixel resolution. At the default 100deg HFOV, you only have a horizontal video resolution of 178 pixels once it's projected in Pannellum, which you're displaying across 640 pixels. With this low resolution, of course it's going to look bad. The <canvas> looks fine, since you're not zooming in. The Video.js example displays the video at its full 1920x960 pixel resolution, which is three times the horizontal resolution of what you're displaying. If you increase the <canvas> resolution to match the video resolution, the quality will look much better.

[aproni34f]

Thanks, its good now. Basically I am trying to avoid using videojs. Do you think this technique will not compromise performance? And is there any other reason not to do this?

[mpetroff]

If you're just trying to avoid Video.js, there's no reason to use a <canvas> element. You should provide the <video> directly to Pannellum as the panorama, like is done with the Video.js plugin.

[aproni34f]

Can you explain how?

I tried:

    <video id="panorama" class="video-js" preload="auto" loop
      muted autoplay crossorigin="anonymous" controls>
        <source src="jfk.mp4" type="video/mp4"/>
    </video>

    var video = document.getElementById("panorama");

  `pannellum.viewer('panorama_viewer', {
          "type": "equirectangular",
          "panorama": video,
          "dynamic": true,
          "dynamicUpdate": true,
          "autoLoad": true,
      })`

But I get:

Your browser does not have the necessary WebGL support to display this panorama.

[mpetroff]

There should be more information in your browser's developer console, which should help with debugging. There's nothing obvious from what you posted as to why it wouldn't work.

[aproni34f]

I have made a demo:

https://interactivepixel.net/tst/2/video2.htm

[mpetroff]

Your example works in Firefox but not Chrome. In Chrome, there's a WebGL: INVALID_VALUE: texImage2D: no video warning, so I think the issue is that it's trying to render before the video is sufficiently initialized.

Wrapping the Pannellum initialization with a loadeddata event listener will probably fix it:

video.addEventListener('loadeddata', function() {
    pannellum.viewer(...);
});

[aproni34f]

Yes, this works, I should have known.

[aproni34f]

Is it possible to get video controls using the above or do I need video js for that?

[mpetroff]

It's certainly possible, but I've never tried to do it any other way. Since the Pannellum viewer is displayed above the <video> element, I don't think you can use the browser-native video controls, so you'd need to implement your own video controls overlay, similar to what Video.js does (and what other similar libraries do).