Build ứng dụng Voice Call trên nền tảng Web
Build ứng dụng Voice call/Video call
Danh sách bài học
Build ứng dụng Voice Call trên nền tảng Web
Xây dựng ứng dụng Voice Call trên Web
Ở bài trước, Kteam đã hướng dẫn các bạn cách BUILD ỨNG DỤNG VOICE CALL TRÊN NỀN TẢNG ANDROID. Qua đó, bạn đã có thể tự xây dựng được ứng dụng gọi thoại nhanh chóng hơn nhờ tích hợp SDK của bên thứ 3.
Tiếp nối khóa học, trong bài này chúng ta sẽ cùng nhau thực hiện xây dựng một ứng dụng voice Call trên nền tảng Web.
Nội dung
Trong bài này, Kteam sẽ hướng dẫn bạn các nội dung chính như sau:
- Thêm Stringee SDK vào project
- Kết nối Stringee server
- Xử lý luồng tạo cuộc gọi đi
- Xử lý luồng nhận cuộc gọi đến
- Thêm các tính năng phụ: mute, đổi cam, đổi loa, tắt/mở camera
- Test lại luồng tạo , nhận cuộc gọi
Thư viện sử dụng
- Đăng kí account và tạo project mới
- Tham khảo Samples: Voice call integration demo
- Code sample: Web Code Sample
- Xem document: Getting started with Stringee Call API using Web SDK
Hướng dẫn code
- Lắng nghe event click từ loginBtn để lấy token và kết nối với StringeeClient
const client = new StringeeClient()
let call
client.on('connect', function () {
console.log('connected')
})
client.on('authen', function (res) {
console.log('authen', res)
if (res.r === 0) {
userId.textContent = res.userId
}
})
loginBtn.addEventListener('click', function () {
const token = accessToken.value
client.connect(token)
})
- Bổ sung cài đặt xử lý các event từ StringeeCall
function settingCallEvent(call1) {
call1.on('addremotestream', function (stream) {
// reset srcObject to work around minor bugs in Chrome and Edge.
console.log('addremotestream');
remoteAudio.srcObject = null;
remoteAudio.srcObject = stream;
});
call1.on('addlocalstream', function (stream) {
// reset srcObject to work around minor bugs in Chrome and Edge.
console.log('addlocalstream');
});
call1.on('signalingstate', function (state) {
console.log('signalingstate ', state);
var reason = state.reason;
callStatus.textContent = reason;
});
call1.on('mediastate', function (state) {
console.log('mediastate ', state);
});
call1.on('info', function (info) {
console.log('on info:' + JSON.stringify(info));
});
}
- Lắng nghe event click của callBtn và thực hiện gọi hàm makeCall để thực hiện cuộc gọi
callBtn.addEventListener('click', function () {
const fromNumber = document.getElementById('from').value
const toNumber = document.getElementById('to').value
call = new StringeeCall(client, fromNumber, toNumber, false)
console.log('stringee call', call)
settingCallEvent(call)
call.makeCall(function (res) {
console.log('make call callback: ' + JSON.stringify(res));
})
})
- Lắng nghe event incomingcall của StringeeClient để xử lý khi có cuộc gọi đổ đến
client.on('incomingcall', function (incomingcall) {
console.log('incomingcall', incomingcall);
call = incomingcall;
settingCallEvent(incomingcall);
var answer = confirm('Incoming call from: ' + incomingcall.fromNumber + ', do you want to answer?');
if (answer) {
call.answer(function (res) {
console.log('answer res', res);
});
} else {
call.reject(function (res) {
console.log('reject res', res);
});
}
});
- Lắng nghe event click button hangup và mute để xử lý phần ngắt cuộc gọi và tắt tiếng
hangupBtn.addEventListener('click', function () {
call.hangup(function (res) {
console.log('hangup res', res);
})
})
muteBtn.addEventListener('click', function () {
console.log('clicked')
const muted = call.muted
console.log('muted', muted)
call.mute(!muted)
})
Kết
Trong bài này, chúng ta đã cùng nhau xây dựng một ứng dụng voice Call trên nền tảng Web.
Ở bài sau, Kteam sẽ hướng dẫn các bạn cách XÂY DỰNG ỨNG DỤNG VIDEO CALL TRÊN NỀN TẢNG WEB.
Cảm ơn các bạn đã theo dõi bài viết. Hãy để lại bình luận hoặc góp ý của bạn để phát triển bài viết tốt hơn. Đừng quên “Luyện tập – Thử thách – Không ngại khó”
Tải xuống
Tài liệu
Nhằm phục vụ mục đích học tập Offline của cộng đồng, Kteam hỗ trợ tính năng lưu trữ nội dung bài học Build ứng dụng Voice Call trên nền tảng Web dưới dạng file PDF trong link bên dưới.
Ngoài ra, bạn cũng có thể tìm thấy các tài liệu được đóng góp từ cộng đồng ở mục TÀI LIỆU trên thư viện Howkteam.com
Đừng quên like và share để ủng hộ Kteam và tác giả nhé!
Thảo luận
Nếu bạn có bất kỳ khó khăn hay thắc mắc gì về khóa học, đừng ngần ngại đặt câu hỏi trong phần bên dưới hoặc trong mục HỎI & ĐÁP trên thư viện Howkteam.com để nhận được sự hỗ trợ từ cộng đồng.
Nội dung bài viết
Tác giả/Dịch giả
Khóa học
Build ứng dụng Voice call/Video call
Trong khóa học BUILD ỨNG DỤNG VOICE CALL/VIDEO CALL này, Kteam sẽ hướng dẫn các bạn cách làm tối ưu hơn để tiết kiệm thời gian phát triển bằng việc sử dụng SDKs của đơn vị thứ ba.
Đánh giá
Hôm nào anh Long và Kteam có thể hướng dẫn tụi em xây dựng ứng dụng video call bằng WebRTC được không? Xin cảm ơn Kteam