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

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

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

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

example.com के लिए, स्क्रीन शेयर करने का डायलॉग बॉक्स
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.
  }
});

बेहतर उदाहरण के लिए, Tab Capture - Recorder सैंपल देखें.

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

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

इसके बजाय, एक्सटेंशन पेज को नए टैब या विंडो में खोलकर सीधे स्ट्रीम की जा सकती है. शुरू सही टैब कैप्चर करने के लिए, 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 एपीआई देखें.