Sử dụng Stringee Web Phone nhúng vào web của bạn để nghe gọi

Stringee Web Phone được xây dựng 100% dựa trên Stringee JavaScript SDK với đầy đủ giao diện để bạn có thể nhúng nhanh chóng vào Web của mình:

Demo 1 (nghe/gọi không mở Popup mới): https://demo.stringee.com/stringee-web-phone/web1.html

Demo 2 (nghe/gọi mở Popup mới): https://demo.stringee.com/stringee-web-phone/web2_open_popup.html

Mã nguồn Stringee Web Phone được chúng tôi cung cấp tại đây

Mã nguồn 2 demo trên tại đây

1. Nhúng Stringee Web Phone vào Website của bạn

Để nhúng vào web của bạn thì đặt đoạn script sau vào ngay sau thẻ body

<script src="https://static.stringee.com/web_phone/lastest/js/StringeeSoftPhone-lastest.js"></script>
<script>
    var config = {
        showMode: 'full',//full | min | none
        top: 45,
        left: 50,
        //right: 810,

        arrowLeft: 155,
        arrowDisplay: 'top',//top | bottom | none

        //list your Stringee Number
        fromNumbers: [{alias: 'Number-1', number: '+84899199586'}, {alias: 'Number-2', number: '+2222'}]
    };
    StringeeSoftPhone.init(config);

    var access_token2 = 'YOUR_ACCESS_TOKEN';

    StringeeSoftPhone.on('displayModeChange', function (event) {
        console.log('displayModeChange', event);
        if (event === 'min') {
            StringeeSoftPhone.config({arrowLeft: 75});
        } else if (event === 'full') {
            StringeeSoftPhone.config({arrowLeft: 155});
        }
    });

    StringeeSoftPhone.on('requestNewToken', function () {
        console.log('requestNewToken+++++++');
        StringeeSoftPhone.connect(access_token2);
    });

    StringeeSoftPhone.connect(access_token2);
</script>

trong đó config có các tham số sau:

2. Thay đổi cấu hình bất cứ lúc nào

Gọi hàm config(params) với tham số là cấu hình mới, VD:

StringeeSoftPhone.config({arrowLeft: 155});

hay để ẩn iframe:

StringeeSoftPhone.config({showMode: 'none'});

3. Tạo cuộc gọi đi, ngắt cuộc gọi, nghe máy cuộc gọi đến từ code bên ngoài của bạn

Tạo cuộc gọi:

StringeeSoftPhone.makeCall(FROM_NUMBER, TO_NUMBER, function (res) {
    console.log('res: ', res);
});

Ngắt cuộc gọi:

StringeeSoftPhone.hangupCall();

Nghe máy cuộc gọi đến:

StringeeSoftPhone.answerCall();

4. Kết nối và ngắt kết nối với StringeeServer

Kết nối:

StringeeSoftPhone.connect(access_token2);

Ngắt kết nối:

StringeeSoftPhone.disconnect();

5. Các sự kiện

a. Chế độ hiển thị thay đổi

StringeeSoftPhone.on('displayModeChange', function (event) {
    console.log('displayModeChange', event);
    if (event === 'min') {
        StringeeSoftPhone.config({arrowLeft: 75});
    } else if (event === 'full') {
        StringeeSoftPhone.config({arrowLeft: 155});
    }
});

b. Access token hết hạn, yêu cầu cấp access token mới

StringeeSoftPhone.on('requestNewToken', function () {
    console.log('requestNewToken+++++++');
    StringeeSoftPhone.connect(access_token2);
});

c. Sự kiện xảy ra ngay trước khi makeCall

Bạn có thể thay đổi 1 số thông tin về call trước khi makeCall

StringeeSoftPhone.on('beforeMakeCall', function (call, callType) {
    console.log('beforeMakeCall: ' + callType);
    return true;
});

d. Video call

Để gọi video, cần có 2 sự kiện sau và gán các stream vào các thẻ video tương ứng

StringeeSoftPhone.on('addlocalstream', function (stream) {
    //console.log('addlocalstream: ', stream);
    localVideo.srcObject = null;
    localVideo.srcObject = stream;
});
StringeeSoftPhone.on('addremotestream', function (stream) {
    //console.log('addremotestream: ', stream);
    remoteVideo.srcObject = null;
    remoteVideo.srcObject = stream;
});

e. Hoàn thành việc xác thực

StringeeSoftPhone.on('authen', function (res) {
    console.log('authen: ', res);
});

e. Bị ngắt kết nối

StringeeSoftPhone.on('disconnect', function () {
    console.log('disconnected');
});

f. Trạng thái về kết nối của cuộc gọi

StringeeSoftPhone.on('signalingstate', function (state) {
    console.log('signalingstate', state);
});

g. Sự kiện nút gọi được click

StringeeSoftPhone.on('makeOutgoingCallBtnClick', function (fromNumber, toNumber, callType) {
    console.log('makeOutgoingCallBtnClick: fromNumber=' + fromNumber + ', toNumber=' + toNumber + ',callType=' + callType);
});

h. Sự kiện nút nghe máy được click

StringeeSoftPhone.on('answerIncomingCallBtnClick', function () {
    console.log('answerIncomingCallBtnClick');
});

i. Sự kiện có cuộc gọi đến

StringeeSoftPhone.on('incomingCall', function (incomingcall) {
    console.log('incomingCall: ', incomingcall);
});

j. Sự kiện nút ngắt máy được click

StringeeSoftPhone.on('endCallBtnClick', function () {
    console.log('endCallBtnClick');
});

k. Sự kiện màn hình "call" ẩn

StringeeSoftPhone.on('callingScreenHide', function () {
    console.log('callingScreenHide');
});

l. Sự kiện từ chối nghe cuộc gọi đến

StringeeSoftPhone.on('declineIncomingCallBtnClick', function () {
    console.log('declineIncomingCallBtnClick');
});

m. Sự kiện màn hình cuộc gọi đến ẩn

StringeeSoftPhone.on('incomingScreenHide', function () {
    console.log('incomingScreenHide');
});