Add whiteboard annotations with screen share

How to implement?
1

Hi, i want to add a whiteboard component which would be shared with other members like annotations in google classroom. I will be able to create a whiteboard component (God willing) but the problem is that my requirement is when i press white board sharing option it should automatically open whiteboard and shared automatically without prompting ‘Application’ or ‘Entire Screen’ dialog box.

2

When you say “whiteboard”, are you talking about simple screen sharing? If that’s the case, then there’s not much you can do to customize screen selection. It is completely dependant on the browser, so users are conditioned to do what they allow them to do.

1 Like
3

Hello,

Seems like a shared canvas for the web clients would be a more suitable solution.

Regards,
Mihail

4

Hi, I am using openvidu tutorials, and i replicate the screenshare function to share whiteboard, i am using a canvas as a whiteboard now i want to live stream the white board on single button click it should not open the dialog box to ask weather to share application or tabs so below is my function kindly tell me how can i pass the reference of my canvas into the video source:

   whiteBoardShare() {
    const videoSource = navigator.userAgent.indexOf('Firefox') !== -1 ? 'window' : 'screen';
            const publisher = this.OV.initPublisher(
                undefined,
                {
                    videoSource: videoSource,
                    publishAudio: localUser.isAudioActive(),
                    publishVideo: localUser.isVideoActive(),
                    mirror: false,
                },
                (error) => {
                    if (error && error.name === 'SCREEN_EXTENSION_NOT_INSTALLED') {
                        this.setState({showExtensionDialog: true});
                  } else if (error && error.name === 'SCREEN_SHARING_NOT_SUPPORTED') {
                        alert('Your browser does not support screen sharing');
                    } else if (error && error.name === 'SCREEN_EXTENSION_DISABLED') {
                       alert('You need to enable screen sharing extension');
                    } else if (error && error.name === 'SCREEN_CAPTURE_DENIED') {
                        alert('You need to choose a window or application to share');
                    }
                },
            );
5

Hello,

Initially I was thinking of a much more complex solution, but just tested this and it works:

var canvas = document.querySelector('canvas');
var stream = canvas.captureStream();
videoSource = stream.getVideoTracks()[0];

So you don’t use the normal screen sharing feature, you just add the canvas captured video track as the videoSource.

Good luck,
Mihail

2 Likes
6

Thanks that worked. but now having some layout issue let me fix those if not i will open another issue thanks bro God bless you.

1 Like