Twilio programmable video zoom in camera - javascript

I am using twilio video javascript sdk in a browser (or mobile webview). It works just fine, both ends publish their tracks. But I have not found any way for a user to zoom in his/hers camera exept from a custom css solution. Is there any "native" way to zoom in a camera that is powering the published track in twilio video/webrtc?
Thanks in advance
Edit:
Actually, the navigator.mediaDevices.getSupportedConstraints().zoom is true in all cases which means it is indeed supported by webview but the track.mediaStreamTrack.getCapabilities() does not have the zoom property when in android webview. When in android chrome it works just fine. Does anyone know why this happens?

There is a relatively new API for pan-tilt-zoom that works with getUserMedia.
In a nutshell you should be able to use
navigator.mediaDevices.getUserMedia({video: {zoom: true}})
and then use MediaStreamTrack.applyConstraint to change the zoom.
See the web.dev article for the details (as well as pitfalls)

Related

How can I record videos on safari

Hi I have been using the browser camera on my website for users to record a life test, I have used MediaRecorder and it works quite well on chrome and firefox, but not on safari.
Do you know any alternative to MediaRecorder for recording videos from the browser camera with safari?
It can be using the video tag of html, or some html 5, if you have an example of implementation would be much better
Thank you very much
You can use it in safari
use the following steps
Go to Safari → Preferences → Advanced
Enable the option to “Show Develop menu in menu bar” at the bottom
Go to Develop → Experimental Features
Enable MediaRecorder
Reference this document
Or as alternative Audio Recorder Polyfill
https://github.com/ai/audio-recorder-polyfill

A-Frame look-controls very unstable on older devices

I'm building a 360 panorama viewer with A-Frame 1.0.4 and I'm having some trouble with older devices that I don't know how to solve. I'm testing in a WebView inside an Android application.
On most recent devices, the gyroscope and accelerometer work great, but on older devices (for example ASUS X008D), it's all shaky, the view can't stay still when I put the phone on the table or when I hold it. I thought it could be due to polyfills but I can't figure how. I added some logs to check for DeviceMotionEvent and DeviceOrientationEvent and both are recognized but it seems like it's not enough.
How could I be sure that the events are handled correctly and eventually disable the hmd in look-controls manually when it's not stable enough? There would still be the dragging and I would be fine with that.
Thanks for your help :)
After further investigations I found out where the issue came from. It was because the Sensor API was not available on some devices and the Gyroscope wasn't read correctly. If I understood correctly there was a fallback on DeviceMotion but it was probably not good on older devices, I don't know...
What I did to "fix" this was writing this little snippet to check that the Gyroscope class was available. If it was not I disabled all movements from look-controls component to allow only manual movements. I hope it can help anyone who meets this issue. It's kinda quick'n'dirty but it did the job so I'm okay with this.
var gyroscope = null;
try {
gyroscope = new Gyroscope();
gyroscope.addEventListener('error', event => {
document.getElementById("camera").setAttribute("look-controls", "magicWindowTrackingEnabled: false");
});
gyroscope.start();
// Stop the gyroscope after trying so it does not run in background.
setTimeout(function() { gyroscope.stop(); }, 500);
} catch (error) {
document.getElementById("camera").setAttribute("look-controls", "magicWindowTrackingEnabled: false");
}
There's also an open issue about it on A-Frame github page.

How do I lock the screen orientation to portrait in Safari using plain JavaScript?

I want to "lock" the orientation of the website to portrait mode in safari using pure javascript.
Let's say that I am building an application, I don't want users to be able to visit my app in landscape-mode. How do I do that?
Edit: I make the app in web-languages, I will assign it as a profile so anyone can download it on iPhone, so nothing with xCode or something.
the screen.lockOrientation method is not supported by Safari, so you'll have to do feature detection.
For Safari, you might try the ponyfill: https://github.com/chmanie/o9n
maybe using "windows.screen" work for you;
var alowed = window.screen.orientation.lock("portrait");

getUserMedia in PWA with manifest on iOS 11

I have created a PWA which uses WebRTC's getUserMedia to get a live camera stream. The PWA uses a manifest.json, and works great on Android.
On iOS however, the app also works if I open the link directly in Mobile Safari, but if I add it to the homescreen, it is undefined (as iOS only allows it in the Safari-context).
As a workaround, I would like to open the app in Mobile Safari instead of fullscreen mode, but I don't know how to do this, as it automatically opens fulscreen once it detects the manifest.json.
Does anyone have an idea as how to open an app with a manifest in Safari?
Thank you!
There is a way to open the PWA avoiding full screen mode.
In manifest.json, change the display attribute to "browser".
"display": "browser"
Refer this documentation under section "Display".
You can also consider "minimal-ui" option.
Please keep in mind, when you make this change, it will not just reflect in iOS, but also in Android.
On the actual issue in accessing getUserMeida, I don't understand why its not working in full-screen mode. Its just a HTML5 feature and nothing specific to PWA. So ideally, it should work in full-screen mode as well. Try to capture for any error when you open in full screen mode and post that here if you find any. It might be due to permissions as well and I recommend solving the issue in full-screen mode for better user experience.
I figure out this by adding two manifest.json, one used by default for non ios devices and one for ios devices, I also create a detect.js script to detect wheter or not an ios device is accessing the pwa and change the manifest.json reference on the html. There is the code:
// Detects if device is on iOS
const isIos = () => {
const userAgent = window.navigator.userAgent.toLowerCase();
return /iphone|ipad|ipod/.test( userAgent );
}
// change manifest.json
if (isIos()) {
document.getElementById("manifest").href = "ios-manifest.json";
}
I would suggest you to set apple-mobile-web-app-capable to no with this meta tag in the head of the document:
<meta name="apple-mobile-web-app-capable" content="no">
This will avoid iOS to understand your web app as a PWA.

Samsung SmartTV ovelray (news ticker) application

Is there any way the application can run as an overlay (ticker) over the DVB program (i.e. live broadcast)?
Currently the only working solution to display application as an overlay over part of the screen, we are aware of, is to start the application from TV SmartHub menu and display the overlay over the IP (usually HLS) stream.
See for example here (http://en.wikipedia.org/wiki/File:CNBC_Closing_Bell.jpg) the CNBS ticker. We would like to develop the application like this... to display additional info over the DVB (or other) broadcast.
Regards,
STeN
If you want to run application in a SmartHub and use TV source as a background of application this should help you:
For the method:
http://www.samsungdforum.com/Guide/View/Developer_Documentation/Samsung_SmartTV_Developer_Documentation_2.5/API_Reference/JavaScript_APIs/Device_API/Window/SetSource
And for enumeration of sources:
http://www.samsungdforum.com/Guide/View/Developer_Documentation/Samsung_SmartTV_Developer_Documentation_2.5/API_Reference/JavaScript_APIs/Device_API/Window/SetSource
It is only my guess because I have never needed to play TV in background - always used the PL_WINDOW_SOURCE_MEDIA as I'm working on Internet video streaming.
Remember that you need to have transparent background in your application CSS, because video in Samsung plays always under the background.
Hope It help!

Categories

Resources