Adding watermark from client side

[subhra_saranyu]

Hi guys,

we are trying to add custom watermark to our WebRTC stream by intercepting the stream and Flashphoner client library communication, can you please suggest me where I can intercept the stream and add the logo.

our workflow should look like this WebRTC Stream -> Intercept Stream (Adding Watermark) -> Passing Modified Stream to Flashphoner -> Call to publish();

 

[Max]

Hello

This is current state:

Web SDK

Supported.

Stream Filter - Web SDK 2.0 - EN - Flashphoner Documentation

docs.flashphoner.com

iOS SDK

Direct PNG overlay.
Supported.

https://docs.flashphoner.com/display/IOSSDK2EN/iOS+Image+Overlay+Swift

Android SDK

Pending implementation.
ETA 1 week. Internal ticket WCS-3177.

What is your SDK?

 

[subhra_saranyu]

Max, I need Web Solution for now, I think that you already shared, let me try that one

 

[subhra_saranyu]

Max, I tried this, the issue I am facing is when I am setting this customStream in the constrains that is not working

what we are trying to do is, we developed a JavaScript plugin which is -

1. getting webcam feed
2. converting to canvas then adding watermark and then again converting that to stream
3. now I want to pass this modified stream to flashphoner, for that I am using

constraints = {
audio: false,
video: false,
customStream: modifiedRTCStream
}

but looks like this is not working, as soon as I am doing publish() screen is getting blank.

On the Screen shot A is the output after adding watermark, B is the default local video feed, now I want to use A as a source of stream, how can I do that ?

 

[Max]

Try our default sample:

Stream Filter

https://demo.flashphoner.com/client2/examples/demo/streaming/stream_filter/stream_filter.js

Does it work?

 

[subhra_saranyu]

Hi, Max while using canvas method we are not able to switch between Screen & WebCam using switchToCam() and switchtoScreen() method, is this a limitation ? can that be possible with Canvas capturing method ?

 

[Max]

Hi, Max while using canvas method we are not able to switch between Screen & WebCam using switchToCam() and switchtoScreen() method, is this a limitation ? can that be possible with Canvas capturing method ?

Yes, it is possible. You should set publishing framerate in constraints:

    session.createStream({
        name: streamName,
        display: localVideo,
        cacheLocalResources: true,
        receiveVideo: false,
        receiveAudio: false,
        useCanvasMediaStream: true,
        constraints: {
            video: {
                frameRate: 30
            },
            audio: true
        }

Then you can call Stream.switchToScreen() function, for example by clicking a button:

function onPublishing(stream) {
    ...
    $("#switchScreenBtn").off('click').click(function () {
        stream.switchToScreen("screen", true);
    });
    $("#switchCamBtn").off('click').click(function () {
        stream.switchToCam();
    });
}