Sistem Penstriman Masa Nyata (WebRTC + Data Langsung) · Pelajaran

Menambah dan Mengalih Keluar Trek Media

Pelajari cara mengurus trek audio dan video dalam `RTCPeerConnection`, sekali gus membolehkan manipulasi aliran secara dinamik semasa panggilan.

Pelajaran 2 daripada 411 langkah

Menambah dan Mengalih Keluar Trek Media ialah pelajaran Sistem Penstriman Masa Nyata (WebRTC + Data Langsung) percuma di CoddyKit. Ini ialah pelajaran 2 daripada 4. Anda boleh membaca keseluruhan pelajaran di bawah secara percuma — kemudian berlatih secara praktikal dalam pelayar menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Sistem Penstriman Masa Nyata (WebRTC + Data Langsung), dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Sistem Penstriman Masa Nyata (WebRTC + Data Langsung) merangkumi sejumlah 4 pelajaran.

Media Dinamik dalam Panggilan WebRTC

Bayangkan anda sedang dalam panggilan video dan mahu menyenyapkan mikrofon atau menukar kamera. Bagaimanakah WebRTC mengendalikan perubahan ini tanpa memutuskan panggilan?

Pelajaran ini meneroka cara menambah dan mengalih keluar runut audio/video secara dinamik daripada sambungan rakan setara WebRTC yang aktif. Hal ini penting untuk menghasilkan aplikasi masa nyata yang interaktif dan fleksibel.

Apakah MediaStreamTrack?

Sebelum mengurus runut, mari jelaskan maksudnya. MediaStreamTrack mewakili satu komponen audio atau video dalam MediaStream.

Jenis: Runut mempunyai sifat kind, sama ada 'audio' atau 'video'.
Diaktifkan: Sifat enabled (boolean) membolehkan anda menjeda atau menyambung semula runut buat sementara waktu tanpa mengalih keluarnya.

Menghantar Media dengan addTrack()

Untuk mula menghantar trek audio atau video tempatan kepada rakan jauh, gunakan kaedah RTCPeerConnection.addTrack().

Kaedah ini menerima dua argumen:

MediaStreamTrack yang ingin dihantar.
MediaStream yang menjadi kepunyaan trek tersebut (penting untuk mengumpulkan trek yang berkaitan).

Kaedah ini memberitahu sambungan rakan supaya menyediakan dan menghantar data trek tersebut.

Kod: Menambah Trek Video Tempatan

Mari lihat cara menambah trek video tempatan kepada RTCPeerConnection. Petikan ini menyediakan sambungan rakan asas dan menambah suapan kamera.

async function addLocalVideoTrack() {
  // In a real app, 'pc' would be an already established RTCPeerConnection
  const pc = new RTCPeerConnection();

  try {
    // Get access to the user's camera
    const localStream = await navigator.mediaDevices.getUserMedia({ video: true, audio: false });
    const videoTrack = localStream.getVideoTracks()[0];

    // Add the video track to the peer connection
    const sender = pc.addTrack(videoTrack, localStream);
    console.log('Video track added! RTCRtpSender:', sender);

    // In a full WebRTC app, you'd now create an offer and exchange SDP
    // pc.createOffer().then(offer => pc.setLocalDescription(offer)).then(() => sendOfferToRemote(pc.localDescription));

  } catch (error) {
    console.error('Error adding video track:', error);
  }
}

addLocalVideoTrack();

Memahami RTCRtpSender

Apabila anda memanggil pc.addTrack(), ia mengembalikan objek RTCRtpSender. Objek ini ialah pemegang anda untuk mengurus penghantaran trek tertentu tersebut.

Objek ini membolehkan anda mengubah suai parameter yang berkaitan dengan cara trek dihantar.
Objek ini juga diperlukan jika anda mahu membuang trek tersebut daripada sambungan rakan kemudian.

Menghentikan Media dengan removeTrack()

Untuk berhenti menghantar trek media tertentu, gunakan kaedah RTCPeerConnection.removeTrack().

Kaedah ini menerima satu argumen: objek RTCRtpSender yang dikembalikan apabila anda mula-mula memanggil addTrack() untuk trek tersebut.

Selepas dibuang, data trek itu tidak lagi dihantar melalui sambungan rakan.

Kod: Melaksanakan removeTrack()

Mari kembangkan contoh sebelumnya untuk menunjukkan cara membuang trek selepas trek itu ditambah. Kita perlu menyimpan RTCRtpSender.

let peerConnection; // Global or accessible RTCPeerConnection instance
let videoSender;    // Global or accessible RTCRtpSender instance
let localVideoTrack; // Global or accessible MediaStreamTrack

async function setupAndAddTrack() {
  peerConnection = new RTCPeerConnection();

  try {
    const localStream = await navigator.mediaDevices.getUserMedia({ video: true, audio: false });
    localVideoTrack = localStream.getVideoTracks()[0];
    videoSender = peerConnection.addTrack(localVideoTrack, localStream);
    console.log('Video track added. Sender:', videoSender);
  } catch (error) {
    console.error('Error during setup or addTrack:', error);
  }
}

function removeLocalVideoTrack() {
  if (peerConnection && videoSender) {
    peerConnection.removeTrack(videoSender);
    localVideoTrack.stop(); // Stops the camera/mic itself
    console.log('Video track removed and stopped!');
  } else {
    console.log('No track to remove or not set up.');
  }
}

// Simulate adding a track, then removing it after 3 seconds
setupAndAddTrack().then(() => {
  setTimeout(removeLocalVideoTrack, 3000);
});

Menerima Kemas Kini Trek Jauh

Pada pihak penerima, bagaimanakah rakan mengetahui bahawa trek baharu telah ditambah atau trek sedia ada telah dibuang oleh pengirim?

Pendengar peristiwa RTCPeerConnection.ontrack dicetuskan pada rakan penerima apabila MediaStreamTrack baharu ditambah pada penerangan jauh. Di sinilah anda biasanya akan menyambungkan trek yang masuk kepada elemen video atau audio.

Pengurusan Trek dalam Situasi Sebenar

Pengurusan trek secara dinamik penting untuk banyak ciri masa nyata:

Membisukan/Menyahbisu: Togol sahaja track.enabled = false atau true.
Menukar Kamera/Mikrofon: Buang trek lama, dapatkan trek baharu daripada getUserMedia(), kemudian tambah trek baharu itu.
Perkongsian Skrin: Dapatkan trek perkongsian skrin (contohnya dengan getDisplayMedia()) dan tambahkannya kepada sambungan rakan.

Uji Pengetahuan Anda tentang Trek

RTCPeerConnection membolehkan pengurusan strim media secara dinamik. Mari semak pemahaman anda tentang cara trek dikendalikan.

Jawab dalam pelajaran interaktif

Ulang Kaji: Kawalan Media Dinamik

Dalam pelajaran ini, anda telah mempelajari cara mengurus trek media secara dinamik dalam panggilan WebRTC:

addTrack() menghantar MediaStreamTrack dan mengembalikan RTCRtpSender.
removeTrack() menghentikan penghantaran trek dengan menerima RTCRtpSender trek tersebut.
Rakan jauh mendengar peristiwa ontrack untuk menerima media baharu.
Anda boleh membisukan/menyahbisu menggunakan track.enabled dan menukar sumber dengan menambah atau membuang trek.

Dengan menguasai kaedah ini, anda boleh menghasilkan pengalaman masa nyata yang kaya dan interaktif!

Percuma untuk bermula

Pelajari Sistem Penstriman Masa Nyata (WebRTC + Data Langsung) dengan tutor kecerdasan buatan — percuma

Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.

Kursus: 12
Pelajaran: 48

Mula belajar secara percuma Lihat kursus penuh

Soalan Lazim

Adakah pelajaran “Menambah dan Mengalih Keluar Trek Media” percuma?

Ya — teks penuh “Menambah dan Mengalih Keluar Trek Media” boleh dibaca secara percuma di web ini. Untuk berlatih secara interaktif menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7, serta membuka kunci baki kursus Sistem Penstriman Masa Nyata (WebRTC + Data Langsung), tingkat taraf kepada CoddyKit PRO. Kursus Sistem Penstriman Masa Nyata (WebRTC + Data Langsung) merangkumi sejumlah 4 pelajaran.

Apakah yang akan saya pelajari dalam “Menambah dan Mengalih Keluar Trek Media”?

Pelajari cara mengurus trek audio dan video dalam `RTCPeerConnection`, sekali gus membolehkan manipulasi aliran secara dinamik semasa panggilan. Anda berlatih Sistem Penstriman Masa Nyata (WebRTC + Data Langsung) menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.

Adakah saya memerlukan pengalaman untuk memulakan Sistem Penstriman Masa Nyata (WebRTC + Data Langsung)?

Tiada pengalaman terdahulu diperlukan. Pembelajaran Sistem Penstriman Masa Nyata (WebRTC + Data Langsung) di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 2 daripada 4.

Berapa lamakah pelajaran “Menambah dan Mengalih Keluar Trek Media” diambil?

Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.

Bolehkah saya menulis dan menjalankan kod dalam pelajaran Sistem Penstriman Masa Nyata (WebRTC + Data Langsung) ini?

Ya. Setiap pelajaran Sistem Penstriman Masa Nyata (WebRTC + Data Langsung) menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.

Semua pelajaran dalam kursus ini

← Kembali ke Sistem Penstriman Masa Nyata (WebRTC + Data Langsung)