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

ما هو HLS؟

makc حقا؟ لدي OSX 10.10 و Safari 10. حسنًا ، هذا يفسر التغيير التخريبي الأخير من قبل Apple. Safari 10. إذا كنا في Safari 10 ، فنحن جميعًا بخير.

mrdoob HLS = تدفق Apple. أي للتدفقات الحية ولكن أيضًا VOD. سيصبح البث المباشر أمرًا معتادًا مع Terradeck Gear. على سبيل المثال 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. آبل تجعلني بجدية أعمل على إطفاء حرائقهم هههههه.

إذا كان بإمكاني الحصول على عرض OSX فسيكون ذلك بداية. أنا فقط بحاجة لمعرفة ما هو الاختلاف في three.js؟

ما زلت أحاول القيام بطرق الاختزال لمقارنة ما هو مختلف. بمجرد اكتشاف ذلك ، قد أجعل IOS يعمل أيضًا.

ربما تتسبب برامج shader الإضافية في غضون 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". عندما أقوم بتعيين هذه البيانات الوصفية يدويًا على video / mp4 ، يعمل كل شيء بشكل صحيح.

قضية غريبة سببتها لي حكة شديدة في الرأس. اسمحوا لي أن أعرف ما إذا كانت هذه هي نفس المشكلة الأساسية مثل هذه التذكرة ، أو إذا كان يجب علي إنشاء واحدة جديدة.

شكرا،
داستن

هذا خاص بـ HLS mate كما هو الحال في أجزاء mpegts أو الملفات المجزأة وليس mp4. Mp4 جيد في كل من Safari و IOS. لقد راجعت mimetype في cyberduck وتقول إن mpegts صحيحة.

يعمل نفس الدفق بالنسبة لي في مثال webgl الخام فقط وليس على IOS بالطبع. تبدو مشكلتك مشابهة لمشكلتي كما لو كانت في إطار أسود. لا تصيير على الإطلاق.

تضمين التغريدة سأقوم بإنشاء تذكرة جديدة خصيصًا لمشكلتي. شكرا.

أعتقد أن هذه هي المشكلة: www.krpano.com/ios/bugs/ios10-webgl-video-texture-crash/
أحاول حاليًا تنفيذ نفس الحل البديل لـ three.js ، لكني لا أحاول الوصول بعيدًا.

تضمين التغريدة إنها مشكلة سفاري حيث إنها مشكلة في OSX و IOS. يعمل Mp4 بشكل جيد مع IOS و OSX. سوف العبث مع antialias.

ما زلت لا تستطيع حل الفروق بين الاثنين. لا يزال مثال webgl الأولي لا يعمل على IOS ولكن تشغيله على OSX يعد بداية.

أتساءل عما إذا كان بإمكاني العثور على برنامج تظليل متساوي المباشر يمكنني استخدامه.

مزيد من المعلومات هنا: http://stackoverflow.com/questions/39123109/rendering-a-video-with-webgl-in-ios-10-beta-7-safari-shows-weird-purplish-co.

أدرك أن هذا خطأ في المتصفح ، ولكن قد يكون تنفيذ حل بديل ضروريًا نظرًا للمدة التي تستغرقها أخطاء WebGL هذه لإصلاحها.

في حالة استخدام النسيج من خلال القماش ، تم عرض الفيديو في رحلات السفاري.
ومع ذلك ، نظرًا لأنه لا تزال هناك مشكلات CORS في iOS ، فقد عملت فقط في نفس الأصل.
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 و shaders الخام. سوف تضطر إلى اختراق ذلك الشخص لأعمل في طريق عودتي. هناك شيء ما يتسبب في حدوث مشكلات في العرض وسيؤثر على three.js نفس الشيء.

لقد أكدت في elevr أن المقاصة التلقائية تربط النسيج الذي يتسبب في كسره أي

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. إنه بالفعل ما أشرت إليه ، حيث كان علي أن أعلق عليه من أجل العرض التجريبي أيضًا.

_gl.pixelStorei (_gl.UNPACK_FLIP_Y_WEBGL، Text.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 لا يزال يمثل مشكلة كل ليلة

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 الآن. كيف يمكن تدوير النسيج حوله للعمل حوله في الوقت الحالي؟

كيف يمكن تدوير النسيج حوله للعمل حوله في الوقت الحالي؟

لماذا لا تقلب الهندسة فوق البنفسجية أو تفعل ذلك في الظل

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. من المحتمل جدًا أن يقوم برنامج shader هذا بالقلب ، كان هذا في أحد المصادر التجريبية.

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 ويبدو أنه يفعل ذلك في برنامج shader.

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);

هل من الأفضل استخدام برنامج تظليل؟

يتم تنفيذ برنامج shader مرة واحدة في كل إطار ، مقابل تقليب الأشعة فوق البنفسجية في الهندسة مرة واحدة فقط قبل أن يبدأ كل شيء.

ربما يكون من الأفضل makc تعيين القيم في البداية بعد ذلك. إذا كنت على صواب ، فإن قيم الأشعة فوق البنفسجية هذه متغيرات في برنامج shader وتستخدم في الحساب؟

أرى في المصادر إشارات قليلة إلى 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 لأنه يقوم به في برنامج shader. مع three.js ، يجب قلب الهندسة.

يتم عرض عرض HLS على IOS 10 ولكن به مشكلات حادة في الألوان. تتوقف الإطارات عن العمل ولكني أعتقد أنها مشكلة في المحاكي وإسقاط الإطارات. ليس لدي الآن جهاز يمكن تحديثه إلى IOS 10. لا يظهر على الإطلاق على IOS 9. كلاهما يتطلب وكيل CORS لـ mp4 و HLS.

قد أضطر الآن إلى تقديم تذكرة أخرى فيما يتعلق بمشكلة عرض اللون مع HLS على IOS 10 بمجرد أن أؤكد أنه ليس المحاكي.

هذا مؤلم تمامًا ولا عجب أنه لا أحد يريد دعم Safari ولكن الناس بحاجة إليه للعمل.

كان علي أن أقدم هنا إعدادات تنسيق rgb مختلفة. ينتج الخيار الافتراضي أشرطة coiourbars العمودية ، بينما ينتج rgba أحد الألوان غير صحيحة. لكن في المحاكي. أنا الآن غير قادر على اختبار 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 والذي يحتاج الآن إلى تذكرة ثانية على الرغم من أنني لست متأكدًا مما إذا كان خطأ 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. إنها مشكلة في جميع رحلات السفاري.

يبدو أن 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 ، ستعمل على جهاز محاكاة بالرغم من ذلك. هناك مشكلة رسومات غريبة تحدث هناك.

على جهاز ID حقيقي ، سترى مشكلة فضاء الألوان عند استخدام علم 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 باستخدام الثوابت والخصائص "format" و "النوع" النوع هو نوع بايت ، التنسيق هو تنسيق اللون الذي رأيته RGBA مطلوب بالكاد لجعله يعمل.

سأقضي بعض الوقت غدًا لاستعراض كل علم ونأمل أن تعمل مجموعة واحدة.

danrossi كيف الحال؟

لقد حاولت فقط العبث بكل علم ممكن ولا شيء. يمكن أن يأخذ فقط أعلام RGB و RGBA ونوع البايت غير موقّع. أظهرت الخيارات الأخرى لوحة سوداء فقط. لست متأكدا ماذا تفعل ؟

danrossi شكرا لعملك. أجد Hls.js يشغل فيديو

wuyingfengsui هذه مشكلة HLS أصلية مع IOS الآن ،

مع دفق 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 سينتقل إلى ثلاثة أجزاء يجب أن يذهب خارجها.

رمز هذا العمل حول هو كما يلي

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 ، فاستخدم مثال 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 Ive الذي استخدمته للاختبار لن يعمل أبدًا على HLS و WebGl. اضطررت للاختبار على أحدث Iphone. كان جهاز محاكاة IOS 10 بالكاد يعمل وكان لديه مشاكل في اللون مشابهة للمشكلة الأخرى.

على الأقل عملت العلامات المضمنة لـ Iphone على IOS 10 ، أصبح الفيديو المضمّن و webgl ممكنًا الآن لكن CORS لا تزال تمثل مشكلة. تم إصلاح CORS فقط في Safari على نظام macOS.

أقوم بتوضيح وجهة سفاري فقط لأنه خطأ كلاسيكي آخر في webkit و HLS.JS المتدفق على المتصفحات الأخرى على ما يرام.

لقد وجدت أنه يمكن إصلاحه عن طريق إضافة لوحة قماشية إضافية. لكنها تعمل فقط على نظام التشغيل iOS 10. انظر إلى هذا الالتزام: https://github.com/yanwsh/videojs-panorama/commit/0122b1bbd31093b77ca7f09900afa74e2c537037

لم يكن هذا حدثا. إنها تستخدم عرض قماش الرسم مع drawImage. ليس WebGL. لذلك مثل استخدام عارض اللوحات القماشية three.js. تمتص أداة عرض القماش حقًا على IOS مما يتسبب في سقوط الإطارات ، وليس قابلاً للاستخدام. هل هذا هو الحل الخاص بك؟

الجودة ليست جيدة جدًا. ولكنه يعمل :)

يعد إسقاط الإطارات أكثر من مجرد مشكلة جودة :)

mrdoob لقد جربت عارض اللوحة القماشية أفعل ذلك من أجلي. لست متأكدًا من مشكلتها ، فهي تعرض شبكة. الدوران ليس صحيحًا أيضًا. تحميل ملف mp4 يتم عرضه بشكل صحيح ولكن لا يزال خطوط الشبكة.

لا يزال يسقط الإطارات عند القيام بذلك.

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

تضمين التغريدة

mrdoob تتعلق هذه المشكلة بـ HLS على Safari. من الصعب حقًا القيام بكل هذه العروض التوضيحية. لكني قمت ببعض التوليفات.

لقد عملت للتو على رفض Chrome لتشغيل mp4 الآن ما لم يكن يستخدم إصدار وكيل Safari CORS من mp4 ahh.

بقدر ما تذهب مشكلة CanvasRenderer الغريبة والتي قد تحل مشكلة HLS مؤقتًا لـ IOS 10. إليك المجموعات ، لذا أظهر ما تفعله وبعض تعويضات قيمة الدوران الغريبة الممكنة. الرمز هو كل نفس. هناك شبكة شبكية فوق النسيج.

لسفاري

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

للكروم

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

لقد قمت بتحديث عروض اللوحة القماشية ، لا يبدو أنها بحاجة إلى الرسم خارجيًا.

ومع ذلك ، هناك مشكلة غريبة في هندسة الكرة التي لا يمكنني اكتشافها ، وبالتالي لا يتم عرض الصورة أو تدويرها بشكل صحيح ، إنها كلها منحرفة في نقطة.

انقر فوق المنطقة اليسرى العلوية ، وحاول السحب باستخدام Orbitcontrols.

مشكلة الشبكة هي أنني بحاجة إلى إضافة "overdraw: 0.5" إلى MeshBasicMaterial لإيقافها من إظهار الشبكة.

لا يتطلب أي منهما وكلاء CORS في رحلات السفاري عند استخدام CanvasRenderer. سأحاول إلقاء نظرة على 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 في الوقت الفعلي: هل يقوم IOS حتى بعمل مآخذ ويب؟ أعلم أنه لا يمكنه فعل webrtc.

إن محاولة الحصول على نسيج فيديو عبر رسم لوحة الرسم الثابت عبر خيار SoftwareRenderer أمر سيء أيضًا. إنه مجرد إطار أسود. كان كلا الخيارين بمثابة طريق مسدود كنت آمل أن يعمل برنامج SoftwareRenderer على الأقل مع مواد الفيديو فقط مع عرض نسيج الصورة.

مرحبًا بالجميع ، لقد كنت أعمل على مشكلة اللون في اليوم الماضي ووجدت حلًا مناسبًا لحالة الاستخدام الخاصة بي. لقد كان هذا الموضوع مفيدًا جدًا وأود المساهمة فيه.
المشكلة هي أن اللونين الأحمر والأزرق يتم تبديلهما. لذلك استخدمت ffmpeg للتبديل المسبق لتلك الألوان. مع إعادة تبديل الألوان على threejs ، يعود الفيديو إلى شكله الطبيعي.
إنه ليس حلاً مثاليًا ولكنه يعمل. (تم اختباره على IOS 10.2)

تضمين التغريدة

كنت أحسب أنها كانت مشكلة ترميز أو العبث بالترميز.

هذا لن يساعد في قول البث المباشر لـ wowza بالرغم من ذلك. من المحتمل ألا يتحكم أحد في كيفية عمل برامج التشفير الحية. لربما VOD.

هل لديك علم ffmpeg لتأكيد ذلك؟

لا يزال مذهلاً. يبدو أن هذه ليست مشكلة في three.js بصرف النظر عن مشكلة FlipY التي لا تزال مطلوبة.

أنا فقط لا أستطيع أن أفهم لماذا Webkit هكذا.

تضمين التغريدة

هذا هو الأمر الذي استخدمته:
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 أعتقد أنك على شيء. أنا آسف يا صديقي مرة أخرى ، فقد أصبحت هذه مشكلة Webkit أخرى. ومع ذلك ، لا يمكن تجنب إصلاح FlipY.

لقد أجريت بعض الأبحاث ويبدو أن هناك مبادلة ترتيب قناة مثل هذا ، وأنا الآن خبير في التظليل.

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

يتم عكس تأكيد

gl.texImage2D (gl.TEXTURE_2D، 0، gl.RGBA، gl.RGBA، gl.UNSIGNED_BYTE، video) ؛

mrdoob كيف يمكن تطبيق تغيير لون النسيج على برامج التظليل المدمجة؟

gl_FragColor=texture2D(sm,txt).bgra;

تضمين التغريدة تصحيح. قد يكون هذا هو الشخص الذي قد يستخدمه الناس.

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;" );

أعتقد أنني بحاجة إلى نسخ التظليل إلى ثلاث مواد تظليل ، ولكن ليس لدي فكرة عن كيفية تطبيق النسيج؟

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 = Text2D (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 لا يعمل. لقد نسيت أن أضيف bgra.

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 }

قرر الفيديو إيقاف العرض في المحاكي ولكن على الأقل أرى تغيرًا في اللون. لا يعمل التصحيح للأسف على الرغم من أن تصحيحه يستبدل بالتأكيد كود التظليل.

يبدو أنه يمكنني إجراء تقليب بهذه القيمة فقط بإعطائها قيمة موجبة 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 );

تضمين التغريدة

كان المؤخر هو سبب المشكلة. برنامج التظليل هذا بالتأكيد أنظف بكثير من البرنامج المعتاد. ماهو الفرق ؟

باستخدام التظليل المخصص أفقد إصلاح 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
});

برنامج التظليل هذا بالتأكيد أنظف بكثير من البرنامج المعتاد. ماهو الفرق ؟

سحر! 😉

تضمين التغريدة آسف على الضوضاء ولكن إلقاء اللوم على أبل مرة أخرى على هذا.

لذا بالنسبة لفيديو equirectangle ، ألا يجب تحديث العرض التوضيحي لاستخدام هذا ربما؟ إذن برنامج shader الذي تستخدمه MeshBasicMaterial غير ضروري لمثل هذه القوام الفيديو؟ سأختبره عبر المتصفحات وتنسيقات الفيديو المختلفة.

هل نغلق؟

هنا هو العرض المحدث

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

لذا بالنسبة لفيديو equirectangle ، ألا يجب تحديث العرض التوضيحي لاستخدام هذا ربما؟ إذن برنامج shader الذي تستخدمه 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 بثلاثة ملفات js تعرض بثًا مباشرًا لـ HLS (.m3u8 يتم تشغيله باستخدام hls.js)
إنه يعمل على Safari OSX مع تمكين webgl ولكن على ipad 10.2 ، كل محاولتي تضيع في لوحة سوداء (الصوت يعمل)
إذا قمت بتعطيل وضع vr360 ، فإن دفق الفيديو يعمل بشكل جيد في جميع الأجهزة.
لقد جربت بعض الطرق المقترحة ولكن لا يزال لدي عرض قماش أسود.
شخص ما يعرف كيف يعمل؟

توجد إصلاحات انعكاس القناة الملونة و FlipY في هذا الموضوع.

إن أخطاء Webkit التي تتبعتها قديمة وانتهى بها الأمر بالتخلص من بعض الغطرسة حيال ذلك. لا يزال مفتوحًا ولكن لن يكلف أحد عناء النظر إليهم.

أنت بحاجة إلى FlipY fix لـ Safari. لذلك لا يزال تعطيله على نسيج three.js.

إليك طرق es6 الرسمية التي ابتكرتها لحل المشغل الخاص بي. ما زلت أعاني من الكوابيس بعد شهور من مطاردة هذه الفضلات هاها.

شكراً لمردوب البطل على ابتكار الحل المادي للتظليل. أنا أستخدم هذا لجميع المتصفحات الآن. إنه تظليل أبسط من الذي تم إنشاؤه أيضًا. إنه مخصص لمواد الفيديو فقط.

 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، Text.flipY) في three.js يجعل عرض الفيديو في Safari (10.0.2 ، في الإصدار السابق كان من الضروري فقط تمكين webgl في أدوات التطوير ، وهذا الخيار غير متاح الآن) ولكن ما زلت أواجه مشكلة على iPad و iPhone (هذا هو هدفي)
حول حل shaderMaterial ، لا أعرف كيفية تطبيقه بالضبط في الكود الخاص بي ...
شكرا لدعمك

كان تعطيل FlipY في اختباراتي مطلوبًا لـ MacOs Safari 10 أيضًا.

نعم أيضًا بالنسبة لي (باستثناء الإصدار 9.xx السابق)
لكني أحتاج إلى استخدام المشغل على الأجهزة المحمولة حتى لا يكون هذا الحل هو الحل :-(

أنت في حاجة إلى كل من FlipY fix و Color the channel inversion على IOS. وفقط لـ IOS 10. ليس جيدًا على IOS 9. مما يترك العديد من الأجهزة القديمة خارج. نظرًا لأن Apple قد قللت من قيمتها مثل Ipad 3. يدعم IOS 10 التشغيل المضمّن ، لذا سيكون من الأفضل على أي حال.

ألقي نظرة على إصلاح هذا في iOS الآن. لكني مرتبك قليلاً من التعليقات.

لمقاطع فيديو HLS:

• يوفر iOS قنوات ملونة بترتيب خاطئ (bgra بدلاً من rgba). على الرغم من ذلك فإن القيم صحيحة.
• يقوم macOS بإنتاج نسيج يتطلب التقليب في المحور X. يمكن حل هذا باستخدام setPixelStorei (UNPACK_FLIP_Y_WEBGL ، صحيح)
• يقوم نظام iOS بإنتاج نسيج يتطلب التقليب في المحور X ، لكن الحل أعلاه لا يعمل.

هل هذا صحيح؟

الجواب في هذه التذكرة أعلاه.

تمامًا مثل تنبيهكم يا رفاق ، من الواضح أن آخر تحديث لنظام iOS 10.3.3 قد أصلح مشكلة bgr ، والتي من شأنها أن تجعل الحل ... يعمل في الاتجاه المعاكس. أنا لا أستخدم three.js ، لذا لأية أسئلة / فرز ، قم بالإشارة إلى الاختبار الخاص بك أو سؤال SO.

كما هو متوقع. مستوى جميل. شكرا لرؤساء متابعة.

يجب أن يفعلوا الشيء الصحيح وأن يقوموا بتحديث التذكرة التي صنعتها وتركت مفتوحة وبالية. لتحديث جميع المطورين إذا كان هناك إصلاح. ليس لديهم. لذا عليك التحقق من الإصدارات الثانوية الآن؟

من المفترض أن يحتوي IOS 11 على إصلاحات CORS ولكن لم يحدث ذلك بعد.

تمكنت من الحصول على xcode 9 beta. لا يأتي مع جهاز محاكاة 10.3.3 فقط 10.3.1 و 11. لقد اختبرت في 11 وما زال rgba المعكوس مطلوبًا على ما يبدو. يجب أن أرى شاشة خضراء بخلاف ذلك أو لا تظهر على الإطلاق. سأضطر إلى إجراء المزيد من الاختبارات عن طريق تعطيل الإصلاح.

جهاز محاكاة IOS11 عديم الفائدة. لا يوجد محاكي 10.3.3 IOS. يبدو أن 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 ، إذا توصلت إلى حل لهذه المشكلة ، فيرجى إبلاغي بذلك. لا يزال iOS 10 يعمل بشكل جيد مع إصلاح CORS و Flip Y ، لكن iOS 11 يشغل الصوت فقط ..

ما زلت بحاجة للحصول على iPad جديد مع IOS11. هل تعمل HLS في محاكاة بيتا IOS11؟ يمكن أن يكون متعلقًا بـ CORS. سيعرض قلب قناة rgb ألوانًا معكوسة. لذا قد يكون اللون الأسود مرتبطًا بـ CORS؟

لقد حاولت بدون وكيل CORS الخاص بي ومعه ، وما زلت أعاني من نفس المشكلة. لقد حاولت أيضًا بدون Flip Y من أجله فقط ، ولا يغير شيئًا. صوت فقط ، لا يوجد فيديو: /

لا تزال هناك نفس المشكلة على جهاز ios11 ، الصوت فقط ، لا يوجد فيديو。 لقد حل أي شخص هذه المشكلة？

لقد نجحت في العمل عن طريق رسم الفيديو على لوحة قماشية ثنائية الأبعاد واستخدام قماش ثنائي الأبعاد كنسيج في webgl.

لا يمكنني الحصول على نسيج قماش ثنائي الأبعاد بشكل صحيح على 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 صحيح ، ليس هو الحل الأفضل. إنها تقوم بشكل أساسي بعمل نسخ من مصفوفات البايت بدلاً من ربط المؤشر. ومع ذلك ، فإنه يقوم بالمهمة بينما تحافظ شركة Apple على المشروع. ما زلت أقوم بتقييم هذا النهج ولدي طريقة mp4 الاحتياطية جاهزة للعمل أيضًا.

لقد أمضيت شهرين كاملين في العثور على هذا الحل أعلاه بمساعدة الجميع لضبط التظليل بالطبع. هذا يعني فقط المزيد من وقتنا في مواجهتهم في العثور على عمل آخر.

آمل أن يكون هناك واحد.

لم يكلفوا أنفسهم عناء محاولة إصلاح مشكلة flipy / HLS / webgl على الإطلاق ، يمكنك أن ترى في تلك التذكرة التي صنعتها.

لقد أصلحوا فقط مشكلة CORS بعد كل شيء. على الرغم من أنني غير متأكد حتى الآن ما إذا كانوا قد تمكنوا من تشغيل داش.

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 هما الأشخاص

مرحبا شباب. أنا أنشر عينة من الحل البديل لنظام التشغيل iOS 11 باستخدام لوحة الرسم المؤقتة كما هو موضح بواسطة http://redgetan.cc/demo/ios_11_hls_webgl_canvas_workaround/index.html . لست على دراية بـ Three.js ، لذا فهي مجرد جافا سكريبت عادي.

عارض القماش. هذا هو عرض البرامج. لا يستحق الإنتاج.

أنا مع danrossi على هذا واحد. ستكون مشكلات الأداء جانباً الحفاظ على حلين مختلفين كاملين لعرض محتوى HLS غير عملي. نحتاج إلى الوصول إلى الجزء السفلي من مشكلة iOS webkit. تُظهر بطاقة webkit الجديدة نشاطًا يعد علامة إيجابية. نأمل أن نتمكن من التوصل إلى شيء ما حتى لو كان ذلك يعني انتظار نظام التشغيل iOS 11. *.

danrossi لقد لاحظت للتو أن هذه القضية مغلقة. هل تعيد فتحه؟

قضية العلامة التجارية الجديدة هنا. لا يتعلق الأمر بـ Three.JS لذلك تم الاحتفاظ به من أجل أرشيف على ما أعتقد.

كان مستوى الاختبارات المطلوبة مجنونًا. كسرت ظهري مثل العثور على حل IOS10. الق نظرة هناك.

لا شيء يعمل حوله حتى الآن. شخص ما يلقي نظرة أخيرًا وليس في سيطرتنا. يختلف شيء ما يجب القيام به مع مرجع مشترك لسياق النسيج الذي يرى HLS عن Mp4 والذي قد يصلحه. بقدر ما أجمع ولكن عليهم في الواقع قضاء الوقت للقيام بذلك. ليس لدي أي وسيلة لإعداد بيئة بناء مثل تلك الموجودة على Windows.

لكن بالنظر إلى رمز webkit ، أعتقد أن السبب وراء وجود مشكلات ألوان غريبة مع HLS في IOS10. لا يستخدم رمز مساحة الألوان. ومن ثم فإن الكود للتغلب على كلتا المشكلتين هناك لـ IOS10 / Safari.

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

أهلا. يبدو أنني يجب أن أعود إلى الوراء وتنفيذ عارض قماش لدعم نسيج الفيديو IE11. لا يعمل مع WebGL. كان شخص ما يسأل عنها.

أعتقد أن المعدل الذي يستغرقه النظر ، قد يستغرق حوالي عامين لإصلاحه.

يجب أن يعاني IOS 11 من عرض البرامج على ما أعتقد لـ HLS. في سلة المهملات ، كل شيء IOS مخصص للواقع الافتراضي. سأقوم بتنفيذ هذا بنفسي.

redgetan ، هل من أفكار حول كيفية التنفيذ باستخدام three.js؟ حاولت استخدام CanvasRenderer وأحصل على إطار شبكي مرئي فوق النسيج ولا يعرض قياس الكرات بشكل صحيح.

يعرض العرض التوضيحي للوحة القماشية الثلاثة فقط الفيديو ثنائي الأبعاد الذي يتم تقديمه.

نأسف لأنك تستخدم عرض webgl لكنك تستخدم لوحة قماشية كمصدر لصورة النسيج. معرفة ما إذا كان بإمكاني تكرار ذلك. لا يتم عرضه وتدويره بشكل صحيح بالنسبة لي عند استخدام قماش الرسم باعتباره النسيج.

حسنًا لسبب ما اضطررت إلى القيام بذلك.

استخدم عارض webgl كالمعتاد. لكن بالنسبة إلى نسيج القماش ورسم الفيديو ، كان علي تعيين الأبعاد

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

يتم التقديم بشكل صحيح الآن. سيتم إجراء الاختبارات على IOS 11.

danrossi دعنا نعرف كيف تسير الأمور على iOS 11. قد أحتاج في الواقع إلى السير في هذا الطريق أيضًا في مرحلة ما.

طيب لا تقلق. سأضيف اختبارًا أساسيًا مع عرض إحصائيات fps عبر الإنترنت قريبًا إذا كان يبدو أنه يعمل. قد تحتاج إلى أي شيء الآن.

هل توجد طريقة للتحقق من أداء المعالج على IOS؟

لقد أجريت اختبار نسيج القماش. إنه يعمل ولكن الفيديو ذو الدقة الأكبر قد يجعله ينهار.

هذا HLS منخفض الجودة لذا فهو يحافظ على 40 إطارًا في الثانية. بقيت دقة mp4 أكبر ولكن جودة منخفضة أيضًا عند 30 إطارًا في الثانية.

قد يحصل ملف دقة الإنتاج على 10 إطارات في الثانية منه. هذا لجهاز آي باد جديد.

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

هل هذه المشكلة لها علاقة بالمشكلة التي أواجهها في هذه الصفحة الآن: https://digitalejulegaver.firebaseapp.com/#catarina

افتحه في متصفح Safari على جهاز Mac أو جهاز macOS. لا يستطيع أي باد أو آيفون التعامل مع هذه الصفحة حتى لو كانت في متصفح كروم أو موزيلا.

أحصل على صفحة سوداء ، ولكن في الكروم العادي على نظام التشغيل 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

مشكلة كورس؟

هل هذا ممكن ؟

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

أو هذا

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

قوائمي الضخمة من ملفات الاختبار موجودة في تلك التذاكر.

يمكن تعطيل FlipY على النسيج

texture.flipY = false;

كل شيء محلي لذلك لا أرى لماذا يجب أن يتم تنفيذ الكورسات. لكن هذين الرابطين يظهران باللون الأسود في كل من رحلات السفاري والكروم ، على نظام التشغيل Mac 10.13

وميزة FlipY ، لم تفعل الكثير ، بدلاً من مجرد قلب الصورة. لكنها كانت لا تزال سوداء

يبدو أنه في الإصدار 10.13 يعاني من نفس المشكلة مثل IOS 11 حيث تم كسر عمل FlipY. هذه معلومات جيدة. وخطأ آخر للإبلاغ عنه. انها فوضوي جدا انها ترسل لي مجنون. سوف أقوم بتحديث هذا في تذكرة IOS. في الإصدار 10.12 ، يتطلب خطأ FlipY العمل حوله وعمل تذكرة منفصلة له.

لذلك كما هو الحال في ميزة VR الخاصة بي الآن. يجب عليك إجراء فحص لإصدار النظام الأساسي لـ IOS 11 و 10.13 وتوفير برنامج يعرض وضع نسيج القماش لـ hls.

فيما يلي بعض الأدوات الثابتة التي أستخدمها لفحص الميزات وخاصة دعم الكور أو استخدام مصادر بروكسي 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;
    }

لقد قمت ببعض العمل الرائع في هذا الأمر ، آمل أن تحصل على التذاكر: د

هنا نسيج قماش العمل حوله. لقد اضطررت إلى تنشيطه لـ IOS 11. قد أحتاج إلى القيام بفحص إصدار macOS 13 وتمكينه لذلك أيضًا. إذا كنت تعتقد أن الحل البديل قد تم كسره لمدة 10.13؟ لا بد لي من تقديم تقرير لهم.

ماتي ليس لديك أي فكرة ، فأنا لا أحصل على أي فائدة منه ، ممول ذاتيًا ، بخلاف جعل برامج الجميع بما في ذلك ميزتي الخاصة بالكاد تعمل على نظام التشغيل Apple OS haha.

ها هو تكاملي الكامل الآن ، فهو يحتوي على الأعمال بما في ذلك إصلاحات التفاح والعمل حولها. لدي الآن دعم فيديو cubemap.

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

لقد كان هذا مستمرًا منذ أن أبلغت عنه لأول مرة قبل بضع سنوات ولم يفعل شيئًا!

هل هذا العمل بالنسبة لك ؟

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

عندما تقول أن نسيج القماش يعمل حوله ، إلى أين تشير؟

هذا فلبلر يبدو لطيفا! هل شهدت الكثير من الاستخدام؟

ما الذي يجب أن أراه في هذا الرابط: 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 حيث أضفته إلى بطاقة الويب IOS 11 المشار إليها هنا الآن. بافتراض أن "الانحدار" هو الذي كسر تمامًا عرض HLS تمامًا.

danrossi كلاهما يعمل على

لكن لا شيء يعمل على الكروم.

نعم. رائع ، أحتاج إلى التراجع عن تقاريري.

إذن هذه لا تزال مشكلة صحيحة؟

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

إذا كانت هذه هي الحالة ، فاستخدم FlipY كمعيار لنظام macOS ثم.

يجب أن يعمل العرض التوضيحي HLS في هذه الصفحة لكلا المستعرضين. سيستخدم تدفق mediasource للكروم مع المكون الإضافي hls. كما أن لديها حلول FlipY لنظام التشغيل macOS بعد ذلك.

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

انت على حق
http://dev.electroteque.org/webgl/three-hls.html
هذا لا يعمل مع الكروم أو رحلات السفاري

يعمل رابط Flowplayer مع كلا المستعرضين

شكرا يا بطل. لدي معلومات كافية لتحديث التذاكر مرة أخرى. تختلف مشكلة macOS Safari عن مشكلة IOS 11.

تحتاج إلى استخدام مثال نسيج القماش لـ IOS 11.

بالنسبة إلى macOS Safari ، قم بتعطيل FlipY على النسيج وعكس الموضع Y على التظليل لقلبه بالطريقة الصحيحة. تحتاج إلى إجراء انعكاس قناة الألوان على تظليل الأجزاء لنظام IOS 10 HLS أيضًا. كود تظليل أعلاه.

لذلك كنت سعيدًا بحوالي ساعة واحدة هذا الصباح عندما تمكنت من حل مشكلة iOS 11 باستخدام الحل أعلاه ( @ danrossi لقد استلهمت من مثالك على http://dev.electroteque.org/webgl/three-canvas.html) ... ولكن بعد ذلك وضعت نظارتي وشعرت وكأنني مكعب جليدي تحت شمس الصحراء.

هذه هي النتيجة التي حصلت عليها على iPhone 6 Plus مع iOS 11.2.1 ، الرسوم المتحركة في الواقع سلسة جدًا ولكنها قبيحة ، منقطة ، مستعارة ...

السلوك المتوقع هو كما يلي (Nexus 5X مع Android 8 وأحدث Chrome - لا يستخدم هذا الحل البديل أعلاه).

حالة الاستخدام الخاصة بنا هي مشغل 360 HTML5 وفي كلا النموذجين أعلاه الفيديو هو نفس موجز 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);
                });

لذلك سمرت ذلك بعد قليل من الوخز. يبدو أنه في التكوين الخاص بنا ، يجب أن تكون اللوحة القماشية off-dom بالحجم الدقيق لعرض HLS الحالي الذي يتم تشغيله من أجل العرض بشكل صحيح (ومن ثم يحتاج ABR إلى التحديث في كل مرة يتغير فيها التسليم). يُظهر اختبارنا أن هذا يعمل بشكل جيد مع نظام التشغيل iOS 11 (حسنًا أفضل من لا شيء). اترك هذا هنا إذا كان يساعد شخصًا آخر.

نعم ، ومن ثم أفعل ذلك في الحدث المحمل للحصول على عرض الفيديو. لقد اكتشفت هذا من قبل وكان لديه نفس المشكلة.

ومع ذلك ، بالنسبة إلى HLS الأصلي ، لا يوجد حدث عندما يتغير معدل البت؟ أنا فقط أضع في مرة واحدة شخصيًا. إن مقدار العمل الذي يمكن أن تقوم به Apple لا يُصدق بما فيه الكفاية.

لا يوجد حدث ، أعلم به ، تم توفيره بواسطة Safari يمكن استخدامه للكشف عن تغيير في التسليم لـ ABR HLS. نحن نقوم فقط بتحديث عرض القماش خارج الدوم وارتفاعه باستخدام video.videoWidth و video.videoHeight على كل إطار AnimationFrame (والذي ربما لا يكون مثالياً من وجهة نظر الأداء ولكن في هذه المرحلة نجعله يعمل وسنستقر عليه حتى آخر يصبح الخيار متاحًا). يُظهر الاختبار الذي أجريناه أنه يجب تحديث video.videoWidth و video.videoHeight وفقًا لذلك عند عرض عرض جديد.

نعم لما يستحق الأمر هو اختراق بما فيه الكفاية. لذا فإن القيام بذلك يكون مفرطًا خاصةً إذا كانت هناك عبارات شرطية في رد اتصال الإطار. كل ما يصلح الآن على ما أظن.

لا يزالون غير قادرين على توفير حدث تغيير التسليم. أعتقد أن هناك مواصفات لواحد ولكن لم يتم تنفيذها مطلقًا؟

وكيل CORS للتغلب على أخطاء Safari القديمة وإصلاح HLS القابل للطي والآن هذا يكفي.

سعيد لأن كل شيء يعمل. لم أر أي تحديث حتى الآن في التذاكر الخاصة بي لمدة شهر جيد أو حتى الآن.

لا يمكنني تذكر رؤية شيء ما في مواصفات فيديو HTML5 حول حدث تبديل الجودة. هناك مواصفات HLS تحتفظ بها Apple ولكنها لا تصف ما يجب أن يفعله العميل عند حدوث تبديل الجودة. قام Libs مثل hls.js بتنفيذ هذا ولكن هذا غير متاح لـ HLS لفيديو HTML5 الأصلي في Safari.

أدرك فقط أنه يمكنني "تعويض" الاختراق الخاص بنا لاكتشاف التغيير في التسليم من خلال الاستعلام عن video.videoWidth على فترات زمنية ثابتة وعندما يتم اكتشاف تغيير ، قم باستدعاء رد الاتصال تغيير الحجم. سيكون هذا أقل ضرائب. سأقوم على الأرجح بتنفيذ هذا في مرحلة لاحقة في لاعبنا.

radiantmediaplayer يجب أن تكون قادرًا على استخدام حدث "تغيير الحجم" لاكتشاف التغييرات التي تطرأ على الخاصيتين الأساسيتين .videoWidth و .videoHeight.

مرحبا شباب انظر تعليقي هنا. انها تعمل.

يا لها من محنة كانت تجري الاختبارات ، وتجري الحركات. فقط للحصول على أي ردود فعل أو استجابة مناسبة. لقد انتهيت بجدية! لا مزيد من الانحدارات من فضلك !!

قم بتثبيت OSX 11.3 beta وسيعمل. يحتاج 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;
          }

        }
    }

تصحيح نقطة أخيرة مهمة. يعمل تطبيق عرض IOS HLS على قشور قليلة وشديدة الحساسية. يجب أن يبدأ العرض بعد تحميل البيانات.

بمجرد أن يصطدم بخطأ 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 إصلاح الوجه. يتطلب 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 ولكنه لا يعمل ، بينما كان يعمل في Safari (سطح المكتب - mac) ، chrome ، firefox ، فقط ليس في IOS (iphone)

تم إصلاح cors في 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 كان علي أن أجعلها بنفسي.

لقد أزلت جميع أعمال bloaty حول أنظمة IOS المختلفة في ميزتي. ولكن كان على أحدهم استخدام عرض برنامج Canvas لـ 11.0 ... لا يزال يتعين علي إجراء فحوصات النظام الأساسي. مع IOS 13 ، قاموا بكسر عمليات فحص النظام الأساسي الآن. اضطررت إلى إصلاح ذلك في مشروع الكرتون. لقد اكتشفت أن HLS لا يتم عرضه على الفور ويستغرق بعض الوقت في IOS 13 ولكن يتعين علي إعادة النظر في كيفية إصلاح هذه المشكلة.

هم فقط لا يهتمون. لا توجد واجهة برمجة تطبيقات WebXR ، ولا توجد واجهة برمجة تطبيقات Wakelock مثل Android تم تنفيذها للتو.

وفقًا لعملي ، لا بد لي من إعادة التشكيل بشأن تغيير التسليم. وتعطيل التكبير في التحكم في المدار. يؤدي هذا إلى إيقاف العرض الأسود في IOS 13. يجب أن يتحقق IOS 14.

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

لقد اختبرت 14.2. HLS موافق. الإصلاح أعلاه سيفعل ذلك ...