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

Build ứng dụng Voice call/Video call

0.0 (0 đánh giá)
Tạo bởi Kteam Cập nhật lần cuối 17:08 10-04-2023 1.070 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 Video Call trên nền tảng Web

Xây dựng ứng dụng Video Call trên nền tảng Web

Trong bài trước, chúng ta đã cùng nhau XÂY DỰNG ỨNG DỤNG VOICE CALL TRÊN NỀN TẢNG WEB.

Ở bài học này, Kteam sẽ hướng dẫn các bạn cách Xây dưng một ứng dụng Video Call trên nền tảng Web đơn giản.


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');
        remoteVideo.srcObject = null;
        remoteVideo.srcObject = stream;
    });

    call1.on('addlocalstream', function (stream) {
        // reset srcObject to work around minor bugs in Chrome and Edge.
        console.log('addlocalstream');
        localVideo.srcObject = null;
        localVideo.srcObject = stream;
    });

    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.

Lưu ý tham số cuối truyền vào là true để gọi videoCall

callBtn.addEventListener('click', function () {
  const fromNumber = document.getElementById('from').value
  const toNumber = document.getElementById('to').value
  call = new StringeeCall(client, fromNumber, toNumber, true)
  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 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 Video Call trên nền tảng Web.

Ở bài sau, chúng ta sẽ tiếp tục tìm hiểu và thực hành cách TÍCH HỢP PUSH NOTIFICATION VỚI IOS APP.

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 Video 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á

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.