Задать вопрос
Jeer
@Jeer
уверенный пользователь

Как разобраться с трансляцией видео с малины?

Привет,
Нашел библиотеку для трансляции видео с raspberry pi на github
https://github.com/131/h264-live-player

Распаковал на малине, запустил: node server-rpi.js без изменений и на домашнем компьютере в браузере 192.168.0.102:8080 получил отличную трансляцию без задержек
611fba15986b8310552431.png

Затем мне нужно было встроить эту трансляцию на свой сайт. Необходимость заключается в том, что на одной странице, помимо видеотрансляции, должны быть другие кнопки управления и информационные плашки. Я разрабатываю сайт в Visual Studio на языке C#, на фронте использую angular (но это не обязательно). Я сделал iframe и разместил ссылку на страницу, описанную выше

<iframe [src] = "getVideoUrl" style = "width: 1000px; height: 600px;"> </iframe>


В iframe были отрисованы 3 кнопки
611fba9a03ff5005947508.png

но когда нажимаю [Start video], трансляции нет, а в консоли есть такие ошибки:
611fbac76180c218812703.png

stderr: increasing TOTAL_MEMORY to 67108864 to be compliant with the asm.js spec
stderr: pre-main prep time: 1 ms
creatingTextures: size: (960, 540)


Я не мог с ними справиться.

Затем я нашел пакет npm для этого проекта https://www.npmjs.com/package/h264-live-player
Чтобы запустить Angular, потребовалось немного поработать, но я справился. Это то, что мне пришлось добавить в package.json
611fbaf994d99243717638.png

В HTML я добавил что-то вроде этого:
<div class="col-md-9 text-center">
    <button type="button" (click)="wsavc.playStream()">Start Video</button>
    <button type="button" (click)="wsavc.stopStream()">Stop Video</button>
    <button type="button" (click)="wsavc.disconnect()">Disconnect</button>
    <br />
    <canvas #roboVideo></canvas>
  </div>


В TS вот это:
var WSAvcPlayer = require('h264-live-player/wsavc/index.js');
 

  public wsavc: any;
  ngAfterViewInit() {
    var uri = "ws://192.168.0.102:8080";
    this.wsavc = new WSAvcPlayer(this.roboVideo, "webgl", 1, 35);
    this.wsavc.connect(uri);
  }


При загрузке страницы отображаются те же ошибки, плюс еще несколько:
611fbb4136745321715644.png

После этого я устал ковырять angular и скачал проект с github на свой домашний компьютер. То есть трансляция запускается на raspberry pi, а html-страница размещается на домашнем компьютере. Единственное, я исправил строку подключения на IP-адресе raspberry pi:
611fbb66e6a68433494073.png

Но и в таком варианте у меня так же не запустилось.
611fbb83eeba1159287132.png

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

Дополнительно, если будет возможность, мне нужны обучающие материалы, статьи или какие строить запросы в гугле, чтобы разобраться в этом коде? Как научиться делать так же, этот код остался сложным для понимания. Я видел даже куски минифицированного кода (как раз оттуда идёт информация об ошибке) и я не смог понять это.
Я попытался написать автору, но проекту более 5 лет и он не ответил с указанного в контактах эмейла
  • Вопрос задан
  • 166 просмотров
Подписаться 2 Сложный Комментировать
Решения вопроса 1
gbg
@gbg
Любые ответы на любые вопросы
1) Читать статьи Арутюняна от забора и до обеда:

2) Выстроить для себя представление о кодеке, медиаконтейнере, транспорте и их взаимосвязях.

Нужно понимать, что такое первое, второе и третье (нет, это не меню в столовке). И как одно влияет на другое.

Например, надо понимать, что кодек обязательно нужно тюнить под рилтайм, а именно, накрутить ему частоту ключевых кадров на максимум. Иначе усеру придется по полминуты ждать I-Frame

Надо понимать, что в зависимости от платформы и браузера, вы получаете ограничения на кодек, контейнер и транспорт - старый ыфон понимает только h264 baseline, сваленный в H264 annexb поток и передаваемый по HLS
(и это только один вариант связки)

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

Первые две задачи делает ffmpeg, третью - сервер вещания.

Чем больше надо поддержать девайсов, тем больше конфигураций вещания и перекодированных потоков (хотите вещать в разных разрешениях - напрягайте ffmpeg на декодинг - скейл - кодинг)

Хотите, чтобы вас могли посмотреть на тачке с линуксом - кодируйте в VP8/9

Короче, поле ОБШИРНОЕ, ответ со всеми вариантами займет целую книгу, а я два месяца провозился, настраивая корпоративный стриминг видеозвонков с учетом всех нужных хотелок.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы