Three.js: HLS в Safari / IOS теперь не работает

Это отрисовка на холсте и рендеринг с помощью средства визуализации холста, хотя и с пропуском кадров. Что-то требуется с webgl.

Это красота. Я немного изменил демонстрацию kpano с помощью проксированного потока HLS.

Сейчас он работает на Safari OSX, но не на IOS 9. Есть идеи, в чем разница? К сожалению, я не являюсь экспертом в области флагов webgl или того, что они вообще делают. На IOS9 все еще черная рамка.

http://dev.electroteque.org/threejs/webgl.html

эта последняя ссылка - черный прямоугольник / звук только в Safari 9.1.3 / mac os x 10.11.6

Что такое ЗОЖ?

@makc правда? У меня OSX 10.10 и Safari 10. Что ж, это объясняет недавнее саботажное изменение Apple. Safari 10. Так что, если мы Safari 10, у нас все в порядке.

@mrdoob HLS = Apple Streaming. т.е. для прямых трансляций, но также и для VOD. Прямая трансляция станет нормой с оборудованием Terradeck. т.е. http://dev.electroteque.org/video/360/hls/ultra_light_flight.m3u8

Есть идеи, какие могут быть различия? В первом примере я пробовал изменить кое-что. Второй пример - это необработанные функции webgl.

так texImage2D будет частично отображать HLS, но еще не на IOS, может быть, потому что это не Safari 10?

Пожалуйста, простите меня, что я сообщил о нескольких тикетах об ошибках в webkit.

Они саботировали взлом прокси-сервера CORS при обновлении iOS. Сообщается, что macOS также не устранила проблему CORS в Safari.

Теперь мне нужно понять, как обойти их саботаж. Я должен заставить это работать для дальнейшего тестирования HLS, работающего на IOS. Apple серьезно заставляет меня потушить их пожар, ха-ха.

Если бы я смог получить рендеринг в OSX, это было бы началом. Мне просто нужно выяснить, чем отличается three.js?

Я все еще пытаюсь сделать методы редукции, чтобы сравнить то, что отличается. Как только я это выясню, я могу заставить работать IOS.

Возможно, дополнительные шейдерные программы в three.js вызывают проблемы с рендерингом? Я не сталкивался с этим, но пытаюсь воспроизвести в необработанном примере webgl то, что делает three.js в этом равнопрямоугольном примере. Есть ли для этого пример кода шейдера?

Я нашел здесь несколько необработанных функций, которые, надеюсь, я смогу полностью воспроизвести то, что делает three.js. Я не могу просто скопировать программы шейдеров напрямую, потому что некоторые переменные устанавливаются извне, как положение в мире.

https://bl.ocks.org/mbostock/5446416

Возможно, я только что столкнулся с этой или, возможно, связанной с ней проблемой. У меня есть файлы h264 mp4, расположенные в ведре S3, и я загружаю их в video.src как blob.

Если я загружаю в корзину S3 с помощью веб-загрузчика Amazon, видео воспроизводятся нормально при прямой загрузке в Mobile Safari (iOS 10.0.1), но если я попытаюсь воспроизвести их с помощью программы просмотра three.js, я просто получу черный экран. Однако, если я загружаю в корзину S3 с помощью Cyberduck, они отлично воспроизводятся непосредственно в Mobile Safari и в three.js.

Похоже, Cyberduck устанавливает метаданные Content-Type = video / mp4, а загрузчик AWS - Content-Type = application / octet-stream. Когда я вручную устанавливаю эти метаданные на видео / mp4, все работает правильно.

Странная проблема, и она заставила меня сильно чесать голову. Сообщите мне, является ли это той же основной проблемой, что и этот билет, или мне следует создать новый.

Спасибо,
Дастин

Это для HLS mate, как в фрагментах mpegts или фрагментированных файлах, а не в mp4. Mp4 подходит как для Safari, так и для IOS. Я проверил mimetype в cyberduck, и он говорит, что mpegts верен.

Тот же поток работает для меня в необработанном примере webgl, но, конечно, не на IOS. Ваша проблема кажется похожей на мою, хотя как в черной рамке. Никакого рендеринга.

@danrossi хорошо, круто. Я создам новый тикет специально для своей проблемы. Спасибо.

Думаю, проблема в этом: www.krpano.com/ios/bugs/ios10-webgl-video-texture-crash/
В настоящее время я пытаюсь реализовать то же обходное решение для three.js, но не очень далеко.

@phaseOne. Это проблема сафари, как для OSX, так и для IOS. Mp4 отлично работает для IOS и OSX. С антиалиасами повозжусь.

До сих пор не могу понять, в чем разница между ними. Пример raw webgl по-прежнему не будет работать на IOS, но заставить его работать на OSX - это только начало.

Мне интересно, смогу ли я найти рабочую программу шейдера равнопрямоугольника, в которую я могу зайти.

Подробнее здесь: http://stackoverflow.com/questions/39123109/rendering-a-video-with-webgl-in-ios-10-beta-7-safari-shows-weird-purplish-co.

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

В случае использования текстуры через холст, видео отображалось в сафари.
Однако, поскольку в iOS все еще есть проблемы с CORS, он работал только в том же источнике.
https://bugs.webkit.org/show_bug.cgi?id=135379

Я не знаком с webgl, но, пожалуйста, обратитесь к следующему.
https://github.com/NishimuraT/videojs-panorama/commit/bd99200d8831c7ad0d10d742e087953da0f44169

@NishimuraT Думаю, я понимаю, что вы имеете в виду, используя canavasrender. Я пробовал это делать методом редукции.

Я думаю, что это сработало, но это вызывает серьезные потери кадров и проблемы с производительностью воспроизведения из-за процессора. На IOS явно хуже. Ipad 3 уже сбрасывает рамки для webgl.

@danrossi У меня было небольшое недоразумение. Мне жаль. Я отправил ошибочную вещь.

Я подтвердил ту же проблему с проектом Elevr, который использует необработанный webgl и шейдеры. Придется взломать тот, чтобы вернуться назад. Что-то внутри вызывает проблемы с рендерингом и так же повлияет на three.js.

Я подтвердил в лифте, что это автоматическая очистка привязки текстуры, которая вызывает ее поломку, т.е.

webGL.gl.bindTexture(webGL.gl.TEXTURE_2D, null);

Если это закомментировано, значит, он работает.

Это тоже вызывало проблему, я не уверен, для чего это нужно.

webGL.gl.pixelStorei(webGL.gl.UNPACK_FLIP_Y_WEBGL, true);

Может быть, есть свойство автоматической очистки, которое делает то же самое в three.js?

Я вижу много ссылок на

state.bindTexture(_gl.TEXTURE_2D, null);

Но не знаю, где это могло быть. Это нужно делать?

код слишком сумасшедший, чтобы отследить причину проблемы с отрисовкой текстуры. Вроде что-то есть с этой привязкой текстуры.

@danrossi есть ли какая-нибудь страница, которая правильно его отображает?

Извините за шум, приятель. Я сделал больше тестов AB. Это действительно похоже на то, что я упомянул, так как мне пришлось прокомментировать это и для демо-версии Elevr.

_gl.pixelStorei (_gl.UNPACK_FLIP_Y_WEBGL, texture.flipY);
https://github.com/mrdoob/three.js/blob/6c7f000734f8579da37fb39e5c2e9e5e2dfb14f8/src/renderers/webgl/WebGLTextures.js#L411

Это вызывает проблему. Однако без него текстура оказывается перевернутой. Я добавлю еще один тест, чтобы показать, что теперь он работает.

http://dev.electroteque.org/threejs/hlsbroken.html
http://dev.electroteque.org/threejs/hls.html

Еще один необработанный пример, который я нашел, закомментировал FLIP_Y. Возможная ошибка Webkit сейчас?

http://dev.electroteque.org/threejs/webgl3.html

Единственная ссылка на flipY - это, но webkit nightly все еще проблема

https://bugs.webkit.org/show_bug.cgi?id=162491

Если я отключу flipY, который, как я предполагаю, нарушает аппаратное ускорение, он работает?

texture = new THREE.VideoTexture( video );
                texture.minFilter = THREE.LinearFilter;
                texture.format = THREE.RGBFormat;
                texture.magFilter = THREE.LinearFilter;
                texture.flipY = false;

http://dev.electroteque.org/threejs/hlsflipy.html

Пытаюсь проверить, не является ли это ошибкой webkit. Как можно пока вращать текстуру, чтобы ее обойти?

Как можно пока вращать текстуру, чтобы ее обойти?

почему бы просто не перевернуть геометрию uv или сделать это в шейдере

@makc Я понятия не имею, как это сделать.

Делать головы дальше. Это «исправление» FlipY не помогает на iOS 9, просто протестировало его.

Проблема в другом. Чтобы разыскать этого, потребовались дни.

Возможно, это проблема всего webkit, а не Three.JS, судя по всему. Как обычно, очень сожалею об этом.

Я тоже отправил туда отчет https://bugs.webkit.org/show_bug.cgi?id=163866

Я понятия не имею, как это сделать.

http://jsfiddle.net/hfj7gm6t/2182/

@makc, подтверждающий переворачивание

uv.setY (i, 1 - uv.getY (i));

http://dev.electroteque.org/threejs/hls.html

Однако проблема все еще очевидна на IOS.

@makc. Вполне возможно, что эта шейдерная программа делает переворот, это было в одном из демонстрационных источников.

attribute vec2 vx;varying vec2 tx;void main(){gl_Position=vec4(vx.x*2.0-1.0,1.0-vx.y*2.0,0,1);tx=vx;}

Он обнаружен в исходной демонстрации, которая, казалось, работала, потому что она не использует флаг FlipY, похоже, делает это в программе шейдера.

http://dev.electroteque.org/threejs/webglnoflip.html

Не знаете, как это интегрировать в three.js? Не лучше ли использовать шейдерную программу?

Я все еще отлаживаю IOS.

Это интересно. Пытаясь воспроизвести этот расчет в этом примере, он, кажется, переворачивает его, но все еще плохо масштабирует его.

http://dev.electroteque.org/threejs/webglflipped.html

Итак, gl_Position контролирует его положение.

 gl_Position = vec4(aVertexPosition.x*2.0-1.0,1.0-aVertexPosition.y*2.0,0,1);

Не лучше ли использовать шейдерную программу?

Программа шейдера выполняется один раз в каждом кадре, а не только один раз перед тем, как все начнется, когда в геометрии будет переворачиваться UV-развертка.

@makc, вероятно, лучше всего просто установить значения в начале. Если я прав, эти УФ-значения являются переменными в программе шейдера и используются в расчетах?

Я вижу в источниках несколько ссылок на gl_Position. Не уверен, что это правильный, но есть такой

gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );

Спасибо.

Я перепробовал всевозможные трюки с webgl в IOS Safari, чтобы посмотреть, смогу ли я получить кадр для рендеринга, а пока он просто черный. Mp4 в порядке.

Ресурсов по этому поводу не так много. Я верю, что люди тоже ищут моего открытия. Кстати, это для прямой трансляции, но также и для VOD.

Я попросил кого-нибудь проверить некоторые вещи. Они считают, что этот необработанный пример webgl с исправлением FLIPY работает на IOS 10, но версия three.js на самом деле не дает сбоев.

Я заметил, что он использовал фильтр NEAREST, который делает текстуру блочной, я попытался воспроизвести эту, но ту же проблему для них.

так что ни одна из этих работ

http://dev.electroteque.org/threejs/hls.html
http://dev.electroteque.org/threejs/hls2.html

Но это для них, хотя IOS 9 для меня не

http://dev.electroteque.org/threejs/webglworking.html

После очень тяжелого и болезненного тестирования я оштрафовал, настроил демки и проблему.

Обход FlipY требуется для HLS как в OSX 10.11, так и в macOS, IOS 9 и 10. В исходном примере webgl не используется FlipY, потому что он выполняется в программе шейдера. С three.js геометрию нужно перевернуть.

Рендеринг HLS в IOS 10 отображается, но имеет серьезные проблемы с цветовыми артефактами. Фреймы перестают работать, но я считаю, что это проблема с эмулятором и падением фреймов. У меня сейчас нет устройства, которое можно обновить до IOS 10. Оно вообще не отображается на iOS 9. Оба требуют прокси CORS для mp4 и HLS.

Возможно, мне придется предоставить еще один билет в отношении проблемы цветопередачи с HLS на IOS 10, как только я подтверждаю, что это не эмулятор.

Это абсолютно болезненно, поэтому неудивительно, что никто не хочет поддерживать Safari, но людям нужно, чтобы он работал.

Мне пришлось указать здесь разные настройки формата rgb. По умолчанию отображаются вертикальные полосы коиурбара, по умолчанию - неправильные цвета. Но в эмуляторе. Сейчас я не могу правильно протестировать IOS 10, потому что мое устройство Ipad перестало поддерживаться. Я попробую достать Iphone с iOS 10, чтобы подтвердить.

http://dev.electroteque.org/webgl/threejs-hls.html
http://dev.electroteque.org/webgl/threejsrgba-hls.html

http://dev.electroteque.org/webgl/webgl.html
http://dev.electroteque.org/webgl/webglrgba.html

Пожалуйста, сконцентрируйтесь на этих двух примерах. флаги RGB не имеют значения на реальном устройстве, симулятор выдает неправильный вывод, но аналогичный вывод при использовании формата RGBA.

Работа с FlipY требуется для iOS 9/10 / OSX Safari с HLS.

Мне удалось воспроизвести проблему с цветом с помощью рендеринга HLS webGL, которому теперь нужен второй билет, хотя я не уверен, является ли ошибка flakey в Webkit проблемой three.js.

Так много серьезных недостатков и ошибок, из-за которых это стало препятствием для шоу.

Таким образом, такой вывод HLS webgl только частично работает на IOS 10, а не на iOS 9. Многие устройства теперь застревают на 9. Мне нужно найти обходной путь для 9.

http://dev.electroteque.org/webgl/threejs-hls.html
http://dev.electroteque.org/webgl/webgl.html

Привет! У меня точно такая же проблема. У тебя есть какое-нибудь решение?

да, это есть в этих демонстрациях, но проверьте второй билет, касающийся проблемы с цветовым пространством в IOS 10. Похоже, от имени Webkit / Apple не будет никаких усилий, чтобы когда-либо заставить его работать на IOS 9, что означает, что старые устройства, такие как Ipad 3, не используются, хотя в любом случае он едва мог отображать 5 кадров в секунду. Сначала нужно сконцентрироваться на том, чтобы IOS 10 заработала.

Это способ решения этой проблемы, о котором было сообщено в Webkit. Это проблема всех Safari.

http://dev.electroteque.org/webgl/webgl.html похоже не работает. Тестировал страницу на ios10. Но сафари вылетает при загрузке страницы.

Воспользуйтесь примером threejs.

Я протестировал все примеры, перечисленные по этой проблеме. Кажется, работает только http://dev.electroteque.org/webgl/webglrgba.html . Но у него есть проблема с цветовым пространством.

@wuyingfengsui, это работает на IOS 10 Iphone.

http://dev.electroteque.org/webgl/threejs-hls.html

Я уверен, что вы, наверное, проверяете симулятор. Это серьезная проблема. Он не только не обновляет рамку, но и отображает зеленые цветовые полосы. Однако при использовании флага RGBA он будет работать на симуляторе. Там происходит странная проблема с графикой.

На реальном IDevice вы увидите проблему с цветовым пространством при использовании флага RGB, как вы это делаете с флагом RGBA в симуляторе!

Я вынужден правильно тестировать IOS 10, потому что Ipad 3 устарел, но, к счастью, у меня был доступ к Iphone.

Также обратите внимание на URL-адрес прокси-сервера CORS.

Обратитесь к этому относительно проблемы цветового пространства сейчас

https://github.com/mrdoob/three.js/issues/10067

и этот билет webkit, который, я сомневаюсь, они когда-либо потрудятся исправить и получить выпуск.

https://bugs.webkit.org/show_bug.cgi?id=164540

Я считаю, что это работает, когда я меняю RGB на RGBA на ios 10 iphone 7.

хорошо, так что он разный для разных устройств, приятный. Я обновил его до RGBA. Как это ?

http://dev.electroteque.org/webgl/threejs-hls.html

@danrossi Это работает.

@wuyingfengsui В связи с этим мне придется обновить билет webkit. Я вижу, что есть другие цветные флажки, с которыми можно возиться, и, надеюсь, один из них правильный. Я пробовал разные потоки HLS, и они были одинаковыми.

Вы можете видеть, что в константах three.js есть диапазон значений, с которыми можно поиграть. т.е. эти. Также обрабатываются флаги байтового типа. Методом проб и ошибок и очень утомительным методом проб и ошибок.

https://github.com/mrdoob/three.js/blob/dev/src/constants.js#L126

Так что, к сожалению, iOS 9 была полностью лишена возможности работать, и это не сработает. Старые устройства никогда не получат IOS 10.

Я считаю, что происходит какой-то саботаж, и я полагаю, что он работал до выпуска Safari 10? мой этап тестирования занял месяцы из-за всех несоответствий с Apple, а иногда и с Android. Я почти уверен, что когда я тестировал HLS, он работал.

Я не знаком с webGL. Я думаю, что это не может быть решено, пока webkit не исправит это.

Это то, что загружает текстуру в webgl. те флаги там представляют интерес.

gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, video);

@wuyingfengsui, если им потребовалось более 5 лет, чтобы частично «исправить» проблему CORS в macOS, не задерживайте дыхание.

Вот почему кто-то должен сидеть и придумывать способы работы, и, к сожалению, это я, ха-ха.

Если вы возьмете необработанный пример webgl, эти флаги можно испортить. Или сделайте это через three.js, используя константы и свойства «формат» и «тип», тип - это байтовый тип, формат - это цветовой формат, который, как вы видели, требуется только для того, чтобы заставить его функционировать RGBA.

Завтра я потрачу немного времени, чтобы просмотреть каждый флаг, и, надеюсь, одна комбинация сработает.

@danrossi Как дела?

Я просто пробовал возиться со всеми возможными флагами и ничего. Он может принимать только флаги RGB и RGBA, а тип байта беззнаковый. Остальные варианты просто показали черный холст. Не знаете, что еще делать?

@danrossi Спасибо за вашу работу. Я обнаружил, что Hls.js воспроизводит видео

@wuyingfengsui, теперь это собственная проблема HLS с IOS, мои исправления выше работают вокруг ошибки для Safari OSX.

с потоковой передачей Dash в более старом Safari были проблемы с CORS даже при работе с прокси. Может, в macOS это тоже поправили?

Возможно, нет ничего, что можно было бы сделать, кроме как предоставить метод обхода в three.js, используя исправления кода выше.

Я сомневаюсь, что WebKit и Apple когда-нибудь это исправят. Итак, все взгляды на этот билет сейчас. материал с флагом RGB теперь связан с рендерингом в iOS 10. IOS 9 и более старые устройства, застрявшие на нем, забиты.

https://github.com/mrdoob/three.js/issues/10067

Есть обновления здесь? У кого-нибудь на iOS работает с фиксированной цветопередачей?

Пожалуйста, обратитесь к этому билету.

https://github.com/mrdoob/three.js/issues/10067

Я сомневаюсь, что работа с HLS войдет в three.js и должна выйти за его пределы.

Код для этой работы выглядит следующим образом

texture = new THREE.VideoTexture( video );
texture.minFilter = THREE.LinearFilter;
texture.format = THREE.RGBAFormat;
texture.magFilter = THREE.LinearFilter;
texture.generateMipmaps = false;
texture.flipY = false;

var geometry = new THREE.SphereBufferGeometry( 500, 64, 44 );
geometry.scale( - 1, 1, 1 );

var uv = geometry.getAttribute('uv');
for (var i = 0; i < uv.count; i++) {
     uv.setY (i, 1 - uv.getY (i));
}

Если вы хотите повозиться с флагами webgl, используйте пример raw webgl. Перепробовал все возможные варианты и ничего прямо сейчас. Это действительно саботаж и никакой реакции от webkit.

http://dev.electroteque.org/webgl/webgl.html

Спасибо. Существуют ли какие-либо другие форматы видео для потоковой передачи во флаг видео iOS, кроме HLS? Можно ли транслировать H.264 без проблем с рендерингом?

@pedrofranceschi mp4 в порядке. Это просто HLS, который предлагает опции для прямой трансляции 360-градусного видео на IOS.

Исправление flipY, связанное с этим билетом, необходимо применять только к потокам HLS и в Safari. Это исправление FlipY не работает на IOS 9, которое отключает старые устройства, которые не могут получить IOS 10.

Мой Ipad 3, который я использовал для тестирования, никогда не заставит работать HLS и WebGl. Пришлось тестировать на более новом Iphone. Симулятор iOS 10 почти не работал, и у него были проблемы с цветовыми артефактами, аналогичные другой проблеме.

По крайней мере, встроенные флаги для Iphone на IOS 10 работали, встроенное видео и webgl теперь возможно, но CORS все еще остается проблемой. CORS исправлен только в Safari на macOS.

Я говорю о Safari только потому, что это еще одна классическая ошибка webkit и потоковая передача HLS.JS в других браузерах - это нормально.

Я обнаружил, что это можно исправить, добавив дополнительный холст. Но это работает только на iOS 10. Посмотрите на этот коммит: https://github.com/yanwsh/videojs-panorama/commit/0122b1bbd31093b77ca7f09900afa74e2c537037

Это не было событием. Он использует рендеринг холста с помощью drawImage. Не WebGL. То же самое, что использовать средство визуализации холста three.js. Рендерер Canvas действительно отстой на IOS, вызывает выпадение кадров, которые нельзя использовать. Это твое исправление?

Качество не очень хорошее. Но работает :)

Падение кадров - это больше, чем проблема качества :)

@mrdoob Я пробовал использовать средство визуализации холста в качестве

При этом он по-прежнему отбрасывает кадры.

http://dev.electroteque.org/webgl/canvas-hls.html

@danrossi

@mrdoob Эта проблема касается HLS в Safari. Очень сложно делать все эти демо. Но я составил несколько комбинаций.

Я также только что выяснил, что Chrome отказывается воспроизводить mp4 сейчас, если он не использует версию прокси-сервера Safari CORS для mp4 ах.

Что касается причудливой проблемы CanvasRenderer, которая может временно решить проблему HLS для IOS 10. Вот комбинации, чтобы показать, что он делает, и возможные странные смещения значений вращения. Код у всех одинаковый. Поверх текстуры есть сетка.

Для Safari

http://dev.electroteque.org/webgl/webgl-mp4.html
http://dev.electroteque.org/webgl/canvas-hls.html

Для Chrome

http://dev.electroteque.org/webgl/webgl-webm.html
http://dev.electroteque.org/webgl/canvas-webm.html

@danrossi Версия Safari также не работает на iOS 10…

Это должно работать на IOS 10, но вы должны увидеть цветовые артефакты.

http://dev.electroteque.org/webgl/threejs-hls.html

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

Это должно работать на любой iOS, но меня это не слишком беспокоит.

http://dev.electroteque.org/webgl/webgl-mp4.html

Я не верю, что решение CanvasRender будет хорошим решением для IOS, но это вариант. Поскольку ему не только по-прежнему нужен прокси-сервер CORS, рисование холста приведет только к пропаданию кадров. Safari OSX может использовать обходной путь FlipY в threejs-hls.html

Я обновил демонстрации холста, похоже, он не нуждается в внешнем рисовании.

однако есть странная проблема с геометрией сферы, которую я не могу понять, поэтому изображение не отображается или вращается правильно, оно все перекосилось в точку.

Щелкните верхнюю левую область и попробуйте перетащить с помощью элементов управления орбитой.

Проблема с сеткой в ​​том, что мне нужно добавить «overdraw: 0.5» к MeshBasicMaterial, чтобы он не отображал сетку.

При использовании CanvasRenderer прокси-серверы CORS в safari также не требуются. Затем я попытаюсь взглянуть на SoftwareRenderer, чтобы узнать, будет ли это работать лучше, поскольку CanvasRenderer отбрасывает слишком много кадров.

http://dev.electroteque.org/webgl/canvas-mp4.html
http://dev.electroteque.org/webgl/canvas-hls.html

Учитывая, что CanvasRenderer был помечен как устаревший из-за очевидного пропадания кадров. Я полагаю, что единственное последнее средство - попробовать видеотекстуры с помощью SoftwareRenderer. Это изменение, похоже, еще не работает, и мы не можем найти пример настройки. Это просто черный холст.

Есть ли обходные пути для цветового сбоя? Все синее

@andreabadesso У меня есть два билета, может, стоит их объединить.

Для OSX работа с FlipY решит эту неприятную проблему. Для iOS 10 требуется совсем другое.

Рисование холста - это серьезный сбой, он даже не отрисовывается должным образом из коробки, кажется, искажается геометрия. Он также сбрасывает кадры.

Сейчас я пытаюсь удачи с "SoftwareRenderer", который все еще полагается на рисование холста. Все, что у меня сейчас, - это черный холст, так что ничего. Нет никакой документации, как заставить работать с ним видеотекстуры.

Другого варианта просто нет, webkit не отвечает, и я перепробовал все возможные флаги webgl. Я мог бы вернуться и попробовать поработать с кодировками, но HLS упакован из рабочего файла mp4.

Между тем, если кому-то понадобится отчаянное решение, он будет следить за файлами .ts, конвертировать их в .mp4 и генерировать веб-сокет, чтобы клиент мог загрузить следующий фрагмент в mp4 (который работает на ios10):

https://github.com/Lab21k/node-hls-mp4-ws/

Я могу предоставить полное решение, если кому-то интересно.

@andreabadesso Есть ли у вас клиентская реализация вашего решения?

Это очень хитроумно. Вам не только по-прежнему нужен прокси-сервер CORS, он пытается пройти через FFMPEG в реальном времени: O Есть ли в IOS даже веб-сокеты? Я знаю, что это не может сделать webrtc.

Попытка получить видеотекстуру с помощью рисования холста с помощью опции SoftwareRenderer также является плохой. Это просто черная рамка. Оба варианта зашли в тупик. Я надеялся, что хотя бы SoftwareRenderer работает с видеотекстурами, отображаемыми только текстурой изображения.

Привет всем, я работал над проблемой цвета в течение последнего дня и нашел обходной путь, который работает для моего варианта использования. Эта ветка была очень полезной, и я хотел бы внести свой вклад.
Проблема только в том, что красный и синий цвета меняются местами. Поэтому я использовал ffmpeg для предварительного переключения этих цветов. Когда цвета снова переключаются на threejs, видео возвращается к своему нормальному виду.
Это не оптимальное решение, но оно работает. (проверено на iOS 10.2)

@Yralec

Я подумал, что это проблема с кодировкой или возня с кодировкой.

Однако это не поможет сказать о потоковой передаче wowza в прямом эфире. Скорее всего, никто не будет контролировать работу кодеров в реальном времени. Возможно, для VOD.

У вас есть флаг ffmpeg для подтверждения?

Все еще потрясающе. Похоже, это не проблема с three.js, за исключением проблемы с FlipY, которая все еще необходима.

Я просто не могу понять, почему Webkit такой.

@danrossi

Вот команда, которую я использовал:
ffmpeg -i in.mp4 -hls_time 10 -hls_list_size 0 -vf "colorchannelmixer = rr = 0.0: rb = 1.0: bb = 0.0: br = 1.0, vflip" -pix_fmt yuv420p out.m3u8
Как видите, я также переворачиваю вывод, поэтому мне не нужно делать это самому в threejs.

хорошо, я собирался спросить об этом.

Не было бы проще написать шейдер, меняющий местами синий и зеленый?

@mrdoob У меня очень мало знаний о шейдерах, поэтому для меня это не так (я даже не думал об этом), но если вы знаете, как написать тот, который меняет местами красный и синий, это почти наверняка лучшее решение.
Также, возможно, наконец-то заработает прямая трансляция.

@mrdoob Я думаю, ты что-то

Я провел небольшое исследование и, похоже, есть подобная перестановка порядка каналов, я теперь не эксперт в области шейдеров.

gl_FragColor = texture2D(u_image, v_texCoord).bgra;

@mredoob в моем необработанном примере webgl Я пробовал что-то подобное, но программа не работает и вызывает ошибки. Именно здесь он получает цвета из текстуры, которая, очевидно, является очень фальшивой, и "bgra" меняет местами красный и синий каналы.

Пока не знаю, как получить из этого рабочее решение.

 gl.shaderSource(ps, "precision mediump float;uniform sampler2D sm;varying vec2 tx;void main(){gl_FragColor=texture2D(sm,txt).bgra;}");

Произошла программная ошибка при простом копировании и вставке.

Используя этот код выше. Я могу подтвердить, что визуализируется то, что отображается в IOS 10, поэтому следует надеяться, что он должен инвертировать красный цвет и цвета размытия, которые меняются местами в шейдере?

http://dev.electroteque.org/webgl/webglbgra.html

@Yralec, подтверждающий инвертирование порядка цветовых каналов в шейдере, снова инвертируется в IOS10. В симуляторе мне пришлось изменить формат цвета на rgba, чтобы он рендерил без странных линий.

gl.texImage2D (gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, видео);

@mrdoob, как можно применить это изменение цвета текстуры во встроенных шейдерных программах?

gl_FragColor=texture2D(sm,txt).bgra;

@mrdoob. Исправление. Это может быть тот, который люди будут использовать.

gl_FragColor = texture2D( tEquirect, sampleUV )

var equirect_frag = "uniform sampler2D tEquirect;\nuniform float tFlip;\nvarying vec3 vWorldPosition;\n#include <common>\nvoid main() {\n\tvec3 direction = normalize( vWorldPosition );\n\tvec2 sampleUV;\n\tsampleUV.y = saturate( tFlip * direction.y * -0.5 + 0.5 );\n\tsampleUV.x = atan( direction.z, direction.x ) * RECIPROCAL_PI2 + 0.5;\n\tgl_FragColor = texture2D( tEquirect, sampleUV );\n}\n";

Как получить к нему доступ, чтобы его изменить?

@danrossi Вы можете взломать что-то подобное в JS

THREE.ShaderLib[ 'equirect' ].fragmentShader = THREE.ShaderLib[ 'equirect' ].fragmentShader.replace( "texture2D( tEquirect, sampleUV );", "texture2D( tEquirect, sampleUV ).bgra;" );

Я считаю, что мне нужно скопировать шейдеры в THREE.ShaderMaterial, но не знаю, как применить текстуру?

var equirect_frag = "uniform sampler2D tEquirect;\nuniform float tFlip;\nvarying vec3 vWorldPosition;\n#include <common>\nvoid main() {\n\tvec3 direction = normalize( vWorldPosition );\n\tvec2 sampleUV;\n\tsampleUV.y = saturate( tFlip * direction.y * -0.5 + 0.5 );\n\tsampleUV.x = atan( direction.z, direction.x ) * RECIPROCAL_PI2 + 0.5;\n\tgl_FragColor = texture2D( tEquirect, sampleUV );\n}\n";

                var equirect_vert = "varying vec3 vWorldPosition;\n#include <common>\nvoid main() {\n\tvWorldPosition = transformDirection( position, modelMatrix );\n\t#include <begin_vertex>\n\t#include <project_vertex>\n}\n";


                var uniforms =  {
                    tEquirect: { value: null },
                    tFlip: { value: - 1 }
                };

                var material = new THREE.ShaderMaterial( {
                    uniforms: uniforms,
                    vertexShader: equirect_vert,
                    fragmentShader: equirect_frag
                });

Другой способ негибкий, поскольку его нужно применять только для потоков HLS в IOS.

на самом деле это отображается в сафари, но исправление FlipY ломается. Играет вверх ногами. уму непостижимо. Все эти усилия из-за Apple и Webkit, ха-ха.

var uniforms =  {
                    tEquirect: { value: texture },
                    tFlip: { value: - 1 }
                };

                var material = new THREE.ShaderMaterial( {
                    uniforms: uniforms,
                    vertexShader: equirect_vert,
                    fragmentShader: equirect_frag
                });

@WestLangley патч не работает. Я должен видеть перевернутые цвета, но этого не происходит.

gl_FragColor = texture2D (sm, txt) .bgra;

это правильный шейдер, чтобы поменять местами [b] lue и [r] ed: по умолчанию порядок - rgba, поэтому bgra меняет их местами.

FlipY исправить ломается

txt -> vec2 (txt.x, 1.0 - txt.y) например

не знаю как

http://jsfiddle.net/p2duvg51/14/

патч не работает. Я должен видеть перевернутые цвета, но этого не происходит.

возможно, вы применяете патч слишком поздно

@makc да, в моем примере с необработанным webgl он выполняет флип в шейдере.

Я считаю, что если флип выполняется по UV-коду, который опубликован в моем примере с threejs, он не переворачивается кадр за кадром в шейдере. Я подумал, что уберут ненужное для обработки.

в необработанном примере webgl он перевернут на вершинном шейдере

attribute vec2 vx;varying vec2 tx;void main(){gl_Position=vec4(vx.x*2.0-1.0,1.0-vx.y*2.0,0,1);tx=vx;}

затем во фрагментном шейдере это инвертирует цветовые каналы.

precision mediump float;uniform sampler2D sm;varying vec2 tx;void main(){gl_FragColor=texture2D(sm,tx).bgra;}

теперь проблема заключается в том, чтобы воспроизвести это в three.js.

Извините, похоже, это работает, но исправление FlipY не работает. Забыл добавить бгра.

var equirect_frag = "uniform sampler2D tEquirect;\nuniform float tFlip;\nvarying vec3 vWorldPosition;\n#include <common>\nvoid main() {\n\tvec3 direction = normalize( vWorldPosition );\n\tvec2 sampleUV;\n\tsampleUV.y = saturate( tFlip * direction.y * -0.5 + 0.5 );\n\tsampleUV.x = atan( direction.z, direction.x ) * RECIPROCAL_PI2 + 0.5;\n\tgl_FragColor = texture2D( tEquirect, sampleUV ).bgra;\n}\n";

                var equirect_vert = "varying vec3 vWorldPosition;\n#include <common>\nvoid main() {\n\tvWorldPosition = transformDirection( position, modelMatrix );\n\t#include <begin_vertex>\n\t#include <project_vertex>\n}\n";




                var uniforms =  {
                    tEquirect: { value: texture },
                    tFlip: { value: 1 }
                };

                var material = new THREE.ShaderMaterial( {
                    uniforms: uniforms,
                    vertexShader: equirect_vert,
                    fragmentShader: equirect_frag
                });

Если я изменю значение tFlip по умолчанию на 1, оно будет отображаться правильно, так что еще один вариант исправления проблемы FlipY с HLS?

tFlip: { value: 1 }

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

Кажется, я могу перевернуть это значение, задав ему только положительную единицу, а не отрицательную.

Я потерял доступ к IOS10 после того, как они устарели от старых устройств, получив его, как мой Ipad 3. Мне нужно загрузить симулятор на macOS, загруженной на внешний диск, потому что у меня есть программное обеспечение, которое работает только в 10.10. Веселые времена со всем этим саботажем.

Я понятия не имею, обновляет ли он фрейм и правильно ли вращается.

Надеюсь, этот пример работает на iOS 10. Это лучшее, что я могу сделать прямо сейчас. В Safari он должен отображать инвертированные цвета.

http://dev.electroteque.org/webgl/threejs-hls.html

Использование шейдерного материала ухудшает масштабирование изображения, геометрию и останавливает вращение камеры.

camera.position.x = (Math.PI / 2);

Придется попытаться заставить этот патч работать.

Похоже, это сработало, хотя положение камеры все еще портится. Я не думаю, что это жизнеспособный вариант. Поступая таким образом, он порождает еще больше ошибок. Не отображается так же, как при использовании MeshBasicMaterial.

THREE.ShaderLib[ 'equirect' ].fragmentShader = THREE.ShaderLib[ 'equirect' ].fragmentShader.replace( "texture2D( tEquirect, sampleUV );", "texture2D( tEquirect, sampleUV ).bgra;" );
                THREE.ShaderLib[ 'equirect'].uniforms.tEquirect = { value: texture };
                THREE.ShaderLib[ 'equirect'].uniforms.tFlip = { value: 1 };

                var material2 = new THREE.ShaderMaterial( {
                    uniforms: THREE.ShaderLib[ 'equirect'].uniforms,
                    vertexShader: THREE.ShaderLib[ 'equirect'].vertexShader,
                    fragmentShader: THREE.ShaderLib[ 'equirect' ].fragmentShader
                });

Если я попробую использовать основной материал, ничего не получится. т.е.

THREE.ShaderLib[ 'equirect' ].fragmentShader = THREE.ShaderLib[ 'equirect' ].fragmentShader.replace( "texture2D( tEquirect, sampleUV );", "texture2D( tEquirect, sampleUV ).bgra;" );
                var material  = new THREE.MeshBasicMaterial( { map : texture } );

Вместо того, чтобы пытаться взломать встроенный шейдер, я бы просто создал собственный шейдер.

Ну вот! 😀

const WIDTH = window.innerWidth;
const HEIGHT = window.innerHeight;

var camera = new THREE.PerspectiveCamera( 75, WIDTH / HEIGHT );

var scene = new THREE.Scene();

// geometry

var geometry = new THREE.SphereGeometry( 1, 32, 16 );

// material

var loader = new THREE.TextureLoader();
var texture = loader.load( 'https://threejs.org/examples/textures/2294472375_24a3b8ef46_o.jpg');

// material

var material = new THREE.ShaderMaterial( {
    uniforms: {
        texture: new THREE.Uniform( texture )
    },
    vertexShader: [
        "varying vec2 vUV;",
        "void main() {",
        "   vUV = vec2( 1.0 - uv.x, uv.y );", // fipY: 1.0 - uv.y
        "   gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );",
        "}"
    ].join( "\n" ),
    fragmentShader: [
        "uniform sampler2D texture;",
        "varying vec2 vUV;",
        "void main() {",
        "   gl_FragColor = texture2D( texture, vUV ).bgra;",
        "}"
    ].join( "\n" ),
    side: THREE.BackSide
} );

var mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );

var renderer = new THREE.WebGLRenderer();
renderer.setSize( WIDTH, HEIGHT );
document.body.appendChild( renderer.domElement );

function animate( time ) {
    requestAnimationFrame( animate );
    mesh.rotation.y = time * 0.0001;
    renderer.render( scene, camera );
}

animate();

https://jsfiddle.net/9jy92zxn/

Не отображает только черный экран.

@danrossi У меня работает.

var material = new THREE.ShaderMaterial({
      uniforms: {
        texture: { value: texture }
      },
      vertexShader: [
        "varying vec2 vUV;",
        "void main() {",
        "   vUV = vec2( uv.x, 1.0 - uv.y );",
        "   gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );",
        "}"
      ].join("\n"),
      fragmentShader: [
        "uniform sampler2D texture;",
        "varying vec2 vUV;",
        "void main() {",
        " gl_FragColor = texture2D( texture, vUV  ).bgra;",
        "}"
      ].join("\n")
    });

Не забудьте обновить тип цвета и имена переменных

Он отображается здесь ... (Chrome 55, OSX)

Эта проблема касается текстур видео с потоками HLS и Safari, особенно IOS, боюсь: |

Я не вижу, как работает meshbasic_frag и как к нему применяется текстура. Вот что он использует.

Я не вижу, чтобы программа equirect_frag использовалась или была выбрана.

gl_FragColor = vec4( outgoingLight, diffuseColor.a );

Это все, что я вижу.

Думаю, вам стоит забыть о meshbasic_frag и equirect_frag . Попробуйте использовать мой код как основу и замените его:

var loader = new THREE.TextureLoader();
var texture = loader.load( 'https://threejs.org/examples/textures/2294472375_24a3b8ef46_o.jpg');

Примерно так:

var video = document.getElementById( 'video' );
var texture = new THREE.VideoTexture( video );

@mrdoob

обратная сторона была причиной проблемы. Эта шейдерная программа, безусловно, намного чище, чем обычная. В чем разница ?

Используя собственный шейдер, я теряю исходное исправление FlipY.

for (var i = 0; i < uv.count; i++) {
    uv.setY (i, 1 - uv.getY (i));
}

Мне пришлось немного изменить код вершины, x был перевернут, а y нужно было инвертировать. Я расскажу об этом через секунду.

var uniforms = {
    texture: { value: texture }
};

var vertexShader = [
    "varying vec2 vUV;",
    "void main() {",
    "   vUV = vec2( uv.x, 1.0 - uv.y );", // fipY: 1.0 - uv.y
    "   gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );",
    "}"
].join( "\n" );

var fragmentShader = [
    "uniform sampler2D texture;",
    "varying vec2 vUV;",
    "void main() {",
    "   gl_FragColor = texture2D( texture, vUV ).bgra;",
    "}"
].join( "\n" );

var material = new THREE.ShaderMaterial( {
    uniforms: uniforms,
    vertexShader: vertexShader,
    fragmentShader: fragmentShader,
    //side: THREE.BackSide
});

Эта шейдерная программа, безусловно, намного чище, чем обычная. В чем разница ?

Магия! 😉

@mrdoob, спасибо, чемпион. извините за шум, но снова вините в этом Apple.

Итак, для видео с равнопрямоугольником, возможно, не следует обновить демонстрацию, чтобы использовать это? Значит, программа шейдера, используемая MeshBasicMaterial, не нужна для таких видеотекстур? Я протестирую его в браузерах и в разных видеоформатах.

Мы закроем?

Вот обновленная демонстрация

http://dev.electroteque.org/webgl/threejs-bgra.html

Итак, для видео с равнопрямоугольником, возможно, не следует обновить демонстрацию, чтобы использовать это? Значит, программа шейдера, используемая MeshBasicMaterial, не нужна для таких видеотекстур?

Что ж, MeshBasicMaterial более гибкий, и людям не нужно писать шейдеры. Просто для этого конкретного случая было проще написать собственный шейдер, чтобы обойти проблему.

Мы закроем?

Ага!

Он отлично работает на IOS 10. Только то, что фреймы не обновляются в симуляторе. Придется ждать железа. я закрою другой билет.

var vertexShader = [
    "varying vec2 vUV;",
    "void main() {",
    "   vUV = vec2( uv.x, uv.y );", // fipY: 1.0 - uv.y
    "   gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );",
    "}"
].join( "\n" );

var fragmentShader = [
    "uniform sampler2D texture;",
    "varying vec2 vUV;",
    "void main() {",
    "   gl_FragColor = texture2D( texture, vUV );",
    "}"
].join( "\n" );

С небольшими изменениями в flipy эта же программа работает на Chrome с webm.

@mrdoob Я считаю, что этот шейдер работает во всех браузерах с видеотекстурами. Исправление переворота "1.0 - uv.y" требуется только для HLS в Safari. Инверсия цветового канала требуется только для IOS10 с HLS.

Довольно сумасшедшие уровни работы, включая прокси-сервер CORS.

Я считаю, что это работает лучше, чем шейдер, предоставляемый meshbasicmaterial. Должен ли тогда это быть стандартом для видеотекстур? вращение похоже работает с кодом вершины.

всем привет
Я пытаюсь сделать проигрыватель 360vr с three.js, который показывает прямую трансляцию HLS (.m3u8 воспроизводится с hls.js)
Он работает в Safari osx с включенным webgl, но на ipad 10.2 все мои попытки теряются на черном холсте (звук работает)
Если я отключу режим vr360, видеопоток будет нормально работать на всех устройствах.
Я попробовал некоторые из предложенных методов, но у меня все еще остается рендеринг черного холста.
Кто-нибудь знает, как обойтись?

Исправления FlipY и инверсии цветовых каналов находятся в этой теме.

Ошибки Webkit, которые я отследил, устарели и в конечном итоге преодолели некоторую надменность. Он все еще открыт, но никто не будет на них смотреть.

Вам понадобится исправление FlipY для Safari. Так что отключите его еще на текстуре three.js.

Вот формальные методы es6, которые я разработал для своего плеера. Мне все еще снятся кошмары спустя месяцы после охоты на это дерьмо, ха-ха.

Спасибо mrdoob, чемпиону за решение шейдерного материала. Сейчас я использую это для всех браузеров. Это более простой шейдер, чем тот, который также генерируется. Это только для видеотекстур.

 static getVertexShader(unflipY) {
        return [
            "varying vec2 vUV;",
            "void main() {",
            "   vUV = vec2( uv.x, " + (unflipY ? "1.0 - uv.y" : "uv.y") + ");", // fipY: 1.0 - uv.y
            "   gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );",
            "}"
        ].join( "\n" );
    }

    static getFragmentShader(invertColour) {
        return  [
            "uniform sampler2D texture;",
            "varying vec2 vUV;",
            "void main() {",
            "   gl_FragColor = texture2D( texture, vUV )" + (invertColour ? ".bgra" : "") + ";",
            "}"
        ].join( "\n" );
    }

    static createShaderMaterial(texture, unflipY, invertColour) {

        texture.flipY = !unflipY;

        if (invertColour) {
            texture.format = THREE.RGBAFormat;
        }

        return new THREE.ShaderMaterial( {
            uniforms: { texture: { value: texture } },
            vertexShader: WebVRUtils.getVertexShader(unflipY),
            fragmentShader: WebVRUtils.getFragmentShader(invertColour)
        });
    }

использование

 let invertColour = false;

        if (WebVRUtils.isSafari) {
            this.hasHLS = hasHls;
            invertColour = hasHls && WebVRUtils.isIpad;
        }

        this.material = WebVRUtils.createShaderMaterial(this.texture, this.hasHLS, invertColour);

хорошо, комментарий к строке _gl.pixelStorei (_gl.UNPACK_FLIP_Y_WEBGL, texture.flipY) в three.js делает отображение видео в Safari (10.0.2, в предыдущей версии необходимо было только включить webgl в инструментах разработки, это опция сейчас недоступна), но у меня все еще есть проблема с iPad и iPhone (это моя цель)
Что касается решения shaderMaterial, я не знаю, как его точно применить в моем коде ...
Спасибо за поддержку

Отключение FlipY в моих тестах требовалось и для MacOs Safari 10.

Да и для меня (кроме предыдущей версии 9.xx)
Но мне нужно использовать плеер на мобильных устройствах, поэтому это решение не является моим решением :-(

Вам понадобится как исправление FlipY, так и инверсия цветового канала на IOS. И только для IOS 10. Ничего хорошего на IOS 9. Что не учитывает многие старые устройства. Потому что Apple обесценила их, как мой Ipad 3. IOS 10 поддерживает встроенное воспроизведение, поэтому в любом случае будет предпочтительнее.

Я сейчас собираюсь исправить это в iOS. Но меня немного смущают комментарии.

Для HLS-видео:

• iOS предоставляет цветовые каналы в неправильном порядке (bgra вместо rgba). Однако в остальном значения верны.
• macOS создает текстуру, требующую переворота по оси X. Это можно обойти, используя setPixelStorei (UNPACK_FLIP_Y_WEBGL, true)
• iOS создает текстуру, которая требует переворота по оси X, но описанный выше обходной путь не работает.

Это верно?

Ответ находится в этом билете выше.

Напоминаем вам, что последнее обновление iOS 10.3.3 устранило проблему с bgr, которая заставила бы обходной путь ... работать наоборот. Я не использую three.js, поэтому по любым вопросам / сортировке обращайтесь к вашему собственному тестированию или к вопросу SO.

Как и ожидалось. довольно стандартный. Спасибо за внимание.

Они должны поступить правильно и обновить билет, который я сделал, оставив открытым и устаревшим. Чтобы обновить всех разработчиков, если есть исправление. Они не. Так что теперь нужно проверить наличие минорных версий?

В iOS 11 должны быть исправления CORS, но пока их нет.

Мне удалось получить бета-версию xcode 9. Он не поставляется с симулятором 10.3.3, только с 10.3.1 и 11. Я тестировал в 11, и, похоже, обратный rgba все еще требуется. В противном случае я должен был бы видеть зеленый дисплей или вообще не видеть. Мне придется провести больше тестов, отключив исправление.

Симулятор IOS11 никуда не годится. Симулятора iOS 10.3.3 нет. В IOS11, по-видимому, исправлен CORS.

Теперь, когда iOS 11 опубликована, я провел несколько тестов и не могу использовать исправление в этой теме для iPhone iOS 11 (еще не пробовал iPad).

Я могу заставить его работать (используя CORS hack, FlipY и исправления цвета) для iOS 10.3.3 на iPhone и iPad с HLS.
На iPhone iOS 11 у меня черный экран с HLS (с использованием CORS hack, FlipY и исправлений цвета). Думаю, есть еще что поправить, но пока пальцем не тронул.

Что касается проблемы CORS, она, похоже, улучшилась в iOS 11, по крайней мере, для прогрессивной загрузки MP4, но я не могу подтвердить для HLS из-за вышеизложенного.

Если кому-то повезло больше, обновите: /

Я изо всех сил стараюсь получить новый ipad, чтобы иметь возможность даже получить IOS11.

Эмулятор не имеет исправлений, поэтому произошел сбой.

Мне нужно будет подтвердить, нужно ли мне там делать встречный взлом. Или, если цветовые каналы rgb можно переключить обратно.

Черный рендеринг для HLS - не лучшее начало, а просто их обычный саботаж, на который уйдут годы, чтобы обратить вспять регресс. Вот что происходит на IOS9.

CORS должен был быть исправлен в IOS11 и не требует прокси

@danrossi Я тоже столкнулся с этой проблемой с iOS 11, если вы

Мне все еще нужен новый ipad с IOS11. HLS работает в симуляторе бета-версии IOS11? Это может быть связано с CORS. Переворот канала RGB будет отображать инвертированные цвета. Так черный может быть связан с CORS?

Я пробовал без своего прокси-сервера CORS и с ним, но у меня все еще та же проблема. Я также пробовал без Flip Y просто ради него, и он ничего не меняет. Только звук, видео нет: /

На устройстве ios11 все та же проблема, только звук, нет видео。 Кто-нибудь решил эту проблему？

Я заставил его работать, нарисовав видео на 2D-холсте и используя этот 2D-холст в качестве текстуры в webgl.

Я не могу правильно получить 2D текстуру холста на ios11 ， не могли бы вы опубликовать код？

Это очень плохая идея. Рисование холста требует больших затрат процессора.

Я обновил билет webkit в отношении этой проблемы. Они вообще не обращались к нему. Я даже предоставил свои работы с полным шейдером и исходным кодом. Которые, как вы утверждаете, сейчас не работают.

Я знаю, что у кого-то еще проблема. Но я пока не могу протестировать его как следует, пока не получу действительно новое устройство. Симулятор показывает это правильно. были встречены с запланированным устареванием, когда даже Iphone 5 не может получить IOS 11.

вот билет снова. https://bugs.webkit.org/show_bug.cgi?id=163866#c17

@LoveLetterIloveU вот мой пример кода: https://htmlvideocanvas-sibabi.c9users.io/hello-world.html (Открыто ТОЛЬКО на ios)
@danrossi прав, это не лучшее решение. Он в основном выполняет memcopy массивов байтов, а не связывает указатель. однако он выполняет свою работу, пока компания Apple поддерживает проект. Я все еще оцениваю этот подход, и у меня есть запасной метод mp4, готовый к работе.

Я потратил целых два месяца на то, чтобы найти это решение выше, с помощью всех, кто настраивал шейдер, конечно, так что спасибо. Это просто означает, что мы больше времени будем противостоять им, ища другую работу.

Я надеюсь, что он есть.

Они вообще не удосужились исправить проблему flipy / HLS / webgl, вы можете увидеть это в том тикете, который я сделал.

В конце концов, они только что устранили проблему CORS. Хотя я еще не уверен, удалось ли им заставить Dash работать.

Apple / webkit - это заноза в моей стороне. Это может означать, что я должен пойти и попытаться исправить это сам, а я не занимаюсь C ++. Было бы очень забавно, если бы я это поправил, но мне хотелось бы сохранить волосы.

Может ли кто-нибудь опубликовать свой код, чтобы я посмотрел, просто чтобы убедиться, что FlipY включен / отключен.

Смотрите мой комментарий здесь. Я полностью погрузился в этот саботаж. Отключение функции flipY на текстуре должно отображать изображение, но в перевернутом виде. Здесь черная рамка. Вернуться к началу. Они вызвали регресс, который был проблемой в IOS9.

https://bugs.webkit.org/show_bug.cgi?id=163866#c19

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

Он вышел за рамки исходной проблемы FlipY. Похоже, они даже не потрудились проверить, работает ли HLS с WebGL перед выпуском ОС.

Я закрыл исходный билет webkit, чтобы начать новый, в частности, видео текстуры HLS с webgl полностью сломаны, и пока нет возможности обойтись. Оригинальная работа FlipY больше не актуальна.

Я обнаружил, что все тесты на соответствие webkit webgl используют Mp4.

Они никогда не удосужились протестировать собственный потоковый формат Apple. Следовательно, почему он был сломан и все еще сломан с новым обновлением IOS 11.

Смотрите здесь, чтобы узнать больше

https://bugs.webkit.org/show_bug.cgi?id=163866#c22

@danrossi У вас есть ссылка на недавно открытый билет для webkit? Я только что столкнулся с этой проблемой на iOS11 и очень хочу отслеживать любые изменения.

Я сам финансирую их работу. Я провожу тесты на соответствие с HLS, сгенерированные из тестовых файлов mp4 Khronos. Он утверждает, что проходит, но тест не может доказать, что он что-то отображает. Холст здесь даже не отображается. На самом деле, я даже не думаю, что тест на IOS работает должным образом. Логов нет.

Я должен использовать их собственные тестовые файлы, чтобы доказать, что текстуры HLS не работают. Я создал другие тестовые файлы и загружу их, чтобы сделать билет.

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

Хорошо, насколько я вижу с тестовыми файлами webkit. Они не предназначены для тестирования IOS. Нет функции щелчка пользователем для воспроизведения. Mp4 по какой-то причине может автоматически воспроизводиться, что я обнаружил в IOS 11, хотя атрибут не указан, но HLS все еще не может.

Я не верю, что какие-либо тесты проводятся специально для IOS, и определенно не проводится никаких тестов для HLS.

Отсюда и проблемы. Это уже не плохо.

У меня есть все, что нужно для отправки билета.

Насколько я вижу. Тесты webgl webkit некорректны. Их не волнует вывод холста webgl. Они рисуют видео на холсте для предварительного просмотра в очень маленьком размере.

У них есть холст webgl, но его очень крошечный размер, поэтому вы даже не увидите, рендеринг он или нет.

Пришлось доработать тесты на HLS, и они не проходят. А теперь я увеличил размер холста webgl, он черный.

После того, как я изменил код, чтобы добавить пользователя, щелкните, тесты действительно запускаются на IOS.

Насколько я могу судить, тестирование HLS никогда не проводилось, и тесты содержат ошибки. И поэтому саботировал абсолютно всех.

Ну вот. Я действительно теряю терпение в отношении Apple и того, сколько личной работы требуется, чтобы исправить их проблемы и провести для них тесты.

https://bugs.webkit.org/show_bug.cgi?id=179417

Два дня и нет необходимости смотреть на это. Я подозреваю, что это никогда не будет решено. Потребовались годы, а для исправления нескольких версий iOS и обновлений устройств для CORS?

Я попробую поиграть с флагами webgl и кодом шейдера, чтобы посмотреть, можно ли что-нибудь сделать.

Могут ли люди пойти туда и пошуметь? Как это до сих пор даже не посмотрели. Как будто они вообще не заботятся о тестировании HLS в собственном браузере.

@jernoble, не могли бы вы указать, кто может помочь нам в команде webkit в этом вопросе? Было бы очень признательно, если бы кто-нибудь мог изучить это или дать нам обновленную информацию. Проблема здесь, на GitHub, довольно длинная, но она кратко изложена здесь: https://bugs.webkit.org/show_bug.cgi?id=179417. Заранее спасибо.

Привет, @radiantmediaplayer. И @grorg, и я - подходящие люди, чтобы пинговать по этой проблеме. Я займусь этой ошибкой WebKit и создам радар, отслеживающий ее.

Эй, ребята. Я публикую образец обходного пути для iOS 11 с использованием временного холста, как описано @sorob . Вы можете увидеть, как это работает, на http://redgetan.cc/demo/ios_11_hls_webgl_canvas_workaround/index.html . Я не знаком с Three.js, так что это простой javascript.

CanvasRenderer. это программный рендеринг. Не достойная продукция.

Я с @danrossi по этому

@danrossi Я только что заметил, что этот вопрос закрыт. Не могли бы вы снова его открыть?

Совершенно новый выпуск здесь. Это не связано с Three.JS, поэтому я думаю, что хранится в архиве.

Уровень требуемых тестов был безумным. Сломал себе спину, как будто нашел работу с IOS10. посмотрите там.

Пока ничего не помогает. Кто-то наконец-то смотрит, и мы не можем его контролировать. Что-то, связанное с общей ссылкой на контекст для текстуры, видящей HLS, отличается от Mp4, который может это исправить. Насколько я понимаю, им на самом деле нужно тратить время на это. У меня нет средств настроить такую ​​среду сборки, как в Windows.

Но, глядя на код webkit, я думаю, почему у IOS10 были странные проблемы с цветом с HLS. Он не использует код цветового пространства. Следовательно, код для решения обеих проблем для IOS10 / Safari.

https://bugs.webkit.org/show_bug.cgi?id=179417

Всем привет. Кажется, я сам должен откатиться и реализовать средство визуализации холста для поддержки видеотекстур IE11. Он не работает с WebGL. Кто-то об этом спрашивал.

Я полагаю, что при той скорости, на которую на это нужно обратить внимание, на исправление может уйти около 2 лет.

IOS 11 придется страдать с программным рендерингом, я думаю, для HLS. В корзине вся IOS предназначена для VR. Собираюсь реализовать это сам.

@redgetan , есть идеи, как реализовать с three.js? Я попытался использовать CanvasRenderer, и у меня появилась рамка сетки, видимая поверх текстуры, и некорректная визуализация геометрии сферы.

Демонстрация на третьем холсте показывает только рендеринг 2D-видео.

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

хорошо, по какой-то причине мне пришлось это сделать.

Используйте средство визуализации webgl как обычно. Но для текстуры холста и рисования видео пришлось задать размеры

imageContext.drawImage( video, 0, 0, image.width, image.height );

Теперь он отображается правильно. Проведу тесты на IOS 11.

@danrossi расскажет нам, как это работает на iOS 11. Возможно, в какой-то момент мне действительно придется пойти по этому пути.

Хорошо, не волнуйтесь. Я скоро добавлю базовый тест с просмотром статистики fps онлайн, если он, кажется, работает. Прямо сейчас может понадобиться что угодно.

Есть ли способ проверить производительность процессора на IOS?

Я сделал тест текстуры холста. Он работает, но при просмотре видео с большим разрешением он может упасть.

У этого HLS низкое качество, поэтому он держится на уровне 40 кадров в секунду. MP4 с большим разрешением, но также с низким качеством, оставалось на уровне 30 кадров в секунду.

Файл производственного разрешения может получить 10 кадров в секунду. Это для нового iPad.

http://dev.electroteque.org/webgl/three-canvas.html

Связана ли эта проблема с проблемой, с которой я столкнулся на этой странице прямо сейчас: https://digitalejulegaver.firebaseapp.com/#catarina

Откройте его в браузере Safari на Mac или устройстве MacOS. IPad или iphone не могут обрабатывать эту страницу, даже если она находится в браузере Chrome или Mozilla.

У меня черная страница, но в обычном Chrome на Mac она работает

@vongohren Вам нужно использовать обходные пути FlipY, которые я обнаружил для HLS с macOS Safari и шейдером, который мы разработали в этом билете.

Однако я только что вернулся к своим билетам webkit, и они заявили, что исправили проблему FlipY для 10.13. Я считаю, что это Высокая Сьерра. У меня нет возможности проверить это, поскольку я использую облачную macOS.

Это потребует еще одной проверки версии платформы, чтобы не требовать обходных путей FlipY для 10.13. поэтому все, что ниже версии 13, потребует этого. У меня есть около 4 различных платформ и проверок версий браузера для macOS и IOS, чтобы обойти несколько ошибок. Проверка iOS 11 - это включить программный рендеринг текстур!

Если вы можете проверить 10.13, это может быть полезно.

Вот подробности всех моих билетов.

https://bugs.webkit.org/show_bug.cgi?id=179417#c8
https://bugs.webkit.org/show_bug.cgi?id=176491

https://bugs.webkit.org/show_bug.cgi?id=180863#c3

@danrossi Iv получил 10.13, но у вас есть демоверсия, которую можно протестировать?

Версия three.js, которую я сейчас использую, является новой для этих исправлений, поэтому не знаю, где их применить.
Я нашел что-то под названием data.flipY и установил для него значение false. Но ничего не сделал для моего приложения.

Я использую three.js через эту библиотеку: https://github.com/iberezansky/flip-book-jquery

Проблема с CORS?

Это работает ?

http://dev.electroteque.org/webgl/three-hls.html

или это

http://dev.electroteque.org/webgl/three-hls-flipy.html

Мои огромные списки тестовых файлов находятся в этих билетах.

FlipY можно отключить на текстуре

texture.flipY = false;

Все локально, так что не понимаю, зачем делать корс. Но эти две ссылки отображаются черным как на Safari, так и в Chrome на Mac 10.13.

И функция flipY не сделала ничего, а просто перевернула картинку. Но он все еще был черным

Похоже, что в 10.13 та же проблема, что и в iOS 11, где работа FlipY не работает. Это хорошая информация. и еще одна ошибка, о которой стоит сообщить. Это так грязно, что сводит меня с ума. Я обновлю это в заявке на iOS. в 10.12 ошибку FlipY необходимо обойти и сделать для нее отдельный билет.

Так что как сейчас в моей виртуальной реальности. Вы должны выполнить проверку версии платформы для IOS 11 и 10.13 и предоставить программный режим рендеринга текстуры холста для hls.

вот несколько статических утилит, которые я использую для проверки функций, особенно поддержку cors или использование источников прокси cors. Очевидно, теперь мне нужно проверить версию выше 13, чтобы временно включить программный рендеринг, такой как IOS 11.

static get supportsCORS() {
        let testVideo = document.createElement("video"),
            hasCORS = false,
            userAgent = navigator.userAgent;

        testVideo.crossOrigin = "anonymous";
        hasCORS = testVideo.hasAttribute("crossOrigin");
        testVideo = null;

        if (hasCORS) {

            //if (_isSafari = WebVRUtils.safariCheck(userAgent)) {
            if (_isSafari) {
                return WebVRUtils.isNewSafari(userAgent);
            }

            //cors support check for IE 11 support. 
            _corsSupported = true;

            return true;
        }

        return false;

    }

static isNewSafari(userAgent) {
        const osxVersion = /Mac OS X (10[\.\_\d]+)/.exec(userAgent);

        if (osxVersion) {

            //check for safari test to fix HLS problems.
           // _olderSafari = _browserVersion.match(/(\d+).(\d+).?(\d+)?/)[1] <= 10;

            const version = osxVersion[1].split("_")[1];
            return +version >= 12;
        }

        return WebVRUtils.isNewIOS(userAgent);
    }

    static isNewIOS(userAgent) {
        const version = navigator.appVersion.match(/OS (\d+)_(\d+)_?(\d+)?/)[1];
        _isLatestIOS = (+version >= 11);
        return _isLatestIOS;
    }

Вы проделали большую работу над этим, надеюсь, у вас разберутся с билетами: D

Вот работа с текстурой холста. Мне пришлось активировать его для IOS 11. Возможно, мне понадобится сделать эту проверку версии macOS 13 и включить ее для этого тоже. если вы считаете, что работа flipY не работает для 10,13? Я должен им доложить.

Приятель, ты понятия не имеешь, я не получаю от этого никакой выгоды, самофинансируюсь, кроме как сделать программное обеспечение для всех, включая мою собственную функцию, почти не работающую на Apple OS, ха-ха.

Вот моя полная интеграция прямо сейчас, в ней есть работы, включая исправления яблока и обходные пути. Теперь у меня есть поддержка видео cubemap.

https://flowplayer.electroteque.org/vr360/fp6

Это продолжается с тех пор, как я впервые сообщил об этом несколько лет назад, когда сидел и ничего не делал!

Это работает для вас?

http://dev.electroteque.org/webgl/three-canvas.html

Когда вы говорите, что здесь работает текстура холста, на что вы указываете?

Этот flowplayer выглядит мило! Он видел много использования?

Что я должен увидеть в этой ссылке: http://dev.electroteque.org/webgl/three-canvas.html?
Когда я открываю его в Chrome - Версия 63.0.3239.84 (Официальная сборка) (64-бит) - в macOS 10.13.1:
Я вижу черный фон с индикатором FPS в левом углу и кнопку с надписью «Активировать AR» посередине внизу.
Когда я нажимаю на нее, я получаю разделенный экран с колесом настроек и кнопкой возврата. Но само полотно просто черное.

Когда я открываю его в Safari версии 11.0.1 (13604.3.5) на macOS 10.13.1:
Я вижу летающее видео с индикатором FPS в левом углу и кнопкой активировать AR в центре внизу. Я также могу прокручивать, чтобы увидеть все 360 °.
Когда я нажимаю кнопку VR, я получаю разделенный экран с колесом настроек и кнопкой возврата. И видео-холст, но не может прокручиваться, я думаю, это для управления гироскопом.

Но если я нажму кнопку возврата из режима VR, видео застрянет в режиме VR, и я больше не могу прокручивать, и оно застревает в представлении, в котором был запущен режим VR.

Эта демонстрация предназначена для рендеринга HLS в Safari. Если вы считаете, что демоверсия flipY fix не работает в Safari

http://dev.electroteque.org/webgl/three-hls-flipy.html

тогда придется использовать текстуры холста с 10.13 и iOS 11 Safari?

http://dev.electroteque.org/webgl/three-canvas.html

Дай мне знать между ними. Меня не интересуют элементы управления вращением, только то, что он рендерит, а не черная рамка.

Это важно для версии 10.13, так как я добавил ее в заявку Webkit IOS 11, о которой здесь говорится сейчас. Предполагая, что это «регресс», который полностью нарушил рендеринг HLS.

@danrossi оба работают на сафари, более высокое качество с версией hls. Если вам интересно, они оба - правильное направление.

Но с хромом никто не работал.

OK. отлично, мне нужно отменить мой отчет.

Так это все еще проблема?

http://dev.electroteque.org/webgl/three-hls.html

В этом случае используйте FlipY как стандарт для macOS.

Демонстрация HLS на этой странице должна работать в обоих браузерах. Он будет использовать потоковую передачу мультимедийных источников для Chrome с плагином hls. Тогда у него также есть работа FlipY для macOS.

https://flowplayer.electroteque.org/vr360/fp6

Ты прав
http://dev.electroteque.org/webgl/three-hls.html
Это не работает ни для Chrome, ни для сафари

Плеер ссылок работает в обоих браузерах.

Спасибо, чемпион. У меня было достаточно информации, чтобы снова обновить билеты. Проблема с macOS Safari отличается от проблемы с iOS 11.

Вам нужно использовать пример текстуры холста для IOS 11.

А для macOS Safari отключите FlipY на текстуре и измените положение Y на шейдере, чтобы повернуть его правильно. Вам также необходимо выполнить инверсию цветового канала во фрагментном шейдере для IOS 10 HLS. Код шейдера приведен выше.

Таким образом, я был счастлив сегодня утром около 1 часа, когда мне удалось взломать случай iOS 11 с помощью вышеупомянутого обходного пути ( @danrossi я черпал вдохновение из вашего примера на http://dev.electroteque.org/webgl/three-canvas.html) ... но потом я надел очки и почувствовал себя кубиком льда под солнцем пустыни.

Это результат, который я получил на iPhone 6 Plus с iOS 11.2.1, анимация на самом деле довольно плавная, но она просто уродливая, пиксельная, с псевдонимом ...

Ожидаемое поведение выглядит следующим образом (Nexus 5X с Android 8 и последней версией Chrome - это не использует вышеуказанный обходной путь).

Наш пример использования - это проигрыватель HTML5 360, и в обоих примерах над видео используется один и тот же однобитовый поток HLS http://www.rmp-streaming.com : 1935 / vod / sea360.mp4 / playlist.m3u8

Если я применяю обходной путь (мой код см. Ниже) на Android, я получаю такой же уродливый рендеринг. Это то, что я должен получить от этого нового обходного пути, или я что-то упустил?
Я попытался поиграть с некоторыми настройками, но не вижу заметных улучшений.

    // image 
    this.image360 = document.createElement('canvas');
    this.image360.width = this.width;
    this.image360.height = this.height;
    this.imageContext360 = this.image360.getContext('2d');
    this.imageContext360.fillStyle = '#000000';
    this.imageContext360.fillRect(0, 0, this.width, this.height);
    // texture 
    this.texture360 = new THREE.Texture(this.image360);
    this.texture360.format = THREE.RGBFormat;
    this.texture360.minFilter = THREE.LinearFilter;
    this.texture360.magFilter = THREE.LinearFilter;
    this.texture360.generateMipmaps = false;
    this.texture360.wrapS = THREE.ClampToEdgeWrapping;
    this.texture360.wrapT = THREE.ClampToEdgeWrapping;
    this.texture360.flipY = true;
    this.texture360.needsUpdate = true;
    // mesh
    let geometry = new THREE.SphereGeometry(500, 80, 50);
    geometry.scale(-1, 1, 1);
    let material = new THREE.MeshBasicMaterial({ map: this.texture360 });
    this.mesh360 = new THREE.Mesh(geometry, material);
    this.scene360.add(this.mesh360);
    // renderer
    this.renderer360 = new THREE.WebGLRenderer({ antialias: false });
    this.renderer360.setClearColor(0x101010);
    this.renderer360.setPixelRatio(window.devicePixelRatio);
    this.renderer360.setSize(this.width, this.height, true);

Я делаю это. Я почти уверен, что это должно быть правильно.

video.addEventListener("loadeddata", function() {
                      video.width = THREE.Math.ceilPowerOfTwo(video.videoWidth);
                      video.height = THREE.Math.ceilPowerOfTwo(video.videoHeight);

                      image.width = video.width;
                      image.height = video.height;
                      //image.width = video.videoWidth;
                      //image.height = video.videoHeight;
                      //imageContext.fillRect( 0, 0, video.videoWidth, video.videoHeight);
                      imageContext.fillRect( 0, 0, image.width, image.height);


                      //console.log(video.videoWidth);
                });

Так что я прибил его после небольшого тыкания. Похоже, что в нашей конфигурации внешний холст должен иметь точный размер текущего воспроизведения HLS, воспроизводимого для правильного рендеринга (следовательно, для ABR он должен обновляться каждый раз при изменении воспроизведения). Наше тестирование показывает, что это нормально работает с iOS 11 (лучше, чем ничего). Оставьте это здесь, если это поможет кому-то другому.

Да, поэтому я делаю это в событии loadedata, чтобы получить ширину видео. Я понял это раньше, и у него была такая же проблема.

Однако для нативного HLS нет события при изменении битрейта? Я просто захожу в один раз лично. Количество обходных маневров для Apple уже достаточно невероятное.

Насколько мне известно, не существует события, предоставленного Safari, которое можно было бы использовать для обнаружения изменения в воспроизведении для ABR HLS. Мы просто обновляем внешнюю ширину и высоту холста с помощью video.videoWidth и video.videoHeight для каждого AnimationFrame (что, вероятно, не идеально с точки зрения производительности, но на данном этапе у нас все работает, и мы будем довольствоваться этим до следующего опция становится доступной). Наше тестирование показывает, что video.videoWidth и video.videoHeight должны обновляться соответственно при отображении нового представления.

Да, чего стоит, он достаточно хакерский. Так что делать это излишне, особенно если в обратном вызове кадра есть операторы условий. Думаю, что пока что работает.

Они по-прежнему не могут предоставить событие изменения представления. Я считаю, что для одного есть спецификация, но она так и не была реализована?

Прокси-сервер CORS для обхода старых ошибок Safari, исправление HLS flipy, и теперь этого достаточно.

Рад, что все работает. Я не видел обновлений в своих билетах в течение хорошего месяца или около того.

Я не могу припомнить, чтобы что-то в спецификации видео HTML5 касалось события переключения качества. Существует спецификация HLS, поддерживаемая Apple, но она не описывает, что должен делать клиент при переключении качества. Это реализовано в библиотеках, таких как hls.js, но это недоступно для HLS для встроенного видео HTML5 в Safari.

Я просто понимаю, что могу "полифилить" наш хак, чтобы обнаруживать изменение в воспроизведении, запрашивая video.videoWidth через фиксированные интервалы, а при обнаружении изменения затем вызывать обратный вызов изменения размера. Это будет менее обременительным. Я, вероятно, реализоваю это на более позднем этапе в нашем плеере.

@radiantmediaplayer Вы должны иметь возможность использовать событие resize для обнаружения изменений в базовых свойствах .videoWidth и .videoHeight.

Привет, ребята, смотрите мой комментарий здесь. Работает.

Какое тяжелое испытание - это делать тесты и двигаться. Только для того, чтобы не получить должной обратной связи или ответа. Я серьезно сделал! Пожалуйста, больше никаких регрессов !!

Установите бета-версию OSX 11.3, и она будет работать. В предыдущей версии OSX 11 требовался программный рендеринг, а в OSX 10 - исправление флипов и цветов. Требуется сложная путаница с совместимостью и определение версии платформы.

В Safari macOS все еще есть проблема с FlipY, и я тоже не получил ответа, это отдельный тикет. Я все равно не могу правильно протестировать HLS, пока не попробую установить macOS на свою рабочую станцию. HLS заблокирован для воспроизведения в vmware.

https://bugs.webkit.org/show_bug.cgi?id=179417#c43

Работа с FlipY не нужна и для OSX 11.3, но я думаю, что уже упоминал об этом раньше.

Вот моя полная проверка совместимости с iOS и Safari, начиная с CORS.

Уму непостижимо. Это безумие. Мне даже пришлось проверить будущее и включить что-нибудь, кроме IOS 12.

Работает над интеграцией! Пока не могу проверить, что происходит с macOS.

static get supportsCORS() {
        let testVideo = document.createElement("video"),
            hasCORS = false,
            userAgent = navigator.userAgent;

        testVideo.crossOrigin = "anonymous";
        hasCORS = testVideo.hasAttribute("crossOrigin");
        testVideo = null;

        if (hasCORS) {

            //if (_isSafari = WebVRUtils.safariCheck(userAgent)) {
            //Safari still reports CORS support regardless a bug
            if (_isSafari) {
                return WebVRUtils.isNewSafari(userAgent);
            }

            //cors support check for IE 11 support. 
            _corsSupported = true;

            return true;
        }

        return false;

    }

static isNewSafari(userAgent) {
        const osxVersion = /Mac OS X (10[\.\_\d]+)/.exec(userAgent);

        if (osxVersion) {

            //check for safari test to fix HLS problems.
           // _olderSafari = _browserVersion.match(/(\d+).(\d+).?(\d+)?/)[1] <= 10;

            const version = osxVersion[1].split("_")[1];
            return +version >= 12;
        }

        return WebVRUtils.isNewIOS(userAgent);
    }

static isNewIOS(userAgent) {
        const platform = navigator.appVersion.match(/OS (\d+)_(\d+)_?(\d+)?/),
        version = +platform[1];

        _isLatestIOS = version >= 11;

        //if greater than 11.3 or 12
        _iOSHlsSupported = (_isLatestIOS && +platform[2] >= 3 || version >= 12);

        return _isLatestIOS;
    }

использование

 set hls(value) {

        //if had a HLS source and the current playlist source isn't clear scene and revert the material.
        if (this.hasHls && this.isSafari && !value) {
            this.clearScene();
            this.initScene(value);
        }

        //flipY fix
        this.hasHls = value && this.isSafari;
        //IOS10 colour inversion fix
        this.invertHLS = this.isIpad;

        //if we have hls and IOS 11 or greater
        if (this.hasHls && WebVRUtils.isLatestIOS) {

          //IOS 11.3 or greater disable flipY and colour inversion fixes
          if (WebVRUtils.iOSHlsSupported) {
              this.hasHls = false;
              this.invertHLS = false;
          } else {
            //anything below IOS 11.3 use software rendering
            this.config.software = true;
          }

        }
    }

Поправка последний важный момент. Реализация рендеринга HLS в iOS работает скудно и очень болезненно. Рендеринг должен начинаться после загруженных данных.

Как только он обнаруживает ошибку teximage2d, дальнейший рендеринг не происходит, только черный рендеринг, будет казаться, что исправления не было.

Если рендеринг начинается сразу после появления видеоданных, ничего страшного. До 11.3 это не было проблемой.

Похоже, видео снова работает (без временного исправления холста). Проверено для последней версии iOS 11.3 (проверено на iphone 6s, 7).

Да, думаю, я обновился 15 февраля. Снова работаю в 11.3. У меня никогда не было обновлений. Пришлось специально проверить, и все заработало!

Мы исправили множество проблем с видео -> текстурой в iOS 11.3 (и аналогичном выпуске macOS). Извините, если мы не закрыли / не обновили ошибки.

Пожалуйста, дайте мне знать, если вы по-прежнему видите проблемы. Я считаю, что прямые потоки (например, mp4) и HTTP Live Streams должны работать, и flipy должен точно отражаться.

Все это делается с февраля, когда сообщается. Но первоначально я когда-то отчитывался в прошлом году. Я произвольно обновил бета-версию IOS до 11.3, и она начала работать. Приведенный выше код проверки совместимости требуется для решения проблем, связанных с несколькими платформами.

IOS 10 требует исправления flipY. IOS 11.0–11.2 требует программной обработки. 11.3> может отображаться как обычно.

Может ли кто-нибудь поделиться рабочим образцом для этого, jsfiddle или что-то в этом роде? Я все еще видел черный экран в iOS 11 Safari. Я слышал звук, но не слышал видео для потоковой передачи HLS

@dhanishapa Какая у вас версия iOS? Это 11.3+?

Некоторое время назад (~ май 2018 г.) у меня тоже были следующие проблемы с HLS (? <= 11.2):

• Сегменты видео иногда повторяются во время воспроизведения
• Видео иногда приостанавливается и отображается черный экран
• Видео буферизуется, но звук продолжается

После контакта с Vimeo (я использую их службу HLS) они смогли связаться с командой разработчиков Apple и вместе поработать над исправлением.

Мы только что получили сообщение от команды разработчиков Apple о том, что выпущена новая версия iOS (11.3.1), которая включает исправление проблем с воспроизведением, о которых вы сообщили. Исправление должно предотвратить остановку видео на черном экране, повторение фрагментов видео или застревание в состоянии бесконечной загрузки.

Я заметил, что когда я поставил кодированный H264 MP4 в качестве источника во время загрузки, проблемы с воспроизведением исчезли в версиях iOS ниже 11.3.1. У меня возникли проблемы при использовании Quicktime в качестве формата ввода во время загрузки.

Я заметил некоторые различия между манифестами, генерируемыми каждым видеофайлом (видеокодеки, а именно "avc1.64001E, mp4a.40.2" для рабочего, по сравнению с "hvc1.2.4.L63.90, mp4a.40.2" для неработающего ).

Возможно, эта информация будет кому полезна.

Привет
У меня проблема с потоковой передачей HLS на сафари для iOS.
Я использую прокси cors. Я пробовал использовать собственный hls-плеер и html5-плеер и даже просто пытался воспроизвести ссылку m3u8 непосредственно в IOS, но она не работает, а ее работа в сафари (рабочий стол - Mac), Chrome, Firefox, только не в IOS (iphone)

Корс был исправлен в IOS 11.0. Другое большое исправление, которое я разработал, - в версии 11.3. 11.3 должен выйти сейчас. Прокси нужен только для iOS 10 и 9.

У меня это работает 🙆🏽‍♂️

Вот демонстрация Glitch потока HLS, сопоставленного со сферой ( 360-градусное видео от playhouse-vr ).

Протестировано на macOS v10.13.4 + Safari v11.1 и iOS 11.4.1 + Safari

Я вижу НОВУЮ проблему с черным экраном в iOS 14.0 Safari и iPadOS 14.0 Safari. Тот же самый плеер работает с iOS 13.7 Safari и iPadOS 13.7 Safari. Я пробовал обновиться до three.js r120 (с r116), но безуспешно. macOS Safari 14 в порядке. Кто-нибудь видит то же самое? Любой намек на то, что будет следующим шагом для поддержки iOS 14?

Да, посмотрите https://bugs.webkit.org/show_bug.cgi?id=215908 и https://bugs.webkit.org/show_bug.cgi?id=216250 для регрессий iOS 14. Надеюсь, что с ними обоими можно быстро справиться, поскольку это, вероятно, затронет многие сайты.

Это бесконечная битва с Safari. Я снова жду жалоб на мои собственные функции 360. Каждый раз на их исправление уходят месяцы. Я нашел исходную работу выше. Так что пора найти больше обходных путей !! Webkit не тестирует HLS, у них нет тестов HLS для WebGL, мне пришлось сделать некоторые самостоятельно.

Я удалил из своей функции всю громоздкую работу для разных IOS. Но одному из них пришлось использовать программный рендеринг холста для 11.0 ... Мне все еще нужно проверить платформу. С IOS 13 теперь у них нарушены проверки платформы. Пришлось исправить это в картонном проекте. Я обнаружил, что HLS не отображается сразу и занимает некоторое время в IOS 13, но мне нужно еще раз вернуться к тому, как я решил эту проблему.

Им просто все равно. Нет API WebXR, нет API Wakelock, как только что реализовано Android.

в соответствии с моей работой, я должен перенастроить изменение представления. И отключите зум при управлении орбитой. Это останавливает рендеринг черного в IOS 13. IOS 14 надо проверить.

            video.addEventListener("resize", () => {
                vrVideo.update();
                vrVideo.fullScreenResize(false);
            });

Я тестировал 14.2. HLS ОК. Исправление выше сделает это ...