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

🍎Три распространенных протокола прямых трансляций

RTMP-протоколСоздан для потоковой передачи,Он чаще используется в push-стриминге.,Большинство одновременно CDN Вендор поддерживает RTMP протокол.

HTTP-FLV Используйте что-то вроде RTMP-стриминг HTTP Длинные соединения должны распределяться конкретным сервером потокового мультимедиа с учетом преимуществ того и другого. и возможность повторно использовать существующие HTTP Распределение потоковых ресурсов по протоколу в режиме реального времени. RTMP равный RTMP Для сравнения, часть времени взаимодействия с протоколом опущена, время первого экрана короче и имеется больше расширяемых функций.

HLS В качестве соглашения о прямой трансляции, предложенного Apple, в iOS Конец занимает непоколебимую позицию, Андроид Терминал также предоставляет соответствующую поддержку.

🍂Смотрите прямую трансляцию Douyin Kuaishou

Что, если вы получите адрес прямой трансляции Доуина? Нам нужно использовать инструменты анализа трафика только для сканирования URL-адресов, содержащих вышеуказанные протоколы.

Сначала мы находим текущую прямую трансляцию, которую хотим записать. И поделитесь этим следующим образом:

Откройте общий адрес в браузере, bing

Затем используйте инструменты анализа трафика для захвата текущих пакетов данных.

Затем,Ищем форматы файлов в протоколах прямых трансляцийflvилиm3u8Вот и все。

Щелкните правой кнопкой мыши и скопируйте адрес. Затем поместите его в инструмент воспроизведения потокового мультимедиа для тестирования.

Эффект следующий:

тот же метод,мы можем схватитьбыстрый работник Станция Бпрямой трансляции。

Сканировать данные

🍄Используйте HTML-отображение

Теперь я столкнулся с такой новой проблемой. У нас есть прямая трансляция. Но воспроизвести его можно только через потоковый медиаплеер. Можно ли воспроизводить живое видео через HTML?

Мы знаем, что в H5,videoТеги используются для воспроизведения видео.。Но он только анализируетmp4 aviи другие распространенные форматы。иflv m3u8Другие форматы не поддерживаются。Как это решить？

🍛Познакомьтесь с flv.js

Библиотека JavaScript, реализующая воспроизведение видео формата FLV в видео HTML5. Он работает путем перекодирования и мультиплексирования потока файлов FLV во фрагменты ISO BMFF (фрагмент MP4), а затем подачи фрагментов MP4 в браузер через расширения источника мультимедиа.

flv.js делает только одно. После получения аудио- и видеоданных в формате FLV он декодирует данные FLV через собственный JS, а затем передает их в собственный тег HTML5 Video через API расширений источника мультимедиа. (HTML5 изначально поддерживает только воспроизведение формата mp4/webm и не поддерживает FLV)

✍Примеры кода

Во-первых, нам нужно представить flv.js

<script src="https://cdn.bootcss.com/flv.js/1.3.3/flv.js"></script>

HTML-код выглядит следующим образом:

<video width="300px" height="400px" id="videoElement" controls></video>
<script>
  if (flvjs.isSupported()) {
  var videoElement = document.getElementById('videoElement');
  var flvPlayer = flvjs.createPlayer({
  type: 'flv',
  url: 'https://pull-f3.douyincdn.com/third/stream-111864726937404075_hd.flv?abr_pts=-1800'
  });
  flvPlayer.attachMediaElement(videoElement);
  flvPlayer.load();
  flvPlayer.play();
    }
</script>

Эффект следующий:

🐋Снимайте прямую трансляцию с камеры

Мы также часто видим прямые трансляции с использованием камер на аттракционах для прямых трансляций в реальном времени. Как это делается?

Здесь мы используем бытовойTPLinkКамера, например。

Поделитесь устройством в приложении камеры, а затем запишите прямую трансляцию.

Захват пакетов

тест

😹Резюме

Этот вопрос,Мы объясняем захват протокола потокового видео в реальном времени. Принцип тоже очень прост,Это не что иное, как перехват пакетов и проверка протоколов прямого вещания.flv m3u8Вот и все。

Авторские права принадлежат: старшему двоюродному брату Сяояози.

Ссылка на эту статью：https://cloud.tencent.com/developer/article/2160571

Лицензия Creative Commons с указанием авторства – некоммерческая. 4.0 Разрешение предоставляется на основании международных соглашений и перепечатка цитируемых статей осуществляется по тому же протоколу.