How to use blobs or dataURL as src of a-frame or a-sky for 360photos

Viewed 767

I'm working on a simple script to show 360 images in VR, while changing the image dynamically. For the moment, the next-image source is set by a simple timeout (amongst 4 local .jpg), but I'm planning to GET images from a remote camera, and then update the a-sky view every x seconds.

I was able to change the a-sky src attribute and set a different n.jpg. But I wasn't able to set a blob as source.

For now I'm just converting a local jpg to a blob but the next step is to ask the remote camera api to have the jpg binary, and convert it to a blob url. Anyway, the new image is not shown. It seems to be working only when you have a static content as src.

How can I do? Thanks

Here part of the source:

      setInterval(updatePanImg, 2000);
      var seq = 1;
      function updatePanImg() {

          let blob_src;
          if (seq >= 4) seq = 1; else seq++;
          blob_src = seq + ".jpg";
          console.log('blob_src update ' + blob_src);

          //1-working (/imgname.jpg)
          //document.getElementById('asky').setAttribute("material", "src", blob_src);

          //2-not working (/blob:......)
          return fetch(blob_src)
              .then((response)=> {
                return response.blob();
              })
              .then(blob => {
                  let blob_src_url = URL.createObjectURL(blob);
                  document.getElementById('asky').setAttribute("material", "src", blob_src_url);
                return blob_src_url;
              });
        }


<script src="aframe-master.min.js"></script>
<a-scene>
  <a-sky id="asky" material="opacity:1; src: 4.jpg" rotation="0 -130 0" foo></a-sky>
</a-scene>
1 Answers

Try wrapping it in url(), maybe? As long as the blob starts with like data

document.getElementById('asky').setAttribute("material", "src", `url(data:image/png;base64,${blob_src_url})`);

Add the data:image/png;base64, or whatever the format is if it isn't there already.

Related