Video Live streaming not work

Help & Support
#1 
var VideoTexture = pc.createScript('videoTexture');

// VideoTexture.attributes.add('videoAsset', {

//     title: 'Video Asset',

//     description: 'MP4 video asset to play back on this video texture.',

//     type: 'asset'

// });

VideoTexture.attributes.add('videoUrl', {

    title: 'Video Url',

    description: 'URL to use if there is video asset selected',

    type: 'string'

});

VideoTexture.attributes.add('playEvent', {

    title: 'Play Event',

    description: 'Event that is fired as soon as the video texture is ready to play.',

    type: 'string',

    default: ''

});

// initialize code called once per entity

VideoTexture.prototype.initialize = function() {

    var app = this.app;

   

    // Create HTML Video Element to play the video

    var video = document.createElement('video');

    video.loop = true;

    // muted attribute is required for videos to autoplay

    video.muted = true;

    // critical for iOS or the video won't initially play, and will go fullscreen when playing

    video.playsInline = true;

   

    // needed because the video is being hosted on a different server url

    video.crossOrigin = "anonymous";

   

    // autoplay the video

    video.autoplay = true;

    // iOS video texture playback requires that you add the video to the DOMParser

    // with at least 1x1 as the video's dimensions

    var style = video.style;

    style.width = '1px';

    style.height = '1px';

    style.position = 'absolute';

    style.opacity = '0';

    style.zIndex = '-1000';

    style.pointerEvents = 'none';

    document.body.appendChild(video);

    // Create a texture to hold the video frame data            

    this.videoTexture = new pc.Texture(app.graphicsDevice, {

        format: pc.PIXELFORMAT_R8_G8_B8,

        minFilter: pc.FILTER_LINEAR_MIPMAP_LINEAR,

        magFilter: pc.FILTER_LINEAR,

        addressU: pc.ADDRESS_CLAMP_TO_EDGE,

        addressV: pc.ADDRESS_CLAMP_TO_EDGE,

        mipmaps: true

    });

    this.videoTexture.setSource(video);

    video.addEventListener('canplaythrough', function (e) {

        app.fire(this.playEvent, this.videoTexture);

        video.play();

    }.bind(this));

       

    // set video source

   // video.src = this.videoAsset ? this.videoAsset.getFileUrl() : this.videoUrl;    

    video.src=this.videoUrl;

    document.body.appendChild(video);

    video.load();

    this.on('destroy', function() {

        this.videoTexture.destroy();

        video.remove();

    }, this);

};

// update code called every frame

VideoTexture.prototype.update = function(dt) {

    // Transfer the latest video frame to the video texture

    this.videoTexture.upload();

};

im using this script but once i launch the playcanvas then it play nothing
image

#2

Without a link to the project to look at, it’s difficult to say, but at a quick glance it looks like the way you’re ordering your operations, including where you actually set the source seems a little off to me.

I also recognize this as the tutorial script from the Video Texture TV demo. It was originally written assuming that the video would be included in the build. There is actually a demo project that uses a Video texture from an external source here:

https://developer.playcanvas.com/en/tutorials/webxr-360-video/

You should find that the media-player script there is more robust and closer to what you’re looking for.

I hope this is helpful!

1 Like