yasuhiko Posted December 12, 2017 Share Posted December 12, 2017 Hi, I am trying to draw HLS video stream over PIXI video texture on iOS safari browser (iOS 11.2) referring http://pixijs.io/examples/?v=v4.6.2#/basics/video.js but not succeeded. (Sorry for poor English as I am Japanese) When I set mp4 video as source, the demo code worked over iPhone + mobile safari (OS: 11.2). But when I set url of HLS (m3u8) and tapped play button, video did not drawn. I tried some change but not succeeded to play HLS stream over PIXI video texture. Below is my code, modified part of http://pixijs.io/examples/?v=v4.6.2#/basics/video.js . ... function onPlayVideo() { // Don't need the button anymore button.destroy(); /// modify start // mp4 // (1) mp4 OK : video/audio played (#fvlivedemo.gnzo.com is my own server) // var texture = PIXI.Texture.fromVideo('http://fvlivedemo.gnzo.com/testVideo.mp4'); // (2) mp4 OK : video/audio played // var texture = PIXI.Texture.fromVideoUrl('http://fvlivedemo.gnzo.com/testVideo.mp4'); // HLS // (3) Not work : when play button pressed, loading m3u8 not started. // #http://184.72 ... is effective m3u8 stream // var texture = PIXI.Texture.fromVideo('http://184.72.239.149/vod/smil:BigBuckBunny.smil/playlist.m3u8'); // (4) Not work : when play button pressed, loading m3u8 not started. // var texture = PIXI.Texture.fromVideoUrl('http://184.72.239.149/vod/smil:BigBuckBunny.smil/playlist.m3u8'); // (5) Not work : when play button pressed, loading m3u8 started and audio play started. but video is not drawn on canvas. let baseVideoTexture = PIXI.VideoBaseTexture.fromUrl({ src: 'http://184.72.239.149/vod/smil:BigBuckBunny.smil/playlist.m3u8', mime: 'application/vnd.apple.mpegurl' }); var texture = PIXI.Texture.from(baseVideoTexture); /// modify end // create a new Sprite using the video texture (yes it's that easy) var videoSprite = new PIXI.Sprite(texture); ... Please help/guide me regarding right way/manner to play HLS stream over video texture of PIXI. (i.e. how to fix above code) entire HTML which I modified is attached (pixi_video_hls.html) If more information needed for answer, let me know. Thank you in advance. pixi_video_hls.html Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted December 12, 2017 Share Posted December 12, 2017 Is it possible to do through HTML <video> element, on black html page? Quote Link to comment Share on other sites More sharing options...
yasuhiko Posted December 12, 2017 Author Share Posted December 12, 2017 Ivan-san, Thanks. I tried if I can do through with the <video> element. But it did not work. I added video tag as below <!doctype html> <html> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.6.2/pixi.min.js"></script> <body> <!-- add video tag--> <video id="vdo" preload="auto" crossorigin="anonymous" playsinline webkit-playsinline> <source src="http://184.72.239.149/vod/smil:BigBuckBunny.smil/playlist.m3u8" type="application/x-mpegURL"> </video> <!-- add --> <script> // demo javascript code var app = new PIXI.Application(800, 600, {backgroundColor : 0x000000}); // black background document.body.appendChild(app.view); ... </script> and modified demo code as below. function onPlayVideo() { // Don't need the button anymore button.destroy(); // create a video texture from a path //////////////// modify start ////////////////// var video = document.getElementById('vdo'); // (1) Not worked //let baseVideoTexture = PIXI.VideoBaseTexture.fromVideo(video); //var texture = PIXI.Texture.from(baseVideoTexture); // (2) Not worked var texture = PIXI.Texture.fromVideo(video); //////////////// modify end /////////////////// // create a new Sprite using the video texture (yes it's that easy) var videoSprite = new PIXI.Sprite(texture); videoSprite.width = app.renderer.width; videoSprite.height = app.renderer.height; app.stage.addChild(videoSprite); } ## the other code I mentioned is same with http://pixijs.io/examples/#/basics/video.js With above code, result of both (1) (2) were same like below. - When play button tapped, the video tag started play, but canvas area remained black (nothing drawn). The attached file is entire HTML I used to check. Please help, Thank you in advance. pixi_video_hls_vtag.html ivan.popelyshev 1 Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted December 12, 2017 Share Posted December 12, 2017 Yasuhiko-san, do you mind if add a link to this thread from pixi wiki? (https://github.com/pixijs/pixi.js/wiki/v4-Gotchas) The problem is known, different browsers understand different formats. I dont know much about iOS, except that I remember <video>+webgl is slow there, compared to other platforms. Please look up "Browser compatibility" sheet https://developer.mozilla.org/en-US/docs/Web/HTML/Supported_media_formats I guess safari devs also made something like that, if you find it, please post it here. Quote Link to comment Share on other sites More sharing options...
yasuhiko Posted December 12, 2017 Author Share Posted December 12, 2017 Ivan-san, Thanks. Please add a link to this thread from pixi wiki. About browser compatibility, I checked below URL. https://caniuse.com/#search=webglhttps://caniuse.com/#search=h264https://caniuse.com/#search=aachttps://caniuse.com/#search=hls # I am using H264/AAC + HLS for video format and target browser is mobile safari. Seemingly mobile safari can handle webgl/hls/h264/aac. I wonder if PIXI.js really can not handle HLS as a source of video texture. If so I hope developer of PIXI.js kindly improve this point soon. Thanks ivan.popelyshev 1 Quote Link to comment Share on other sites More sharing options...
yasuhiko Posted December 13, 2017 Author Share Posted December 13, 2017 I found this information. https://bugs.webkit.org/show_bug.cgi?id=179417 I think this issue (HLS stream can not be drawn with mobile safari with PIXI.js) is due to apple side. Thanks. ivan.popelyshev 1 Quote Link to comment Share on other sites More sharing options...
yasuhiko Posted May 17, 2018 Author Share Posted May 17, 2018 I found that the issue of apple https://bugs.webkit.org/show_bug.cgi?id=179417 (HLS WebGL video textures black rendering since IOS 11) seemed to be solved from iOS 11.3 or later. I was still wanted to implement HLS-sourced video texture sample for iOS safari, so I managed to make workable sample (refer snippet described below after) where HLS stream is used as source of video texture, working over mobile safari (iOS11.3)) with PIXI.js v3.0.11 . I wanted to apply v4 (v4.7.3) to this sample to improve quality but failed. I simply changed the version of pixi.js which is included via CDN. Then even html and javascript code (except version of PIXI) are all same with original of v3.0.11, Nothing was drawn on the canvas area. To separate issue, I changed "src" of video from HLS(m3u8) to .mp4, with pixi version v4.7.3, (other code is same with v3.0.11) then it works normally (video of .mp4 was drawn normally on canvas area). So I think that the manner / grammar of javascript/jquery of sample is correct. But for safe, I hope someone's help for checking if the below sample(of v3.0.11) can be OK for v4.7.3. This sample of below refers an HLS stream of H.264/AAC. Mobile safari is compatible with them. (regardless version, codec/format is OK) I think, If my current sample of v3.0.11 is also correct with PIXI v4.7.3, This phenomenon (video texture not work with HLS source on iOS 11.3) should be the matter of PIXI itself. Then I hope it to be fixed by PIXI developer. Current sample of v3.0.11 is below: <!doctype html> <html> <head> <meta charset="UTF-8"> <!-- include pixi.js jquery --> <script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/3.0.11/pixi.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <body style="background: #dddddd;"> <!-- button to start play --> <div id="btn"><button id="bt" onClick="onPlayVideo()" style="width: 200px; height: 40px; line-height: 20px; font-size: 20px; margin: 10px; background-color: red; color: white;">Start to Play</button></div> <!-- video --> <video id="myvideo" crossorigin="anonymous" src="http://184.72.239.149/vod/smil:BigBuckBunny.smil/playlist.m3u8" loop autobuffer preload="auto" playsinline webkit-playsinline style="display: none"></video> <script> var _video; // video tag var renderer; // Pixi renderer var container; // Pixi container // animation function animate() { requestAnimationFrame(animate); renderer.render(container); } // To start video function onPlayVideo() { _video.play(); } $(function(){ // generate renderer, add view to body renderer = new PIXI.autoDetectRenderer( 640, 360, { transparent:false } ); document.body.appendChild(renderer.view); // get video element _video = document.getElementById("myvideo"); // get video Texture/Sprite var videoTexture = PIXI.Texture.fromVideo(_video); var videoSprite = new PIXI.Sprite(videoTexture); videoSprite.width = renderer.view.width; videoSprite.height = renderer.view.height; // Add Sprite to container container = new PIXI.Container(); container.addChild(videoSprite); // Start animation requestAnimationFrame(animate); }); </script> </body> </html> # I think above v3.0.11 sample work simply with "copy and paste" as .html over any web server. for v4.7.3, I simply changed line 7 as below. (This did not work over iOS 11.3 safari) <script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.7.3/pixi.min.js"></script> But with inclusion of v4.7.3 and change "src" of video tag to .mp4 (i.e. below), this sample worked (mp4 video drawn normally on canvas area). <video id="myvideo" crossorigin="anonymous" src="./some_video_file_h264_AAC.mp4" loop autobuffer preload="auto" playsinline webkit-playsinline style="display: none"></video> I checked above sample with iPhone 6 (iOS 11.3.1) safari browser. If there is a un-understandable point, or more information is needed, feel free to let me know. #Also, if this phenomenon is known issue and currently impossible to fix, let me know. Thank you in advance. Quote Link to comment Share on other sites More sharing options...
jonforum Posted May 17, 2018 Share Posted May 17, 2018 i don't know if this can help you but https://github.com/rpgtkoolmv/corescript/blob/master/js/libs/iphone-inline-video.browser.js also /** * Checks whether the browser is Mobile Safari. * * @static * @method isMobileSafari * @return {Boolean} True if the browser is Mobile Safari */ Utils.isMobileSafari = function() { var agent = navigator.userAgent; return !!(agent.match(/iPhone|iPad|iPod/) && agent.match(/AppleWebKit/) && !agent.match('CriOS')); }; Quote Link to comment Share on other sites More sharing options...
yasuhiko Posted May 17, 2018 Author Share Posted May 17, 2018 Jonforum san, thank for reply. I recognized that information you give me is related to inline-video play on Mobile safari. I already cleared that point with attribute of video tag "playsinline webkit-playsinline", (above snippet will work over mobile safari with inline manner). So I am afraid to say I thank your information, but it was not match with my concern and I can not close this thread with this information. Please help/guide me regarding right way/manner to play HLS stream over video texture with PIXI v4. (i.e. how to fix above snippet for PIXI v3.0.10). Thank you in advance. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.