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

Phát hành 2019-08-02

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:

Stringee Web Phone

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:

Field Type Require Default Description
showMode String NO full Chế độ hiển thị:
'full': đầy đủ
'min': nhỏ
'none': ẩn
top Int NO undefined Tương tự 'top' của CSS
left Int NO undefined Tương tự 'left' của CSS
right Int NO undefined Tương tự 'right' của CSS
bottom Int NO undefined Tương tự 'bottom' của CSS
arrowDisplay String NO top Vị trí của Arrow:
'top': bên trên
'bottom': bên dưới
'none': ẩn
arrowLeft Int NO 20 Arrow cách mép trái
fromNumbers Array NO [] Mảng các số from, VD: [{alias: 'Number-1', number: '+84899199586'}, {alias: 'Number-2', number: '+2222'}]
askCallTypeWhenMakeCall Boolean NO false false=không hỏi kiểu cuộc gọi là gì khi User nhấn Call, mặc định là kiểu 'callout'; true=hỏi người dùng kiểu call là gì khi nhấn Call
appendToElement String NO null null: iframe được append vào trước thẻ ; nếu khác null thì iframe được nhúng vào element có ID bằng giá trị này
makeAndReceiveCallInNewPopupWindow Boolean NO false Khi trường này được set=true thì khi người dùng bấm nút 'Nghe máy' hoặc nút 'Gọi', Softphone sẽ không xử lý tiếp mà chỉ gọi ra các sự kiện 'answerIncomingCallBtnClick' và 'makeOutgoingCallBtnClick', bạn phải thực hiện 2 sự kiện này và mở ra 1 popup window để nghe/gọi trên đó

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');
});