canvas stream to openvidu

[Sahil (Digivive)]

Is that possible to distribute the canvas stream to kurento server with openvidu ?

I am follow this https://developers.google.com/web/updates/2016/10/capture-stream to get canvas stream its working fine. I want to distribute the canvas stream to all subscriber how i can do that. Below is my code 

<canvas id="myCanvas"></canvas>

<video id="testCanvas"></video>

JS ....................

function getRandomColor() {

  var letters = '0123456789ABCDEF';

  var color = '#';

  for (var i = 0; i < 6; i++) {

    color += letters[Math.floor(Math.random() * 16)];

  }

  return color;

}

setTimeout(function(){

var canvas = document.getElementById("myCanvas");//$('#myCanvas');//document.querySelector('canvas');

var ctx = canvas.getContext('2d');

d(ctx);

setInterval(

function(){

d(ctx);}, 2000);

var stream = canvas.captureStream(25);

var video = document.getElementById('testCanvas');

video.srcObject = stream; // want this stream to distribute

video.play();

console.log('stream added');

}, 3000);

function d(ctx, c){

var ball = { 

      radius:20,

      x:200,

      y:150,

      color:getRandomColor(),

      draw:function() {

        var arcStartAngle=0;

        var arcEndAngle=2*Math.PI;

        ctx.fillStyle=this.color

        ctx.beginPath();

        ctx.arc(this.x,this.y,this.radius,arcStartAngle,arcEndAngle);

        ctx.fill();

      }

 }

ball.draw();

}

[Pablo]

Hi, 

Sure, you can use any MediaStreamTrack as videoSource property when calling OpenVidu.initPublisher method. Here in openvidu-browser docs have a complete example on how to build a Publisher with a custom canvas obkject: https://openvidu.io/api/openvidu-browser/classes/openvidu.html#getusermedia

[Sahil (Digivive)]

thank you. its working fine.

Is that possible to set the width and height of video when calling OpenVidu.initPublisher method and publish the stream ?

As in vuejs child-component, where i am not able to apply the CSS on video element. So, I just want to know is their any parameter or something else, where i can apply the width or height to video when videoElementCreated with OpenVidu

[Pablo]

You can set the resolution of the Publisher's video: https://openvidu.io/api/openvidu-browser/interfaces/publisherproperties.html#resolution (this property behaves differentely depending on the client's platform. Take that into account: for example Chrome is able to change the camera resolution in the software plane, but Firefox only accepts valus that are actually defined in the camera at the hardware/driver level. At least last time I checked).

But that changes the actual resolution of the video stream track. If you are only interested in changing the width an height of the video showing the stream, you should be able to apply any CSS property on any HTML element, even on VueJS or any other declarative frontend framework such as React or Angular. I'd do a little deeper research on the subject.

Cheers.

[Sahil (Digivive)]

yes you are right. For now i am playing with video player with undefined properties. 

Now i am trying to set the resolution base on Publisher internet speed. You have any suggestion for the same ?