ಫ್ರಂಟ್‌ಎಂಡ್ ಮೀಡಿಯಾಸ್ಟ್ರೀಮ್ ಟ್ರ್ಯಾಕ್: ಮೀಡಿಯಾ ಟ್ರ್ಯಾಕ್ ನಿರ್ವಹಣೆಗೆ ಸಮಗ್ರ ಮಾರ್ಗದರ್ಶಿ

MediaStreamTrack ಇಂಟರ್ಫೇಸ್ MediaStream ನಲ್ಲಿನ ಒಂದೇ ಮೀಡಿಯಾ ಟ್ರ್ಯಾಕ್ ಅನ್ನು ಪ್ರತಿನಿಧಿಸುತ್ತದೆ. ಈ ಟ್ರ್ಯಾಕ್ ಆಡಿಯೋ ಅಥವಾ ವೀಡಿಯೊವನ್ನು ಒಳಗೊಂಡಿರಬಹುದು. ವೆಬ್‌ನಲ್ಲಿ ದೃಢವಾದ ಮತ್ತು ಸಂವಾದಾತ್ಮಕ ಮೀಡಿಯಾ ಅಪ್ಲಿಕೇಶನ್‌ಗಳನ್ನು ನಿರ್ಮಿಸಲು ಈ ಟ್ರ್ಯಾಕ್‌ಗಳನ್ನು ಹೇಗೆ ನಿರ್ವಹಿಸುವುದು ಎಂಬುದನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು ಬಹಳ ಮುಖ್ಯ. ಈ ಸಮಗ್ರ ಮಾರ್ಗದರ್ಶಿ ಫ್ರಂಟ್‌ಎಂಡ್ ಅಭಿವೃದ್ಧಿಯಲ್ಲಿ ಮೀಡಿಯಾಸ್ಟ್ರೀಮ್ ಟ್ರ್ಯಾಕ್‌ಗಳ ರಚನೆ, ನಿರ್ವಹಣೆ ಮತ್ತು ನಿರ್ವಹಣೆಯ ಮೂಲಕ ನಿಮ್ಮನ್ನು ಕರೆದೊಯ್ಯುತ್ತದೆ.

ಮೀಡಿಯಾಸ್ಟ್ರೀಮ್ ಟ್ರ್ಯಾಕ್ ಎಂದರೇನು?

MediaStream ಎನ್ನುವುದು ಮೀಡಿಯಾ ವಿಷಯದ ಸ್ಟ್ರೀಮ್ ಆಗಿದ್ದು, ಇದು ಹಲವಾರು MediaStreamTrack ಆಬ್ಜೆಕ್ಟ್‌ಗಳನ್ನು ಒಳಗೊಂಡಿರಬಹುದು. ಪ್ರತಿ ಟ್ರ್ಯಾಕ್ ಆಡಿಯೋ ಅಥವಾ ವೀಡಿಯೊದ ಒಂದೇ ಮೂಲವನ್ನು ಪ್ರತಿನಿಧಿಸುತ್ತದೆ. ಇದನ್ನು ಆಡಿಯೋ ಅಥವಾ ವೀಡಿಯೊ ಡೇಟಾದ ಒಂದು ಸ್ಟ್ರೀಮ್ ಅನ್ನು ಹಿಡಿದಿಟ್ಟುಕೊಳ್ಳುವ ಕಂಟೇನರ್ ಎಂದು ಭಾವಿಸಿ.

ಪ್ರಮುಖ ಗುಣಲಕ್ಷಣಗಳು ಮತ್ತು ವಿಧಾನಗಳು

• kind: ಟ್ರ್ಯಾಕ್‌ನ ಪ್ರಕಾರವನ್ನು ("audio" ಅಥವಾ "video") ಸೂಚಿಸುವ ಓದಲು-ಮಾತ್ರ ಸ್ಟ್ರಿಂಗ್.
• id: ಟ್ರ್ಯಾಕ್‌ಗಾಗಿ ಅನನ್ಯ ಗುರುತಿಸುವಿಕೆಯನ್ನು ಪ್ರತಿನಿಧಿಸುವ ಓದಲು-ಮಾತ್ರ ಸ್ಟ್ರಿಂಗ್.
• label: ಟ್ರ್ಯಾಕ್‌ಗಾಗಿ ಮಾನವ-ಓದುವ ಲೇಬಲ್ ಅನ್ನು ಒದಗಿಸುವ ಓದಲು-ಮಾತ್ರ ಸ್ಟ್ರಿಂಗ್.
• enabled: ಟ್ರ್ಯಾಕ್ ಪ್ರಸ್ತುತ ಸಕ್ರಿಯವಾಗಿದೆಯೇ ಎಂದು ಸೂಚಿಸುವ ಬೂಲಿಯನ್. ಇದನ್ನು false ಗೆ ಹೊಂದಿಸುವುದು ಟ್ರ್ಯಾಕ್ ಅನ್ನು ನಿಲ್ಲಿಸದೆ ಮ್ಯೂಟ್ ಮಾಡುತ್ತದೆ ಅಥವಾ ನಿಷ್ಕ್ರಿಯಗೊಳಿಸುತ್ತದೆ.
• muted: ಸಿಸ್ಟಮ್-ಮಟ್ಟದ ನಿರ್ಬಂಧಗಳು ಅಥವಾ ಬಳಕೆದಾರರ ಸೆಟ್ಟಿಂಗ್‌ಗಳಿಂದಾಗಿ ಟ್ರ್ಯಾಕ್ ಮ್ಯೂಟ್ ಆಗಿದೆಯೇ ಎಂದು ಸೂಚಿಸುವ ಓದಲು-ಮಾತ್ರ ಬೂಲಿಯನ್.
• readyState: ಟ್ರ್ಯಾಕ್‌ನ ಪ್ರಸ್ತುತ ಸ್ಥಿತಿಯನ್ನು ("live", "ended") ಸೂಚಿಸುವ ಓದಲು-ಮಾತ್ರ ಸ್ಟ್ರಿಂಗ್.
• getSettings(): ಟ್ರ್ಯಾಕ್‌ನ ಪ್ರಸ್ತುತ ಸೆಟ್ಟಿಂಗ್‌ಗಳ ನಿಘಂಟನ್ನು ಹಿಂತಿರುಗಿಸುತ್ತದೆ.
• getConstraints(): ಟ್ರ್ಯಾಕ್ ಅನ್ನು ರಚಿಸಿದಾಗ ಅದಕ್ಕೆ ಅನ್ವಯಿಸಲಾದ ನಿರ್ಬಂಧಗಳ ನಿಘಂಟನ್ನು ಹಿಂತಿರುಗಿಸುತ್ತದೆ.
• applyConstraints(constraints): ಟ್ರ್ಯಾಕ್‌ಗೆ ಹೊಸ ನಿರ್ಬಂಧಗಳನ್ನು ಅನ್ವಯಿಸಲು ಪ್ರಯತ್ನಿಸುತ್ತದೆ.
• clone(): ಮೂಲದ ಕ್ಲೋನ್ ಆಗಿರುವ ಹೊಸ MediaStreamTrack ಆಬ್ಜೆಕ್ಟ್ ಅನ್ನು ಹಿಂತಿರುಗಿಸುತ್ತದೆ.
• stop(): ಟ್ರ್ಯಾಕ್ ಅನ್ನು ನಿಲ್ಲಿಸುತ್ತದೆ, ಮೀಡಿಯಾ ಡೇಟಾದ ಹರಿವನ್ನು ಕೊನೆಗೊಳಿಸುತ್ತದೆ.
• addEventListener(): ended ಅಥವಾ mute ನಂತಹ ಟ್ರ್ಯಾಕ್‌ನಲ್ಲಿನ ಈವೆಂಟ್‌ಗಳನ್ನು ಕೇಳಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ.

ಮೀಡಿಯಾಸ್ಟ್ರೀಮ್ ಟ್ರ್ಯಾಕ್‌ಗಳನ್ನು ಪಡೆಯುವುದು

MediaStreamTrack ಆಬ್ಜೆಕ್ಟ್‌ಗಳನ್ನು ಪಡೆಯುವ ಪ್ರಾಥಮಿಕ ಮಾರ್ಗವೆಂದರೆ getUserMedia() API ಮೂಲಕ. ಈ API ಬಳಕೆದಾರರ ಕ್ಯಾಮೆರಾ ಮತ್ತು ಮೈಕ್ರೊಫೋನ್ ಅನ್ನು ಪ್ರವೇಶಿಸಲು ಅನುಮತಿಗಾಗಿ ಕೇಳುತ್ತದೆ, ಮತ್ತು ಅನುಮತಿ ನೀಡಿದರೆ, ವಿನಂತಿಸಿದ ಟ್ರ್ಯಾಕ್‌ಗಳನ್ನು ಒಳಗೊಂಡಿರುವ MediaStream ಅನ್ನು ಹಿಂತಿರುಗಿಸುತ್ತದೆ.

getUserMedia() ಅನ್ನು ಬಳಸುವುದು

ಬಳಕೆದಾರರ ಕ್ಯಾಮೆರಾ ಮತ್ತು ಮೈಕ್ರೊಫೋನ್ ಅನ್ನು ಪ್ರವೇಶಿಸಲು getUserMedia() ಅನ್ನು ಹೇಗೆ ಬಳಸುವುದು ಎಂಬುದಕ್ಕೆ ಇಲ್ಲಿ ಮೂಲಭೂತ ಉದಾಹರಣೆ ಇದೆ:

navigator.mediaDevices.getUserMedia({ video: true, audio: true })
  .then(function(stream) {
    // Use the stream here.
    const videoTrack = stream.getVideoTracks()[0];
    const audioTrack = stream.getAudioTracks()[0];

    // Example: Display the video in a video element
    const videoElement = document.getElementById('myVideo');
    videoElement.srcObject = stream;
    videoElement.play();
  })
  .catch(function(err) {
    console.log("An error occurred: " + err);
  });

ವಿವರಣೆ:

• navigator.mediaDevices.getUserMedia({ video: true, audio: true }): ಇದು ವೀಡಿಯೊ ಮತ್ತು ಆಡಿಯೊ ಇನ್‌ಪುಟ್‌ಗಳೆರಡಕ್ಕೂ ಪ್ರವೇಶವನ್ನು ವಿನಂತಿಸುತ್ತದೆ. getUserMedia ಗೆ ರವಾನಿಸಲಾದ ಆಬ್ಜೆಕ್ಟ್ ವಿನಂತಿಸಿದ ಮೀಡಿಯಾ ಪ್ರಕಾರಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುತ್ತದೆ.
• .then(function(stream) { ... }): ಬಳಕೆದಾರರು ಅನುಮತಿ ನೀಡಿದಾಗ ಮತ್ತು MediaStream ಯಶಸ್ವಿಯಾಗಿ ಪಡೆದಾಗ ಇದನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸಲಾಗುತ್ತದೆ.
• stream.getVideoTracks()[0]: ಇದು ಸ್ಟ್ರೀಮ್‌ನಿಂದ ಮೊದಲ ವೀಡಿಯೊ ಟ್ರ್ಯಾಕ್ ಅನ್ನು ಹಿಂಪಡೆಯುತ್ತದೆ. ಒಂದು ಸ್ಟ್ರೀಮ್ ಒಂದೇ ಪ್ರಕಾರದ ಅನೇಕ ಟ್ರ್ಯಾಕ್‌ಗಳನ್ನು ಒಳಗೊಂಡಿರಬಹುದು.
• stream.getAudioTracks()[0]: ಇದು ಸ್ಟ್ರೀಮ್‌ನಿಂದ ಮೊದಲ ಆಡಿಯೊ ಟ್ರ್ಯಾಕ್ ಅನ್ನು ಹಿಂಪಡೆಯುತ್ತದೆ.
• videoElement.srcObject = stream: ಇದು ವೀಡಿಯೊ ಎಲಿಮೆಂಟ್‌ನ srcObject ಅನ್ನು MediaStream ಗೆ ಹೊಂದಿಸುತ್ತದೆ, ವೀಡಿಯೊವನ್ನು ಪ್ರದರ್ಶಿಸಲು ಅನುಮತಿಸುತ್ತದೆ.
• videoElement.play(): ವೀಡಿಯೊ ಪ್ಲೇಬ್ಯಾಕ್ ಅನ್ನು ಪ್ರಾರಂಭಿಸುತ್ತದೆ.
• .catch(function(err) { ... }): ಬಳಕೆದಾರರು ಅನುಮತಿ ನಿರಾಕರಿಸಿದಂತಹ ದೋಷ ಸಂಭವಿಸಿದಲ್ಲಿ ಇದನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸಲಾಗುತ್ತದೆ.

ನಿರ್ಬಂಧಗಳು

ರೆಸಲ್ಯೂಶನ್, ಫ್ರೇಮ್ ದರ ಮತ್ತು ಆಡಿಯೊ ಗುಣಮಟ್ಟದಂತಹ ಮೀಡಿಯಾ ಟ್ರ್ಯಾಕ್‌ಗಳಿಗಾಗಿ ಅವಶ್ಯಕತೆಗಳನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸಲು ನಿರ್ಬಂಧಗಳು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತವೆ. ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್ ತನ್ನ ನಿರ್ದಿಷ್ಟ ಅಗತ್ಯಗಳನ್ನು ಪೂರೈಸುವ ಮೀಡಿಯಾ ಡೇಟಾವನ್ನು ಪಡೆಯುವುದನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು ಇದು ನಿರ್ಣಾಯಕವಾಗಿದೆ. getUserMedia() ಕರೆ ಒಳಗೆ ನಿರ್ಬಂಧಗಳನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸಬಹುದು.

navigator.mediaDevices.getUserMedia({
  video: {
    width: { min: 640, ideal: 1280, max: 1920 },
    height: { min: 480, ideal: 720, max: 1080 },
    frameRate: { ideal: 30, max: 60 }
  },
  audio: {
    echoCancellation: { exact: true },
    noiseSuppression: { exact: true }
  }
})
.then(function(stream) {
  // ...
})
.catch(function(err) {
  console.log("An error occurred: " + err);
});

ವಿವರಣೆ:

• width: { min: 640, ideal: 1280, max: 1920 }: ವೀಡಿಯೊ ಅಗಲವು ಕನಿಷ್ಠ 640 ಪಿಕ್ಸೆಲ್‌ಗಳು, ಆದರ್ಶಪ್ರಾಯವಾಗಿ 1280 ಪಿಕ್ಸೆಲ್‌ಗಳು ಮತ್ತು 1920 ಪಿಕ್ಸೆಲ್‌ಗಳಿಗಿಂತ ಹೆಚ್ಚಿರಬಾರದು ಎಂದು ಇದು ನಿರ್ದಿಷ್ಟಪಡಿಸುತ್ತದೆ. ಈ ನಿರ್ಬಂಧಗಳನ್ನು ಬೆಂಬಲಿಸುವ ಕ್ಯಾಮೆರಾವನ್ನು ಬ್ರೌಸರ್ ಹುಡುಕಲು ಪ್ರಯತ್ನಿಸುತ್ತದೆ.
• height: { min: 480, ideal: 720, max: 1080 }: ಅಗಲದಂತೆಯೇ, ಇದು ವೀಡಿಯೊದ ಅಪೇಕ್ಷಿತ ಎತ್ತರವನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುತ್ತದೆ.
• frameRate: { ideal: 30, max: 60 }: ಇದು ಪ್ರತಿ ಸೆಕೆಂಡಿಗೆ ಆದರ್ಶಪ್ರಾಯವಾಗಿ 30 ಫ್ರೇಮ್‌ಗಳ ಫ್ರೇಮ್ ದರವನ್ನು ವಿನಂತಿಸುತ್ತದೆ ಮತ್ತು ಪ್ರತಿ ಸೆಕೆಂಡಿಗೆ 60 ಫ್ರೇಮ್‌ಗಳಿಗಿಂತ ಹೆಚ್ಚಿಲ್ಲ.
• echoCancellation: { exact: true }: ಇದು ಆಡಿಯೊ ಟ್ರ್ಯಾಕ್‌ಗಾಗಿ ಎಕೋ ರದ್ದುಗೊಳಿಸುವಿಕೆಯನ್ನು ಸಕ್ರಿಯಗೊಳಿಸುವಂತೆ ವಿನಂತಿಸುತ್ತದೆ. exact: true ಎಂದರೆ ಬ್ರೌಸರ್ ಎಕೋ ರದ್ದುಗೊಳಿಸುವಿಕೆಯನ್ನು *ಒದಗಿಸಬೇಕು* ಅಥವಾ ವಿನಂತಿ ವಿಫಲಗೊಳ್ಳುತ್ತದೆ.
• noiseSuppression: { exact: true }: ಇದು ಆಡಿಯೊ ಟ್ರ್ಯಾಕ್‌ಗಾಗಿ ಶಬ್ದ ನಿಗ್ರಹವನ್ನು ಸಕ್ರಿಯಗೊಳಿಸುವಂತೆ ವಿನಂತಿಸುತ್ತದೆ.

ಬ್ರೌಸರ್ ಎಲ್ಲಾ ನಿರ್ಬಂಧಗಳನ್ನು ಪೂರೈಸಲು ಸಾಧ್ಯವಾಗದಿರಬಹುದು ಎಂಬುದನ್ನು ಗಮನಿಸುವುದು ಮುಖ್ಯ. ಅನ್ವಯಿಸಲಾದ ನಿಜವಾದ ಸೆಟ್ಟಿಂಗ್‌ಗಳನ್ನು ನಿರ್ಧರಿಸಲು ನೀವು MediaStreamTrack ನಲ್ಲಿ getSettings() ಅನ್ನು ಬಳಸಬಹುದು.

ಮೀಡಿಯಾಸ್ಟ್ರೀಮ್ ಟ್ರ್ಯಾಕ್‌ಗಳನ್ನು ನಿರ್ವಹಿಸುವುದು

ಒಮ್ಮೆ ನೀವು MediaStreamTrack ಅನ್ನು ಪಡೆದ ನಂತರ, ಆಡಿಯೊ ಮತ್ತು ವೀಡಿಯೊ ಔಟ್‌ಪುಟ್ ಅನ್ನು ನಿಯಂತ್ರಿಸಲು ನೀವು ಅದನ್ನು ವಿವಿಧ ರೀತಿಯಲ್ಲಿ ನಿರ್ವಹಿಸಬಹುದು.

ಟ್ರ್ಯಾಕ್‌ಗಳನ್ನು ಸಕ್ರಿಯಗೊಳಿಸುವುದು ಮತ್ತು ನಿಷ್ಕ್ರಿಯಗೊಳಿಸುವುದು

enabled ಗುಣಲಕ್ಷಣವನ್ನು ಬಳಸಿಕೊಂಡು ನೀವು ಟ್ರ್ಯಾಕ್ ಅನ್ನು ಸಕ್ರಿಯಗೊಳಿಸಬಹುದು ಅಥವಾ ನಿಷ್ಕ್ರಿಯಗೊಳಿಸಬಹುದು. enabled ಅನ್ನು false ಗೆ ಹೊಂದಿಸುವುದು ಆಡಿಯೊ ಟ್ರ್ಯಾಕ್ ಅನ್ನು ಪರಿಣಾಮಕಾರಿಯಾಗಿ ಮ್ಯೂಟ್ ಮಾಡುತ್ತದೆ ಅಥವಾ ವೀಡಿಯೊ ಟ್ರ್ಯಾಕ್ ಅನ್ನು ನಿಲ್ಲಿಸದೆ ನಿಷ್ಕ್ರಿಯಗೊಳಿಸುತ್ತದೆ. ಅದನ್ನು ಮತ್ತೆ true ಗೆ ಹೊಂದಿಸುವುದು ಟ್ರ್ಯಾಕ್ ಅನ್ನು ಮರು-ಸಕ್ರಿಯಗೊಳಿಸುತ್ತದೆ.

const videoTrack = stream.getVideoTracks()[0];

// Disable the video track
videoTrack.enabled = false;

// Enable the video track
videoTrack.enabled = true;

ಮ್ಯೂಟ್ ಬಟನ್‌ಗಳು ಮತ್ತು ವೀಡಿಯೊ ಟಾಗಲ್‌ಗಳಂತಹ ವೈಶಿಷ್ಟ್ಯಗಳನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸಲು ಇದು ಉಪಯುಕ್ತವಾಗಿದೆ.

ರಚನೆಯ ನಂತರ ನಿರ್ಬಂಧಗಳನ್ನು ಅನ್ವಯಿಸುವುದು

ಟ್ರ್ಯಾಕ್ ಅನ್ನು ರಚಿಸಿದ ನಂತರ ಅದರ ನಿರ್ಬಂಧಗಳನ್ನು ಮಾರ್ಪಡಿಸಲು ನೀವು applyConstraints() ವಿಧಾನವನ್ನು ಬಳಸಬಹುದು. ಬಳಕೆದಾರರ ಆದ್ಯತೆಗಳು ಅಥವಾ ನೆಟ್‌ವರ್ಕ್ ಪರಿಸ್ಥಿತಿಗಳ ಆಧಾರದ ಮೇಲೆ ಆಡಿಯೊ ಮತ್ತು ವೀಡಿಯೊ ಸೆಟ್ಟಿಂಗ್‌ಗಳನ್ನು ಕ್ರಿಯಾತ್ಮಕವಾಗಿ ಹೊಂದಿಸಲು ಇದು ನಿಮ್ಮನ್ನು ಅನುಮತಿಸುತ್ತದೆ. ಆದಾಗ್ಯೂ, ಕೆಲವು ನಿರ್ಬಂಧಗಳು ಟ್ರ್ಯಾಕ್ ಅನ್ನು ರಚಿಸಿದ ನಂತರ ಮಾರ್ಪಡಿಸಲಾಗುವುದಿಲ್ಲ. applyConstraints() ನ ಯಶಸ್ಸು ಮೂಲಭೂತ ಹಾರ್ಡ್‌ವೇರ್‌ನ ಸಾಮರ್ಥ್ಯಗಳು ಮತ್ತು ಟ್ರ್ಯಾಕ್‌ನ ಪ್ರಸ್ತುತ ಸ್ಥಿತಿಯ ಮೇಲೆ ಅವಲಂಬಿತವಾಗಿರುತ್ತದೆ.

const videoTrack = stream.getVideoTracks()[0];

videoTrack.applyConstraints({ frameRate: { ideal: 24 } })
  .then(function() {
    console.log("Constraints applied successfully.");
  })
  .catch(function(err) {
    console.log("Failed to apply constraints: " + err);
  });

ಟ್ರ್ಯಾಕ್‌ಗಳನ್ನು ನಿಲ್ಲಿಸುವುದು

ಟ್ರ್ಯಾಕ್ ಅನ್ನು ಸಂಪೂರ್ಣವಾಗಿ ನಿಲ್ಲಿಸಲು ಮತ್ತು ಮೂಲಭೂತ ಸಂಪನ್ಮೂಲಗಳನ್ನು ಬಿಡುಗಡೆ ಮಾಡಲು, ನೀವು stop() ವಿಧಾನವನ್ನು ಬಳಸಬಹುದು. ಕ್ಯಾಮೆರಾ ಮತ್ತು ಮೈಕ್ರೊಫೋನ್ ಅಗತ್ಯವಿಲ್ಲದಿದ್ದಾಗ ಅವುಗಳನ್ನು ಮುಕ್ತಗೊಳಿಸಲು ಇದು ಮುಖ್ಯವಾಗಿದೆ, ವಿಶೇಷವಾಗಿ ಮೊಬೈಲ್ ಸಾಧನಗಳಂತಹ ಸಂಪನ್ಮೂಲ-ನಿರ್ಬಂಧಿತ ಪರಿಸರಗಳಲ್ಲಿ. ಒಮ್ಮೆ ಟ್ರ್ಯಾಕ್ ಅನ್ನು ನಿಲ್ಲಿಸಿದರೆ, ಅದನ್ನು ಮರುಪ್ರಾರಂಭಿಸಲು ಸಾಧ್ಯವಿಲ್ಲ. ನೀವು getUserMedia() ಅನ್ನು ಬಳಸಿಕೊಂಡು ಹೊಸ ಟ್ರ್ಯಾಕ್ ಅನ್ನು ಪಡೆದುಕೊಳ್ಳಬೇಕಾಗುತ್ತದೆ.

const videoTrack = stream.getVideoTracks()[0];

// Stop the track
videoTrack.stop();

ನೀವು MediaStream ಅನ್ನು ಮುಗಿಸಿದ ನಂತರ ಅದನ್ನು ಸಂಪೂರ್ಣವಾಗಿ ನಿಲ್ಲಿಸುವುದು ಸಹ ಉತ್ತಮ ಅಭ್ಯಾಸ:

stream.getTracks().forEach(track => track.stop());

ಸುಧಾರಿತ ತಂತ್ರಗಳು

ಮೂಲಭೂತ ಅಂಶಗಳ ಆಚೆಗೆ, MediaStreamTrack ಆಬ್ಜೆಕ್ಟ್‌ಗಳನ್ನು ಮತ್ತಷ್ಟು ನಿರ್ವಹಿಸಲು ಮತ್ತು ಹೆಚ್ಚಿಸಲು ನೀವು ಬಳಸಬಹುದಾದ ಹಲವಾರು ಸುಧಾರಿತ ತಂತ್ರಗಳಿವೆ.

ಟ್ರ್ಯಾಕ್‌ಗಳನ್ನು ಕ್ಲೋನ್ ಮಾಡುವುದು

clone() ವಿಧಾನವು ಮೂಲದ ನಕಲಾಗಿರುವ ಹೊಸ MediaStreamTrack ಆಬ್ಜೆಕ್ಟ್ ಅನ್ನು ರಚಿಸುತ್ತದೆ. ಕ್ಲೋನ್ ಮಾಡಿದ ಟ್ರ್ಯಾಕ್ ಒಂದೇ ಮೂಲಭೂತ ಮೀಡಿಯಾ ಮೂಲವನ್ನು ಹಂಚಿಕೊಳ್ಳುತ್ತದೆ. ಒಂದೇ ಮೀಡಿಯಾ ಮೂಲವನ್ನು ಅನೇಕ ಸ್ಥಳಗಳಲ್ಲಿ ಬಳಸಬೇಕಾದಾಗ ಇದು ಉಪಯುಕ್ತವಾಗಿದೆ, ಉದಾಹರಣೆಗೆ ಒಂದೇ ವೀಡಿಯೊವನ್ನು ಅನೇಕ ವೀಡಿಯೊ ಎಲಿಮೆಂಟ್‌ಗಳಲ್ಲಿ ಪ್ರದರ್ಶಿಸುವುದು.

const originalTrack = stream.getVideoTracks()[0];
const clonedTrack = originalTrack.clone();

// Create a new MediaStream with the cloned track
const clonedStream = new MediaStream([clonedTrack]);

// Display the cloned stream in another video element
const videoElement2 = document.getElementById('myVideo2');
videoElement2.srcObject = clonedStream;
videoElement2.play();

ಮೂಲ ಟ್ರ್ಯಾಕ್ ಅನ್ನು ನಿಲ್ಲಿಸುವುದು ಕ್ಲೋನ್ ಮಾಡಿದ ಟ್ರ್ಯಾಕ್ ಅನ್ನು ಸಹ ನಿಲ್ಲಿಸುತ್ತದೆ ಎಂಬುದನ್ನು ಗಮನಿಸಿ, ಏಕೆಂದರೆ ಅವು ಒಂದೇ ಮೂಲಭೂತ ಮೀಡಿಯಾ ಮೂಲವನ್ನು ಹಂಚಿಕೊಳ್ಳುತ್ತವೆ.

ಆಡಿಯೊ ಮತ್ತು ವೀಡಿಯೊ ಪ್ರಕ್ರಿಯೆ

MediaStreamTrack ಇಂಟರ್ಫೇಸ್, ಸ್ವತಃ, ಆಡಿಯೊ ಅಥವಾ ವೀಡಿಯೊ ಡೇಟಾವನ್ನು ಪ್ರಕ್ರಿಯೆಗೊಳಿಸಲು ನೇರ ವಿಧಾನಗಳನ್ನು ಒದಗಿಸುವುದಿಲ್ಲ. ಆದಾಗ್ಯೂ, ಇದನ್ನು ಸಾಧಿಸಲು ನೀವು ವೆಬ್ ಆಡಿಯೊ API ಮತ್ತು ಕ್ಯಾನ್ವಾಸ್ API ನಂತಹ ಇತರ ವೆಬ್ API ಗಳನ್ನು ಬಳಸಬಹುದು.

ವೆಬ್ ಆಡಿಯೊ API ನೊಂದಿಗೆ ಆಡಿಯೊ ಪ್ರಕ್ರಿಯೆ

MediaStreamTrack ನಿಂದ ಆಡಿಯೊ ಡೇಟಾವನ್ನು ವಿಶ್ಲೇಷಿಸಲು ಮತ್ತು ನಿರ್ವಹಿಸಲು ನೀವು ವೆಬ್ ಆಡಿಯೊ API ಅನ್ನು ಬಳಸಬಹುದು. ಇದು ಆಡಿಯೊ ದೃಶ್ಯೀಕರಣ, ಶಬ್ದ ಕಡಿತ ಮತ್ತು ಆಡಿಯೊ ಪರಿಣಾಮಗಳಂತಹ ಕಾರ್ಯಗಳನ್ನು ನಿರ್ವಹಿಸಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ.

const audioContext = new AudioContext();
const source = audioContext.createMediaStreamSource(stream);

// Create an analyser node to extract audio data
const analyser = audioContext.createAnalyser();
analyser.fftSize = 2048;
const bufferLength = analyser.frequencyBinCount;
const dataArray = new Uint8Array(bufferLength);

// Connect the source to the analyser
source.connect(analyser);
analyser.connect(audioContext.destination);

function draw() {
  requestAnimationFrame(draw);

  // Get the frequency data
  analyser.getByteFrequencyData(dataArray);

  // Use the dataArray to visualize the audio
  // (e.g., draw a frequency spectrum on a canvas)
  console.log(dataArray);
}

draw();

ವಿವರಣೆ:

• new AudioContext(): ಹೊಸ ವೆಬ್ ಆಡಿಯೊ API ಸಂದರ್ಭವನ್ನು ರಚಿಸುತ್ತದೆ.
• audioContext.createMediaStreamSource(stream): MediaStream ನಿಂದ ಆಡಿಯೊ ಮೂಲ ನೋಡ್ ಅನ್ನು ರಚಿಸುತ್ತದೆ.
• audioContext.createAnalyser(): ಆಡಿಯೊ ಡೇಟಾವನ್ನು ಹೊರತೆಗೆಯಲು ಬಳಸಬಹುದಾದ ವಿಶ್ಲೇಷಕ ನೋಡ್ ಅನ್ನು ರಚಿಸುತ್ತದೆ.
• analyser.fftSize = 2048: ಫಾಸ್ಟ್ ಫೋರಿಯರ್ ಟ್ರಾನ್ಸ್‌ಫಾರ್ಮ್ (FFT) ಗಾತ್ರವನ್ನು ಹೊಂದಿಸುತ್ತದೆ, ಇದು ಆವರ್ತನ ಬಿನ್‌ಗಳ ಸಂಖ್ಯೆಯನ್ನು ನಿರ್ಧರಿಸುತ್ತದೆ.
• analyser.getByteFrequencyData(dataArray): dataArray ಅನ್ನು ಆವರ್ತನ ಡೇಟಾದೊಂದಿಗೆ ತುಂಬುತ್ತದೆ.
• ಆಡಿಯೊ ದೃಶ್ಯೀಕರಣವನ್ನು ನಿರಂತರವಾಗಿ ನವೀಕರಿಸಲು requestAnimationFrame() ಅನ್ನು ಬಳಸಿಕೊಂಡು draw() ಕಾರ್ಯವನ್ನು ಪದೇ ಪದೇ ಕರೆಯಲಾಗುತ್ತದೆ.

ಕ್ಯಾನ್ವಾಸ್ API ನೊಂದಿಗೆ ವೀಡಿಯೊ ಪ್ರಕ್ರಿಯೆ

MediaStreamTrack ನಿಂದ ವೀಡಿಯೊ ಫ್ರೇಮ್‌ಗಳನ್ನು ನಿರ್ವಹಿಸಲು ನೀವು ಕ್ಯಾನ್ವಾಸ್ API ಅನ್ನು ಬಳಸಬಹುದು. ಇದು ಫಿಲ್ಟರ್‌ಗಳನ್ನು ಅನ್ವಯಿಸುವುದು, ಓವರ್‌ಲೇಗಳನ್ನು ಸೇರಿಸುವುದು ಮತ್ತು ನೈಜ-ಸಮಯದ ವೀಡಿಯೊ ವಿಶ್ಲೇಷಣೆ ನಡೆಸುವಂತಹ ಕಾರ್ಯಗಳನ್ನು ನಿರ್ವಹಿಸಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ.

const videoElement = document.getElementById('myVideo');
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

function drawFrame() {
  requestAnimationFrame(drawFrame);

  // Draw the current video frame onto the canvas
  ctx.drawImage(videoElement, 0, 0, canvas.width, canvas.height);

  // Manipulate the canvas data (e.g., apply a filter)
  const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
  const data = imageData.data;

  for (let i = 0; i < data.length; i += 4) {
    // Apply a simple grayscale filter
    const avg = (data[i] + data[i + 1] + data[i + 2]) / 3;
    data[i] = avg;       // red
    data[i + 1] = avg;   // green
    data[i + 2] = avg;   // blue
  }

  // Put the modified data back onto the canvas
  ctx.putImageData(imageData, 0, 0);
}

videoElement.addEventListener('play', drawFrame);

ವಿವರಣೆ:

• ಕ್ಯಾನ್ವಾಸ್ ಅನ್ನು ನಿರಂತರವಾಗಿ ನವೀಕರಿಸಲು requestAnimationFrame() ಅನ್ನು ಬಳಸಿಕೊಂಡು drawFrame() ಕಾರ್ಯವನ್ನು ಪದೇ ಪದೇ ಕರೆಯಲಾಗುತ್ತದೆ.
• ctx.drawImage(videoElement, 0, 0, canvas.width, canvas.height): ಪ್ರಸ್ತುತ ವೀಡಿಯೊ ಫ್ರೇಮ್ ಅನ್ನು ಕ್ಯಾನ್ವಾಸ್ ಮೇಲೆ ಸೆಳೆಯುತ್ತದೆ.
• ctx.getImageData(0, 0, canvas.width, canvas.height): ಕ್ಯಾನ್ವಾಸ್‌ನಿಂದ ಇಮೇಜ್ ಡೇಟಾವನ್ನು ಪಡೆಯುತ್ತದೆ.
• ಕೋಡ್ ಪಿಕ್ಸೆಲ್ ಡೇಟಾದ ಮೂಲಕ ಪುನರಾವರ್ತಿಸುತ್ತದೆ ಮತ್ತು ಗ್ರೇಸ್ಕೇಲ್ ಫಿಲ್ಟರ್ ಅನ್ನು ಅನ್ವಯಿಸುತ್ತದೆ.
• ctx.putImageData(imageData, 0, 0): ಮಾರ್ಪಡಿಸಿದ ಇಮೇಜ್ ಡೇಟಾವನ್ನು ಮತ್ತೆ ಕ್ಯಾನ್ವಾಸ್ ಮೇಲೆ ಇಡುತ್ತದೆ.

ವೆಬ್‌ಆರ್‌ಟಿಸಿ ಜೊತೆಗೆ ಮೀಡಿಯಾಸ್ಟ್ರೀಮ್ ಟ್ರ್ಯಾಕ್‌ಗಳನ್ನು ಬಳಸುವುದು

MediaStreamTrack ಆಬ್ಜೆಕ್ಟ್‌ಗಳು ವೆಬ್‌ಆರ್‌ಟಿಸಿ (ವೆಬ್ ರಿಯಲ್-ಟೈಮ್ ಕಮ್ಯುನಿಕೇಷನ್) ಗೆ ಮೂಲಭೂತವಾಗಿವೆ, ಇದು ಬ್ರೌಸರ್‌ಗಳ ನಡುವೆ ನೇರವಾಗಿ ನೈಜ-ಸಮಯದ ಆಡಿಯೊ ಮತ್ತು ವೀಡಿಯೊ ಸಂವಹನವನ್ನು ಸಕ್ರಿಯಗೊಳಿಸುತ್ತದೆ. ರಿಮೋಟ್ ಪೀರ್‌ಗೆ ಆಡಿಯೊ ಮತ್ತು ವೀಡಿಯೊ ಡೇಟಾವನ್ನು ಕಳುಹಿಸಲು ನೀವು MediaStreamTrack ಆಬ್ಜೆಕ್ಟ್‌ಗಳನ್ನು ವೆಬ್‌ಆರ್‌ಟಿಸಿ RTCPeerConnection ಗೆ ಸೇರಿಸಬಹುದು.

const peerConnection = new RTCPeerConnection();

// Add the audio and video tracks to the peer connection
stream.getTracks().forEach(track => {
  peerConnection.addTrack(track, stream);
});

// The rest of the WebRTC signaling and connection establishment process would follow here.

ಇದು ವೀಡಿಯೊ ಕಾನ್ಫರೆನ್ಸಿಂಗ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳು, ಲೈವ್ ಸ್ಟ್ರೀಮಿಂಗ್ ಪ್ಲಾಟ್‌ಫಾರ್ಮ್‌ಗಳು ಮತ್ತು ಇತರ ನೈಜ-ಸಮಯದ ಸಂವಹನ ಸಾಧನಗಳನ್ನು ನಿರ್ಮಿಸಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ.

ಬ್ರೌಸರ್ ಹೊಂದಾಣಿಕೆ

MediaStreamTrack API ಅನ್ನು ಕ್ರೋಮ್, ಫೈರ್‌ಫಾಕ್ಸ್, ಸಫಾರಿ ಮತ್ತು ಎಡ್ಜ್ ಸೇರಿದಂತೆ ಆಧುನಿಕ ಬ್ರೌಸರ್‌ಗಳು ವ್ಯಾಪಕವಾಗಿ ಬೆಂಬಲಿಸುತ್ತವೆ. ಆದಾಗ್ಯೂ, MDN ವೆಬ್ ಡಾಕ್ಸ್ ನಂತಹ ಸಂಪನ್ಮೂಲಗಳಲ್ಲಿ ಇತ್ತೀಚಿನ ಬ್ರೌಸರ್ ಹೊಂದಾಣಿಕೆ ಮಾಹಿತಿಯನ್ನು ಪರಿಶೀಲಿಸುವುದು ಯಾವಾಗಲೂ ಉತ್ತಮ ಅಭ್ಯಾಸ.

ಅತ್ಯುತ್ತಮ ಅಭ್ಯಾಸಗಳು

• ಅನುಮತಿಗಳನ್ನು ಎಚ್ಚರಿಕೆಯಿಂದ ನಿರ್ವಹಿಸಿ: ಕ್ಯಾಮೆರಾ ಮತ್ತು ಮೈಕ್ರೊಫೋನ್ ಪ್ರವೇಶಕ್ಕಾಗಿ ಬಳಕೆದಾರರ ಅನುಮತಿಗಳನ್ನು ಯಾವಾಗಲೂ ಸೌಮ್ಯವಾಗಿ ನಿರ್ವಹಿಸಿ. ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್‌ಗೆ ಈ ಸಾಧನಗಳಿಗೆ ಪ್ರವೇಶ ಏಕೆ ಬೇಕು ಎಂಬುದರ ಕುರಿತು ಸ್ಪಷ್ಟ ವಿವರಣೆಗಳನ್ನು ನೀಡಿ.
• ಅಗತ್ಯವಿಲ್ಲದಿದ್ದಾಗ ಟ್ರ್ಯಾಕ್‌ಗಳನ್ನು ನಿಲ್ಲಿಸಿ: ಕ್ಯಾಮೆರಾ ಮತ್ತು ಮೈಕ್ರೊಫೋನ್ ಸಂಪನ್ಮೂಲಗಳನ್ನು ಬಳಸದಿದ್ದಾಗ ಟ್ರ್ಯಾಕ್‌ಗಳನ್ನು ನಿಲ್ಲಿಸುವ ಮೂಲಕ ಅವುಗಳನ್ನು ಬಿಡುಗಡೆ ಮಾಡಿ.
• ನಿರ್ಬಂಧಗಳನ್ನು ಉತ್ತಮಗೊಳಿಸಿ: ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್‌ಗಾಗಿ ಅತ್ಯುತ್ತಮ ಮೀಡಿಯಾ ಸೆಟ್ಟಿಂಗ್‌ಗಳನ್ನು ವಿನಂತಿಸಲು ನಿರ್ಬಂಧಗಳನ್ನು ಬಳಸಿ. ಅಗತ್ಯವಿಲ್ಲದಿದ್ದರೆ ಅತಿಯಾಗಿ ಹೆಚ್ಚಿನ ರೆಸಲ್ಯೂಶನ್‌ಗಳು ಅಥವಾ ಫ್ರೇಮ್ ದರಗಳನ್ನು ವಿನಂತಿಸುವುದನ್ನು ತಪ್ಪಿಸಿ.
• ಟ್ರ್ಯಾಕ್ ಸ್ಥಿತಿಯನ್ನು ಮೇಲ್ವಿಚಾರಣೆ ಮಾಡಿ: ಟ್ರ್ಯಾಕ್ ಸ್ಥಿತಿಯಲ್ಲಿನ ಬದಲಾವಣೆಗಳಿಗೆ ಪ್ರತಿಕ್ರಿಯಿಸಲು ended ಮತ್ತು mute ನಂತಹ ಘಟನೆಗಳನ್ನು ಆಲಿಸಿ.
• ವಿವಿಧ ಸಾಧನಗಳಲ್ಲಿ ಪರೀಕ್ಷಿಸಿ: ಹೊಂದಾಣಿಕೆಯನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು ವಿವಿಧ ಸಾಧನಗಳು ಮತ್ತು ಬ್ರೌಸರ್‌ಗಳಲ್ಲಿ ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್ ಅನ್ನು ಪರೀಕ್ಷಿಸಿ.
• ಪ್ರವೇಶವನ್ನು ಪರಿಗಣಿಸಿ: ಅಂಗವಿಕಲ ಬಳಕೆದಾರರಿಗೆ ಪ್ರವೇಶಿಸಲು ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್ ಅನ್ನು ವಿನ್ಯಾಸಗೊಳಿಸಿ. ಪರ್ಯಾಯ ಇನ್‌ಪುಟ್ ವಿಧಾನಗಳನ್ನು ಒದಗಿಸಿ ಮತ್ತು ಆಡಿಯೊ ಮತ್ತು ವೀಡಿಯೊ ಔಟ್‌ಪುಟ್ ಸ್ಪಷ್ಟ ಮತ್ತು ಅರ್ಥವಾಗುವಂತೆ ಇರುವುದನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ.

ತೀರ್ಮಾನ

MediaStreamTrack ಇಂಟರ್ಫೇಸ್ ಮೀಡಿಯಾ-ಸಮೃದ್ಧ ವೆಬ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳನ್ನು ನಿರ್ಮಿಸಲು ಶಕ್ತಿಶಾಲಿ ಸಾಧನವಾಗಿದೆ. ಮೀಡಿಯಾ ಟ್ರ್ಯಾಕ್‌ಗಳನ್ನು ಹೇಗೆ ರಚಿಸುವುದು, ನಿರ್ವಹಿಸುವುದು ಮತ್ತು ನಿರ್ವಹಿಸುವುದು ಎಂಬುದನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವ ಮೂಲಕ, ನಿಮ್ಮ ಬಳಕೆದಾರರಿಗೆ ಆಕರ್ಷಕ ಮತ್ತು ಸಂವಾದಾತ್ಮಕ ಅನುಭವಗಳನ್ನು ನೀವು ರಚಿಸಬಹುದು. ಈ ಸಮಗ್ರ ಮಾರ್ಗದರ್ಶಿ getUserMedia() ಅನ್ನು ಬಳಸಿಕೊಂಡು ಟ್ರ್ಯಾಕ್‌ಗಳನ್ನು ಪಡೆಯುವುದರಿಂದ ಹಿಡಿದು ಆಡಿಯೊ ಮತ್ತು ವೀಡಿಯೊ ಪ್ರಕ್ರಿಯೆಯಂತಹ ಸುಧಾರಿತ ತಂತ್ರಗಳವರೆಗೆ MediaStreamTrack ನಿರ್ವಹಣೆಯ ಅಗತ್ಯ ಅಂಶಗಳನ್ನು ಒಳಗೊಂಡಿದೆ. ಮೀಡಿಯಾ ಸ್ಟ್ರೀಮ್‌ಗಳೊಂದಿಗೆ ಕೆಲಸ ಮಾಡುವಾಗ ಬಳಕೆದಾರರ ಗೌಪ್ಯತೆಗೆ ಆದ್ಯತೆ ನೀಡಿ ಮತ್ತು ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಉತ್ತಮಗೊಳಿಸಲು ಮರೆಯದಿರಿ. ವೆಬ್‌ಆರ್‌ಟಿಸಿ ಮತ್ತು ಸಂಬಂಧಿತ ತಂತ್ರಜ್ಞಾನಗಳ ಮತ್ತಷ್ಟು ಅನ್ವೇಷಣೆಯು ವೆಬ್ ಅಭಿವೃದ್ಧಿಯ ಈ ಉತ್ತೇಜಕ ಕ್ಷೇತ್ರದಲ್ಲಿ ನಿಮ್ಮ ಸಾಮರ್ಥ್ಯಗಳನ್ನು ಗಣನೀಯವಾಗಿ ಹೆಚ್ಚಿಸುತ್ತದೆ.