Mixing
Problem with camera access on firefox mobile
1
In my web app for mobiles, I want to show mobile camera using Firefox mobile browser, i'm using nodejs with express as a server and i'm connecting to server via localhost with my smartphone. Firefox browser ask for camera access, i'm not getting any error but still didn't see camera output. When i'm testing it on chrome desktop everything's work fine.
There's some code:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Documentl</title>
<base href="/">
<link rel="stylesheet" type="text/css" href ="main.css" >
</head>
<body>
<p id="demo"></p>
<div class="booth">
<video id= "video" autoplay></video>
</div>
<!--<script src = "script.js"></script>-->
<script>
(function(){
var video = document.getElementById("video"),
vendorUrl = window.URL || window.webkitURL;
navigator.getMedia = navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ||
navigator.msGetUserMedia;
navigator.getMedia({
video: {exact: "environment",
width: 1280,
height: 720 },
audio: false
}, function(stream) {
document.getElementById("demo").innerHTML = stream;
video.src = vendorUrl.createObjectURL(stream);
video.play();
}, function(err){
document.getElementById("demo").innerHTML = err.message;
});
})();
</script>
</body>
</html>
server.js
const express = require('express')
const app = express()
const port = 3000
app.use(express.static(__dirname + '/'));
app.get('/', (req, res) => res.sendfile('index.html'))
app.listen(port, () => console.log(`listening on port ${port}!`))
I didn't use chrome mobile becouse of "only secure origins are allowed here"
versions:
nodejs - v8.10.0
express - 4.16.4
mobile Firefox - 63.0.2
desktop chrome - 69.0.3497.100
Does anyone have an idea how to solve the problem? If something is unclear, please ask questions.
javascript html node.js express
asked Nov 22 '18 at 2:54
Salim AzeriSalim Azeri
115
add a comment |
1
In my web app for mobiles, I want to show mobile camera using Firefox mobile browser, i'm using nodejs with express as a server and i'm connecting to server via localhost with my smartphone. Firefox browser ask for camera access, i'm not getting any error but still didn't see camera output. When i'm testing it on chrome desktop everything's work fine.
There's some code:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Documentl</title>
<base href="/">
<link rel="stylesheet" type="text/css" href ="main.css" >
</head>
<body>
<p id="demo"></p>
<div class="booth">
<video id= "video" autoplay></video>
</div>
<!--<script src = "script.js"></script>-->
<script>
(function(){
var video = document.getElementById("video"),
vendorUrl = window.URL || window.webkitURL;
navigator.getMedia = navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ||
navigator.msGetUserMedia;
navigator.getMedia({
video: {exact: "environment",
width: 1280,
height: 720 },
audio: false
}, function(stream) {
document.getElementById("demo").innerHTML = stream;
video.src = vendorUrl.createObjectURL(stream);
video.play();
}, function(err){
document.getElementById("demo").innerHTML = err.message;
});
})();
</script>
</body>
</html>
server.js
const express = require('express')
const app = express()
const port = 3000
app.use(express.static(__dirname + '/'));
app.get('/', (req, res) => res.sendfile('index.html'))
app.listen(port, () => console.log(`listening on port ${port}!`))
I didn't use chrome mobile becouse of "only secure origins are allowed here"
versions:
nodejs - v8.10.0
express - 4.16.4
mobile Firefox - 63.0.2
desktop chrome - 69.0.3497.100
Does anyone have an idea how to solve the problem? If something is unclear, please ask questions.
javascript html node.js express
asked Nov 22 '18 at 2:54
Salim AzeriSalim Azeri
115
add a comment |
1
1
1
In my web app for mobiles, I want to show mobile camera using Firefox mobile browser, i'm using nodejs with express as a server and i'm connecting to server via localhost with my smartphone. Firefox browser ask for camera access, i'm not getting any error but still didn't see camera output. When i'm testing it on chrome desktop everything's work fine.
There's some code:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Documentl</title>
<base href="/">
<link rel="stylesheet" type="text/css" href ="main.css" >
</head>
<body>
<p id="demo"></p>
<div class="booth">
<video id= "video" autoplay></video>
</div>
<!--<script src = "script.js"></script>-->
<script>
(function(){
var video = document.getElementById("video"),
vendorUrl = window.URL || window.webkitURL;
navigator.getMedia = navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ||
navigator.msGetUserMedia;
navigator.getMedia({
video: {exact: "environment",
width: 1280,
height: 720 },
audio: false
}, function(stream) {
document.getElementById("demo").innerHTML = stream;
video.src = vendorUrl.createObjectURL(stream);
video.play();
}, function(err){
document.getElementById("demo").innerHTML = err.message;
});
})();
</script>
</body>
</html>
server.js
const express = require('express')
const app = express()
const port = 3000
app.use(express.static(__dirname + '/'));
app.get('/', (req, res) => res.sendfile('index.html'))
app.listen(port, () => console.log(`listening on port ${port}!`))
I didn't use chrome mobile becouse of "only secure origins are allowed here"
versions:
nodejs - v8.10.0
express - 4.16.4
mobile Firefox - 63.0.2
desktop chrome - 69.0.3497.100
Does anyone have an idea how to solve the problem? If something is unclear, please ask questions.
javascript html node.js express
asked Nov 22 '18 at 2:54
Salim AzeriSalim Azeri
115
In my web app for mobiles, I want to show mobile camera using Firefox mobile browser, i'm using nodejs with express as a server and i'm connecting to server via localhost with my smartphone. Firefox browser ask for camera access, i'm not getting any error but still didn't see camera output. When i'm testing it on chrome desktop everything's work fine.
There's some code:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Documentl</title>
<base href="/">
<link rel="stylesheet" type="text/css" href ="main.css" >
</head>
<body>
<p id="demo"></p>
<div class="booth">
<video id= "video" autoplay></video>
</div>
<!--<script src = "script.js"></script>-->
<script>
(function(){
var video = document.getElementById("video"),
vendorUrl = window.URL || window.webkitURL;
navigator.getMedia = navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ||
navigator.msGetUserMedia;
navigator.getMedia({
video: {exact: "environment",
width: 1280,
height: 720 },
audio: false
}, function(stream) {
document.getElementById("demo").innerHTML = stream;
video.src = vendorUrl.createObjectURL(stream);
video.play();
}, function(err){
document.getElementById("demo").innerHTML = err.message;
});
})();
</script>
</body>
</html>
server.js
const express = require('express')
const app = express()
const port = 3000
app.use(express.static(__dirname + '/'));
app.get('/', (req, res) => res.sendfile('index.html'))
app.listen(port, () => console.log(`listening on port ${port}!`))
I didn't use chrome mobile becouse of "only secure origins are allowed here"
versions:
nodejs - v8.10.0
express - 4.16.4
mobile Firefox - 63.0.2
desktop chrome - 69.0.3497.100
Does anyone have an idea how to solve the problem? If something is unclear, please ask questions.
javascript html node.js express
javascript html node.js express
asked Nov 22 '18 at 2:54
Salim AzeriSalim Azeri
115
asked Nov 22 '18 at 2:54
Salim AzeriSalim Azeri
115
edited Nov 22 '18 at 3:27
Salim Azeri
asked Nov 22 '18 at 2:54
Salim AzeriSalim Azeri
115
asked Nov 22 '18 at 2:54
Salim AzeriSalim Azeri
115
asked Nov 22 '18 at 2:54
Salim AzeriSalim Azeri
115
115
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
0
For recent browsers, you need to set srcObject for MediaStreams. The object URL doesn't work anymore. Try this:
video.srcObject = stream;
You should have the same problem in Chrome as well... if not, you will in an update soon.
See also: https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/srcObject
answered Nov 22 '18 at 2:59
BradBrad
115k27232393
Unfortunately, this did not solve the problem, after changing the code the camera does not display on the chrome desktop version.
– Salim Azeri
Nov 22 '18 at 3:10
@SalimAzeri Neat. What versions of everything are you using? Any errors in the JavaScript console on Chrome Desktop? Also, you're not using any WebRTC polyfills by chance, are you?
– Brad
Nov 22 '18 at 3:11
Thanks for helping me, i updated question with versions. About polyfills: nope, i'm using only code which i posted. In chrome browser i'm getting: "Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first." due video.play() method, and: "[Deprecation] URL.createObjectURL with media streams is deprecated and will be removed in M71, around December 2018. Please use HTMLMediaElement.srcObject instead. See chromestatus.com/features/5618491470118912 for more details." due video.src = vendorUrl.createObjectURL(stream);
– Salim Azeri
Nov 22 '18 at 3:33
@SalimAzeri Like I said in my answer, you need to usesrcObjectinstead. Remove the code forcreateObjectURL(). As for the first error, that's pretty clear. You need to allow the user to click/tap something before you playback a video on mobile.
– Brad
Nov 22 '18 at 3:44
@Bard, thanks for help, working with video.srcObject = stream; i just typed sth wrong.
– Salim Azeri
Nov 22 '18 at 3:46
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
});
}
});
draft saved
draft discarded
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%2f53423225%2fproblem-with-camera-access-on-firefox-mobile%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
0
For recent browsers, you need to set srcObject for MediaStreams. The object URL doesn't work anymore. Try this:
video.srcObject = stream;
You should have the same problem in Chrome as well... if not, you will in an update soon.
See also: https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/srcObject
answered Nov 22 '18 at 2:59
BradBrad
115k27232393
Unfortunately, this did not solve the problem, after changing the code the camera does not display on the chrome desktop version.
– Salim Azeri
Nov 22 '18 at 3:10
@SalimAzeri Neat. What versions of everything are you using? Any errors in the JavaScript console on Chrome Desktop? Also, you're not using any WebRTC polyfills by chance, are you?
– Brad
Nov 22 '18 at 3:11
Thanks for helping me, i updated question with versions. About polyfills: nope, i'm using only code which i posted. In chrome browser i'm getting: "Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first." due video.play() method, and: "[Deprecation] URL.createObjectURL with media streams is deprecated and will be removed in M71, around December 2018. Please use HTMLMediaElement.srcObject instead. See chromestatus.com/features/5618491470118912 for more details." due video.src = vendorUrl.createObjectURL(stream);
– Salim Azeri
Nov 22 '18 at 3:33
@SalimAzeri Like I said in my answer, you need to usesrcObjectinstead. Remove the code forcreateObjectURL(). As for the first error, that's pretty clear. You need to allow the user to click/tap something before you playback a video on mobile.
– Brad
Nov 22 '18 at 3:44
@Bard, thanks for help, working with video.srcObject = stream; i just typed sth wrong.
– Salim Azeri
Nov 22 '18 at 3:46
add a comment |
0
For recent browsers, you need to set srcObject for MediaStreams. The object URL doesn't work anymore. Try this:
video.srcObject = stream;
You should have the same problem in Chrome as well... if not, you will in an update soon.
See also: https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/srcObject
answered Nov 22 '18 at 2:59
BradBrad
115k27232393
Unfortunately, this did not solve the problem, after changing the code the camera does not display on the chrome desktop version.
– Salim Azeri
Nov 22 '18 at 3:10
@SalimAzeri Neat. What versions of everything are you using? Any errors in the JavaScript console on Chrome Desktop? Also, you're not using any WebRTC polyfills by chance, are you?
– Brad
Nov 22 '18 at 3:11
Thanks for helping me, i updated question with versions. About polyfills: nope, i'm using only code which i posted. In chrome browser i'm getting: "Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first." due video.play() method, and: "[Deprecation] URL.createObjectURL with media streams is deprecated and will be removed in M71, around December 2018. Please use HTMLMediaElement.srcObject instead. See chromestatus.com/features/5618491470118912 for more details." due video.src = vendorUrl.createObjectURL(stream);
– Salim Azeri
Nov 22 '18 at 3:33
@SalimAzeri Like I said in my answer, you need to usesrcObjectinstead. Remove the code forcreateObjectURL(). As for the first error, that's pretty clear. You need to allow the user to click/tap something before you playback a video on mobile.
– Brad
Nov 22 '18 at 3:44
@Bard, thanks for help, working with video.srcObject = stream; i just typed sth wrong.
– Salim Azeri
Nov 22 '18 at 3:46
add a comment |
0
0
0
For recent browsers, you need to set srcObject for MediaStreams. The object URL doesn't work anymore. Try this:
video.srcObject = stream;
You should have the same problem in Chrome as well... if not, you will in an update soon.
See also: https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/srcObject
answered Nov 22 '18 at 2:59
BradBrad
115k27232393
For recent browsers, you need to set srcObject for MediaStreams. The object URL doesn't work anymore. Try this:
video.srcObject = stream;
You should have the same problem in Chrome as well... if not, you will in an update soon.
See also: https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/srcObject
answered Nov 22 '18 at 2:59
BradBrad
115k27232393
answered Nov 22 '18 at 2:59
BradBrad
115k27232393
answered Nov 22 '18 at 2:59
BradBrad
115k27232393
answered Nov 22 '18 at 2:59
BradBrad
115k27232393
115k27232393
Unfortunately, this did not solve the problem, after changing the code the camera does not display on the chrome desktop version.
– Salim Azeri
Nov 22 '18 at 3:10
@SalimAzeri Neat. What versions of everything are you using? Any errors in the JavaScript console on Chrome Desktop? Also, you're not using any WebRTC polyfills by chance, are you?
– Brad
Nov 22 '18 at 3:11
Thanks for helping me, i updated question with versions. About polyfills: nope, i'm using only code which i posted. In chrome browser i'm getting: "Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first." due video.play() method, and: "[Deprecation] URL.createObjectURL with media streams is deprecated and will be removed in M71, around December 2018. Please use HTMLMediaElement.srcObject instead. See chromestatus.com/features/5618491470118912 for more details." due video.src = vendorUrl.createObjectURL(stream);
– Salim Azeri
Nov 22 '18 at 3:33
@SalimAzeri Like I said in my answer, you need to usesrcObjectinstead. Remove the code forcreateObjectURL(). As for the first error, that's pretty clear. You need to allow the user to click/tap something before you playback a video on mobile.
– Brad
Nov 22 '18 at 3:44
@Bard, thanks for help, working with video.srcObject = stream; i just typed sth wrong.
– Salim Azeri
Nov 22 '18 at 3:46
add a comment |
Unfortunately, this did not solve the problem, after changing the code the camera does not display on the chrome desktop version.
– Salim Azeri
Nov 22 '18 at 3:10
@SalimAzeri Neat. What versions of everything are you using? Any errors in the JavaScript console on Chrome Desktop? Also, you're not using any WebRTC polyfills by chance, are you?
– Brad
Nov 22 '18 at 3:11
Thanks for helping me, i updated question with versions. About polyfills: nope, i'm using only code which i posted. In chrome browser i'm getting: "Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first." due video.play() method, and: "[Deprecation] URL.createObjectURL with media streams is deprecated and will be removed in M71, around December 2018. Please use HTMLMediaElement.srcObject instead. See chromestatus.com/features/5618491470118912 for more details." due video.src = vendorUrl.createObjectURL(stream);
– Salim Azeri
Nov 22 '18 at 3:33
@SalimAzeri Like I said in my answer, you need to usesrcObjectinstead. Remove the code forcreateObjectURL(). As for the first error, that's pretty clear. You need to allow the user to click/tap something before you playback a video on mobile.
– Brad
Nov 22 '18 at 3:44
@Bard, thanks for help, working with video.srcObject = stream; i just typed sth wrong.
– Salim Azeri
Nov 22 '18 at 3:46
Unfortunately, this did not solve the problem, after changing the code the camera does not display on the chrome desktop version.
– Salim Azeri
Nov 22 '18 at 3:10
Unfortunately, this did not solve the problem, after changing the code the camera does not display on the chrome desktop version.
– Salim Azeri
Nov 22 '18 at 3:10
@SalimAzeri Neat. What versions of everything are you using? Any errors in the JavaScript console on Chrome Desktop? Also, you're not using any WebRTC polyfills by chance, are you?
– Brad
Nov 22 '18 at 3:11
@SalimAzeri Neat. What versions of everything are you using? Any errors in the JavaScript console on Chrome Desktop? Also, you're not using any WebRTC polyfills by chance, are you?
– Brad
Nov 22 '18 at 3:11
Thanks for helping me, i updated question with versions. About polyfills: nope, i'm using only code which i posted. In chrome browser i'm getting: "Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first." due video.play() method, and: "[Deprecation] URL.createObjectURL with media streams is deprecated and will be removed in M71, around December 2018. Please use HTMLMediaElement.srcObject instead. See chromestatus.com/features/5618491470118912 for more details." due video.src = vendorUrl.createObjectURL(stream);
– Salim Azeri
Nov 22 '18 at 3:33
Thanks for helping me, i updated question with versions. About polyfills: nope, i'm using only code which i posted. In chrome browser i'm getting: "Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first." due video.play() method, and: "[Deprecation] URL.createObjectURL with media streams is deprecated and will be removed in M71, around December 2018. Please use HTMLMediaElement.srcObject instead. See chromestatus.com/features/5618491470118912 for more details." due video.src = vendorUrl.createObjectURL(stream);
– Salim Azeri
Nov 22 '18 at 3:33
@SalimAzeri Like I said in my answer, you need to use
srcObject instead. Remove the code for createObjectURL(). As for the first error, that's pretty clear. You need to allow the user to click/tap something before you playback a video on mobile.– Brad
Nov 22 '18 at 3:44
@SalimAzeri Like I said in my answer, you need to use
srcObject instead. Remove the code for createObjectURL(). As for the first error, that's pretty clear. You need to allow the user to click/tap something before you playback a video on mobile.– Brad
Nov 22 '18 at 3:44
@Bard, thanks for help, working with video.srcObject = stream; i just typed sth wrong.
– Salim Azeri
Nov 22 '18 at 3:46
@Bard, thanks for help, working with video.srcObject = stream; i just typed sth wrong.
– Salim Azeri
Nov 22 '18 at 3:46
add a comment |
draft saved
draft discarded
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.
draft saved
draft discarded
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%2f53423225%2fproblem-with-camera-access-on-firefox-mobile%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
