ಫ್ರಂಟ್-ಎಂಡ್ ಮೀಡಿಯಾಸ್ಟ್ರೀಮ್ ರೆಕಾರ್ಡಿಂಗ್: ಬ್ರೌಸರ್-ಆಧಾರಿತ ಮೀಡಿಯಾ ಕ್ಯಾಪ್ಚರ್

ವೆಬ್ ಬ್ರೌಸರ್‌ನಲ್ಲಿ ನೇರವಾಗಿ ಆಡಿಯೋ ಮತ್ತು ವೀಡಿಯೊವನ್ನು ಸೆರೆಹಿಡಿಯುವ ಸಾಮರ್ಥ್ಯವು ವೆಬ್ ಅಪ್ಲಿಕೇಶನ್ ಅಭಿವೃದ್ಧಿಯಲ್ಲಿ ಕ್ರಾಂತಿಯನ್ನುಂಟು ಮಾಡಿದೆ. MediaRecorder API ಅನ್ನು ಬಳಸಿಕೊಂಡು ಫ್ರಂಟ್-ಎಂಡ್ ಮೀಡಿಯಾಸ್ಟ್ರೀಮ್ ರೆಕಾರ್ಡಿಂಗ್, ಸಂಕೀರ್ಣ ಸರ್ವರ್-ಸೈಡ್ ಪ್ರೊಸೆಸಿಂಗ್ ಮೇಲೆ ಅವಲಂಬಿತವಾಗದೆ ಈ ಕಾರ್ಯವನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸಲು ಪ್ರಬಲ ಮತ್ತು ಪರಿಣಾಮಕಾರಿ ಮಾರ್ಗವನ್ನು ಒದಗಿಸುತ್ತದೆ. ಈ ವಿಧಾನವು ನೈಜ-ಸಮಯದ ಸಂವಹನ, ಕಡಿಮೆ ವಿಳಂಬ ಮತ್ತು ವರ್ಧಿತ ಬಳಕೆದಾರ ಅನುಭವಗಳಿಗೆ ಅವಕಾಶ ನೀಡುತ್ತದೆ, ವಿಶೇಷವಾಗಿ ಆನ್‌ಲೈನ್ ಸಭೆಗಳು, ವೀಡಿಯೊ ಎಡಿಟಿಂಗ್ ಪರಿಕರಗಳು ಮತ್ತು ಸಂವಾದಾತ್ಮಕ ಟ್ಯುಟೋರಿಯಲ್‌ಗಳಂತಹ ಅಪ್ಲಿಕೇಶನ್‌ಗಳಲ್ಲಿ.

ಮೀಡಿಯಾಸ್ಟ್ರೀಮ್ API ಅನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು

ಬ್ರೌಸರ್-ಆಧಾರಿತ ಮೀಡಿಯಾ ಕ್ಯಾಪ್ಚರ್‌ನ ಹೃದಯಭಾಗದಲ್ಲಿ MediaStream API ಇದೆ. ಒಂದು MediaStream ಆಡಿಯೋ ಅಥವಾ ವೀಡಿಯೊ ಟ್ರ್ಯಾಕ್‌ಗಳಂತಹ ಮೀಡಿಯಾ ಡೇಟಾದ ಸ್ಟ್ರೀಮ್ ಅನ್ನು ಪ್ರತಿನಿಧಿಸುತ್ತದೆ. MediaStream ಅನ್ನು ಪ್ರವೇಶಿಸಲು, ನೀವು ಸಾಮಾನ್ಯವಾಗಿ getUserMedia() ವಿಧಾನವನ್ನು ಬಳಸುತ್ತೀರಿ.

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

ಉದಾಹರಣೆ: ಕ್ಯಾಮೆರಾ ಪ್ರವೇಶವನ್ನು ವಿನಂತಿಸುವುದು

ಬಳಕೆದಾರರ ಕ್ಯಾಮರಾಗೆ ಪ್ರವೇಶವನ್ನು ಹೇಗೆ ವಿನಂತಿಸುವುದು ಎಂಬುದಕ್ಕೆ ಮೂಲಭೂತ ಉದಾಹರಣೆ ಇಲ್ಲಿದೆ:

            
navigator.mediaDevices.getUserMedia({ video: true, audio: false })
  .then(function(stream) {
    // Stream is available, do something with it
    console.log("Camera access granted!");
  })
  .catch(function(error) {
    console.error("Error accessing camera: ", error);
  });

            

              
                Copy
              
            
          

ವಿವರಣೆ:

• navigator.mediaDevices.getUserMedia({ video: true, audio: false }): ಈ ಸಾಲು ಕ್ಯಾಮರಾಗೆ (video: true) ಪ್ರವೇಶವನ್ನು ವಿನಂತಿಸುತ್ತದೆ ಮತ್ತು ಆಡಿಯೊವನ್ನು (audio: false) ಸ್ಪಷ್ಟವಾಗಿ ನಿಷ್ಕ್ರಿಯಗೊಳಿಸುತ್ತದೆ. ನೀವು ಆಡಿಯೋ ಮತ್ತು ವೀಡಿಯೋ ಎರಡನ್ನೂ ಅಥವಾ ಕೇವಲ ಆಡಿಯೋವನ್ನು ವಿನಂತಿಸಲು ಈ ಆಯ್ಕೆಗಳನ್ನು ಸರಿಹೊಂದಿಸಬಹುದು.
• .then(function(stream) { ... }): ಬಳಕೆದಾರರು ಅನುಮತಿ ನೀಡಿದರೆ ಈ ಬ್ಲಾಕ್ ಕಾರ್ಯಗತಗೊಳ್ಳುತ್ತದೆ. stream ವೇರಿಯಬಲ್ MediaStream ಆಬ್ಜೆಕ್ಟ್ ಅನ್ನು ಹೊಂದಿರುತ್ತದೆ.
• .catch(function(error) { ... }): ಬಳಕೆದಾರರು ಅನುಮತಿಯನ್ನು ನಿರಾಕರಿಸುವಂತಹ ದೋಷವಿದ್ದಲ್ಲಿ ಈ ಬ್ಲಾಕ್ ಕಾರ್ಯಗತಗೊಳ್ಳುತ್ತದೆ. ಉತ್ತಮ ಬಳಕೆದಾರ ಅನುಭವವನ್ನು ಒದಗಿಸಲು ದೋಷಗಳನ್ನು ಸರಿಯಾಗಿ ನಿರ್ವಹಿಸುವುದು ಬಹಳ ಮುಖ್ಯ.

getUserMedia() ಗಾಗಿ ಕಾನ್ಫಿಗರೇಶನ್ ಆಯ್ಕೆಗಳು

getUserMedia() ವಿಧಾನವು ಐಚ್ಛಿಕ ನಿರ್ಬಂಧಗಳ ವಸ್ತುವನ್ನು ಸ್ವೀಕರಿಸುತ್ತದೆ, ಅದು ಮೀಡಿಯಾ ಸ್ಟ್ರೀಮ್‌ನ ಅಪೇಕ್ಷಿತ ಗುಣಲಕ್ಷಣಗಳನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ. ಇದರಲ್ಲಿ ಈ ಕೆಳಗಿನ ಆಯ್ಕೆಗಳು ಸೇರಿವೆ:

• video: ವೀಡಿಯೊವನ್ನು ವಿನಂತಿಸಲು ಬೂಲಿಯನ್ (true/false), ಅಥವಾ ಹೆಚ್ಚು ನಿರ್ದಿಷ್ಟ ವೀಡಿಯೊ ನಿರ್ಬಂಧಗಳಿಗಾಗಿ ಒಂದು ಆಬ್ಜೆಕ್ಟ್ (ಉದಾ., ರೆಸಲ್ಯೂಶನ್, ಫ್ರೇಮ್ ದರ).
• audio: ಆಡಿಯೊವನ್ನು ವಿನಂತಿಸಲು ಬೂಲಿಯನ್ (true/false), ಅಥವಾ ಹೆಚ್ಚು ನಿರ್ದಿಷ್ಟ ಆಡಿಯೊ ನಿರ್ಬಂಧಗಳಿಗಾಗಿ ಒಂದು ಆಬ್ಜೆಕ್ಟ್ (ಉದಾ., ಪ್ರತಿಧ್ವನಿ ರದ್ದತಿ, ಶಬ್ದ ನಿಗ್ರಹ).
• width: ವೀಡಿಯೊ ಸ್ಟ್ರೀಮ್‌ನ ಅಪೇಕ್ಷಿತ ಅಗಲ.
• height: ವೀಡಿಯೊ ಸ್ಟ್ರೀಮ್‌ನ ಅಪೇಕ್ಷಿತ ಎತ್ತರ.
• frameRate: ವೀಡಿಯೊ ಸ್ಟ್ರೀಮ್‌ನ ಅಪೇಕ್ಷಿತ ಫ್ರೇಮ್ ದರ.

ಉದಾಹರಣೆ: ನಿರ್ದಿಷ್ಟ ಕ್ಯಾಮೆರಾ ರೆಸಲ್ಯೂಶನ್ ವಿನಂತಿಸುವುದು

            
navigator.mediaDevices.getUserMedia({
  video: {
    width: { min: 640, ideal: 1280, max: 1920 },
    height: { min: 480, ideal: 720, max: 1080 }
  },
  audio: true
})
.then(function(stream) {
  // Stream is available
})
.catch(function(error) {
  // Handle errors
});

            

              
                Copy
              
            
          

ಈ ಉದಾಹರಣೆಯಲ್ಲಿ, ನಾವು 640 ರಿಂದ 1920 ಪಿಕ್ಸೆಲ್‌ಗಳ (ಆದರ್ಶಪ್ರಾಯವಾಗಿ 1280) ನಡುವಿನ ಅಗಲ ಮತ್ತು 480 ರಿಂದ 1080 ಪಿಕ್ಸೆಲ್‌ಗಳ (ಆದರ್ಶಪ್ರಾಯವಾಗಿ 720) ನಡುವಿನ ಎತ್ತರವಿರುವ ವೀಡಿಯೊ ಸ್ಟ್ರೀಮ್ ಅನ್ನು ವಿನಂತಿಸುತ್ತಿದ್ದೇವೆ. ನಾವು ಆಡಿಯೋವನ್ನು ಸಹ ವಿನಂತಿಸುತ್ತಿದ್ದೇವೆ.

ಮೀಡಿಯಾರೆಕಾರ್ಡರ್ API ಪರಿಚಯ

ಒಮ್ಮೆ ನೀವು MediaStream ಅನ್ನು ಹೊಂದಿದ್ದರೆ, ಮೀಡಿಯಾ ಡೇಟಾವನ್ನು ರೆಕಾರ್ಡ್ ಮಾಡಲು ನೀವು MediaRecorder API ಅನ್ನು ಬಳಸಬಹುದು. MediaRecorder API ರೆಕಾರ್ಡಿಂಗ್ ಅನ್ನು ಪ್ರಾರಂಭಿಸಲು, ನಿಲ್ಲಿಸಲು, ವಿರಾಮಗೊಳಿಸಲು ಮತ್ತು ಪುನರಾರಂಭಿಸಲು, ಹಾಗೆಯೇ ರೆಕಾರ್ಡ್ ಮಾಡಿದ ಡೇಟಾವನ್ನು ಪ್ರವೇಶಿಸಲು ವಿಧಾನಗಳನ್ನು ಒದಗಿಸುತ್ತದೆ.

ಒಂದು ಮೀಡಿಯಾರೆಕಾರ್ಡರ್ ಇನ್‌ಸ್ಟೆನ್ಸ್ ರಚಿಸುವುದು

MediaRecorder ಇನ್‌ಸ್ಟೆನ್ಸ್ ರಚಿಸಲು, ನೀವು MediaStream ಆಬ್ಜೆಕ್ಟ್ ಅನ್ನು MediaRecorder ಕನ್‌ಸ್ಟ್ರಕ್ಟರ್‌ಗೆ ರವಾನಿಸುತ್ತೀರಿ:

            
const mediaRecorder = new MediaRecorder(stream);

            

              
                Copy
              
            
          

ಕನ್‌ಸ್ಟ್ರಕ್ಟರ್‌ನಲ್ಲಿ ನೀವು ಹೆಚ್ಚುವರಿ ಆಯ್ಕೆಗಳನ್ನು ಸಹ ನಿರ್ದಿಷ್ಟಪಡಿಸಬಹುದು, ಉದಾಹರಣೆಗೆ ರೆಕಾರ್ಡ್ ಮಾಡಿದ ಡೇಟಾಕ್ಕಾಗಿ ಅಪೇಕ್ಷಿತ MIME ಪ್ರಕಾರ:

            
const options = { mimeType: 'video/webm;codecs=vp9' };
const mediaRecorder = new MediaRecorder(stream, options);

            

              
                Copy
              
            
          

ಬೆಂಬಲಿತ MIME ಪ್ರಕಾರಗಳು:

ಲಭ್ಯವಿರುವ MIME ಪ್ರಕಾರಗಳು ಬ್ರೌಸರ್ ಮತ್ತು ಅದು ಬೆಂಬಲಿಸುವ ಕೋಡೆಕ್‌ಗಳ ಮೇಲೆ ಅವಲಂಬಿತವಾಗಿರುತ್ತದೆ. ಸಾಮಾನ್ಯ MIME ಪ್ರಕಾರಗಳು ಸೇರಿವೆ:

• video/webm;codecs=vp9
• video/webm;codecs=vp8
• video/mp4;codecs=avc1
• audio/webm;codecs=opus
• audio/ogg;codecs=vorbis

ಬ್ರೌಸರ್ ನಿರ್ದಿಷ್ಟ MIME ಪ್ರಕಾರವನ್ನು ಬೆಂಬಲಿಸುತ್ತದೆಯೇ ಎಂದು ಪರೀಕ್ಷಿಸಲು ನೀವು MediaRecorder.isTypeSupported() ವಿಧಾನವನ್ನು ಬಳಸಬಹುದು:

            
if (MediaRecorder.isTypeSupported('video/webm;codecs=vp9')) {
  console.log('video/webm;codecs=vp9 is supported');
} else {
  console.log('video/webm;codecs=vp9 is not supported');
}

            

              
                Copy
              
            
          

ಮೀಡಿಯಾರೆಕಾರ್ಡರ್‌ನೊಂದಿಗೆ ಡೇಟಾವನ್ನು ರೆಕಾರ್ಡ್ ಮಾಡುವುದು

ರೆಕಾರ್ಡಿಂಗ್ ಪ್ರಕ್ರಿಯೆಯನ್ನು ಮೇಲ್ವಿಚಾರಣೆ ಮಾಡಲು ನೀವು ಕೇಳಬಹುದಾದ ಹಲವಾರು ಈವೆಂಟ್‌ಗಳನ್ನು MediaRecorder API ಒದಗಿಸುತ್ತದೆ:

• dataavailable: ಡೇಟಾ ಉಳಿಸಲು ಲಭ್ಯವಾದಾಗಲೆಲ್ಲಾ ಈ ಈವೆಂಟ್ ಅನ್ನು ಫೈರ್ ಮಾಡಲಾಗುತ್ತದೆ.
• start: ರೆಕಾರ್ಡಿಂಗ್ ಪ್ರಾರಂಭವಾದಾಗ ಈ ಈವೆಂಟ್ ಅನ್ನು ಫೈರ್ ಮಾಡಲಾಗುತ್ತದೆ.
• stop: ರೆಕಾರ್ಡಿಂಗ್ ನಿಂತಾಗ ಈ ಈವೆಂಟ್ ಅನ್ನು ಫೈರ್ ಮಾಡಲಾಗುತ್ತದೆ.
• pause: ರೆಕಾರ್ಡಿಂಗ್ ವಿರಾಮಗೊಂಡಾಗ ಈ ಈವೆಂಟ್ ಅನ್ನು ಫೈರ್ ಮಾಡಲಾಗುತ್ತದೆ.
• resume: ರೆಕಾರ್ಡಿಂಗ್ ಪುನರಾರಂಭವಾದಾಗ ಈ ಈವೆಂಟ್ ಅನ್ನು ಫೈರ್ ಮಾಡಲಾಗುತ್ತದೆ.
• error: ರೆಕಾರ್ಡಿಂಗ್ ಸಮಯದಲ್ಲಿ ದೋಷ ಸಂಭವಿಸಿದಲ್ಲಿ ಈ ಈವೆಂಟ್ ಅನ್ನು ಫೈರ್ ಮಾಡಲಾಗುತ್ತದೆ.

ಅತ್ಯಂತ ಪ್ರಮುಖವಾದ ಈವೆಂಟ್ dataavailable ಆಗಿದೆ. ಈ ಈವೆಂಟ್ ರೆಕಾರ್ಡ್ ಮಾಡಿದ ಡೇಟಾವನ್ನು ಒಳಗೊಂಡಿರುವ Blob ಆಬ್ಜೆಕ್ಟ್ ಅನ್ನು ಒದಗಿಸುತ್ತದೆ. ನೀವು ಈ Blob ಆಬ್ಜೆಕ್ಟ್‌ಗಳನ್ನು ಸಂಗ್ರಹಿಸಬಹುದು ಮತ್ತು ರೆಕಾರ್ಡಿಂಗ್ ಪೂರ್ಣಗೊಂಡಾಗ ಅವುಗಳನ್ನು ಒಂದೇ Blob ಆಗಿ ಸಂಯೋಜಿಸಬಹುದು.

ಉದಾಹರಣೆ: ವೀಡಿಯೊ ರೆಕಾರ್ಡಿಂಗ್ ಮತ್ತು ಉಳಿಸುವುದು

            
let recordedChunks = [];

mediaRecorder.ondataavailable = function(event) {
  console.log('data-available: ', event.data.size);
  if (event.data.size > 0) {
    recordedChunks.push(event.data);
  }
};

mediaRecorder.onstop = function() {
  console.log('Recording stopped!');
  const blob = new Blob(recordedChunks, { type: 'video/webm' });
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.style.display = 'none';
  a.href = url;
  a.download = 'recorded-video.webm';
  document.body.appendChild(a);
  a.click();
  setTimeout(() => {
    URL.revokeObjectURL(url);
    document.body.removeChild(a);
  }, 100);
};

mediaRecorder.start();
console.log("Recording started!");

// To stop recording:
// mediaRecorder.stop();

            

              
                Copy
              
            
          

ವಿವರಣೆ:

• let recordedChunks = [];: ರೆಕಾರ್ಡ್ ಮಾಡಿದ ಡೇಟಾ ತುಣುಕುಗಳನ್ನು ಸಂಗ್ರಹಿಸಲು ಒಂದು ಅರೇ.
• mediaRecorder.ondataavailable = function(event) { ... }: ಹೊಸ ಡೇಟಾ ಲಭ್ಯವಾದಾಗಲೆಲ್ಲಾ ಈ ಫಂಕ್ಷನ್ ಅನ್ನು ಕರೆಯಲಾಗುತ್ತದೆ. ಇದು recordedChunks ಅರೇಗೆ ಡೇಟಾವನ್ನು ಸೇರಿಸುತ್ತದೆ.
• mediaRecorder.onstop = function() { ... }: ರೆಕಾರ್ಡಿಂಗ್ ನಿಂತಾಗ ಈ ಫಂಕ್ಷನ್ ಅನ್ನು ಕರೆಯಲಾಗುತ್ತದೆ. ಇದು ಸಂಗ್ರಹವಾದ ತುಣುಕುಗಳಿಂದ Blob ಅನ್ನು ರಚಿಸುತ್ತದೆ, Blob ಗಾಗಿ URL ಅನ್ನು ರಚಿಸುತ್ತದೆ, ಡೌನ್‌ಲೋಡ್ ಲಿಂಕ್ ಅನ್ನು ರಚಿಸುತ್ತದೆ ಮತ್ತು ಡೌನ್‌ಲೋಡ್ ಅನ್ನು ಪ್ರಚೋದಿಸುತ್ತದೆ. ಇದು ಸ್ವಲ್ಪ ವಿಳಂಬದ ನಂತರ ರಚಿಸಲಾದ URL ಆಬ್ಜೆಕ್ಟ್ ಅನ್ನು ಸಹ ಸ್ವಚ್ಛಗೊಳಿಸುತ್ತದೆ.
• mediaRecorder.start();: ಇದು ರೆಕಾರ್ಡಿಂಗ್ ಪ್ರಕ್ರಿಯೆಯನ್ನು ಪ್ರಾರಂಭಿಸುತ್ತದೆ.
• mediaRecorder.stop();: ರೆಕಾರ್ಡಿಂಗ್ ನಿಲ್ಲಿಸಲು ಇದನ್ನು ಕರೆ ಮಾಡಿ.

ರೆಕಾರ್ಡಿಂಗ್ ಪ್ರಕ್ರಿಯೆಯನ್ನು ನಿಯಂತ್ರಿಸುವುದು

ರೆಕಾರ್ಡಿಂಗ್ ಪ್ರಕ್ರಿಯೆಯನ್ನು ನಿಯಂತ್ರಿಸಲು MediaRecorder API ವಿಧಾನಗಳನ್ನು ಒದಗಿಸುತ್ತದೆ:

• start(timeslice): ರೆಕಾರ್ಡಿಂಗ್ ಪ್ರಾರಂಭಿಸುತ್ತದೆ. ಐಚ್ಛಿಕ timeslice ಆರ್ಗ್ಯುಮೆಂಟ್ dataavailable ಈವೆಂಟ್ ಅನ್ನು ಫೈರ್ ಮಾಡಬೇಕಾದ ಮಧ್ಯಂತರವನ್ನು (ಮಿಲಿಸೆಕೆಂಡುಗಳಲ್ಲಿ) ನಿರ್ದಿಷ್ಟಪಡಿಸುತ್ತದೆ. ಯಾವುದೇ timeslice ಅನ್ನು ಒದಗಿಸದಿದ್ದರೆ, ರೆಕಾರ್ಡಿಂಗ್ ನಿಲ್ಲಿಸಿದಾಗ ಮಾತ್ರ dataavailable ಈವೆಂಟ್ ಅನ್ನು ಫೈರ್ ಮಾಡಲಾಗುತ್ತದೆ.
• stop(): ರೆಕಾರ್ಡಿಂಗ್ ನಿಲ್ಲಿಸುತ್ತದೆ.
• pause(): ರೆಕಾರ್ಡಿಂಗ್ ಅನ್ನು ವಿರಾಮಗೊಳಿಸುತ್ತದೆ.
• resume(): ರೆಕಾರ್ಡಿಂಗ್ ಅನ್ನು ಪುನರಾರಂಭಿಸುತ್ತದೆ.
• requestData(): dataavailable ಈವೆಂಟ್ ಅನ್ನು ಹಸ್ತಚಾಲಿತವಾಗಿ ಪ್ರಚೋದಿಸುತ್ತದೆ.

ಬ್ರೌಸರ್ ಹೊಂದಾಣಿಕೆ ಮತ್ತು ಪಾಲಿಫಿಲ್‌ಗಳು

MediaStream ಮತ್ತು MediaRecorder API ಗಳನ್ನು ಆಧುನಿಕ ಬ್ರೌಸರ್‌ಗಳಲ್ಲಿ ವ್ಯಾಪಕವಾಗಿ ಬೆಂಬಲಿಸಲಾಗುತ್ತದೆ. ಆದಾಗ್ಯೂ, ಹಳೆಯ ಬ್ರೌಸರ್‌ಗಳು ಈ API ಗಳನ್ನು ಸ್ಥಳೀಯವಾಗಿ ಬೆಂಬಲಿಸದೇ ಇರಬಹುದು. ನೀವು ಹಳೆಯ ಬ್ರೌಸರ್‌ಗಳನ್ನು ಬೆಂಬಲಿಸಬೇಕಾದರೆ, ಅಗತ್ಯ ಕಾರ್ಯವನ್ನು ಒದಗಿಸಲು ನೀವು ಪಾಲಿಫಿಲ್‌ಗಳನ್ನು ಬಳಸಬಹುದು.

ಹಲವಾರು ಪಾಲಿಫಿಲ್‌ಗಳು ಲಭ್ಯವಿದೆ, ಅವುಗಳೆಂದರೆ:

• adapter.js: ಈ ಪಾಲಿಫಿಲ್ getUserMedia() ಸೇರಿದಂತೆ WebRTC API ಗಳಿಗಾಗಿ ಕ್ರಾಸ್-ಬ್ರೌಸರ್ ಹೊಂದಾಣಿಕೆಯನ್ನು ಒದಗಿಸುತ್ತದೆ.
• recorderjs: ಸ್ಥಳೀಯವಾಗಿ ಬೆಂಬಲಿಸದ ಬ್ರೌಸರ್‌ಗಳಿಗೆ MediaRecorder ಕಾರ್ಯವನ್ನು ಒದಗಿಸುವ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಲೈಬ್ರರಿ.

ಪ್ರಾಯೋಗಿಕ ಅಪ್ಲಿಕೇಶನ್‌ಗಳು ಮತ್ತು ಬಳಕೆಯ ಪ್ರಕರಣಗಳು

ಫ್ರಂಟ್-ಎಂಡ್ ಮೀಡಿಯಾಸ್ಟ್ರೀಮ್ ರೆಕಾರ್ಡಿಂಗ್ ವೆಬ್ ಅಪ್ಲಿಕೇಶನ್ ಅಭಿವೃದ್ಧಿಗೆ ವ್ಯಾಪಕ ಶ್ರೇಣಿಯ ಸಾಧ್ಯತೆಗಳನ್ನು ತೆರೆಯುತ್ತದೆ. ಕೆಲವು ಪ್ರಾಯೋಗಿಕ ಅಪ್ಲಿಕೇಶನ್‌ಗಳು ಮತ್ತು ಬಳಕೆಯ ಪ್ರಕರಣಗಳು ಇಲ್ಲಿವೆ:

• ಆನ್‌ಲೈನ್ ಸಭೆಗಳು ಮತ್ತು ವೀಡಿಯೊ ಕಾನ್ಫರೆನ್ಸಿಂಗ್: ಆನ್‌ಲೈನ್ ಸಭೆಗಳು ಮತ್ತು ವೀಡಿಯೊ ಕಾನ್ಫರೆನ್ಸ್‌ಗಳಿಗಾಗಿ ನೈಜ-ಸಮಯದಲ್ಲಿ ಆಡಿಯೋ ಮತ್ತು ವೀಡಿಯೊ ಸ್ಟ್ರೀಮ್‌ಗಳನ್ನು ಸೆರೆಹಿಡಿಯಿರಿ ಮತ್ತು ರವಾನಿಸಿ.
• ವೀಡಿಯೊ ಎಡಿಟಿಂಗ್ ಪರಿಕರಗಳು: ಬಳಕೆದಾರರಿಗೆ ನೇರವಾಗಿ ಬ್ರೌಸರ್‌ನಲ್ಲಿ ವೀಡಿಯೊ ವಿಷಯವನ್ನು ರೆಕಾರ್ಡ್ ಮಾಡಲು ಮತ್ತು ಸಂಪಾದಿಸಲು ಅನುಮತಿಸಿ.
• ಸಂವಾದಾತ್ಮಕ ಟ್ಯುಟೋರಿಯಲ್‌ಗಳು ಮತ್ತು ಪ್ರದರ್ಶನಗಳು: ಬಳಕೆದಾರರ ಸಂವಹನಗಳನ್ನು ಸೆರೆಹಿಡಿಯುವ ಮತ್ತು ವೈಯಕ್ತೀಕರಿಸಿದ ಪ್ರತಿಕ್ರಿಯೆಯನ್ನು ಒದಗಿಸುವ ಸಂವಾದಾತ್ಮಕ ಟ್ಯುಟೋರಿಯಲ್‌ಗಳು ಮತ್ತು ಪ್ರದರ್ಶನಗಳನ್ನು ರಚಿಸಿ.
• ಧ್ವನಿ ರೆಕಾರ್ಡಿಂಗ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳು: ಟಿಪ್ಪಣಿ-ತೆಗೆದುಕೊಳ್ಳುವಿಕೆ, ಧ್ವನಿ ಮೆಮೊಗಳು ಮತ್ತು ಆಡಿಯೊ ಸಂಪಾದನೆಗಾಗಿ ಧ್ವನಿ ರೆಕಾರ್ಡಿಂಗ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳನ್ನು ನಿರ್ಮಿಸಿ.
• ಕಣ್ಗಾವಲು ವ್ಯವಸ್ಥೆಗಳು ಮತ್ತು ಭದ್ರತಾ ಕ್ಯಾಮೆರಾಗಳು: ವೀಡಿಯೊ ಸ್ಟ್ರೀಮ್‌ಗಳನ್ನು ಸೆರೆಹಿಡಿಯುವ ಮತ್ತು ರೆಕಾರ್ಡ್ ಮಾಡುವ ಬ್ರೌಸರ್-ಆಧಾರಿತ ಕಣ್ಗಾವಲು ವ್ಯವಸ್ಥೆಗಳು ಮತ್ತು ಭದ್ರತಾ ಕ್ಯಾಮೆರಾಗಳನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸಿ.
• ಪ್ರವೇಶಿಸುವಿಕೆ ಪರಿಕರಗಳು: ಭಾಷಣವನ್ನು ರೆಕಾರ್ಡ್ ಮಾಡಿ ನೈಜ-ಸಮಯದಲ್ಲಿ ಪಠ್ಯಕ್ಕೆ ಪರಿವರ್ತಿಸಬಲ್ಲ ಪರಿಕರಗಳನ್ನು ಅಭಿವೃದ್ಧಿಪಡಿಸಿ, ಅಥವಾ ನಂತರದ ವಿಮರ್ಶೆಗಾಗಿ ಪರದೆಯ ಚಟುವಟಿಕೆಯನ್ನು ರೆಕಾರ್ಡ್ ಮಾಡಿ.

ಉದಾಹರಣೆ: ಸರಳ ವೀಡಿಯೊ ರೆಕಾರ್ಡಿಂಗ್ ಅಪ್ಲಿಕೇಶನ್ ಅನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸುವುದು

HTML, CSS, ಮತ್ತು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಬಳಸಿ ಮೂಲಭೂತ ವೀಡಿಯೊ ರೆಕಾರ್ಡಿಂಗ್ ಅಪ್ಲಿಕೇಶನ್‌ಗೆ ಚರ್ಚಿಸಲಾದ ಪರಿಕಲ್ಪನೆಗಳನ್ನು ನೀವು ಹೇಗೆ ಸಂಯೋಜಿಸಬಹುದು ಎಂಬುದರ ಸರಳೀಕೃತ ಉದಾಹರಣೆ ಇಲ್ಲಿದೆ:

HTML (index.html):

            



  
  


  
Browser Video Recorder
  

  Record
  Stop
  



            

              
                Copy
              
            
          

CSS (style.css):

            
body {
  font-family: sans-serif;
  text-align: center;
}

video {
  width: 640px;
  height: 480px;
  border: 1px solid #ccc;
}

button {
  padding: 10px 20px;
  font-size: 16px;
  margin: 10px;
}

            

              
                Copy
              
            
          

JavaScript (script.js):

            
const preview = document.getElementById('preview');
const recordButton = document.getElementById('recordButton');
const stopButton = document.getElementById('stopButton');

let mediaRecorder;
let recordedChunks = [];

recordButton.addEventListener('click', startRecording);
stopButton.addEventListener('click', stopRecording);

async function startRecording() {
  try {
    const stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
    preview.srcObject = stream;

    mediaRecorder = new MediaRecorder(stream);
    mediaRecorder.ondataavailable = handleDataAvailable;
    mediaRecorder.onstop = handleStop;

    mediaRecorder.start();

    recordButton.disabled = true;
    stopButton.disabled = false;

  } catch (err) {
    console.error("Error accessing media devices.", err);
  }
}

function handleDataAvailable(event) {
  if (event.data.size > 0) {
    recordedChunks.push(event.data);
  }
}

function stopRecording() {
  mediaRecorder.stop();

  recordButton.disabled = false;
  stopButton.disabled = true;

  //Stop all video streams
  preview.srcObject.getVideoTracks().forEach(track => track.stop());
}

function handleStop() {
  const blob = new Blob(recordedChunks, { type: 'video/webm' });
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.style.display = 'none';
  a.href = url;
  a.download = 'recorded-video.webm';
  document.body.appendChild(a);
  a.click();
  setTimeout(() => {
    URL.revokeObjectURL(url);
    document.body.removeChild(a);
  }, 100);

  recordedChunks = []; // Reset array for the next recording
}

            

              
                Copy
              
            
          

ಈ ಉದಾಹರಣೆಯು ಬ್ರೌಸರ್‌ನಲ್ಲಿ ನೇರವಾಗಿ ವೀಡಿಯೊವನ್ನು ಸೆರೆಹಿಡಿಯುವ, ಪ್ರದರ್ಶಿಸುವ, ರೆಕಾರ್ಡ್ ಮಾಡುವ ಮತ್ತು ಡೌನ್‌ಲೋಡ್ ಮಾಡುವ ಮೂಲ ತತ್ವಗಳನ್ನು ಪ್ರದರ್ಶಿಸುತ್ತದೆ. ಕಾರ್ಯವನ್ನು ಹೆಚ್ಚಿಸಲು ದೋಷ ನಿರ್ವಹಣೆ, ವಿಭಿನ್ನ ಕೋಡೆಕ್ ಆಯ್ಕೆಗಳು, ಅಥವಾ ಬಳಕೆದಾರ-ಹೊಂದಾಣಿಕೆ ರೆಕಾರ್ಡಿಂಗ್ ಗುಣಗಳನ್ನು ಸೇರಿಸುವುದನ್ನು ಪರಿಗಣಿಸಿ.

ಭದ್ರತಾ ಪರಿಗಣನೆಗಳು

ಮೀಡಿಯಾಸ್ಟ್ರೀಮ್ ರೆಕಾರ್ಡಿಂಗ್‌ನೊಂದಿಗೆ ಕೆಲಸ ಮಾಡುವಾಗ, ಭದ್ರತಾ ಪರಿಗಣನೆಗಳ ಬಗ್ಗೆ ತಿಳಿದಿರುವುದು ಅತ್ಯಗತ್ಯ:

• ಬಳಕೆದಾರರ ಅನುಮತಿಗಳು: ಮೈಕ್ರೊಫೋನ್ ಅಥವಾ ಕ್ಯಾಮೆರಾವನ್ನು ಪ್ರವೇಶಿಸುವ ಮೊದಲು ಯಾವಾಗಲೂ ಬಳಕೆದಾರರ ಅನುಮತಿಯನ್ನು ವಿನಂತಿಸಿ. ಈ ಸಾಧನಗಳಿಗೆ ನಿಮಗೆ ಏಕೆ ಪ್ರವೇಶ ಬೇಕು ಎಂದು ಸ್ಪಷ್ಟವಾಗಿ ಸೂಚಿಸಿ.
• HTTPS: ಮೀಡಿಯಾ ಸ್ಟ್ರೀಮ್ ಅನ್ನು ಎನ್‌ಕ್ರಿಪ್ಟ್ ಮಾಡಲಾಗಿದೆ ಮತ್ತು ಕದ್ದಾಲಿಕೆಯಿಂದ ರಕ್ಷಿಸಲಾಗಿದೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು HTTPS ಬಳಸಿ. getUserMedia() API ಗೆ ಸಾಮಾನ್ಯವಾಗಿ ಸುರಕ್ಷಿತ ಸಂದರ್ಭ (HTTPS) ಬೇಕಾಗುತ್ತದೆ.
• ಡೇಟಾ ಸಂಗ್ರಹಣೆ: ನೀವು ರೆಕಾರ್ಡ್ ಮಾಡಿದ ಡೇಟಾವನ್ನು ಸಂಗ್ರಹಿಸುತ್ತಿದ್ದರೆ, ಅದನ್ನು ಸುರಕ್ಷಿತವಾಗಿ ಸಂಗ್ರಹಿಸಲಾಗಿದೆ ಮತ್ತು ಅನಧಿಕೃತ ಪ್ರವೇಶದಿಂದ ರಕ್ಷಿಸಲಾಗಿದೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ. ಎನ್‌ಕ್ರಿಪ್ಶನ್ ಮತ್ತು ಪ್ರವೇಶ ನಿಯಂತ್ರಣ ಕಾರ್ಯವಿಧಾನಗಳನ್ನು ಬಳಸುವುದನ್ನು ಪರಿಗಣಿಸಿ. ನಿಮ್ಮ ಬಳಕೆದಾರರು ಮತ್ತು ಅವರ ಸ್ಥಳಕ್ಕೆ ಸಂಬಂಧಿಸಿದ ಡೇಟಾ ಗೌಪ್ಯತೆ ನಿಯಮಗಳಿಗೆ (ಉದಾ., GDPR, CCPA) ಬದ್ಧರಾಗಿರಿ.
• ಗೌಪ್ಯತೆ: ನೀವು ರೆಕಾರ್ಡ್ ಮಾಡಿದ ಡೇಟಾವನ್ನು ಹೇಗೆ ಬಳಸುತ್ತಿರುವಿರಿ ಎಂಬುದರ ಕುರಿತು ಪಾರದರ್ಶಕವಾಗಿರಿ. ಬಳಕೆದಾರರಿಗೆ ಅವರ ಡೇಟಾದ ಮೇಲೆ ನಿಯಂತ್ರಣ ಮತ್ತು ಅದನ್ನು ಅಳಿಸುವ ಸಾಮರ್ಥ್ಯವನ್ನು ಒದಗಿಸಿ.
• ದುರುದ್ದೇಶಪೂರಿತ ಕೋಡ್: ಬಳಕೆದಾರ-ರಚಿಸಿದ ವಿಷಯವನ್ನು ನಿರ್ವಹಿಸುವಾಗ ಜಾಗರೂಕರಾಗಿರಿ, ಏಕೆಂದರೆ ಅದು ದುರುದ್ದೇಶಪೂರಿತ ಕೋಡ್ ಅನ್ನು ಹೊಂದಿರಬಹುದು. ಕ್ರಾಸ್-ಸೈಟ್ ಸ್ಕ್ರಿಪ್ಟಿಂಗ್ (XSS) ದಾಳಿಗಳನ್ನು ತಡೆಗಟ್ಟಲು ಯಾವುದೇ ಬಳಕೆದಾರರ ಇನ್‌ಪುಟ್ ಅನ್ನು ಸ್ವಚ್ಛಗೊಳಿಸಿ.

ಕಾರ್ಯಕ್ಷಮತೆ ಆಪ್ಟಿಮೈಸೇಶನ್

ಮೀಡಿಯಾಸ್ಟ್ರೀಮ್ ರೆಕಾರ್ಡಿಂಗ್ ಬಳಸುವಾಗ ಅತ್ಯುತ್ತಮ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು, ಈ ಕೆಳಗಿನವುಗಳನ್ನು ಪರಿಗಣಿಸಿ:

• MIME ಪ್ರಕಾರದ ಆಯ್ಕೆ: ಬ್ರೌಸರ್‌ನಿಂದ ಬೆಂಬಲಿತವಾದ ಮತ್ತು ಉತ್ತಮ ಸಂಕೋಚನವನ್ನು ಒದಗಿಸುವ MIME ಪ್ರಕಾರವನ್ನು ಆರಿಸಿ.
• ಟೈಮ್‌ಸ್ಲೈಸ್ ಮಧ್ಯಂತರ: ಡೇಟಾ ಲಭ್ಯತೆ ಮತ್ತು ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಸಮತೋಲನಗೊಳಿಸಲು timeslice ಮಧ್ಯಂತರವನ್ನು ಹೊಂದಿಸಿ. ಒಂದು ಸಣ್ಣ timeslice ಮಧ್ಯಂತರವು ಹೆಚ್ಚು ಆಗಾಗ್ಗೆ dataavailable ಈವೆಂಟ್‌ಗಳಿಗೆ ಕಾರಣವಾಗುತ್ತದೆ, ಆದರೆ ಇದು ಓವರ್‌ಹೆಡ್ ಅನ್ನು ಸಹ ಹೆಚ್ಚಿಸಬಹುದು.
• ಡೇಟಾ ನಿರ್ವಹಣೆ: ಮೆಮೊರಿ ಸೋರಿಕೆ ಮತ್ತು ಕಾರ್ಯಕ್ಷಮತೆಯ ಅಡಚಣೆಗಳನ್ನು ತಪ್ಪಿಸಲು ರೆಕಾರ್ಡ್ ಮಾಡಿದ ಡೇಟಾವನ್ನು ಪರಿಣಾಮಕಾರಿಯಾಗಿ ನಿರ್ವಹಿಸಿ. ಹೆಚ್ಚಿನ ಪ್ರಮಾಣದ ಡೇಟಾವನ್ನು ಪ್ರಕ್ರಿಯೆಗೊಳಿಸಲು ಬಫರಿಂಗ್ ಮತ್ತು ಸ್ಟ್ರೀಮಿಂಗ್‌ನಂತಹ ತಂತ್ರಗಳನ್ನು ಬಳಸಿ.
• ಬಳಕೆದಾರ ಇಂಟರ್ಫೇಸ್: ರೆಕಾರ್ಡಿಂಗ್ ಪ್ರಕ್ರಿಯೆಯ ಬಗ್ಗೆ ಬಳಕೆದಾರರಿಗೆ ಸ್ಪಷ್ಟ ಪ್ರತಿಕ್ರಿಯೆಯನ್ನು ಒದಗಿಸುವ ಬಳಕೆದಾರ ಇಂಟರ್ಫೇಸ್ ಅನ್ನು ವಿನ್ಯಾಸಗೊಳಿಸಿ. ರೆಕಾರ್ಡಿಂಗ್ ಸೂಚಕವನ್ನು ಪ್ರದರ್ಶಿಸಿ ಮತ್ತು ರೆಕಾರ್ಡಿಂಗ್ ಅನ್ನು ವಿರಾಮಗೊಳಿಸಲು, ಪುನರಾರಂಭಿಸಲು ಮತ್ತು ನಿಲ್ಲಿಸಲು ನಿಯಂತ್ರಣಗಳನ್ನು ಒದಗಿಸಿ.

ತೀರ್ಮಾನ

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