Ранее мы говорили об основах веб-стриминга с использованием технологии WebRTC. Теперь поговорим о некоторых интересных проблемах, с которыми я столкнулся: совместимость с iOS.

В предыдущей статье мы обсуждали MediaStream и его связь с тегом <video>. Мы знаем, что <video>может принимать MediaStream в качестве входных данных. К нашему удивлению, <video> тоже можно преобразовать в MediaStream! HTMLMediaElement.captureStream() — это метод для выполнения этого преобразования. Но если вы внимательно посмотрите на документацию, то увидите неприятную новость.

Safari не поддерживается.

Если ваше приложение должно быть доступно для пользователей iOS, то эта информация будет для вас плохой новостью. Теперь у вас есть 3 варианта:

  1. Игнорировать пользователя iOS :(
  2. Покажите свое видео на экране с помощью getDisplayMedia.
  3. Используйте HTMLCanvasElement.captureStream().

Подождите, есть еще один catchStream? Да, вместо мультимедиа эта функция захватывает потоки с объекта холста. И если вы посмотрите на совместимость функции с браузером, вы увидите, что эта функция поддерживает Safari. Немного поработав, мы можем использовать это для преобразования нашего тега <video> в MediaStream!

Вот краткое описание шагов, если вы просто хотите просмотреть его:

  1. Нарисуйте кадр видео на холсте
  2. Повторите это, чтобы создать requestAnimationFrame.

Полученный код также можно увидеть в моем репозитории.



tutorial/4-webrtc-ios-capturestream at master · adyaksaw/tutorial
Пример кода для руководства. Внесите свой вклад в разработку adyaksaw/tutorial, создав учетную запись на GitHub.github.com



Ладно, давайте подробнее! Начнем с основного файла HTML и файла javascript из нашей предыдущей статьи.

Во-первых, нам нужно поместить наше видео на холст. Лично моя первая мысль об этой задаче: Могу ли я просто поместить тег видео прямо в тег холста?. Ну, к моему разочарованию, я не могу. Нам нужно нарисовать каждый кадр на холсте. Для выполнения этой задачи мы будем использовать функцию drawImage. Давайте установим его так, чтобы он отрисовывался после воспроизведения видео, как показано в примере ниже.

Если вы запустите приведенный выше код, вы увидите, что холст появляется на нашей веб-странице, но на нем еще нет анимации. Это потому, что мы рисуем изображение только один раз, когда начинается видео. Нам нужно сделать его повторяемым, и здесь на помощь приходит requestAnimationFrame.

Чтобы объяснить функцию window.requestAnimationFrame(), это функция для перерисовки анимации путем вызова функции обновления. Процесс обновления произойдет перед следующей перерисовкой, которая обычно происходит 60 раз в секунду. Мы можем использовать это, чтобы многократно рисовать наш холст, чтобы сделать анимацию. Теперь мы изменим наш код, чтобы мы могли использовать эту функцию. Измененный код можно увидеть в следующем разделе. Обратите внимание, что код должен вызывать функцию requestAnimationFrame как внутри, так и вне функции шага.

Итак, это все. Поскольку холст уже захватил наше видео кадр за кадром, теперь мы можем просто преобразовать холст в MediaStream вместо преобразования видео. Преобразование совместимо практически со всеми браузерами, кроме Internet Explorer, который решает проблему совместимости iOS с функцией CaptureStream.

Но у преобразования видео в анимацию холста есть недостаток. Анимация холста не запускается на неактивной вкладке. Поэтому, если другой клиент транслирует ваш холст, а вы переключили вкладку, потоковая передача будет приостановлена ​​до тех пор, пока вы не вернетесь на вкладку своего холста. Итак, вам нужно выбрать свой яд: вам нужна совместимость с iOS или возможность для стримера переключать вкладки?

Здравствуйте, меня зовут Адьякса, и я пишу о разработке программного обеспечения и своем опыте изучения языков. Я планирую выпускать еженедельный блог о чем-то, что я нахожу интересным во время работы над своими сторонними проектами. Если вам интересно, вы можете подписаться на меня, чтобы быть в курсе!

Ресурсы: