ऑडियो रिकॉर्डिंग और स्क्रीन कैप्चर

इस गाइड में एपीआई, जैसे कि chrome.tabCapture या getDisplayMedia() का इस्तेमाल करके, टैब, विंडो या स्क्रीन से ऑडियो और वीडियो रिकॉर्ड करने के अलग-अलग तरीकों के बारे में बताया गया है.

स्क्रीन रिकॉर्डिंग

स्क्रीन रिकॉर्डिंग के लिए, getDisplayMedia() को कॉल करें. इससे नीचे दिया गया डायलॉग बॉक्स ट्रिगर होता है. इससे उपयोगकर्ता को यह चुनने की सुविधा मिलती है कि उसे किस टैब, विंडो या स्क्रीन को शेयर करना है. साथ ही, इस बात की भी साफ़ तौर पर जानकारी दी जाती है कि रिकॉर्डिंग की जा रही है.

example.com के लिए, स्क्रीन शेयर करने वाला डायलॉग बॉक्स.

नीचे दिए गए उदाहरण में ऑडियो और वीडियो, दोनों को रिकॉर्ड करने के ऐक्सेस का अनुरोध किया गया है.

const stream = await navigator.mediaDevices.getDisplayMedia({ audio: true, video: true });

अगर कॉन्टेंट की स्क्रिप्ट में कॉल किया जाता है, तो उपयोगकर्ता के नए पेज पर जाने पर रिकॉर्डिंग अपने-आप खत्म हो जाएगी. बैकग्राउंड में और सभी नेविगेशन में रिकॉर्ड करने के लिए, DISPLAY_MEDIA वजह वाली ऑफ़स्क्रीन दस्तावेज़ का इस्तेमाल करें.

उपयोगकर्ता के जेस्चर के आधार पर टैब कैप्चर करने की सुविधा

getDisplayMedia() को कॉल करने पर, ब्राउज़र में एक डायलॉग दिखेगा. इस डायलॉग में उपयोगकर्ता से पूछा जाएगा कि उन्हें क्या शेयर करना है. हालांकि, कुछ मामलों में ऐसा होता है कि उपयोगकर्ता ने किसी खास टैब के लिए आपके एक्सटेंशन को शुरू करने के लिए, सिर्फ़ कार्रवाई बटन पर क्लिक किया हो और आपको इस निर्देश के बिना ही तुरंत टैब कैप्चर करना हो.

बैकग्राउंड में ऑडियो और वीडियो रिकॉर्ड करना

Chrome 116 से, यूज़र जेस्चर के मुताबिक स्ट्रीम आईडी पाने के लिए, सर्विस वर्कर में chrome.tabCapture एपीआई को कॉल किया जा सकता है. इसके बाद, रिकॉर्डिंग शुरू करने के लिए, इसे ऑफ़स्क्रीन दस्तावेज़ में भेजा जा सकता है.

आपके सर्विस वर्कर में:

chrome.action.onClicked.addListener(async (tab) => {
  const existingContexts = await chrome.runtime.getContexts({});

  const offscreenDocument = existingContexts.find(
    (c) => c.contextType === 'OFFSCREEN_DOCUMENT'
  );

  // If an offscreen document is not already open, create one.
  if (!offscreenDocument) {
    // Create an offscreen document.
    await chrome.offscreen.createDocument({
      url: 'offscreen.html',
      reasons: ['USER_MEDIA'],
      justification: 'Recording from chrome.tabCapture API',
    });
  }

  // Get a MediaStream for the active tab.
  const streamId = await chrome.tabCapture.getMediaStreamId({
    targetTabId: tab.id
  });

  // Send the stream ID to the offscreen document to start recording.
  chrome.runtime.sendMessage({
    type: 'start-recording',
    target: 'offscreen',
    data: streamId
  });
});

फिर, अपने ऑफ़स्क्रीन दस्तावेज़ में:

chrome.runtime.onMessage.addListener(async (message) => {
  if (message.target !== 'offscreen') return;
  
  if (message.type === 'start-recording') {
    const media = await navigator.mediaDevices.getUserMedia({
      audio: {
        mandatory: {
          chromeMediaSource: "tab",
          chromeMediaSourceId: message.data,
        },
      },
      video: {
        mandatory: {
          chromeMediaSource: "tab",
          chromeMediaSourceId: message.data,
        },
      },
    });

    // Continue to play the captured audio to the user.
    const output = new AudioContext();
    const source = output.createMediaStreamSource(media);
    source.connect(output.destination);

    // TODO: Do something to recording the MediaStream.
  }
});

बेहतर उदाहरण के लिए, टैब कैप्चर - रिकॉर्डर सैंपल देखें.

नए टैब में ऑडियो और वीडियो रिकॉर्ड करें

Chrome 116 से पहले, किसी सर्विस वर्कर में chrome.tabCapture API को इस्तेमाल नहीं किया जा सकता था. इसके अलावा, किसी ऑफ़स्क्रीन दस्तावेज़ में इस एपीआई से बनाए गए स्ट्रीम आईडी का इस्तेमाल नहीं किया जा सकता था. ये दोनों बातें ऊपर बताए गए तरीके की ज़रूरी हैं.

इसके बजाय, एक्सटेंशन पेज को नए टैब या विंडो में खोला जा सकता है और सीधे स्ट्रीम पाई जा सकती है. सही टैब को कैप्चर करने के लिए, targetTabId प्रॉपर्टी सेट करें.

किसी एक्सटेंशन पेज को खोलकर शुरू करें (शायद आपके पॉप-अप या सर्विस वर्कर में):

chrome.windows.create({ url: chrome.runtime.getURL("recorder.html") });

इसके बाद, अपने एक्सटेंशन पेज में:

chrome.tabCapture.getMediaStreamId({ targetTabId: tabId }, async (id) => {
  const media = await navigator.mediaDevices.getUserMedia({
    audio: {
      mandatory: {
        chromeMediaSource: "tab",
        chromeMediaSourceId: id,
      },
    },
    video: {
      mandatory: {
        chromeMediaSource: "tab",
        chromeMediaSourceId: id,
      },
    },
  });

  // Continue to play the captured audio to the user.
  const output = new AudioContext();
  const source = output.createMediaStreamSource(media);
  source.connect(output.destination);
});

इसके अलावा, स्क्रीन रिकॉर्डिंग भी इस्तेमाल की जा सकती है. इससे ऑफ़स्क्रीन दस्तावेज़ का इस्तेमाल करके, बैकग्राउंड में रिकॉर्डिंग की जा सकती है. हालांकि, उपयोगकर्ता को एक टैब, विंडो या स्क्रीन चुनने के लिए एक डायलॉग दिखाया जा सकता है.

पॉप-अप में ऑडियो रिकॉर्ड करें

ध्यान दें: यह तरीका सिर्फ़ ऑडियो के लिए काम करता है. ऐसा इसलिए, क्योंकि पॉप-अप से वीडियो कैप्चर करने पर, फ़ोकस उस ओर जाता है और पॉप-अप बंद हो जाता है.

अगर आपको सिर्फ़ ऑडियो रिकॉर्ड करना है, तो chrome.tabCapture.capture का इस्तेमाल करके, एक्सटेंशन पॉप-अप में सीधे स्ट्रीम की जा सकती है. पॉप-अप बंद होने पर, रिकॉर्डिंग रुक जाएगी.

chrome.tabCapture.capture({ audio: true }, (stream) => {
  // Continue to play the captured audio to the user.
  const output = new AudioContext();
  const source = output.createMediaStreamSource(stream);
  source.connect(output.destination);

  // TODO: Do something with the stream (e.g record it)
});

अगर आपको पूरे नेविगेशन में रिकॉर्डिंग को बनाए रखना है, तो पिछले सेक्शन में बताए गए तरीके का इस्तेमाल करें.

दूसरी ज़रूरी बातें

स्ट्रीम रिकॉर्ड करने के तरीके के बारे में ज़्यादा जानकारी के लिए, MediaRecorder एपीआई देखें.