video Javascript, HTML5, efect

Question

I am currently working on the treatment of stereoscopic side by side videos, the user can choose the effect he wants to add on his video (black and white, sepia, anaglyph (which is still not done )) I added buttons for example normal and black and white, when I click on the normal button my video is displayed perfectly well then by clicking on the black and white button I try to have the effect B / W but the result that shows me is N / b..normal .... N / b ... normal ... N / b ... normal, I do not see where the problem is I need help thank you :)

            <!DOCTYPE html>
            <meta charset=utf-8 />
            <script src="video.js" type="text/javascript"></script>
            <link href="video-js.css" rel="stylesheet" type="text/css">
            <title>Mon projet </title>

            <h1> <marquee>Streaming </marquee></h1>
            <center>

                <h1> Choisir effet </h1>


            <span id="cvsModeLbl">Mode:</span>

            <input type="button"  id="cvsbtnNormal" value="Normal" />
            <input type="button"  id="cvsbtnBW" value="Black &amp; White" />


            <h1> Vidéo Side by side</h1>
            <video id=v  controls loop width="500" height="400">

              <source src=video2.mp4 type=video/mp4>
                <source src=video2.webm type=video/webm>
                <source src=video2.ogg type=video/ogg>

            </video>


            <canvas id=c width="500" height= "400"></canvas>

            <style> c { background: black; } </style>



            <script>


                var v = document.getElementById('v');

                var canvas = document.getElementById('c');
                var context = canvas.getContext('2d');
                var back = document.createElement('canvas');
                var backcontext = back.getContext('2d');

                 var back1 = document.createElement('canvas');
                var backcontext1 = back1.getContext('2d');
                v.crossOrigin = 'anonymous';
                var cw,ch;

                    cw = v.width;
                    ch = v.height;
                    back.width=cw;
                    back.hight=ch;
                    back1.width=cw;
                    back1.height=ch;



            var effectNormal = document.getElementById("cvsbtnNormal");
            var effectBw = document.getElementById("cvsbtnBW");

            effectNormal.addEventListener("click", myFunction);
            effectBw.addEventListener("click", myFunction1);


             function myFunction(){
               context.clearRect(0,0,500,400);
                // First, draw it into the backing canvas
                context.drawImage(v,0,0,cw,ch);

              setTimeout(function(){ myFunction() }, 0);
            }


             function myFunction1(){

              context.clearRect(0,0,500,400);
                context.drawImage(v,0,0,cw,ch);
                // Grab the pixel data from the backing canvas
                var idata = context.getImageData(0,0,cw,ch);
                var data = idata.data;
                // Loop through the pixels, turning them grayscale
                    for(var i = 0; i < data.length; i+=4)
                    {
                        var r = data[i],
                            g = data[i+1],
                            b = data[i+2],
                            gray = (r+g+b)/3;
                        data[i] = gray;
                        data[i+1] = gray;
                        data[i+2] = gray;
                    }

                idata.data = data;
                // Draw the pixels onto the visible canvas
                context.putImageData(idata,0,0);
                // Start over!
                setTimeout(function(){  myFunction1(); }, 0); 
            }


            </script>

In English, please ... https://meta.stackexchange.com/questions/13676/do-posts-have-to-be-in-english-on-stack-exchange — CBroe, Jan 12 '18 at 12:15
Please read [Is English required on stack overflow?](http://meta.stackoverflow.com/questions/13676/is-english-required-on-stack-overflow/13684#13684) (tl;dr: yes). Note to other SO users: [Do not translate this on behalf of the OP, if they can't ask the question in English, then they will struggle to respond to comments and answers](https://meta.stackoverflow.com/a/297680/19068). — Quentin, Jan 12 '18 at 12:18

gtato · Answer 1 · 2018-01-12T13:50:39.753

1

var to1, to2;
function myFunction(){
    clearTimeout(to1)
    clearTimeout(to2)
    context.clearRect(0,0,500,400);
    // First, draw it into the backing canvas
    context.drawImage(v,0,0,cw,ch);

    to1 = setTimeout(function(){ myFunction() }, 10);
}


function myFunction1(){
    clearTimeout(to1)
    clearTimeout(to2)
    context.clearRect(0,0,500,400);
    context.drawImage(v,0,0,cw,ch);
    // Grab the pixel data from the backing canvas
    var idata = context.getImageData(0,0,cw,ch);
    var data = idata.data;
    // Loop through the pixels, turning them grayscale
    for(var i = 0; i < data.length; i+=4)
    {
        var r = data[i],
        g = data[i+1],
        b = data[i+2],
        gray = (r+g+b)/3;
        data[i] = gray;
        data[i+1] = gray;
        data[i+2] = gray;
   }

   idata.data = data;
   // Draw the pixels onto the visible canvas
   context.putImageData(idata,0,0);
   // Start over!
   to2 = setTimeout(function(){  myFunction1(); }, 10); 
}

edited Jan 12 '18 at 13:50

answered Jan 12 '18 at 12:26

gtato

400
2
11

j'ai essayé de le faire, toujours le même effet – Amel maouche Jan 12 '18 at 12:32
Je pense que c'est parce que il faut arrêter les timeouts, j'ai mis a jour ma reponse – gtato Jan 12 '18 at 13:46
Alors ca fonctionne? – gtato Jan 13 '18 at 22:49
oui ça fonctionne, par contre j'ai essayé avec votre fonction et celle cité en bas et j'ai le même résultat qui veut dire que quand je clique sur le bouton normal il m'affiche bien puis des que je clique sur n/b ça devient un peu plus lent et plus je clique et plus ça se ralenti – Amel maouche Jan 13 '18 at 23:43
Je ne suis pas sur de comprendre. Qu'est ce que se ralenti? J'ai prepare ce jsFiddle: [link](https://jsfiddle.net/gtato/5tdhq8m2/) Tu vois le meme comportement que sur ton ordinateur? – gtato Jan 14 '18 at 00:19

score 0 · Answer 2 · answered Jan 12 '18 at 12:31

If you first click your "Normal" button, function() will be executed as fast and frequently as possible due to setTimeout() and has no way of being stopped.

If you then click your "Black & White" button, function1() will also be executed as fast and frequently as possible due to setTimeout() and has no way of being stopped.

Both functions modify the canvas in alternating fashion as they compete for CPU time.

Please consider using only 1 "render loop", and a way to break out of the loop using a stop button.

Instead of using setTimeout, consider using requestAnimationFrame and a check on video time as described here: https://stackoverflow.com/a/17048103/3931225

video Javascript, HTML5, efect

2 Answers2