How to take a picture in a browser and upload it with http protocol?
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}
I want to capture a photo from the camera and upload it to the server. My target environments are EDGE browser for Hololens and PC browsers (At least latest versions of Chrome or Firefox).
I have tried using HTML5 <input type="file" accept="image/*" capture="camera"> However both in the Hololens Edge and PC Chrome the capture attribute is ignored.( This works as it should in Chrome for Android )
I have tried getUserMedia.
navigator.getUserMedia = navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia;
if (navigator.getUserMedia) {
navigator.getUserMedia({ audio: true, video: { width: 1280, height: 720 } },
function(stream) {
var video = document.querySelector('video');
video.srcObject = stream;
video.onloadedmetadata = function(e) {
video.play();
};
},
function(err) {
console.log("The following error occurred: " + err.name);
}
);
} else {
console.log("getUserMedia not supported");
}
and then: to get a picture from the video playing.
But getUserMedia is a powerful feature and I need secure origin. It plays using localhost, but not when i use localIP instead.
According to chromium
“Secure origins” are origins that match at least one of the following
(scheme, host, port) patterns:
(https, *, *)
(wss, *, *)
(*,localhost, *)
(*, 127/8, *)
(*, ::1/128, *)
(file, *, —)
(chrome-extension, *, —)
How can I solve this problem?
javascript photo capture hololens pc
asked Nov 26 '18 at 11:30
MediareaMediarea
15110
add a comment |
I want to capture a photo from the camera and upload it to the server. My target environments are EDGE browser for Hololens and PC browsers (At least latest versions of Chrome or Firefox).
I have tried using HTML5 <input type="file" accept="image/*" capture="camera"> However both in the Hololens Edge and PC Chrome the capture attribute is ignored.( This works as it should in Chrome for Android )
I have tried getUserMedia.
navigator.getUserMedia = navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia;
if (navigator.getUserMedia) {
navigator.getUserMedia({ audio: true, video: { width: 1280, height: 720 } },
function(stream) {
var video = document.querySelector('video');
video.srcObject = stream;
video.onloadedmetadata = function(e) {
video.play();
};
},
function(err) {
console.log("The following error occurred: " + err.name);
}
);
} else {
console.log("getUserMedia not supported");
}
and then: to get a picture from the video playing.
But getUserMedia is a powerful feature and I need secure origin. It plays using localhost, but not when i use localIP instead.
According to chromium
“Secure origins” are origins that match at least one of the following
(scheme, host, port) patterns:
(https, *, *)
(wss, *, *)
(*,localhost, *)
(*, 127/8, *)
(*, ::1/128, *)
(file, *, —)
(chrome-extension, *, —)
How can I solve this problem?
javascript photo capture hololens pc
asked Nov 26 '18 at 11:30
MediareaMediarea
15110
add a comment |
I want to capture a photo from the camera and upload it to the server. My target environments are EDGE browser for Hololens and PC browsers (At least latest versions of Chrome or Firefox).
I have tried using HTML5 <input type="file" accept="image/*" capture="camera"> However both in the Hololens Edge and PC Chrome the capture attribute is ignored.( This works as it should in Chrome for Android )
I have tried getUserMedia.
navigator.getUserMedia = navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia;
if (navigator.getUserMedia) {
navigator.getUserMedia({ audio: true, video: { width: 1280, height: 720 } },
function(stream) {
var video = document.querySelector('video');
video.srcObject = stream;
video.onloadedmetadata = function(e) {
video.play();
};
},
function(err) {
console.log("The following error occurred: " + err.name);
}
);
} else {
console.log("getUserMedia not supported");
}
and then: to get a picture from the video playing.
But getUserMedia is a powerful feature and I need secure origin. It plays using localhost, but not when i use localIP instead.
According to chromium
“Secure origins” are origins that match at least one of the following
(scheme, host, port) patterns:
(https, *, *)
(wss, *, *)
(*,localhost, *)
(*, 127/8, *)
(*, ::1/128, *)
(file, *, —)
(chrome-extension, *, —)
How can I solve this problem?
javascript photo capture hololens pc
asked Nov 26 '18 at 11:30
MediareaMediarea
15110
I want to capture a photo from the camera and upload it to the server. My target environments are EDGE browser for Hololens and PC browsers (At least latest versions of Chrome or Firefox).
I have tried using HTML5 <input type="file" accept="image/*" capture="camera"> However both in the Hololens Edge and PC Chrome the capture attribute is ignored.( This works as it should in Chrome for Android )
I have tried getUserMedia.
navigator.getUserMedia = navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia;
if (navigator.getUserMedia) {
navigator.getUserMedia({ audio: true, video: { width: 1280, height: 720 } },
function(stream) {
var video = document.querySelector('video');
video.srcObject = stream;
video.onloadedmetadata = function(e) {
video.play();
};
},
function(err) {
console.log("The following error occurred: " + err.name);
}
);
} else {
console.log("getUserMedia not supported");
}
and then: to get a picture from the video playing.
But getUserMedia is a powerful feature and I need secure origin. It plays using localhost, but not when i use localIP instead.
According to chromium
“Secure origins” are origins that match at least one of the following
(scheme, host, port) patterns:
(https, *, *)
(wss, *, *)
(*,localhost, *)
(*, 127/8, *)
(*, ::1/128, *)
(file, *, —)
(chrome-extension, *, —)
How can I solve this problem?
javascript photo capture hololens pc
javascript photo capture hololens pc
asked Nov 26 '18 at 11:30
MediareaMediarea
15110
asked Nov 26 '18 at 11:30
MediareaMediarea
15110
edited Nov 27 '18 at 8:52
Mediarea
asked Nov 26 '18 at 11:30
MediareaMediarea
15110
asked Nov 26 '18 at 11:30
MediareaMediarea
15110
asked Nov 26 '18 at 11:30
MediareaMediarea
15110
15110
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
Set up a localhost with a "self-signed SSL certificate" (google search link) so you have a https server.
This is ok for your testing environment but of course not for production.
So if this is set up and works, to capture a photo, you need to paint your video on to a canvas, so you have get the image you need.
answered Nov 27 '18 at 9:04
AndreAndre
14215
I wanted to do it in production using http, because the video does play in localhost.
– Mediarea
Nov 27 '18 at 9:18
That is right. It works withlocalhost, and that is for testing only. But if you open the browser with your local ip (whatever that is, for examplehttp://192.168.2.17) it will not run. As you wrote yourself in your postgetUserMedianeeds https. Besides that, in 2018 everything should run in a secure environment anyway.
– Andre
Nov 27 '18 at 9:23
That is not what I asked. I know it does not work if I use my ip, as i have mentioned what is considered a "secure origin". What I am asking, is about another way to take a picture.
– Mediarea
Nov 27 '18 at 9:32
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53480171%2fhow-to-take-a-picture-in-a-browser-and-upload-it-with-http-protocol%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
Set up a localhost with a "self-signed SSL certificate" (google search link) so you have a https server.
This is ok for your testing environment but of course not for production.
So if this is set up and works, to capture a photo, you need to paint your video on to a canvas, so you have get the image you need.
answered Nov 27 '18 at 9:04
AndreAndre
14215
I wanted to do it in production using http, because the video does play in localhost.
– Mediarea
Nov 27 '18 at 9:18
That is right. It works withlocalhost, and that is for testing only. But if you open the browser with your local ip (whatever that is, for examplehttp://192.168.2.17) it will not run. As you wrote yourself in your postgetUserMedianeeds https. Besides that, in 2018 everything should run in a secure environment anyway.
– Andre
Nov 27 '18 at 9:23
That is not what I asked. I know it does not work if I use my ip, as i have mentioned what is considered a "secure origin". What I am asking, is about another way to take a picture.
– Mediarea
Nov 27 '18 at 9:32
add a comment |
Set up a localhost with a "self-signed SSL certificate" (google search link) so you have a https server.
This is ok for your testing environment but of course not for production.
So if this is set up and works, to capture a photo, you need to paint your video on to a canvas, so you have get the image you need.
answered Nov 27 '18 at 9:04
AndreAndre
14215
I wanted to do it in production using http, because the video does play in localhost.
– Mediarea
Nov 27 '18 at 9:18
That is right. It works withlocalhost, and that is for testing only. But if you open the browser with your local ip (whatever that is, for examplehttp://192.168.2.17) it will not run. As you wrote yourself in your postgetUserMedianeeds https. Besides that, in 2018 everything should run in a secure environment anyway.
– Andre
Nov 27 '18 at 9:23
That is not what I asked. I know it does not work if I use my ip, as i have mentioned what is considered a "secure origin". What I am asking, is about another way to take a picture.
– Mediarea
Nov 27 '18 at 9:32
add a comment |
Set up a localhost with a "self-signed SSL certificate" (google search link) so you have a https server.
This is ok for your testing environment but of course not for production.
So if this is set up and works, to capture a photo, you need to paint your video on to a canvas, so you have get the image you need.
answered Nov 27 '18 at 9:04
AndreAndre
14215
Set up a localhost with a "self-signed SSL certificate" (google search link) so you have a https server.
This is ok for your testing environment but of course not for production.
So if this is set up and works, to capture a photo, you need to paint your video on to a canvas, so you have get the image you need.
answered Nov 27 '18 at 9:04
AndreAndre
14215
answered Nov 27 '18 at 9:04
AndreAndre
14215
answered Nov 27 '18 at 9:04
AndreAndre
14215
answered Nov 27 '18 at 9:04
AndreAndre
14215
14215
I wanted to do it in production using http, because the video does play in localhost.
– Mediarea
Nov 27 '18 at 9:18
That is right. It works withlocalhost, and that is for testing only. But if you open the browser with your local ip (whatever that is, for examplehttp://192.168.2.17) it will not run. As you wrote yourself in your postgetUserMedianeeds https. Besides that, in 2018 everything should run in a secure environment anyway.
– Andre
Nov 27 '18 at 9:23
That is not what I asked. I know it does not work if I use my ip, as i have mentioned what is considered a "secure origin". What I am asking, is about another way to take a picture.
– Mediarea
Nov 27 '18 at 9:32
add a comment |
I wanted to do it in production using http, because the video does play in localhost.
– Mediarea
Nov 27 '18 at 9:18
That is right. It works withlocalhost, and that is for testing only. But if you open the browser with your local ip (whatever that is, for examplehttp://192.168.2.17) it will not run. As you wrote yourself in your postgetUserMedianeeds https. Besides that, in 2018 everything should run in a secure environment anyway.
– Andre
Nov 27 '18 at 9:23
That is not what I asked. I know it does not work if I use my ip, as i have mentioned what is considered a "secure origin". What I am asking, is about another way to take a picture.
– Mediarea
Nov 27 '18 at 9:32
I wanted to do it in production using http, because the video does play in localhost.
– Mediarea
Nov 27 '18 at 9:18
I wanted to do it in production using http, because the video does play in localhost.
– Mediarea
Nov 27 '18 at 9:18
That is right. It works with
localhost, and that is for testing only. But if you open the browser with your local ip (whatever that is, for example http://192.168.2.17) it will not run. As you wrote yourself in your post getUserMedia needs https. Besides that, in 2018 everything should run in a secure environment anyway.– Andre
Nov 27 '18 at 9:23
That is right. It works with
localhost, and that is for testing only. But if you open the browser with your local ip (whatever that is, for example http://192.168.2.17) it will not run. As you wrote yourself in your post getUserMedia needs https. Besides that, in 2018 everything should run in a secure environment anyway.– Andre
Nov 27 '18 at 9:23
That is not what I asked. I know it does not work if I use my ip, as i have mentioned what is considered a "secure origin". What I am asking, is about another way to take a picture.
– Mediarea
Nov 27 '18 at 9:32
That is not what I asked. I know it does not work if I use my ip, as i have mentioned what is considered a "secure origin". What I am asking, is about another way to take a picture.
– Mediarea
Nov 27 '18 at 9:32
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53480171%2fhow-to-take-a-picture-in-a-browser-and-upload-it-with-http-protocol%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
