Adding watermark from client side

subhra_saranyu

New Member
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();
 

subhra_saranyu

New Member
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 ?
 

Attachments

subhra_saranyu

New Member
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

Administrator
Staff member
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:
Code:
    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:
Code:
function onPublishing(stream) {
    ...
    $("#switchScreenBtn").off('click').click(function () {
        stream.switchToScreen("screen", true);
    });
    $("#switchCamBtn").off('click').click(function () {
        stream.switchToCam();
    });
}
 
Top