Hi I'm trying to broadcast iphone camera to html canvas fro example. Recently, WebRTC seams working fine as I tested on ipad pro, but when I test my HTML along with the scrpit of my js file, it doesn't show the broacasting and showing only a black screan instead, is anyone facing this problem?
I created an https service on ubuntu 16.04 and using the browser on omy iphone to access the index.html page
Here is my code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Demo</title>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<h3>Selfie</h3>
<div class="booth">
<video id="video" width="640" height="360" autoplay></video>
</div>
<script src="js/video.js"></script>
</body>
</html>
And here is the javascript
(function() {
var video = document.getElementById('video');
/* Setting up the constraint */
var facingMode = "user"; // Can be 'user' or 'environment' to access back
or front camera (NEAT!)
var constraints = {
audio: false,
video: {
facingMode: facingMode
}
};
/* Stream it to video element */
navigator.mediaDevices.getUserMedia(constraints).then(function
success(stream) {
video.srcObject = stream;
});
})();
However, there is a nice tutorial that also works on ipad but not on iphone, I'm using several browsers and didn't help, you can try this intro / to have an idea of what I mean,
Hi I'm trying to broadcast iphone camera to html canvas fro example. Recently, WebRTC seams working fine as I tested on ipad pro, but when I test my HTML along with the scrpit of my js file, it doesn't show the broacasting and showing only a black screan instead, is anyone facing this problem?
I created an https service on ubuntu 16.04 and using the browser on omy iphone to access the index.html page
Here is my code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Demo</title>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<h3>Selfie</h3>
<div class="booth">
<video id="video" width="640" height="360" autoplay></video>
</div>
<script src="js/video.js"></script>
</body>
</html>
And here is the javascript
(function() {
var video = document.getElementById('video');
/* Setting up the constraint */
var facingMode = "user"; // Can be 'user' or 'environment' to access back
or front camera (NEAT!)
var constraints = {
audio: false,
video: {
facingMode: facingMode
}
};
/* Stream it to video element */
navigator.mediaDevices.getUserMedia(constraints).then(function
success(stream) {
video.srcObject = stream;
});
})();
However, there is a nice tutorial that also works on ipad but not on iphone, I'm using several browsers and didn't help, you can try this intro https://www.html5rocks./en/tutorials/getusermedia/intro/ to have an idea of what I mean,
Share Improve this question asked Mar 12, 2018 at 17:17 Saif AlabachiSaif Alabachi 251 silver badge3 bronze badges 01 Answer
Reset to default 7add playsinline to the video element as shown in this sample