Any way to put the camera view underneath the HTML?

[devand123]

Is there any way to put the native camera view (whether its publisher, or subscriber) under the cordova app, instead of having it overlap?

I need to have HTML buttons overlayed, so that user's can perform certain actions.

[felquis]

What you want is similar to setClickable from Google Maps plugin https://github.com/wf9a5m75/phonegap-googlemaps-plugin/wiki/Map#mapsetclickable

Very useful

[devand123]

Thanks for the reply;

I ended up putting the layer displaying the camera view underneath the webView.

[mark-veenstra]

@devand123 do you have and willing to share some code on this?

[byronalfonso]

Hi @devand123 & @felquis! Any codes or techniques that you can share? I'm having the same issues. Thanks!

[mark-veenstra]

@byronalfonso You could go through the commits of @devand123 his commits on his own fork of this plugin: devand123@11754ae. Maybe that will help you.

[rafaelcmrj]

@mark-veenstra I tried to add the @devand123 plugin but it doesn't works. Did you could add layers over the video ?

[devand123]

@rafaelcmrj for which platform are you testing?

[rafaelcmrj]

@devand123 Cordova for iOS and Android

[rafaelcmrj]

video doesn't shown but the xcode console says it's alright (successful connected)

[devand123]

Ah – do you have this in your css?

html, body { background: transparent!important; }

[rafaelcmrj]

uhmmmm no... let me try it

[devand123]

The webview needs to be completely transparent in order to see the video which is layered below it.

[rafaelcmrj]

and can I add any dom element over it ?

[devand123]

Basically, the entire cordova application is over the camera/video view. So yes, anything your application displays is over the video.

[rafaelcmrj]

@devand123 the video is shown right now, but how can I set the position ? I'm trying to set the css but it doesn't works...

#webcam {
width: 100%;
height: 240px;
margin-top: 20px;
}

the video still on top 0,0

[rafaelcmrj]

video is shown but still on top..any param do send to background ?

[devand123]

So the video is a native element, so you would have to either extend the cordova API to edit the width/height of the video layer natively. As mentioned previously it should be completely behind the entire webview.

[rafaelcmrj]

@devand123 but your code don't put the video behind the webview ? I thought so...

[devand123]

It does.

[rafaelcmrj]

:S I'm really confused right now... what should I do to send the video to background ?

[devand123]

It should automatically just happen – if you are using my plugin.

[rafaelcmrj]

yeah, I'm using but video still showing on top:

Javascript

var publisher = TB.initPublisher(apiKey, 'webcam');

var session = TB.initSession(apiKey, sessionId); 

session.on({
        'streamCreated': function( event ){
            var div = document.createElement('div');
            div.setAttribute('id', 'stream' + event.stream.streamId);
            document.body.appendChild(div);
            session.subscribe( event.stream, div.id, {subscribeToAudio: false} );
        }
});
session.connect(token, function(){
            session.publish( publisher );
});

HTML

<div id="webcam"></div>

CSS

html, body { background: transparent !important; }

[rafaelcmrj]

@devand123 worked.. I tested use * { bg transparent } and worked... something is setting background-color (maybe ion-panel)... I'll figure out it and fix.. thanks

[rafaelcmrj]

@devand123 it's almost done... couldn't us remove the 'play' button over the video ?

[devand123]

I think that would be done through html attributes.

iirc its something like controls="false" on the video element

<video id="webcam" controls="false"></video>

Or something with the opentok API, checkout their docs.

[rafaelcmrj]

doesn't works :/

[ghost]

I've changed how the plugin work to put all video below the webview. I can't show the actual cordova project but here is my forked project
(running with 2.6.0 sdk and insert below, but not using insert mode) https://github.com/darrenrogan/cordova-plugin-opentok/ its a bit too far customized to create a pull request and I've quit my position so I doubt I'll spend the time updating it to make it pullable. Hopefully this is useful

[mark-veenstra]

I had these changes pulled into my own fork and after that updated my app and tested, but I only have black screens and no cams loaded.

[ghost]

I'm using that in an app and its working nicely with the controls overlaid on the video. Ensure you have all the backgrounds to transparent. The plugin draws black squares in the webview and then creates another layer with the video in roughly the same place. These may be blocking the actual video layers when you put it below the webview.

[Fifcyk]

Hi!
I have similar problem, I have my own menu and want to display it over the video…
Basically video is displaying over everything in the app, even over the top iOS bar background where you have battery, time etc. (but not over the time and battery level, just over it’s background).
If I add position absolute (or fixed) and z-index -1 to OT_subscriber class, it goes under whole app, but I can’t see it.. (only see this small part displayed on top iOS bar so I know that the video is still working) I can see only black screen - I tried to set background transparent on body, even removed everything else -but then I saw only white screen and video was still under it. Another problem is that, when video is under everything I still can’t click my menu buttons or anything else on this view. Also setting up position absolute/fixed and higher z-indexes on my menu and its' elements doesn’t help…
I’m using this plugin with iOS10 and Xcode8 an running on iPad or iPhone 6

Does anyone have any solution for this problems?

[devand123]

@Fifcyk have you tried going through each comment in this thread?

[Fifcyk]

Sorry @devand123 I see I didn't read this thread carefully enough.
Should your plugin: https://github.com/devand123/cordova-plugin-opentok
Help to solve this problem?

[devand123]

No worries – my modification of the plugin should help you get there. Also, follow along this thread to see a couple of other little things you may have to do in conjunction to just using my modification.

[Fifcyk]

Thank's I'll try and write later if I succeed or no.

[Fifcyk]

@devand123 I have tried your plugin but it didn’t work for me (it didn’t compile, maybe because I use XCode8 and iOS10 and also your plugin uses Opentok SDK 2.3.1, songz's is 2.5.0).
So I forked songz’s plugin and merged with your branch.
Here it is: https://github.com/Fifcyk/cordova-plugin-opentok

Because that cordova changed a little bit in version 4.0 this method:

-(CDVPlugin*) initWithWebView:(UIWebView *)theWebView {

    theWebView.backgroundColor = [UIColor clearColor];
    [theWebView setOpaque:NO];
    theWebView.superview.backgroundColor = [UIColor blackColor];
    [theWebView.superview setOpaque:NO];

    self = (OpenTokPlugin*)[super initWithWebView:theWebView];

    self.webView.superview.backgroundColor = [UIColor blackColor];
    [self.webView.superview setOpaque:NO];
    self.webView.backgroundColor = [UIColor clearColor];
    [self.webView setOpaque:NO];

    // init myQueue
    myQueue = dispatch_queue_create("My Queue",NULL);

    return self;
}

didn’t work i found information that it should be moved to pluginInitialize (https://github.com/apache/cordova-ios/blob/master/guides/API%20changes%20in%204.0.md)
So i did that like this:

-(void) pluginInitialize{
    callbackList = [[NSMutableDictionary alloc] init];

    [self.webView.superview setOpaque:NO];
    self.webView.backgroundColor = [UIColor clearColor];
    [self.webView setOpaque:NO];

    // init myQueue
    myQueue = dispatch_queue_create("My Queue",NULL);
}

I didn’t know where to put all this code but after i made this, plugin run again and as you said it place video under the cordova app (so after making all background’s to transparent i can see it under my menu).

But, I have some bug in the video streams behavior…
Here is part of my code in javascript:

    var div1 = document.createElement('div');
        div1.setAttribute('id', 'publisherContainerVideo');
        document.body.appendChild(div1);

        publisher = TB.initPublisher(apiKey, "publisherContainerVideo", {height:'150px', width: '150px'}, function(error){            
            if(error)
                alert("Error initializing publisher" + error.message);
        });
        session = TB.initSession(apiKey, sessionId);

        session.on({
            'streamCreated': function (event) {
                var div = document.createElement('div');
                div.setAttribute('id', 'stream' + event.stream.streamId);
                document.body.appendChild(div);
                session.subscribe(event.stream, div.id, {insertMode: "append", height:’100%’}, function(error){
                    if(error) {
                        console.log(error);
                        self.showMessageToUser(error.message);
                    }
                });
                TB.updateViews();
            }
        });

Problem is that the Publisher stream is displaying in full size of window and what i think it covers Subscriber stream.
If I comment the TB.initPublisher method (I have no publisher of course) but I have subscriber video in a full screen as it should be.
If I delete insertMode: ”append” in session.subscribe() - then subscriber is not attaching to webpage but Publisher is displaying in proper size {height:'150px', width: '150px’}.
Do anyone know what could cause this problem? maybe this is problem after merging or moving jus part of code to pluginInitialize, or maybe something else?

[Fifcyk]

I found bug, the couse was in TB.updateViews();
I think i twas refreshing video sterams and didin't catch all CSS and itnitial values.