basic demo "Video" for HLS source

yasuhiko · 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

ivan.popelyshev · December 12, 2017

Is it possible to do through HTML <video> element, on black html page?

yasuhiko · 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 · 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.

yasuhiko · 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=webgl
https://caniuse.com/#search=h264
https://caniuse.com/#search=aac
https://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

yasuhiko · 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.

yasuhiko · 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.

jonforum · 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'));
};

yasuhiko · 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.

Sign In

basic demo "Video" for HLS source

Recommended Posts

yasuhiko

Link to comment

Share on other sites

ivan.popelyshev

Link to comment

Share on other sites

yasuhiko

Link to comment

Share on other sites

ivan.popelyshev

Link to comment

Share on other sites

yasuhiko

Link to comment

Share on other sites

yasuhiko

Link to comment

Share on other sites

yasuhiko

Link to comment

Share on other sites

jonforum

Link to comment

Share on other sites

yasuhiko

Link to comment

Share on other sites

Join the conversation

Recently Browsing 0 members

Browse

Activity