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

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

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

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

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

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

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

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

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

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

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

अपने सर्विस वर्कर में:

browser.action.onClicked.addListener(async (tab) => {
  const existingContexts = await browser.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 browser.offscreen.createDocument({
      url: 'offscreen.html',
      reasons: ['USER_MEDIA'],
      justification: 'Recording from browser.tabCapture API',
    });
  }

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

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

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

browser.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 record the MediaStream.
  }
});

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

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

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

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

एक्सटेंशन पेज खोलकर शुरुआत करें. यह पेज, पॉप-अप या सर्विस वर्कर में हो सकता है:

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

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

browser.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);
});

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

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

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

browser.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 एपीआई देखें.