Я новичок в Angular и всем, что с этим связано.
У меня есть IP-камера, которая транслирует видео с определенного адреса (настоящий IP-адрес в примере не указан):
http://admin:password@xxx.xxx.xx.xxx/Streaming/channels/102/httppreview
Когда я вставляю адрес в браузер, видео появляется без проблем; то же самое с плеером VL C. Я посмотрел на исходный код в браузере, который просто:
<html>
<head>
<meta name="viewport" content="width=device-width, minimum-scale=0.1">
</head>
<body style="margin: 0px; background: #0e0e0e;">
<img style="-webkit-user-select: none;margin: auto;"
src="http://admin:password@xxx.xxx.xx.xxx/Streaming/channels/102/httppreview">
</body>
</html>
Когда я вставил приведенный выше исходный код в файл и сохранил его как файл. html, все, что я увидел, было сломано значок изображения ... Почему?
Что мне нужно использовать, чтобы просто отобразить поток HTTP? Я посмотрел в Videogular и HLS. js, но, похоже, ничего не получалось ...
В конце мне нужно сделать ссылку на уже построенный Angular проект, который отображает несколько камеры.
Angular исходный код камеры:
import { BehaviorSubject } from 'rxjs';
import { Injectable } from "@angular/core";
import { IMapCamera } from '../../Models/map-camera';
import { HttpService } from '../Http/http.service';
@Injectable({
providedIn: "root"
})
export class CamerasService {
public readonly _camerasMapping = new BehaviorSubject<IMapCamera[]>(null);
constructor(private httpService: HttpService) { }
getCameras() {
return [
{
id: 1,
iframeSrc:
"https://www.youtube.com/embed/niyLE7ZhOqE?autoplay=1&mute=1&loop=1&controls=0",
station: "S1"
}
];
}
}
Ссылка на YouTube в приведенном выше коде отлично отображается, но когда я пытаюсь заменить ссылку YouTube на адрес потока IP-камеры , ничего не появляется ... Я не могу понять, в чем проблема.
Кто-нибудь знает, в чем проблема? Нужно ли вносить изменения в другие части проекта Angular?