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: https://github.com/devand123/cordova-plugin-opentok/commit/11754aef6371fa17936d1944ec1b278bc8523781. 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?