Шпаргалка по работе с медиа в браузере

Привет, друзья!

В данной шпаргалке представлены все основные интерфейсы и методы по работе с медиа в браузере, описываемые в следующих спецификациях:

• Media Capture and Streams
• Screen Capture
• Media Capture from DOM Elements
• MediaStream Image Capture
• MediaStream Recording
• Web Speech API

Шпаргалка представлена в форме вопрос-ответ.

• Репозиторий с кодом всех сниппетов
• Песочница

Туториалы по теме:

• JavaScript: разрабатываем приложение для записи звука
• JavaScript: разрабатываем приложение для записи экрана
• JavaScript: захват медиапотока из DOM элементов
• JavaScript: делаем селфи с помощью браузера
• JavaScript: разрабатываем чат с помощью Socket.io, Express и React с акцентом на работе с медиа

Если вам это интересно, прошу под кат.

Содержание:

• 1. Как получить список медиаустройств пользователя?
• 2. Как получить список требований к потоку, поддерживаемых браузером?
• 3. Как захватить поток с устройств пользователя?
• 4. Как захватить поток с экрана пользователя?
• 5. Как захватить поток из DOM-элемента?
• 6. Как остановить захват потока?
• 7. Как захватить изображение из видеотрека?
• 8. Как записать поток?
• 9. Как преобразовать текст в речь?
• 10. Как преобразовать речь в текст?
• 11. Как определить поддержку возможностей по работе с медиа браузером?

1. Как получить список медиаустройств пользователя?

Для получения списка медиаустройств пользователя предназначен метод enumerateDevices интерфейса MediaDevices объекта Navigator:

const devices = await navigator.mediaDevices.enumerateDevices()

• Спецификация
• MDN

Список моих устройств:

Свойство kind может использоваться для формирования требований (constraints) к медиапотоку (MediaStream) (далее — поток) (см. ниже), поэтому имеет смысл временно сохранять в браузере информацию о доступных устройствах пользователя:

const STORAGE_KEY = 'user_media_devices'  export async function enumerateDevices() {   try {     const devices = sessionStorage.getItem(STORAGE_KEY)       ? JSON.parse(sessionStorage.getItem(STORAGE_KEY))       : await navigator.mediaDevices.enumerateDevices()      if (!sessionStorage.getItem(STORAGE_KEY)) {       sessionStorage.setItem(STORAGE_KEY, JSON.stringify(devices))     }      return { devices }   } catch (error) {     return { error }   } }

Обработчик:

const stringify = (data) => JSON.stringify(data, null, 2)  const handleError = (e) => {   console.error(e) }  // <button id="enumerateDevicesBtn">Enumerate devices</button> enumerateDevicesBtn.onclick = async () => {   const { devices, error } = await enumerateDevices()   if (error) return handleError(error)    // <pre id="logBox"></pre>   logBox.textContent = stringify(devices) }

2. Как получить список требований к потоку, поддерживаемых браузером?

Для получения списка требований к потоку, поддерживаемых браузером, предназначен метод getSupportedConstraints:

const constraints = await navigator.mediaDevices.getSupportedConstraints()

• Спецификация
• MDN

Список требований, поддерживаемых моим браузером (последняя версия Chrome):

Обратите внимание: в данном списке представлены не все требования, которые можно применять к потоку. Некоторые требования из списка относятся к категории «продвинутых» (advanced) и применяются несколько иначе, чем обычные. Многие требования являются экспериментальными и на сегодняшний день поддерживаются не в полной мере.

export async function getSupportedConstraints() {   try {     const constraints = await navigator.mediaDevices.getSupportedConstraints()     return { constraints }   } catch (error) {     return { error }   } }

Обработчик:

// <button id="getSupportedConstraintsBtn">Get supported constraints</button> getSupportedConstraintsBtn.onclick = async () => {   const { constraints, error } = await getSupportedConstraints()   if (error) return handleError(error)    logBox.textContent = stringify(constraints) }

3. Как захватить поток с устройств пользователя?

Для захвата потока с устройств пользователя используется метод getUserMedia:

const stream = await navigator.mediaDevices.getUserMedia(constraints?)

• Спецификация — алгоритм
• MDN

Данный метод принимает опциональные требования к потоку:

• Спецификация — шаблон требований
• Спецификация — словарь требований
• MDN

Дефолтные требования:

{ audio: true, video: true }

Пример кастомных требований:

export const DEFAULT_AUDIO_CONSTRAINTS = {   echoCancellation: true,   autoGainControl: true,   noiseSuppression: true }  export const DEFAULT_VIDEO_CONSTRAINTS = {   width: 1920,   height: 1080,   frameRate: 60 }

getUserMedia возвращает поток с устройств пользователя:

• Спецификация
• MDN

Поток представляет собой коллекцию медиатреков (MediaStreamTrack) (далее — трек):

• Спецификация
• MDN

Поток предоставляет несколько методов для работы с треками:

• getTracks — возвращает список медиатреков;
• getAudioTracks — возвращает список аудиотреков;
• getVideoTracks — возвращает список видеотреков;
• addTrack — добавляет трек в поток;
• removeTrack — удаляет трек из потока и др.

Обратите внимание: захваченный поток должен быть «одиночкой» (singleton). Это позволяет избежать повторного захвата и правильно останавливать захват.

let mediaStream  export async function getUserMedia(   constraints = {     audio: DEFAULT_AUDIO_CONSTRAINTS,     video: DEFAULT_VIDEO_CONSTRAINTS   } ) {   try {     const stream = mediaStream       ? mediaStream       : (mediaStream = await navigator.mediaDevices.getUserMedia(constraints))      const tracks = stream.getTracks()     const audioTracks = stream.getAudioTracks()     const videoTracks = stream.getVideoTracks()      return { stream, tracks, audioTracks, videoTracks }   } catch (error) {     return { error }   } }

Для прямой передачи потока в приемник (например, DOM-элемент video) используется свойство srcObject. Приемник должен иметь атрибуты autoplay и muted:

// <video id="streamReceiver" controls autoplay muted></video> streamReceiver.srcObject = stream

Трек предоставляет такие методы, как:

• getCapabilities — возвращает список возможностей (настроек), поддерживаемых треком;
• getConstraints — возвращает список требований, примененных к треку;
• getSettings — возвращает список требований и настроек, примененных к треку;
• applyConstraints — применяет требования к треку;
• stop — останавливает получение данных из источника трека и др.

Функция для получения потока и треков с применением к потоку поддерживаемых требований, передачей потока в приемник, получением информации о первом треке и отображением этой информации на экране может выглядеть следующим образом:

// <button id="getUserMediaBtn">Get user media</button> getUserMediaBtn.onclick = async () => {   const { devices, error: devicesError } = await enumerateDevices()   if (devicesError) return handleError(devicesError)    let constraints   if (devices.some((device) => device.kind === 'audioinput')) {     constraints = { audio: DEFAULT_AUDIO_CONSTRAINTS }   }   if (devices.some((device) => device.kind === 'videoinput')) {     constraints = { ...constraints, video: DEFAULT_VIDEO_CONSTRAINTS }   }   if (!constraints) {     return handleError('User has no devices to capture.')   }    const { stream, tracks, error: mediaError } = await getUserMedia(constraints)   if (mediaError) return handleError(mediaError)   console.log('@stream', stream)    streamReceiver.srcObject = stream    const [firstTrack] = tracks   console.log('@first track', firstTrack)    const trackCapabilities = firstTrack.getCapabilities()   const trackConstraints = firstTrack.getConstraints()   const trackSettings = firstTrack.getSettings()    logBox.textContent = stringify({     trackCapabilities,     trackConstraints,     trackSettings   }) }

Пример захваченного потока и первого трека:

Пример информации о треке:

4. Как захватить поток с экрана пользователя?

Для захвата потока с экрана пользователя предназначен метод getDisplayMedia:

const stream = await navigator.mediaDevices.getDisplayMedia(constraints?)

• Спецификация — алгоритм
• MDN

В целом, данный метод аналогичен методу getUserMedia, но поддерживает несколько дополнительных требований к потоку:

• Спецификация
• MDN

Пример дополнительных требований:

export const ADDITIONAL_VIDEO_CONSTRAINTS = {   displaySurface: 'window',   cursor: 'motion' }

Обратите внимание: на сегодняшний день аудио при захвате экрана не поддерживается.

Функция для захвата экрана:

// поток должен быть одиночкой let displayStream  export async function getDisplayMedia(   constraints = {     video: { ...DEFAULT_VIDEO_CONSTRAINTS, ...ADDITIONAL_VIDEO_CONSTRAINTS }   } ) {   try {     const stream = displayStream       ? displayStream       : (displayStream = await navigator.mediaDevices.getDisplayMedia(constraints))      const [tracks, audioTracks, videoTracks] = [       stream.getTracks(),       stream.getAudioTracks(),       stream.getVideoTracks()     ]      return { stream, tracks, audioTracks, videoTracks }   } catch (error) {     return { error }   } }

Соответствующий обработчик:

// <button id="getDisplayMediaBtn">Get display media</button> getDisplayMediaBtn.onclick = async () => {   const { stream, tracks, error } = await getDisplayMedia()   if (error) return handleError(error)   console.log('@display stream', stream)    streamReceiver.srcObject = stream    const [firstTrack] = tracks   console.log('@display first track', firstTrack)    const [trackCapabilities, trackConstraints, trackSettings] = [     firstTrack.getCapabilities(),     firstTrack.getConstraints(),     firstTrack.getSettings()   ]    logBox.textContent = stringify({     trackCapabilities,     trackConstraints,     trackSettings   }) }

Пример захваченного потока и первого трека:

Пример информации о треке:

5. Как захватить поток из DOM-элемента?

Для захвата потока из таких DOM-элементов, как audio, video и canvas используется метод captureStream интерфейса HTMLMediaElement или, соответственно, HTMLCanvasElement:

const stream = await mediaElement.captureStream()

• Спецификация
• MDN — HTMLMediaElement
• MDN — HTMLCanvasElement

При захвате потока из медиаэлемента имеет смысл проверять, во-первых, что переданный аргумент является медиаэлементом, во-вторых, готовность медиа к воспроизведению до конца без прерываний с помощью свойства readyState:

if (!(mediaElement instanceof HTMLMediaElement)) {   throw new Error('Argument must be an instance of HTMLMediaElement.') } if (mediaElement.readyState !== 4) {   throw new Error(     'Media element has not enough data to be played through the end without interruption.'   ) }

В случае с DOM-элементами может одновременно захватываться несколько потоков.

Функция для захвата потока из медиаэлемента:

let mediaElementStreams = []  export async function captureStreamFromMediaElement(mediaElement) {   if (!(mediaElement instanceof HTMLMediaElement)) {     throw new Error('Argument must be an instance of HTMLMediaElement.')   }   if (mediaElement.readyState !== 4) {     throw new Error(       'Media element has not enough data to be played through the end without interruption.'     )   }   try {     const stream = await mediaElement.captureStream()     mediaElementStreams.push(stream)      const [tracks, audioTracks, videoTracks] = [       stream.getTracks(),       stream.getAudioTracks(),       stream.getVideoTracks()     ]      return { stream, tracks, audioTracks, videoTracks }   } catch (error) {     return { error }   } }

Соответствующий обработчик:

// <button id="getStreamFromMediaElementBtn">Get stream from media element</button> getStreamFromMediaElementBtn.onclick = async () => {   // <video id="videoEl" src="./assets/forest.mp4" controls></video>   const { stream, tracks, error } = await captureStreamFromMediaElement(videoEl)   if (error) return handleError(error)   console.log('@media element stream', stream)    streamReceiver.srcObject = stream    const [firstTrack] = tracks   console.log('@media element first track', firstTrack)    const [trackCapabilities, trackConstraints, trackSettings] = [     firstTrack.getCapabilities(),     firstTrack.getConstraints(),     firstTrack.getSettings()   ]    logBox.textContent = stringify({     trackCapabilities,     trackConstraints,     trackSettings   }) }

Пример захваченного потока и первого трека:

Пример информации о треке:

6. Как остановить захват потока?

Для остановки захвата потока необходимо прекратить получение данных из каждого его источника, т.е. трека. Для этого следует вызвать метод stop каждого трека:

export function stopTracks() {   mediaStream?.getTracks().forEach((track) => {     track.stop()   })   displayStream?.getTracks().forEach((track) => {     track.stop()   })   for (const stream of mediaElementStreams) {     stream?.getTracks().forEach((track) => {       track.stop()     })   }   mediaStream = null   displayStream = null   mediaElementStreams = [] }

7. Как захватить изображение из видеотрека?

Для захвата изображения из видеотрека (или кадра из холста) предназначен метод takePhoto интерфейса ImageCapture:

const imageCapture = new ImageCapture(videoTrack) const blob = await imageCapture.takePhoto(photoSettings?)

• Спецификация — интерфейс ImageCapture
• Спецификация — метод takePhoto
• MDN

Данный метод принимает опциональные настройки для фото:

• Спецификация
• MDN

Пример настроек для фото:

export const DEFAULT_PHOTO_SETTINGS = {   imageHeight: 480,   imageWidth: 640 }

К видеотреку можно применять дополнительные требования, связанные с захватом изображения:

• Спецификация

Эти требования являются продвинутыми и применяются с помощью метода applyConstraints:

const advancedConstraints = {   name: value } await videoTrack.applyConstraints({   advanced: [advancedConstraints] })

Для того, чтобы иметь возможность применять к видеотреку некоторые продвинутые требования при захвате потока с устройств пользователя к потоку должны применяться следующие требования:

// эти требования относятся к видео export const DEFAULT_PHOTO_CONSTRAINTS = {   pan: true,   tilt: true,   zoom: true }

Метод takePhoto возвращает объект Blob:

• Спецификация
• MDN

Экземпляр ImageCapture предоставляет следующие методы для получения списка возможностей и настроек для фото:

• getPhotoCapabilities — возвращает список возможностей для фото;
• getPhotoSettings — возвращает список настроек для фото.

Функция для получения возможностей и настроек для фото:

export async function getPhotoCapabilitiesAndSettings(videoTrack) {   const imageCapture = new ImageCapture(videoTrack)   console.log('@image capture', imageCapture)    try {     const [photoCapabilities, photoSettings] = await Promise.all([       imageCapture.getPhotoCapabilities(),       imageCapture.getPhotoSettings()     ])      return { photoCapabilities, photoSettings }   } catch (error) {     return { error }   } }

Соответствующий обработчик:

// <button id="getPhotoCapabilitiesAndSettingsBtn">Get photo capabilities and settings</button> getPhotoCapabilitiesAndSettingsBtn.onclick = async () => {   const { videoTracks, error: mediaError } = await getUserMedia()   if (mediaError) return handleError(mediaError)    const [firstVideoTrack] = videoTracks    const {     photoCapabilities,     photoSettings,     error: photoError   } = await getPhotoCapabilitiesAndSettings(firstVideoTrack)   if (photoError) return handleError(photoError)    logBox.textContent = stringify({     photoCapabilities,     photoSettings   }) }

Пример возможностей и настроек для фото:

Функция для захвата изображения из видеотрека:

export async function takePhoto({   videoTrack,   photoSettings = DEFAULT_PHOTO_SETTINGS }) {   const imageCapture = new ImageCapture(videoTrack)    try {     const blob = await imageCapture.takePhoto(photoSettings)     return { blob }   } catch (error) {     return { error }   } }

Соответствующий обработчик:

// <button id="takePhotoBtn">Take photo</button> takePhotoBtn.onclick = async () => {   const { videoTracks, error: mediaError } = await getUserMedia({     video: { ...DEFAULT_VIDEO_CONSTRAINTS, ...DEFAULT_PHOTO_CONSTRAINTS }   })   if (mediaError) return handleError(mediaError)    const [videoTrack] = videoTracks    // здесь мы можем применять к треку дополнительные требования   // await videoTrack.applyConstraints({   //   advanced: [advancedConstraints]   // })    const { blob, error: photoError } = await takePhoto({ videoTrack })   if (photoError) return handleError(photoError)    // <img id="imgBox" alt="" />   const imgSrc = URL.createObjectURL(blob)   imgBox.src = imgSrc   // imgBox.addEventListener(   //   'load',   //   () => {   //     URL.revokeObjectURL(imgSrc)   //   },   //   { once: true }   // ) }

Ссылка на источник изображения формируется с помощью метода URL.createObjectURL. Метод URL.revokeObjectURL должен вызываться во избежание утечек памяти, но при его вызове после загрузки изображения, как в приведенном примере, изображение невозможно будет скачать.

• Спецификация
• MDN — метод createObjectURL
• MDN — метод revokeObjectURL

8. Как записать поток?

Для записи потока предназначен интерфейс MediaRecorder:

• Спецификация
• MDN

const mediaRecorder = new MediaRecorder(mediaStream, options?)

Конструктор MediaRecorder принимает поток и опциональный объект с настройками, наиболее важной из которых является настройка mimeType — тип создаваемой записи.

Экземпляр MediaRecorder предоставляет следующие методы для управления записью:

• start(timeslice?) — запускает запись. Данный метод принимает опциональный параметр timeslice — время вызова события dataavailable (см. ниже);
• pause — приостанавливает запись;
• resume — продолжает запись;
• stop — останавливает запись.

В процессе записи возникает ряд событий, наиболее важным из которых является dataavailable. Обработчик этого события принимает объект, содержащий свойство data, в котором находятся части (chunks) записанных данных в виде Blob:

let mediaDataChunks = []  mediaRecorder.ondatavailable = ({ data }) => {   mediaDataChunks.push(data) }

Интерфейс MediaRecorder позволяет проверять поддержку типа создаваемой записи с помощью метода isTypeSupported.

Предположим, что мы хотим записать экран пользователя со звуком. Поток экрана будет содержать только видео. Поэтому нам необходимо получить видеотреки экрана и аудиотреки микрофона и объединить их в один поток. Это можно сделать при помощи конструктора MediaStream:

export const createNewStream = (tracks) => new MediaStream(tracks)

Данный конструктор принимает треки в виде массива.

Функция для начала записи:

const DEFAULT_RECORD_MIME_TYPE = 'video/webm' const DEFAULT_RECORD_TIMESLICE = 250  // лучше, чтобы `mediaRecorder` был одиночкой let mediaRecorder let mediaDataChunks = []  export async function startRecording({   mediaStream,   mimeType,   timeslice = DEFAULT_RECORD_TIMESLICE,   ...restOptions }) {   if (mediaRecorder) return    mediaRecorder = new MediaRecorder(mediaStream, {     mimeType: MediaRecorder.isTypeSupported(mimeType)       ? mimeType       : DEFAULT_RECORD_MIME_TYPE,     ...restOptions   })   console.log('@media recorder', mediaRecorder)    mediaRecorder.onerror = ({ error }) => {     return error   }    mediaRecorder.ondataavailable = ({ data }) => {     mediaDataChunks.push(data)   }    mediaRecorder.start(timeslice) }

Соответствующий обработчик:

// <button id="startRecordingBtn">Start recording</button> startRecordingBtn.onclick = async () => {   const { devices, error: devicesError } = await enumerateDevices()   if (devicesError) return handleError(devicesError)    // мы готовы записывать экран без звука   let _audioTracks = []   if (devices.some(({ kind }) => kind === 'audioinput')) {     const { audioTracks, error: mediaError } = await getUserMedia()     if (mediaError) return handleError(mediaError)      _audioTracks = audioTracks   }    const { videoTracks, error: displayError } = await getDisplayMedia()   if (displayError) return handleError(displayError)    const mediaStream = createNewStream([..._audioTracks, ...videoTracks])   streamReceiver.srcObject = mediaStream    // ждем возможную ошибку   const recordError = await startRecording({ mediaStream })   if (recordError) return handleError(recordError) }

Пример «записывателя»:

Функция приостановки/продолжения записи:

// в таких случаях удобно использовать `IIFE` и замыкание export const pauseOrResumeRecording = (function () {   let paused = false    return function () {     if (!mediaRecorder) return      paused ? mediaRecorder.resume() : mediaRecorder.pause()     paused = !paused      return paused   } })()

Обработчик:

// <button id="pauseOrResumeRecordingBtn">Pause/Resume recording</button> pauseOrResumeRecordingBtn.onclick = () => {   const paused = pauseOrResumeRecording()   console.log('@recording paused', paused) }

Функция остановки записи:

export function stopRecording() {   if (!mediaRecorder) return    mediaRecorder.stop()    const _mediaDataChunks = mediaDataChunks   console.log('@media data chunks', _mediaDataChunks)    // очитка   // Явное удаление обработчика события `dataavailable`   // обеспечивает возможность повторной записи   mediaRecorder.ondataavailable = null   mediaRecorder = null   mediaDataChunks = []    return _mediaDataChunks }

Обработчик:

// <button id="stopRecordingBtn">Stop recording</button> stopRecordingBtn.onclick = () => {   const chunks = stopRecording()    const blob = new Blob(chunks, {     type: DEFAULT_RECORD_MIME_TYPE   })    // если необходимо создать файл, например, для передачи на сервер   // https://w3c.github.io/FileAPI/#file-section   // const file = new File(   //   chunks,   //   `new-record-${Date.now()}.${DEFAULT_RECORD_MIME_TYPE.split('/').at(-1)}`,   //   {   //     type: DEFAULT_RECORD_MIME_TYPE   //   }   // )    // <video id="recordBox" controls></video>   recordBox.src = URL.createObjectURL(blob)   // в данном случае проблем со скачиванием файла не возникает   URL.revokeObjectURL(blob)    stopTracks() }

Пример частей данных:

9. Как преобразовать текст в речь?

• Туториал по Web Speech API

Для преобразования текста в речь предназначен интерфейс SpeechSynthesis:

• Спецификация
• MDN

Данный интерфейс является свойством глобального объекта window (window.speechSynthesis).

Для озвучивания текста применяются голоса (voices), доступные в браузере. Для получения их списка используется метод getVoices:

const voices = speechSynthesis.getVoices()

Этот метод на сегодняшний день работает не совсем обычно. При первом озвучивании его приходится вызывать дважды, повторно запрашивая список голосов в обработчике события voicechanged:

let voices = speechSynthesis.getVoices()  speechSynthesis.onvoiceschanged = () => {   voices = speechSynthesis.getVoices() }

speechSynthesis предоставляет следующие методы для озвучивания текста:

• start(utterance) — запуск озвучивания;
• pause — приостановка озвучивания;
• resume — продолжение озвучивания;
• cancel — отмена (остановка) озвучивания.

Метод start принимает экземпляр SpeechSynthesisUtterance:

const utterance = new SpeechSynthesisUtterance(text?)

• Спецификация
• MDN

Данный конструктор принимает опциональный текст для озвучивания.

utterance имеет несколько сеттеров для настройки озвучивания:

• text — текст для озвучивания;
• lang — язык озвучивания;
• voice — голос для озвучивания и др.

Предположим, что у нас имеется такой текст:

<textarea id="textToSpeech" rows="4"> Мы — источник веселья и скорби рудник. Мы — вместилище скверны и чистый родник. Человек, словно в зеркале мир, — многолик. Он ничтожен — и он же безмерно велик! </textarea>

Функция для озвучивания этого текста голосом от Google:

// голос для озвучивания let voiceFromGoogle // индикатор начала озвучивания let speakingStarted  export function startSpeechSynthesis() {   if (voiceFromGoogle) return speak()    speechSynthesis.getVoices()    speechSynthesis.onvoiceschanged = () => {     const voices = speechSynthesis.getVoices()     console.log('@voices', voices)      voiceFromGoogle = voices.find((voice) => voice.name === 'Google русский')      speak()   } }  function speak() {   const trimmedText = textToSpeech.value.trim()   if (!trimmedText) return    const utterance = new SpeechSynthesisUtterance(trimmedText)   utterance.lang = 'ru-RU'   utterance.voice = voiceFromGoogle   console.log('@utterance', utterance)    speechSynthesis.speak(utterance)   speakingStarted = true    utterance.onend = () => {     speakingStarted = false   } }

Соответствующий обработчик:

// <button id="startSpeechSynthesisBtn">Start speech synthesis</button> startSpeechSynthesisBtn.onclick = () => {   startSpeechSynthesis() }

Пример списка голосов:

Пример «высказывания»:

Функция для приостановки/продолжения озвучивания:

// индикатор озвучивания `speechSynthesis.speaking` в настоящее время работает некорректно export const pauseOrResumeSpeaking = (function () {   let paused = false    return function () {     if (!speakingStarted) return      paused ? speechSynthesis.resume() : speechSynthesis.pause()     paused = !paused      return paused   } })()

Обработчик:

// <button id="pauseOrResumeSpeakingBtn">Pause/resume speaking</button> pauseOrResumeSpeakingBtn.onclick = () => {   const paused = pauseOrResumeSpeaking()   console.log('@speaking paused', paused) }

Функция для остановки озвучивания:

export function stopSpeaking() {   speechSynthesis.cancel() }

Обработчик:

// <button id="stopSpeakingBtn">Stop speaking</button> stopSpeakingBtn.onclick = () => {   stopSpeaking() }

10. Как преобразовать речь в текст?

Для преобразования речи в текст предназначен интерфейс SpeechRecognition:

// рекомендованный подход const speechRecognition =   window.SpeechRecognition || window.webkitSpeechRecognition const recognition = new speechRecognition()

• Спецификация
• MDN

recognition имеет несколько сеттеров для настройки распознавания речи:

• lang — язык для распознавания;
• continuous — определяет, продолжается ли распознавание после получения первого «финального» результата;
• interimResults — определяет, обрабатываются ли «промежуточные» результаты распознавания;
• maxAlternatives — определяет максимальное количество вариантов распознанного слова, возвращаемых браузером. Варианты возвращаются в виде массива, первым элементом которого является наиболее подходящее с точки зрения браузера слово.

Методы для управления распознаванием, предоставляемые recognition:

• start — запуск распознавания;
• stop — остановка распознавания;
• abort — прекращение распознавания.

При распознавании речи браузером происходит следующее:

• при вызове метода start браузер начинает нас «слушать»;
• каждое сказанное слово регистрируется как отдельная сущность — массив, содержащий несколько (в зависимости от настройки maxAlternatives) вариантов этого слова;
• регистрация слова приводит к возникновению события result;
• регистрируемые сущности являются промежуточными (interim) результатами распознавания;
• по истечении некоторого времени (определяемого браузером) после того, как мы замолчали, промежуточный результат переводится в статус финального (final);
• снова возникает событие result: значением свойства isFinal результата является true;
• после регистрации финального результата возникает событие end;
• если настройка continuous имеет значение false, распознавание завершится после регистрации первого слова;
• если настройка interimResults имеет значение false, результаты будут сразу регистрироваться как финальные;
• событие result имеет свойство resultIndex, значением которого является индекс последнего обработанного результата.

Обратите внимание: браузер не умеет работать с пунктуацией: он понимает слова, но не знаки препинания. Также обратите внимание, что выполняемое браузером редактирование результатов распознавания является минимальным и почти всегда оказывается недостаточным.

Предположим, что у нас имеется инпут для промежуточных результатов и текстовый блок для финальных результатов распознавания речи:

<div class="speech-to-text-wrapper">   <input type="text" id="interimTranscriptBox" />   <textarea id="finalTranscriptBox" rows="4"></textarea> </div>

Для решения проблемы, связанной с пунктуацией, нам потребуется такой словарь:

const DICTIONARY = {   точка: '.',   запятая: ',',   вопрос: '?',   восклицание: '!',   двоеточие: ':',   тире: '-',   абзац: '\n',   отступ: '\t' }

А для решения проблемы, связанной с редактированием, такие функции:

// заменяем слова на знаки препинания const editInterim = (s) => s   .split(' ')   .map((word) => {     word = word.trim()     return DICTIONARY[word.toLowerCase()]       ? DICTIONARY[word.toLowerCase()]       : word   })   .join(' ')  // удаляем лишние пробелы const editFinal = (s) => s.replace(/\s{1,}([\.+,?!:-])/g, '$1')

Функция для распознавания речи:

// экземпляр "распознавателя" let recognition // индикатор начала распознавания let recognitionStarted // финальный результат let finalTranscript  // функция очистки function resetRecognition() {   recognition = null   recognitionStarted = false   finalTranscript = ''   interimTranscriptBox.value = ''   finalTranscriptBox.value = '' }  export function startSpeechRecognition() {   resetRecognition()    recognition = new speechRecognition()   // настройки распознавания   recognition.continuous = true   recognition.interimResults = true   recognition.maxAlternatives = 3   recognition.lang = 'ru-RU'   console.log('@recognition', recognition)    recognition.start()   recognitionStarted = true    recognition.onend = () => {     // Повторно запускаем распознавание, если     // соответствующий индикатор имеет значение `true`     if (!recognitionStarted) return     recognition.start()   }    recognition.onresult = (e) => {     // Промежуточные результаты обновляются на каждом цикле распознавания     let interimTranscript = ''     // Перебираем результаты с того места, на котором остановились в прошлый раз     for (let i = e.resultIndex; i < e.results.length; i++) {       // Атрибут `isFinal` является индикатором того, что речь закончилась (мы перестали говорить)       if (e.results[i].isFinal) {         // Редактируем промежуточный результат         const interimResult = editInterim(e.results[i][0].transcript)         // и добавляем его к финальному         finalTranscript += interimResult       } else {         // В противном случае, записываем распознанное слово в промежуточный результат         interimTranscript += e.results[i][0].transcript       }     }     // Записываем промежуточный результат в `input`     interimTranscriptBox.value = interimTranscript     // Редактируем финальный результат     finalTranscript = editFinal(finalTranscript)     // и записываем его в `textarea`     finalTranscriptBox.value = finalTranscript   } }

Соответствующий обработчик:

// <button id="startSpeechRecognitionBtn">Start speech synthesis</button> startSpeechRecognitionBtn.onclick = () => {   startSpeechRecognition() }

Пример «распознавателя»:

Функция остановки распознавания:

export function stopRecognition() {   if (!recognition) return   recognition.stop()   recognitionStarted = false }

Обработчик:

// <button id="stopRecognitionBtn">Stop recognition</button> stopRecognitionBtn.onclick = () => {   stopRecognition() }

Функция прекращения распознавания:

export function abortRecognition() {   if (!recognition) return   recognition.abort()   resetRecognition() }

Обработчик:

// <button id="abortRecognitionBtn">Abort recognition</button> abortRecognitionBtn.onclick = () => {   abortRecognition() }

11. Как определить поддержку возможностей по работе с медиа браузером?

Функция для определения возможностей браузера по работе с медиа, рассмотренных в данной шпаргалке:

export function verifySupport() {   const unsupportedFeatures = []    if (!('mediaDevices' in navigator)) {     unsupportedFeatures.push('mediaDevices')   }    if (     !('captureStream' in HTMLAudioElement.prototype) &&     !('mozCaptureStream' in HTMLAudioElement.prototype)   ) {     unsupportedFeatures.push('captureStream')   }    ;['MediaStream', 'MediaRecorder', 'Blob', 'File', 'ImageCapture'].forEach(     (f) => {       if (!(f in window)) {         unsupportedFeatures.push(f)       }     }   )    if (!('speechSynthesis' in window)) {     unsupportedFeatures.push('speechSynthesis')   }    if (     !('SpeechRecognition' in window) &&     !('webkitSpeechRecognition' in window)   ) {     unsupportedFeatures.push('SpeechRecognition')   }    return unsupportedFeatures }

Пример использования этой функции:

const unsupportedFeatures = verifySupport() if (unsupportedFeatures.length) {   console.error(unsupportedFeatures) }

Таким образом, мы рассмотрели все основные интерфейсы и методы по работе с медиа, описываемые в указанных в начале шпаргалки спецификациях.

Следует отметить, что существует еще два интерфейса, предоставляемых браузером для работы с медиа, которые мы оставили без внимания в силу их сложности и специфичности:

• Web Audio API
• WebRTC 1.0: Real-Time Communication Between Browsers

Что касается последнего, вот парочка материалов, с которых можно начать изучение данного интерфейса:

• WebRTC для всех и каждого
• React: WebRTC Media Call

Благодарю за внимание и happy coding!

---