Video Live streaming not work

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


    // 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 =;

    style.width = '1px';

    style.height = '1px';

    style.position = 'absolute';

    style.opacity = '0';

    style.zIndex = '-1000';

    style.pointerEvents = 'none';


    // 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



    video.addEventListener('canplaythrough', function (e) {, this.videoTexture);;



    // set video source

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




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



    }, this);


// update code called every frame

VideoTexture.prototype.update = function(dt) {

    // Transfer the latest video frame to the video texture



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

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:

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