无需单击按钮，函数方法就会在反应中调用

Question

i'm calling intiateVideoCall method first and i have button called turnOff but its loading first with out clicking the button i don't undestand the issue here. please help me thanks in advance

const constraints = {'video': true, 'audio': true};
var localStream,providerName ;
  
  function turnOff(){
   alert('calling....')        
   } 


async function playFromLocalCamera() {
    try {
        const stream = await navigator.mediaDevices.getUserMedia(constraints);
        const localElement = document.querySelector('video#localVideo');
        localElement.srcObject = stream;
        return stream;
    } catch(error) {
        console.error('Error opening video camera.', error);
    }
}


async function intiateVideoCall() {
    providerName = getProviderName().replace('/provider/','');
    localStream = await playVideoFromLocalCamera();
    socket.emit('provider_join',providerName);   
  }




      <div className="md-form" id="customerWaiting">
          <video id="localVideo" width="80%" height="80%" autoPlay playsInline controls={false} onLoad={intiateVideoCall()}/>
          <video id="remoteVideo" width="80%" height="80%" autoPlay playsInline controls={false} />
          <button type="button" id="video" class="btn btn-outline-primary"  onClick={turnOff()}>
            <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-camera-video" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
              <path fill-rule="evenodd" d="M0 5a2 2 0 0 1 2-2h7.5a2 2 0 0 1 1.983 1.738l3.11-1.382A1 1 0 0 1 16 4.269v7.462a1 1 0 0 1-1.406.913l-3.111-1.382A2 2 0 0 1 9.5 13H2a2 2 0 0 1-2-2V5z"></path>
            </svg>
          </button>
      </div>                  
    

Answer 1

Instead of

<video id="localVideo" width="80%" height="80%" autoPlay playsInline controls={false} onLoad={intiateVideoCall()}/>
...
<button type="button" id="video" class="btn btn-outline-primary"  onClick={turnOff()}>

Use

<video id="localVideo" width="80%" height="80%" autoPlay playsInline controls={false} onLoad={intiateVideoCall}/>
...
<button type="button" id="video" class="btn btn-outline-primary"  onClick={turnOff}>

When we use onLoad={intiateVideoCall()} or onClick={turnOff()} then function will get executed even without click event.