Build ứng dụng Voice Call trên nền tảng Web

Build ứng dụng Voice call/Video call

5.0 (2 đánh giá)
Tạo bởi Kteam Cập nhật lần cuối 17:08 10-04-2023 2.082 lượt xem 0 bình luận
Tác giả/Dịch giả: Đang cập nhật
Học nhanh

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


Hướng dẫn code

  1. 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)
})

  1. 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));
    });
}
  1. 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));
  })
})
  1. 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);
        });
    }
});
  1. 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 likeshare để ủ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ả

Đang cập nhật

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á

kter_000 đã đánh giá 20:47 21-06-2023

Vo Tan Duc đã đánh giá 18:08 30-04-2023

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

Bình luận

Để bình luận, bạn cần đăng nhập bằng tài khoản Howkteam.

Đăng nhập
Không có video.