Assigning stream video to player entity using peerjs

Hi, I’m not a pro and I got stuck for couple weeks on having the stream video through peerjs into player entity. The idea is to get connected into 1 “public” room and showing each of webcam stream which assigned to each player entity.

The basic flow are connect to peerjs server, emit player to the room, getusermedia, each connected user will get call.on(stream), answer with (stream), assign other user stream into videotexture, assign videotexture to cloned material and assign cloned material into cloned entity.

var Network = pc.createScript('network'); = null;
Network.socket = null;

Network.prototype.initialize = function() {
    this.player ="FPS Character Controller");
    this.other ="Other FPS Character Controller");
    var url_string = window.location.href;
    var url = new URL(url_string);
    var idaw = url.searchParams.get("idaw");

          var socket = io.connect('https://someserver/',{
            transports: ["polling"]
                    Network.socket = socket;

                    const myPeer = new Peer(idaw, {
                    host: 'someserver',
                    port: 443,
                    secure: true

                    const peers = {};
                    var self = this;

                    video: true,
                    audio: true
                    }).then(stream => {

                    myPeer.on('call', call => {
                        const video = document.createElement('video');
                        call.on('stream', userVideoStream => {
                        addVideoStream(video, userVideoStream,;

                    socket.on('user-connected', (userId) => {
                        connectToNewUser(userId, stream);


                    socket.on ('playerData', function (data) {

                    socket.on ('playerJoined', function (data) {

                    socket.on ('playerMoved', function (data) {

                    socket.on ('killPlayer', function (data) {
                        if (peers[data]) peers[data].close();

                    myPeer.on('open', id => {
                    socket.emit('join-room', 'public', id);
                    socket.emit ('initialize', id);


                    function connectToNewUser(userId, stream) {
                        const call =, stream);
                        const video = document.createElement('video');
                        call.on('stream', userVideoStream => {
                            addVideoStream(video, userVideoStream, userId);
                        call.on('close', () => {

                        peers[userId] = call;
                        console.log('connect to new user');

                    function addVideoStream(video, stream, userId) {
                      var videoTexture = new pc.Texture(, {
                        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,
                        autoMipmap: true
           = "vidTexture"+userId;
                    //set video to videotexture
                    video.srcObject = stream;
                    video.addEventListener('loadedmetadata', () => {

                    // Get the material that we want to play the video on and assign the new video
                    // texture to it.
                    var newMaterial ='Purple').clone();
                    newMaterial.emissiveMap ="vidTexture"+userId);
           = "vidMaterial"+userId;

                    //assign material to entity by userid
                    var liveEntity ='videoLive').clone();
           = "liveEntity"+userId;
                    liveEntity.render.meshInstances[0].material ="vidMaterial"+userId);



Network.prototype.initializePlayers = function (data) {
    this.players = data.players; =;

    for(var id in this.players){
        if(id !={
            this.players[id].entity = this.createPlayerEntity(this.players[id]);
    this.initialized = true;

Network.prototype.addPlayer = function (data) {
    this.players[] = data;
    this.players[].entity = this.createPlayerEntity(data);

Network.prototype.movePlayer = function (data) {
    if (this.initialized && !this.players[].deleted) {
        this.players[].entity.rigidbody.teleport(data.x, data.y, data.z);

Network.prototype.removePlayer = function (data) {
    if (this.players[data].entity) {
        this.players[data].entity.destroy ();
        this.players[data].deleted = true;

Network.prototype.createPlayerEntity = function (data) {
    var newPlayer = this.other.clone();
    newPlayer.enabled = true;

    newPlayer.findByName("TextOther").element.text =;


    if (data){
        newPlayer.rigidbody.teleport(data.x, data.y, data.z);
    return newPlayer;

This is the entity to be cloned :

Please help, it means so much. Thanks.

What issue exactly are you encountering? Assigning the stream into the videotexture? Assigning the videotexture to a cloned material? Assigning the material into an entity?

All I’ve got is the peer connection is ok. But assigning stream to videotexture, material and entity is not working. Is there anything wrong with my code? Thanks.

Hi @Hypnotized_Introvert,

I think this line won’t work since setSource isn’t a method of an asset, and this method returns an asset:"vidTexture"+userId).setSource(video);

Try studying the following project on how to go from a video stream to uploading it to a video texture:


Hey @Hypnotized_Introvert,

In addition to comparing your code with the one available on the Video Textures tutorial page as Leonidas mentioned, I’d also take a look at this forum thread, where users managed to implement something very similar. Let me know if you run into further trouble.

1 Like

I’ve also found this older project of mine that uses a web camera, if available, to render the video stream on a texture:

1 Like