Well the point is the following:
import {
Camera,
CameraResultType,
CameraSource,
Photo,
} from "#capacitor/camera";
export function usePhotoGallery() {
// import { usePhotoGallery } from "../hooks/usePhotoGallery"; per usarlo in esterna
const scatta = async () => {
const cameraPhoto = await Camera.getPhoto({
resultType: CameraResultType.Uri,
source: CameraSource.Camera,
quality: 100,
});
};
return {
scatta,
};
}
With this pretty basic code just calls the default camera and makes it take a shot.
It's working fine no problem. The issue comes in, by my case, by the fact that i have a custom ROM with no pre-installed camera. So no default camera. I know pretty much no one would have my issue. But I'd like to cover those 0.1% of user that will have this problem.
So, finally, how can I can use a 3rd party camera app? Or just create one if it's better.
For example I can take photos from Whatsapp, Instagram, Snapchat ecc. I guess cuz they have their own camera. So the point basically is:
How can I make the user select the app he prefers for thake the shot (like the pop-up that ask "open with *choiches*.."
If i can't do the previous option, then how can I do my own camera?
Sorry for my probably disgusting english
Related
From some research, I've figured out that expo libraries like takePicturesAsync() are able to take a picture and save it to the app's cache. However, the default state for libraries like these is to save the whole image. Is there any way for me to save a specific part of the image (e.g. the 2500 pixels at the center of the screen)?
Thanks!
You can use the onPictureSaved event to grab & manipulate the image.
takePicture = () => {
if (this.camera) {
this.camera.takePictureAsync({ onPictureSaved: this.onPictureSaved });
}
};
onPictureSaved = photo => {
console.log(photo);
}
I must be missing something very obvious, but after several hours on SO and in the electron docs trying different things, I've not found the right solution.
For an electron app, I have 4 pdfs: 3 are going to be packaged with the electron app, 1 will come from an external website. I need to be able to display each of them at full-screen, with no toolbars or other "fluff". Each is exactly 1 "screen" in size, and this is for a VERY restricted audience so I can guarantee the viewing conditions/technology used. In terms of the needed functionality, these pdfs could just be giant images. However. Due to Reasons(TM) I cannot convert them to any other (easier to use) format.
I am currently using a BrowserWindow, and it works 80%. I can see the pdf just fine, but it's zoomed and still has a toolbar. (This will be displayed in portrait orientation, hence the odd dimensions)
$('#btn_0-0').on('click', function(e) {
e.stopPropagation()
openPDF("./app/assets/docs/TreatmentLandscape.pdf")
})
function openPDF(filePath) {
let pdfWindow = new electron.remote.BrowserWindow({
width: 1080,
height: 1920,
webPreferences: {
plugins: true
}
});
pdfWindow.loadFile(filePath)
pdfWindow.setMenu(null);
pdfWindow.on('closed', function() {
pdfWindow = null
})
}
tl;dr Another person looking for how to do frameless embedded pdfs in electron. Help :(
We are implementing share functionality in our react native app and I'm having difficulty with the appearance of the resulting share text.
Using the share API, if i set just the URL param to our website and share via sms the result looks great. I have set the image and title meta tags and they render in the sms as expected (ie I get a nice picture). However, if I want to add a dynamic message to the share text, via the message param it looks awful. I get 2 sms, one with a text link to the site (no image, no title), then a second sms with the message text. For reference, I am aiming for something in appearance to what you get when you share an app in iOS, like this:
But sharing just a URL via share I get this:
which looks nice, with image etc but no dynamic text.
As soon as i add some text via the message param, the result looks like this:
which looks pretty crappy.
It kind of feels like this is a pretty vanilla use case and i can't see what I'm doing wrong. Anyone got any ideas?
Edit: A simplified version of the code I'm using is as follows:
import { Share } from 'react-native'
const content = {
message: 'This is a lovely message',
url: 'https://www.google.com/chrome/'
}
try {
const result = await Share.share(content)
console.log('Shared', result)
if (result.action === Share.sharedAction) {
// shared
} else if (result.action === Share.dismissedAction) {
// IOS ONLY
// dismissed
}
} catch (err) {
console.log('Failed to share', err)
}
}
Initially, I had two different webpages:
One was to do Video Call and
Other was to do Screen Sharing
Now, I want to do both of them in one page.
Here is the scenario:
During Live call, a user wants to stop sharing his/her video and start sharing screen.
Afterwards, again he/she wishes to turn off screen sharing and start video sharing.
For clarity, here are some questions I want to ask:
On Caller Side:
1) How can I change my local stream from video to screen and vice versa?
2) Once it is done, how can I assign it to the local video element?
On Callee Side:
1) How do I handle if the current stream I am receiving is changed from video to screen?
2) How do I handle if the stream I am receiving has stopped? I mean, now I can receive neither video nor screen (just audio)
Kindly, help me in this regards. If there are any open source codes available, kindly share their links too.
Just for your reference, I was trying to handle it using following code. (i know this is naive and won't work)
function handleUserMedia(newStream){
var localvideo = document.getElementById("localvideo");
localvideo.src = URL.createObjectURL(newStream);
localStream = newStream;
sendMessage('got user media');
if (isInitiator) {
maybeStart();
}
}
function handleUserMediaError(error){
console.log(error);
}
var video_constraints = {video: true, audio: true};
var screen_constraints = {video: { mandatory: { chromeMediaSource: 'screen' } }};
getUserMedia(video_constraints, handleUserMedia, handleUserMediaError);
//getUserMedia(screen_constraints, handleUserMedia, handleUserMediaError);
$scope.btnLabel = 'Share Screen';
$scope.toggleSelected = function () {
$scope.selected = !$scope.selected;
if($scope.selected)
{
getUserMedia(screen_constraints, handleUserMedia, handleUserMediaError);
$scope.btnLabel = 'Share Video';
}
else
{
getUserMedia(video_constraints, handleUserMedia, handleUserMediaError);
$scope.btnLabel = 'Share Screen';
}
};
Check this demo:
https://www.webrtc-experiment.com/demos/switch-streams.html
and the relevant tutorial:
https://www.webrtc-experiment.com/docs/how-to-switch-streams.html
simply renegotiate peer connections on both users' side!
I want to use multiple USB camera with Web RTC.
For ex)
https://apprtc.appspot.com/?r=93443359
This application is web RTC sample.
I can connect to another machine, but I have to disconnect once to change the camera.
What I want to is,
1.Use two camera at the same time on the same screen.
2.(if 1 is not possible),I want to switch the camera without disconnecting current connection
Does anyone have information about how to use two camera on Web RTC?
call getUserMedia twice and change the camera input in between
You can use constraints to specify which camera to use and you can have both of them displayed in one page as well. To specify which camera to use take a look at the following snippet (only works on Chrome 30+):
getUserMedia({
video: {
mandatory: {
sourceId: webcamId,
...
}
},
successCallback,
failCallback);
The webcamId you can get by:
MediaStreamTrack.getSources(function(sources){
var cams = _.filter(sources, function(e){ //only return video elements
return e.kind === 'video';
});
var camIds = _.map(cams, function (e) { // return only ids
return e.id;
});
});
In the snippet above I've used underscore methods filter and map.
More information on:
WebRTC video sources
constraints