Forum

[SOLVED] second canvas texture doesn't want to load

29 August 2017 14:44
Hi everybody,

I am trying to make this app working.

The webcam script is allready working (thanks to the blend4web snippet) but when I add the script for pasting text in the text bubble it doesn't work completly. The text canvas texture of text bubble doesn't load.
I've launched the text bubble script independently and it works. But when I paste it with the webcam script together then it doesn't work anymore.
I've tried to fix it but as I am a javascript noob I can't realy figure out where the trouble comes from.

Any Ideas would be very welcome
Thank very much

Here attached in zip (blend file and js/css/html files if needed): beSomething.zip

js script looks like this:
 "use strict";

b4w.register("beSomething", function(exports, require) {

var m_app     = require("app");
var m_cfg     = require("config");
var m_data    = require("data");
var m_ver     = require("version");
var m_tex     = require("textures");
var m_scn     = require("scenes");
var m_cont    = require("container");
var m_version = require("version");
var m_scrn = require("screenshooter");
var m_main    = require("main");
var m_sfx     = require("sfx");

var DEBUG = (m_version.type() === "DEBUG");

var TIME_DELAY = 1000 / 24;
var WAITING_DELAY = 1000;


var _cam_waiting_handle = null;

exports.init = function() {
   m_app.init({
        canvas_container_id: "main_canvas_container",
        callback: init_cb,
        physics_enabled: false,
        background_color: [1, 1, 1, 1],
        alpha: true,
        autoresize: true,
        assets_dds_available: !DEBUG,
        assets_min50_available: !DEBUG,
        console_verbose: true
    });
}

function init_cb(canvas_elem, success) {

    if (!success) {
        console.log("b4w init failure");
        return;
    }

    load();
}

    
// LOAD function: Start
function load() {
    m_data.load("beSomething.json", load_cb);
}
// LOAD function: End

    
// LOAD_CD function: Start
function load_cb(data_id, success) {

    if (!success) {
        console.log("b4w load failure");
        return;
    }

    
    var error_cap = m_scn.get_object_by_name("noArgument");
    m_app.enable_camera_controls();

    
    
/////SCREENSHOT: Start/////    
//Take a screenshot of the 3D scene by clicking the screenshot button
	document.getElementById("btnScreenshot").addEventListener("mouseover", btnScreenshotOver);
	function btnScreenshotOver() {
	btnScreenshot.style.borderStyle = "solid";
	}
	document.getElementById("btnScreenshot").addEventListener("mouseout", btnScreenshotOut);
	function btnScreenshotOut() {
	btnScreenshot.style.borderStyle = "none";
	}
	document.getElementById("btnScreenshot").addEventListener("click", takeScreenshot);
	function takeScreenshot() {
	m_scrn.shot("image/png",1);
	}
/////SCREENSHOT: End///// 
    
    
    
    
    
    
    
    
/////WEBCAM: Start/////    
    if (Boolean(get_user_media()))
        start_video();

// GET_USER_MEDIA function: Start   
function get_user_media() {
    if (Boolean(navigator.getUserMedia))
        return navigator.getUserMedia.bind(navigator);
    else if (Boolean(navigator.webkitGetUserMedia))
        return navigator.webkitGetUserMedia.bind(navigator);
    else if (Boolean(navigator.mozGetUserMedia))
        return navigator.mozGetUserMedia.bind(navigator);
    else if (Boolean(navigator.msGetUserMedia))
        return navigator.msGetUserMedia.bind(navigator);
    else
        return null;
}
// GET_USER_MEDIA function: End


// START_VIDEO function: Start 
function start_video() {

    if (_cam_waiting_handle)
        clearTimeout(_cam_waiting_handle);

    var user_media = get_user_media();
    var media_stream_constraint = {
        video: { width: 1280, height: 720 }
    };
    var success_cb = function(local_media_stream) {
        //var video = document.createElement("video");  -->  not compatible with control screen option
		var video = document.querySelector("#videoElement");
        video.setAttribute("autoplay", "true");
        video.src = window.URL.createObjectURL(local_media_stream);
        var error_cap = m_scn.get_object_by_name("noArgument");
        m_scn.hide_object(error_cap);

        var obj3D = m_scn.get_object_by_name("face");
        var contextObj3D = m_tex.get_canvas_ctx(obj3D, "texture_canvas");
        var update_canvas = function() {
            contextObj3D.drawImage(video, 0, 0, video.videoWidth, video.videoHeight,
                    0, 0, contextObj3D.canvas.width, contextObj3D.canvas.height);
            m_tex.update_canvas_ctx(obj3D, "texture_canvas");
            setTimeout(function() {update_canvas()}, TIME_DELAY);
        }

        video.onloadedmetadata = function(e) {
            update_canvas();
        }; 
    };
    
    var fail_cb = function() {
        var error_cap = m_scn.get_object_by_name("noArgument");
        _cam_waiting_handle = setTimeout(start_video, WAITING_DELAY);
    };

    user_media(media_stream_constraint, success_cb, fail_cb);
    
}
// START_VIDEO function: End
    
/////WEBCAM: End/////
    

    
    
    
    
    
    
/////TEXT INPUT: Start/////
    
    // TEXTINPUT function: Start
    function textInput() {
    var face_text = m_scenes.get_object_by_name("face_text");
    var ctx_imageText = m_tex.get_canvas_ctx(face_text, "skinnings_text");
    var Enter = document.getElementById("Enter");

    if (ctx_imageText) {
        var img = new Image();
        img.src = "Text.jpg";
        /* this function load the image that been find at the end of the path */
        img.onload = function() {
        ctx_imageText.drawImage(img, 0, 0, ctx_imageText.canvas.width, 
                    ctx_imageText.canvas.height);
        m_tex.update_canvas_ctx(face_text, "skinnings_text");
        }
    } 

/* link the button "Enter" to the function "writeTexte" */
Enter.addEventListener('click', writeText); 

    
/* this function load the Erase function and after the Write function*/     
function writeText(){
    Erase();
    Write();
    }


/* this function clear the texture canvas (text and image to) before it will be written on it*/ 
function Erase() {
ctx_imageText.clearRect(0, 0, ctx_imageText.canvas.width, ctx_imageText.canvas.height);
} 
    
    
/* this function display the text from the textarea and redisplay the image*/
function Write(){           
            var text = document.getElementById("myText").value;
            var img = new Image();
            img.src = "Text.jpg";
            img.onload = function() {
            ctx_imageText.drawImage(img, 0, 0, ctx_imageText.canvas.width,
                                ctx_imageText.canvas.height);
            ctx_imageText.fillStyle = "rgba(255,0,0,255)";
            ctx_imageText.font = "250px Arial";
            ctx_imageText.fillText(text, 300, 300);
            m_tex.update_canvas_ctx(face_text, "skinnings_text");
                    }
                }

     
    }
    // TEXTINPUT function: End
    
    textInput();
/////TEXT INPUT: End///// 

        
}
// LOAD_CD function: End 
    
});b4w.require("beSomething").init();   


html script looks like this:
 <!DOCTYPE html>
<html>

<head>

<title>be-something</title>

<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">

<link rel="stylesheet" href="beSomething.css" type="text/css">


    
<script type="text/javascript" src="b4w.min.js"></script>
<script type="text/javascript" src="beSomething.js"></script>
    



</head>

<body>
<!-- CONTROL SCREEN: Start -->
<div id="controlScreen" style="z-index:1;" align="center">
<video autoplay="true" id="videoElement">   
</div>
<!-- CONTROL SCREEN: End -->
    

<!-- POSITION FACE: Start -->
<div id="controlScreen" style="z-index:4;" align="center"><img src="target.png" style="position:relative; height:100%; width:100%; z-index:5;">
</div>
<!-- POSITION FACE: End -->    


<!-- 3D VIEWER: Start --> 
<div id="main_canvas_container" style="z-index:0;"></div>
<!-- 3D VIEWER: End --> 
    
<!-- BUTTON SCREENSHOT: Start -->
<div style="position:absolute; left:-3px; bottom:90px; width:135px; z-index:4;">
<div id="btnScreenshot" class="Button" style="position:absolute; width:30px; height:30px; right:59px; background-color:#F00" align="center"> <img src="screenshot.png" style="position:relative; top:2px; width:24px; height:24px; z-index:3;"> </div>
<h id="text-menu" style="top:34px;">take a<br> screenshot!</h>
</div>
<!-- BUTTON SCREENSHOT: End -->

    
    
<!-- TEXT AREA: Start -->    
<div style="position:absolute; left:150px; bottom:90px; width:135px; z-index:3;">
<br>
<!-- <input type="text" id="myText" value="Some text..."> -->
<textarea spellcheck="false" id = "myText" rows="1">hello world</textarea>
<br>
<button id="Enter">enter</button>
</div>
<!-- TEXT AREA: End -->  
    
    
</body>

</html>
  
30 August 2017 13:36
I hit F12 in the browser (Chrome or Mozilla) and looked a the console. I found several errors but this one would cause a major problem:
Uncaught ReferenceError: m_scenes is not defined
at textInput (beSomething.js:169)
at Object.load_cb [as loaded_cb] (beSomething.js:220)
at Object.cb_before (

In your code you define the "scenes" module as m_scn.
var m_scn     = require("scenes");

So this code won't work:
var face_text = m_scenes.get_object_by_name("face_text");
30 August 2017 14:18
Oh ! Very cool !
Thank you for your tip, Will. I'll correct this and look if it fixes the trouble.
Thanks again
30 August 2017 14:37
Great, it works !!
Thank you very much, Will
26 July 2018 10:54
And thank you sunnix for your code !
Very helpfull for me !
 
Please register or log in to leave a reply.