Блог

Главная - Вопросы по программированию - `$s` не является допустимым видео, веб-сайт с URL-адресом png

`$s` не является допустимым видео, веб-сайт с URL-адресом png

#typescript #aframe

Вопрос:

Я работаю над веб-проектом angular с aframe.

У меня есть модель данных, которая содержит прямоугольные кнопки с URL-адресами для их изображений (jpg, png, gif). Однако при попытке загрузить эти текстуры я получаю следующие предупреждения:

компоненты:текстура:предупреждение $s не является допустимым видео https://s3.eu-central-1.amazonaws.com/…-bed3-06ba2a75717c.png

(url сокращен, обратите внимание, как это png )

Кнопки также кажутся черными без текстуры.

Вот как я создаю свои кнопки:

 
buttons.forEach((b: ButtonV4) => {
    const button: Entity = document.createElement("a-plane");
    const url: string = this.envService.buildURL(b.image);
    button.setAttribute("src",url);
    button.setAttribute("position",new THREE.Vector3(b.x,b.y,b.z));
    button.setAttribute("rotation",new THREE.Vector3(0,0,b.rotation));
    button.setAttribute("width",b.width);
    button.setAttribute("height",b.height);
    button.setAttribute("material", "transparent: true;");
    sceneRoot.appendChild(button);
});

Есть ли способ это исправить?

Редактировать:

Я заметил, что он отлично воспроизводит URL-адреса видео. Т. е. предоставление файла mp4 позволяет воспроизводить видео в виде текстуры.

Комментарии:

1. Без ссылки для воспроизведения будет трудно помочь, исследовать и предложить конкретные решения. glitch.com/~рамка очень удобна. ФУ-У-У. согласно документам синтаксис встроенного URL-адреса таков material="src: url(url/to/texture.png)

Ответ №1:

Проблема в моем сервере данных. Установлен тип контента application/octet-stream , который я не могу изменить (вне моей досягаемости). aframe, похоже, автоматически интерпретирует это как файл mp4/видео.

png Однако, поскольку мои файлы заканчиваются jpg , mp4 я проверяю окончание файла и создаю URL-адрес данных с правильным типом mime.

 return this.http.get<File>(url,{responseType: "blob" as "json",headers}).pipe(
        switchMap((blob: File) => {
            return new Observable<Texture>(
                (obs: Observer<Texture>) => {
                    const fr: FileReader = new FileReader();
                    fr.onload = (e: ProgressEvent<FileReader>) => {
                        let dataUrl: string = e.target.result as string;
                        const mime: string = this.getMimeTypeFromURL(url);
                        dataUrl = dataUrl.replace("application/octet-stream",mime);
                        obs.next(new Texture(url,dataUrl));
                    };
                    fr.onloadend = () => obs.complete();
                    fr.onabort = (e: ProgressEvent<FileReader>) => obs.error(e.target.error);
                    fr.onerror = (e: ProgressEvent<FileReader>) => obs.error(e.target.error);
                    fr.readAsDataURL(blob);
                }
            );
        })
    );
 
 private getMimeTypeFromURL(url: string): string {
        if(url.endsWith("jpg")) {
            return "image/jpg";
        }
        if(url.endsWith("jpeg")) {
            return "image/jpg";
        }
        if(url.endsWith("png")) {
            return "image/png";
        }
        if(url.endsWith("gif")) {
            return "image/gif";
        }
        return "application/octet-stream";
    }
Метки: ,