MediaStream Track در فرانت‌اند: راهنمای جامع مدیریت مسیرهای رسانه‌ای

رابط MediaStreamTrack نشان‌دهنده یک مسیر رسانه‌ای واحد در یک MediaStream است. این مسیر می‌تواند حاوی صدا یا ویدیو باشد. درک نحوه مدیریت این مسیرها برای ساخت برنامه‌های رسانه‌ای قوی و تعاملی در وب حیاتی است. این راهنمای جامع شما را در فرآیند ایجاد، دستکاری و مدیریت MediaStream Tracks در توسعه فرانت‌اند همراهی خواهد کرد.

MediaStream Track چیست؟

یک MediaStream جریانی از محتوای رسانه‌ای است که می‌تواند شامل چندین شیء MediaStreamTrack باشد. هر مسیر نشان‌دهنده یک منبع واحد از صدا یا ویدیو است. آن را به عنوان یک کانتینر در نظر بگیرید که یک جریان از داده‌های صوتی یا ویدیویی را در خود نگه می‌دارد.

ویژگی‌ها و متدهای کلیدی

• kind: یک رشته فقط خواندنی که نوع مسیر را ("audio" یا "video") نشان می‌دهد.
• id: یک رشته فقط خواندنی که شناسه منحصر به فرد مسیر را نمایش می‌دهد.
• label: یک رشته فقط خواندنی که یک برچسب خوانا برای مسیر ارائه می‌دهد.
• enabled: یک بولی که نشان می‌دهد آیا مسیر در حال حاضر فعال است. تنظیم این به false مسیر را بدون توقف آن، بی‌صدا یا غیرفعال می‌کند.
• muted: یک بولی فقط خواندنی که نشان می‌دهد آیا مسیر به دلیل محدودیت‌های سیستمی یا تنظیمات کاربر بی‌صدا شده است.
• readyState: یک رشته فقط خواندنی که وضعیت فعلی مسیر را نشان می‌دهد ("live"، "ended").
• getSettings(): یک دیکشنری از تنظیمات فعلی مسیر را برمی‌گرداند.
• getConstraints(): یک دیکشنری از محدودیت‌های اعمال شده به مسیر در زمان ایجاد آن را برمی‌گرداند.
• applyConstraints(constraints): تلاش می‌کند محدودیت‌های جدیدی را روی مسیر اعمال کند.
• clone(): یک شیء MediaStreamTrack جدید که یک کپی از نسخه اصلی است را برمی‌گرداند.
• stop(): مسیر را متوقف می‌کند و جریان داده‌های رسانه‌ای را پایان می‌دهد.
• addEventListener(): به شما امکان می‌دهد به رویدادهای روی مسیر، مانند ended یا mute گوش دهید.

دریافت MediaStream Tracks

راه اصلی برای دریافت اشیاء MediaStreamTrack از طریق API getUserMedia() است. این 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) { ... }): این بخش در صورت بروز خطا، مانند رد شدن اجازه توسط کاربر، اجرا می‌شود.

محدودیت‌ها (Constraints)

محدودیت‌ها به شما امکان می‌دهند الزامات مسیرهای رسانه‌ای را مشخص کنید، مانند وضوح، نرخ فریم، و کیفیت صدا. این برای اطمینان از اینکه برنامه شما داده‌های رسانه‌ای را که نیازهای خاص آن را برآورده می‌کند، دریافت کند، حیاتی است. محدودیت‌ها را می‌توان در فراخوانی 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 }: این درخواست می‌کند که کاهش نویز برای مسیر صوتی فعال شود.

مهم است که توجه داشته باشید مرورگر ممکن است نتواند همه محدودیت‌ها را برآورده کند. شما می‌توانید از getSettings() روی MediaStreamTrack برای تعیین تنظیمات واقعی اعمال شده استفاده کنید.

دستکاری MediaStream Tracks

پس از اینکه یک 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 از آن‌ها استفاده کنید.

کلون کردن مسیرها (Cloning Tracks)

متد 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های وب، مانند Web Audio API و Canvas API، برای دستیابی به این هدف استفاده کنید.

پردازش صدا با Web Audio API

می‌توانید از Web Audio API برای تحلیل و دستکاری داده‌های صوتی از یک MediaStreamTrack استفاده کنید. این به شما امکان می‌دهد کارهایی مانند بصری‌سازی صدا، کاهش نویز و افکت‌های صوتی را انجام دهید.

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(): یک context جدید Web Audio API ایجاد می‌کند.
• audioContext.createMediaStreamSource(stream): یک گره منبع صوتی از MediaStream ایجاد می‌کند.
• audioContext.createAnalyser(): یک گره تحلیل‌گر ایجاد می‌کند که می‌تواند برای استخراج داده‌های صوتی استفاده شود.
• analyser.fftSize = 2048: اندازه تبدیل فوریه سریع (FFT) را تنظیم می‌کند که تعداد باندهای فرکانسی را تعیین می‌کند.
• analyser.getByteFrequencyData(dataArray): dataArray را با داده‌های فرکانسی پر می‌کند.
• تابع draw() به طور مکرر با استفاده از requestAnimationFrame() فراخوانی می‌شود تا بصری‌سازی صدا به طور مداوم به‌روزرسانی شود.

پردازش ویدیو با Canvas API

می‌توانید از Canvas API برای دستکاری فریم‌های ویدیویی از یک MediaStreamTrack استفاده کنید. این به شما امکان می‌دهد کارهایی مانند اعمال فیلترها، افزودن پوشش‌ها (overlays) و انجام تحلیل ویدیویی بی‌درنگ را انجام دهید.

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);

توضیحات:

• تابع drawFrame() به طور مکرر با استفاده از requestAnimationFrame() فراخوانی می‌شود تا canvas به طور مداوم به‌روزرسانی شود.
• ctx.drawImage(videoElement, 0, 0, canvas.width, canvas.height): فریم ویدیوی فعلی را روی canvas رسم می‌کند.
• ctx.getImageData(0, 0, canvas.width, canvas.height): داده‌های تصویری را از canvas دریافت می‌کند.
• کد از طریق داده‌های پیکسلی تکرار می‌شود و یک فیلتر خاکستری اعمال می‌کند.
• ctx.putImageData(imageData, 0, 0): داده‌های تصویری اصلاح شده را به canvas بازمی‌گرداند.

استفاده از MediaStream Tracks با WebRTC

اشیاء MediaStreamTrack برای WebRTC (Web Real-Time Communication) اساسی هستند که ارتباط صوتی و تصویری بی‌درنگ را مستقیماً بین مرورگرها امکان‌پذیر می‌سازد. می‌توانید اشیاء MediaStreamTrack را به یک RTCPeerConnection در WebRTC اضافه کنید تا داده‌های صوتی و ویدیویی را به یک همتای راه دور ارسال نمایید.

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.

این به شما امکان می‌دهد برنامه‌های کنفرانس ویدیویی، پلتفرم‌های پخش زنده و سایر ابزارهای ارتباط بی‌درنگ را بسازید.

سازگاری با مرورگر

API MediaStreamTrack به طور گسترده توسط مرورگرهای مدرن، از جمله کروم، فایرفاکس، سافاری و اج پشتیبانی می‌شود. با این حال، همیشه ایده خوبی است که جدیدترین اطلاعات سازگاری مرورگر را در منابعی مانند MDN Web Docs بررسی کنید.

بهترین روش‌ها

• مدیریت دقیق مجوزها: همیشه مجوزهای کاربر برای دسترسی به دوربین و میکروفون را با ظرافت مدیریت کنید. توضیحات واضحی در مورد اینکه چرا برنامه شما به این دستگاه‌ها نیاز دارد ارائه دهید.
• توقف مسیرها در صورت عدم نیاز: منابع دوربین و میکروفون را با توقف مسیرها زمانی که دیگر استفاده نمی‌شوند، آزاد کنید.
• بهینه‌سازی محدودیت‌ها: از محدودیت‌ها برای درخواست بهترین تنظیمات رسانه‌ای برای برنامه خود استفاده کنید. از درخواست وضوح‌های بیش از حد بالا یا نرخ فریم‌های غیرضروری خودداری کنید.
• نظارت بر وضعیت مسیر: به رویدادهایی مانند ended و mute گوش دهید تا به تغییرات در وضعیت مسیر پاسخ دهید.
• تست بر روی دستگاه‌های مختلف: برنامه خود را بر روی انواع دستگاه‌ها و مرورگرها آزمایش کنید تا از سازگاری اطمینان حاصل کنید.
• توجه به دسترس‌پذیری: برنامه خود را به گونه‌ای طراحی کنید که برای کاربران دارای معلولیت قابل دسترسی باشد. روش‌های ورودی جایگزین ارائه دهید و اطمینان حاصل کنید که خروجی صوتی و تصویری واضح و قابل فهم است.

نتیجه‌گیری

رابط MediaStreamTrack ابزاری قدرتمند برای ساخت برنامه‌های وب غنی از رسانه است. با درک نحوه ایجاد، دستکاری و مدیریت مسیرهای رسانه‌ای، می‌توانید تجربه‌های جذاب و تعاملی برای کاربران خود ایجاد کنید. این راهنمای جامع جنبه‌های اساسی مدیریت MediaStreamTrack را پوشش داده است، از دریافت مسیرها با استفاده از getUserMedia() گرفته تا تکنیک‌های پیشرفته‌ای مانند پردازش صدا و ویدیو. به خاطر داشته باشید که هنگام کار با جریان‌های رسانه‌ای، حریم خصوصی کاربر و بهینه‌سازی عملکرد را در اولویت قرار دهید. اکتشاف بیشتر WebRTC و فناوری‌های مرتبط به طور قابل توجهی قابلیت‌های شما را در این زمینه هیجان‌انگیز توسعه وب افزایش خواهد داد.