korbav / wave.js-typescript

Temporary repository, please see https://github.com/foobar404/Wave.js.git instead
4 stars 1 forks source link

in fromStream() deactivate() function does not work properly #4

Open bulutMuhammet opened 2 years ago

bulutMuhammet commented 2 years ago

``hi, i have problem when i want to stop and restart fromStream() function. whenever I deactivate() . and it doesn't work again after using WaveJS.fromStream() again. how can i solve this.

`function start() {

    navigator.mediaDevices.getUserMedia({
        audio: true,
    }).then((mediaStream) => {
        stream = mediaStream
        const {deactivate} = WaveJS.fromStream(
            stream,
            "canvas",
            {
                type: "fireworks",
                colors: ["white"]

            }
            , {connectDestination: false}
        )
        deactivate_wave = deactivate

    })

}

function stop() {
    deactivate_wave()

}
korbav commented 2 years ago

``hi, i have problem when i want to stop and restart fromStream() function. whenever I deactivate() . and it doesn't work again after using WaveJS.fromStream() again. how can i solve this.

`function start() {

    navigator.mediaDevices.getUserMedia({
        audio: true,
    }).then((mediaStream) => {
        stream = mediaStream
        const {deactivate} = WaveJS.fromStream(
            stream,
            "canvas",
            {
                type: "fireworks",
                colors: ["white"]

            }
            , {connectDestination: false}
        )
        deactivate_wave = deactivate

    })

}

function stop() {
    deactivate_wave()

}

Hi @bulutMuhammet , you probably missed to include some of your code in your snippet. I created the following one to implement your use case and it's working well :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/dist/Wave.js-typescript.min.js"></script>
</head>
<body>
<canvas id="canvas" style="width: 100%; height: 100%; background: black;" ></canvas>
<script>
  let deactivate_wave, stream;

  function start() {
    navigator.mediaDevices.getUserMedia({
      audio: true,
    }).then((mediaStream) => {
      stream = mediaStream;
      const { deactivate } = WaveJS.fromStream(
        stream,
        "canvas",
        {
          type: "fireworks",
          colors: ["white"]
        }
        , { connectDestination: false }
      );
      deactivate_wave = deactivate;
    });
  }

  function stop() {
    deactivate_wave();
  }

  setTimeout(start, 0);
  setTimeout(stop, 10000);
  setTimeout(start, 20000);

</script>
</body>
</html>
korbav commented 2 years ago

@bulutMuhammet Did it solve your problem? If so, please feel free to close, if not please tell me more about which browser do you use ? is there any error logged onto the console?

bulutMuhammet commented 2 years ago

Hi @korbav I am sorry I forgot to tell. Yes its works right now. Thanks for your help :)