Hi Devs!!
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();
}};