Example

Insert OnCaller Javascript SDK to your page, before open body tag

<script type="text/javascript" src="https://cdn.oncaller.asia/assets/js/sdk/v1.0/oncaller.latest.sdk.bundle.min.js"></script>

Receive a Call

let onCallerClient = new OnCallerClient();
onCallerClient.connect(CALLER_ACCESS_TOKEN);

onCallerClient.on('connect', function (res) {
                // console.log('connect', res);
            });
onCallerClient.on('authen', function (res) {
    // console.log('auth', res);
});

onCallerClient.on('incomingcall', function (onCallerCall) {
    //onCallerCall: This is OnCallerCall instance => Setting event
    onCallerCall.on('addlocalstream', function (res) {
                // console.log('addlocalstream', res);
            });
    onCallerCall.on('addremotestream', function (stream) {
        //TODO: Bind to local stream
        let remoteVideo = document.getElementById('#remoteVideo');
        remoteVideo.srcObject = null;
        remoteVideo.srcObject = stream;
    });
    onCallerCall.on('mediastate', function (res) {
        // console.log('mediastate', res);
    });
    
    // Signaling States
    onCallerCall.on('signalingstate', function (state) {
    //TODO
    });
    
    onCallerCall.answer(); //Answer call
    //onCallerCall.reject(); // Reject call
});

Make a Call

let onCallerClient = new OnCallerClient();
onCallerClient.connect(CALLER_ACCESS_TOKEN);

onCallerClient.on('connect', function (res) {
                // console.log('connect', res);
            });
onCallerClient.on('authen', function (res) {
    // console.log('auth', res);
});
// If you wanna to use auto select telco, use: ADAPTIVENUMBER

let onCallerCall = new OnCallerCall(onCallerClient, 'ADAPTIVENUMBER', '84904893123', false);

onCallerCall.on('addlocalstream', function (res) {
            // console.log('addlocalstream', res);
        });
onCallerCall.on('addremotestream', function (stream) {
    //TODO: Bind to local stream
    let remoteVideo = document.getElementById('#remoteVideo');
    remoteVideo.srcObject = null;
    remoteVideo.srcObject = stream;
});
onCallerCall.on('mediastate', function (res) {
    // console.log('mediastate', res);
});

// Signaling States
onCallerCall.on('signalingstate', function (state) {
    if (state.code === 6) { //Ended
        //
    } else if (state.code === 5) { //Busy
        //
    } else if (state.code === 3) { //answer
  
        // Count duration here
    }

    if (state.reason === 'Calling') {
       //
    } else if (state.reason === 'Ringing') {
       //
    } else if (state.reason === 'Busy here') {
       //
    } else if (state.reason === 'Answered') {
        //
    } else if (state.reason === 'Ended') {
        //
    } else {
        //
    }
});