Frontend MediaStream Track: Повний посібник з управління медіадоріжками

Інтерфейс MediaStreamTrack представляє одну медіадоріжку в межах MediaStream. Ця доріжка може містити аудіо або відео. Розуміння того, як керувати цими доріжками, є вирішальним для створення надійних та інтерактивних медіадодатків в Інтернеті. Цей вичерпний посібник проведе вас через процес створення, маніпулювання та управління MediaStream Tracks у frontend-розробці.

Що таке 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) {
    // Використовуйте потік тут.
    const videoTrack = stream.getVideoTracks()[0];
    const audioTrack = stream.getAudioTracks()[0];

    // Приклад: Відображення відео в елементі video
    const videoElement = document.getElementById('myVideo');
    videoElement.srcObject = stream;
    videoElement.play();
  })
  .catch(function(err) {
    console.log("Виникла помилка: " + 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("Виникла помилка: " + 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];

// Вимкнути відеодоріжку
videoTrack.enabled = false;

// Увімкнути відеодоріжку
videoTrack.enabled = true;

Це корисно для реалізації таких функцій, як кнопки вимкнення звуку та перемикачі відео.

Застосування обмежень після створення

Ви можете використовувати метод applyConstraints() для зміни обмежень доріжки після її створення. Це дозволяє динамічно регулювати налаштування аудіо та відео залежно від уподобань користувача або умов мережі. Однак деякі обмеження можуть бути незмінними після створення доріжки. Успіх applyConstraints() залежить від можливостей апаратного забезпечення та поточного стану доріжки.

const videoTrack = stream.getVideoTracks()[0];

videoTrack.applyConstraints({ frameRate: { ideal: 24 } })
  .then(function() {
    console.log("Обмеження успішно застосовано.");
  })
  .catch(function(err) {
    console.log("Не вдалося застосувати обмеження: " + err);
  });

Зупинка доріжок

Щоб повністю зупинити доріжку та звільнити відповідні ресурси, ви можете використати метод stop(). Це важливо для звільнення камери та мікрофона, коли вони більше не потрібні, особливо в середовищах з обмеженими ресурсами, як-от мобільні пристрої. Після зупинки доріжку не можна перезапустити. Вам потрібно буде отримати нову доріжку за допомогою getUserMedia().

const videoTrack = stream.getVideoTracks()[0];

// Зупинити доріжку
videoTrack.stop();

Також хорошою практикою є зупинка всього MediaStream, коли ви закінчили з ним працювати:

stream.getTracks().forEach(track => track.stop());

Передові техніки

Окрім основ, існує кілька передових технік, які можна використовувати для подальшого маніпулювання та вдосконалення об'єктів MediaStreamTrack.

Клонування доріжок

Метод clone() створює новий об'єкт MediaStreamTrack, який є копією оригіналу. Клонована доріжка використовує те ж саме базове джерело медіа. Це корисно, коли вам потрібно використовувати одне й те саме джерело медіа в кількох місцях, наприклад, для відображення одного відео в кількох відеоелементах.

const originalTrack = stream.getVideoTracks()[0];
const clonedTrack = originalTrack.clone();

// Створити новий MediaStream з клонованою доріжкою
const clonedStream = new MediaStream([clonedTrack]);

// Відобразити клонований потік в іншому відеоелементі
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);

// Створити вузол аналізатора для вилучення аудіоданих
const analyser = audioContext.createAnalyser();
analyser.fftSize = 2048;
const bufferLength = analyser.frequencyBinCount;
const dataArray = new Uint8Array(bufferLength);

// Підключити джерело до аналізатора
source.connect(analyser);
analyser.connect(audioContext.destination);

function draw() {
  requestAnimationFrame(draw);

  // Отримати частотні дані
  analyser.getByteFrequencyData(dataArray);

  // Використовуйте dataArray для візуалізації аудіо
  // (наприклад, намалювати частотний спектр на canvas)
  console.log(dataArray);
}

draw();

Пояснення:

• new AudioContext(): Створює новий контекст Web Audio API.
• audioContext.createMediaStreamSource(stream): Створює вузол-джерело аудіо з MediaStream.
• audioContext.createAnalyser(): Створює вузол-аналізатор, який можна використовувати для вилучення аудіоданих.
• analyser.fftSize = 2048: Встановлює розмір Швидкого перетворення Фур'є (FFT), що визначає кількість частотних діапазонів.
• analyser.getByteFrequencyData(dataArray): Заповнює dataArray частотними даними.
• Функція draw() викликається багаторазово за допомогою requestAnimationFrame() для безперервного оновлення візуалізації звуку.

Обробка відео за допомогою Canvas API

Ви можете використовувати Canvas API для маніпулювання відеокадрами з MediaStreamTrack. Це дозволяє виконувати такі завдання, як застосування фільтрів, додавання накладень та аналіз відео в реальному часі.

const videoElement = document.getElementById('myVideo');
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

function drawFrame() {
  requestAnimationFrame(drawFrame);

  // Намалювати поточний відеокадр на canvas
  ctx.drawImage(videoElement, 0, 0, canvas.width, canvas.height);

  // Маніпулювати даними canvas (наприклад, застосувати фільтр)
  const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
  const data = imageData.data;

  for (let i = 0; i < data.length; i += 4) {
    // Застосувати простий фільтр відтінків сірого
    const avg = (data[i] + data[i + 1] + data[i + 2]) / 3;
    data[i] = avg;       // червоний
    data[i + 1] = avg;   // зелений
    data[i + 2] = avg;   // синій
  }

  // Повернути змінені дані на 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 до WebRTC RTCPeerConnection для надсилання аудіо- та відеоданих віддаленому піру.

const peerConnection = new RTCPeerConnection();

// Додати аудіо- та відеодоріжки до peer connection
stream.getTracks().forEach(track => {
  peerConnection.addTrack(track, stream);
});

// Далі йде решта процесу сигналізації та встановлення з'єднання WebRTC.

Це дозволяє створювати додатки для відеоконференцій, платформи для прямих трансляцій та інші інструменти для спілкування в реальному часі.

Сумісність з браузерами

API MediaStreamTrack широко підтримується сучасними браузерами, включаючи Chrome, Firefox, Safari та Edge. Однак завжди варто перевіряти найсвіжішу інформацію про сумісність на таких ресурсах, як MDN Web Docs.

Найкращі практики

• Обережно поводьтеся з дозволами: Завжди коректно обробляйте дозволи користувача на доступ до камери та мікрофона. Надавайте чіткі пояснення, чому вашому додатку потрібен доступ до цих пристроїв.
• Зупиняйте доріжки, коли вони не потрібні: Звільняйте ресурси камери та мікрофона, зупиняючи доріжки, коли вони більше не використовуються.
• Оптимізуйте обмеження: Використовуйте обмеження для запиту оптимальних налаштувань медіа для вашого додатка. Уникайте запиту надмірно високої роздільної здатності або частоти кадрів, якщо це не є необхідним.
• Слідкуйте за станом доріжки: Прослуховуйте події, такі як ended та mute, щоб реагувати на зміни стану доріжки.
• Тестуйте на різних пристроях: Тестуйте ваш додаток на різноманітних пристроях та браузерах, щоб забезпечити сумісність.
• Враховуйте доступність: Проєктуйте ваш додаток так, щоб він був доступним для користувачів з обмеженими можливостями. Надавайте альтернативні методи введення та переконайтеся, що аудіо- та відеовихід є чітким і зрозумілим.

Висновок

Інтерфейс MediaStreamTrack — це потужний інструмент для створення вебдодатків, багатих на медіаконтент. Розуміючи, як створювати, маніпулювати та керувати медіадоріжками, ви можете створювати захопливі та інтерактивні враження для своїх користувачів. Цей вичерпний посібник охопив основні аспекти управління MediaStreamTrack, від отримання доріжок за допомогою getUserMedia() до передових технік, таких як обробка аудіо та відео. Пам'ятайте про пріоритетність конфіденційності користувачів та оптимізацію продуктивності під час роботи з медіапотоками. Подальше вивчення WebRTC та пов'язаних технологій значно розширить ваші можливості в цій захопливій галузі веброзробки.