Some help to finish my code

Hi Devs!! :smiley:

This si my first question un this forum I am triying create a glsl with Chromakey. I found this link:. PlayCanvas | HTML5 Game Engine and Made some changes. But now I get the console message Unexpected token β€œ}”. There seems to be a left} symbol. but I can’t figure it out … Thanks in advance. This is My code

//////// Test VideoTexture Webcam///////
//

var VideoTexture = pc.createScript('videoTexture');

VideoTexture.attributes.add('shader', { type: 'asset', assetType: 'shader' });

VideoTexture.attributes.add('playEvent', {
    title: 'Play Event',
    description: 'Event that is fired as soon as the video texture is ready to play.',
    type: 'string',
    default: ''
});


VideoTexture.prototype.initialize = function() 

{
    var app = this.app;
    
// Create HTML Video Element to play the video
     var video = document.createElement('video');
    
// Create a texture to hold the video frame data            
     var videoTexture = new pc.Texture
      (
         app.graphicsDevice, 
      
        {
          format: pc.PIXELFORMAT_R5_G6_B5,
           autoMipmap: false }
          );
        
    
    
    
    video.autoplay = true;
    video.crossOrigin = 'anonymous';
     video.loop = true;

    
    
  for (var i = 0; i < this.materials.length; i++) 
                                    {
  var material = this.materials[i].resource;
   material.emissiveMap = videoTexture;
   material.opacityMap = videoTexture;
   material.chunks.opacityTexPS = this.shader.resource;
   material.update();
      }
    
   this.videoTexture = videoTexture;
   this.upload = true;
     };
    
    
  // muted attribute is required for videos to autoplay
            video.muted = true;

// critical for iOS or the video won't initially play, and will go fullscreen when playing
            video.playsInline = true;
    
                   if (navigator.mediaDevices.getUserMedia)
                        {
                        navigator.mediaDevices.getUserMedia({ video: true }).then
        (function(stream) {    

 // set video source
          video.srcObject = stream;
            

      var style = video.style;
       style.width = '1px';
       style.height = '1px';
       style.position = 'absolute';
       style.opacity = '0';
       style.zIndex = '-1000';
                                                                                                                                                                            style.pointerEvents = 'none';

       document.body.appendChild(video);

// Create a texture to hold the video frame data            
       this.videoTexture = new pc.Texture
  (
        app.graphicsDevice, 
     {
                
       format: pc.PIXELFORMAT_R8_G8_B8,              ///// r g b
       minFilter: pc.FILTER_LINEAR_MIPMAP_LINEAR,    //////////////////////////////////////////////////////
       magFilter: pc.FILTER_LINEAR,                   //////////////////////////////////////////////////////
       addressU: pc.ADDRESS_CLAMP_TO_EDGE,   //////////////////////////////////////////////////////
       addressV: pc.ADDRESS_CLAMP_TO_EDGE,     //////////////////////////////////////////////////////
       mipmaps: true,
       autoMipmap: true
       }
       );
       this.videoTexture.setSource(video);}.bind(this)).catch(function (error) 
                                                          {
       console.log("Something went wrong!");}
           );
             }    

  video.addEventListener('canplay', function (e) {
   app.fire(this.playEvent, this.videoTexture);}.bind(this)
         ); 
      };

                                                                                                                                                                                                                                                                                                        // update code called every frame
                                          
                                                                                                                                                                            
  VideoTexture.prototype.update = function(dt) {
  // Transfer the latest video frame to the video texture
  if( this.videoTexture ){
    this.videoTexture.upload();        
    }};


1 Like

I find your code hard to read because of the formatting, but is this line supposed to be the end of the initalize function?

If so then you extra left curly bracket is here:

  video.addEventListener('canplay', function (e) {
   app.fire(this.playEvent, this.videoTexture);}.bind(this)
         ); 
      };

If not, then remove the one after this.upload = true;

1 Like

Maybe You just need an extra β€œ{” to match that leftover

This is what the code looks like formatted:

//////// Test VideoTexture Webcam///////
//

var VideoTexture = pc.createScript('videoTexture');

VideoTexture.attributes.add('shader', {
    type: 'asset',
    assetType: 'shader'
});

VideoTexture.attributes.add('playEvent', {
    title: 'Play Event',
    description: 'Event that is fired as soon as the video texture is ready to play.',
    type: 'string',
    default: ''
});


VideoTexture.prototype.initialize = function ()

{
    var app = this.app;

    // Create HTML Video Element to play the video
    var video = document.createElement('video');

    // Create a texture to hold the video frame data            
    var videoTexture = new pc.Texture(
        app.graphicsDevice,

        {
            format: pc.PIXELFORMAT_R5_G6_B5,
            autoMipmap: false
        }
    );




    video.autoplay = true;
    video.crossOrigin = 'anonymous';
    video.loop = true;



    for (var i = 0; i < this.materials.length; i++) {
        var material = this.materials[i].resource;
        material.emissiveMap = videoTexture;
        material.opacityMap = videoTexture;
        material.chunks.opacityTexPS = this.shader.resource;
        material.update();
    }

    this.videoTexture = videoTexture;
    this.upload = true;
};


// muted attribute is required for videos to autoplay
video.muted = true;

// critical for iOS or the video won't initially play, and will go fullscreen when playing
video.playsInline = true;

if (navigator.mediaDevices.getUserMedia) {
    navigator.mediaDevices.getUserMedia({
        video: true
    }).then(function (stream) {

        // set video source
        video.srcObject = stream;


        var style = video.style;
        style.width = '1px';
        style.height = '1px';
        style.position = 'absolute';
        style.opacity = '0';
        style.zIndex = '-1000';
        style.pointerEvents = 'none';

        document.body.appendChild(video);

        // Create a texture to hold the video frame data            
        this.videoTexture = new pc.Texture(
            app.graphicsDevice, {

                format: pc.PIXELFORMAT_R8_G8_B8, ///// r g b
                minFilter: pc.FILTER_LINEAR_MIPMAP_LINEAR, //////////////////////////////////////////////////////
                magFilter: pc.FILTER_LINEAR, //////////////////////////////////////////////////////
                addressU: pc.ADDRESS_CLAMP_TO_EDGE, //////////////////////////////////////////////////////
                addressV: pc.ADDRESS_CLAMP_TO_EDGE, //////////////////////////////////////////////////////
                mipmaps: true,
                autoMipmap: true
            }
        );
        this.videoTexture.setSource(video);
    }.bind(this)).catch(function (error) {
        console.log("Something went wrong!");
    });
}

video.addEventListener('canplay', function (e) {
    app.fire(this.playEvent, this.videoTexture);
}.bind(this));
};

// update code called every frame


VideoTexture.prototype.update = function (dt) {
    // Transfer the latest video frame to the video texture
    if (this.videoTexture) {
        this.videoTexture.upload();
    }
};

Looks like @eproasim is right and that there is an extra ;} on that line.

1 Like