I need to make a HTML5 page that can display live video coming from the device's camera/webcam and that has a button that can take a snapshot; nothing fancy (similar to html5camera.com). I tried following some tutorials (http://www.html5rocks.com/en/tutorials/getusermedia/intro/ AND http://davidwalsh.name/browser-camera), but I'm still new at HTML, so I'm not sure what to do with the code snippets I find.
I copied some code into a HTML-file, but when I open it with Chrome, it says at the right in the address bar that it blocked access to the camera and microphone (without bothering to ask for permission). When I click the option to ask for permission next time and reload the page, nothing happens. There is no way to set the preferences to allow by default. I also tried Chrome Canary (same as Chrome) and Firefox (didn't ask for permission).
Did I make a mistake in the HTML? Is Chrome the problem?
The code I have so far:
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=yes">
</head>
<body>
<video id="video" width="640" height="480" autoplay></video>
<button id="snap">Snap Photo</button>
<canvas id="canvas" width="640" height="480"></canvas>
<script>
// Put event listeners into place
window.addEventListener("DOMContentLoaded", function() {
// Grab elements, create settings, etc.
var canvas = document.getElementById("canvas"),
context = canvas.getContext("2d"),
video = document.getElementById("video"),
videoObj = { "video": true },
errBack = function(error) {
console.log("Video capture error: ", error.code);
};
// Put video listeners into place
if(navigator.getUserMedia) { // Standard
navigator.getUserMedia(videoObj, function(stream) {
video.src = stream;
video.play();
}, errBack);
} else if(navigator.webkitGetUserMedia) { // WebKit-prefixed
navigator.webkitGetUserMedia(videoObj, function(stream){
video.src = window.webkitURL.createObjectURL(stream);
video.play();
}, errBack);
}
// Trigger photo take
document.getElementById("snap").addEventListener("click", function() {
context.drawImage(video, 0, 0, 640, 480);
});
}, false);
</script>
</body>
</html>
You might also consider just going native. You can add native camera and camcorder support to any web app on Android, iOS or Windows Phone 8 very easily with BridgeIt: http://bridgeit.mobi. It's a simple javascript api that allows you to access native mobile features.
Related
I am designing a website to teach Inuit Sign Language, and it uses the user's camera on multiple pages for the learner to practice signing. It does not stream nor save the signal anywhere: it is only meant to show the user his or her own webcam image. In Mozilla Firefox, the first page that loads the webcam works fine, but in every webpage that uses it after that, the webcam does not work. Reloading the page does nothing (even with CTRL-F5), but closing Firefox altogether and restarting it on the same page makes the camera works... but once again, only for the first page using it.
The bug is somewhat inconsistent, it always happens locally but not always on my host server, and Microsoft Edge works just fine with it. I have no idea what to do to fix this. It's as if Firefox hadn't freed the camera when I left the first webpage or something.
An example webpage can be found here: https://animamundilarp.com/isl_training_tests/practice_inuit_people.html
Click "Next page" twice to reproduce the issue.
Thank you to anybody who can tell me what I am doing wrong.
Here is my full code for the page:
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="mystyle.css">
</head>
<div class="row">
<div class="col-12"><H1>Inuit People</H1></div> <!-- 100% -->
</div>
<div class="row">
<div class="col-12"><P>Please allow the website to use your webcam for this learning activity. your webcam video is not recorded or sent anywhere on the Internet, and it will only display on your own screen.</P></div> <!-- 100% -->
</div>
<div class="row"> <!-- This row includes both the video and the webcam video -->
<div class="col-6"> <!-- This contains the video of the inuit sign -->
<video controls autoplay loop muted playsinline>
<source src="videos/Inuit_people.mp4" type="video/mp4">
Your browser does not support HTML video.
</video>
</div>
<div class="col-6">
<video id="media" controls></video>
</div>
</div>
<script>
navigator.getWebcam = (navigator.getUserMedia || navigator.webKitGetUserMedia || navigator.moxGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia);
if (navigator.mediaDevices.getUserMedia) {
navigator.mediaDevices.getUserMedia({
// audio: true, // I keep this part of the code, but since we do not need audio, I kept it only as a comment, to reduce permissions asked by the website.
video: true
})
.then(function (stream) {
var video = document.getElementById("media");
video.srcObject = stream;
video.play();
})
.catch(function (e) {
logError(e.name + ": " + e.message);
});
} else {
navigator.getWebcam({
// audio: true, // I keep this part of the code, but since we do not need audio, I kept it only as a comment, to reduce permissions asked by the website.
video: true
},
function (stream) {
//Display the video stream in the video object
},
function () {
logError("your web cam is not accessible. If you do not have a webcam, you can use a mirror instead to see yourself signing.");
});
}
</script>
<P><button type="button" class="button_previous" onclick="Change_Page_to_Previous()"><span class="arrow_button">←</span> Previous</button> <button type="button" class="button_next" onclick="Change_Page_to_Next()">Next page <span class="arrow_button">→</span></button></P>
<script src="previous_and_next_functions.js">
</script>
You need to release the getUserMedia stream when your web page closes. How you do that is a bit of a kludge: you stop all the tracks in the stream.
(Also, all those alternative places to find the getUserMedia function are in the dustbin of history where they belong, so the code can be cleaner.)
Some Javascript code like this, not debugged, should work for you. Notice the unload event handler
const video = document.getElementById("media")
navigator.mediaDevices
.getUserMedia({ audio:false, video: true })
.then(function (stream) {
video.srcObject = stream
video.play()
window.addEventListener("unload", function(event) {
/* upon unloading do this */
const tracks = stream.getTracks()
tracks.forEach(function(track) {
track.stop()
})
video.srcObject = null
stream = null
})
})
.catch(function (e) {
logError(e.name + ": " + e.message)
})
I add videosphere using aframe. But in android browser it does not work. I am using Samsung S6. In S6 I checked many examples along with my code. It does not work.
<!DOCTYPE html>
<html>
<head>
<title>Hello, WebVR! - A-Frame</title>
<meta name="description" content="Hello, WebVR! - A-Frame">
<script src="https://aframe.io/releases/0.7.0/aframe.min.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function(event) {
var scene = document.querySelector("a-scene");
var vid = document.getElementById("video");
var videoShere = document.getElementById("videoShere");
if (scene.hasLoaded) {
run();
} else {
scene.addEventListener("loaded", run);
}
function run () {
if(AFRAME.utils.device.isMobile()) {
document.querySelector('#splash').style.display = 'flex';
document.querySelector('#splash').addEventListener('click', function () {
playVideo();
this.style.display = 'none';
})
} else {
playVideo();
}
}
function playVideo () {
vid.play();
videoShere.components.material.material.map.image.play();
}
})
</script>
</head>
<body>
<div id="splash" style="display:none;">
<div id="start-button">Start</div>
</div>
<a-scene>
<a-assets>
<video id="video" src="https://ucarecdn.com/fadab25d-0b3a-45f7-8ef5-85318e92a261/" webkit-playsinline></video>
</a-assets>
<a-entity camera="userHeight: 1.6" look-controls cursor="rayOrigin: mouse"></a-entity>
<a-videosphere id="videoShere" loop="true" src="#video" rotation="0 -90 0"></a-videosphere>
</a-scene>
</body>
</html>
This is my code. What is the issue with my code? And why it does not work on android browser? Any way to solve this?
As per the A-Frame docs (https://aframe.io/docs/0.8.0/primitives/a-videosphere.html#caveats), you should have the following lines in your code to ensure they function properly in as many devices as possible:
<head>
...
<meta name="apple-mobile-web-app-capable" content="yes">
...
</head>
In the <video> element, itself, you will want to use this code to ensure that the video will play inline and will start playing immediately, if supported by the browser:
<video id="video" src="https://ucarecdn.com/fadab25d-0b3a-45f7-8ef5-85318e92a261/" autoplay loop playsinline webkit-playsinline crossorigin="anonymous"></video>
Note that crossorigin="anonymous" should be set when using assets hosted on other domains. It's also worth noting that some domains won't let you do this even if you use this code.
User interaction within the browser (outside of A-Frame) may be required to trigger the video for browsers that do not allow autoplaying by default. I modified your modal slightly to make it more visible:
<div id="splash" style="display: flex; height: 100%; width: 100%; z-index: 999999; position: absolute; background: rgba(0, 0, 0, 0.8);">
<div id="start-button">Start</div>
</div>
The javascript can be simplified just by placing the following code immediately before the ending </body> tag:
<script>
// User interaction modal to trigger video in some browsers/devices.
var modal = document.querySelector('#splash');
var video = document.querySelector('#video');
modal.addEventListener('click', function(e) {
video.play();
this.parentNode.removeChild(this);
});
</script>
Now, when a user clicks the modal splash screen, the event listener will capture the event, play the video, and remove the splash screen entirely from the DOM.
Here is a working demo: https://ultra-bass.glitch.me/
You just may need to add logic for detecting mobile devices, or more specifically, the devices that require this workaround.
I'm trying to make a game with flash cs6 and createjs. When I test it locally (meaning, I click on the .html file in the output) it works just fine and as intended.
Then I uploaded it on Newgrounds and previewed it with my pc (windows 8.1, google chrome) and the game got stuck on a white screen - meaning the preloading function isn't working properly?
Then I previewed it on my iPad (always from Newgrounds), and it worked on Safari - even though there was no audio.
Then I tried reuploading it on Newgrounds - but this time I removed all the sound from the game - and it works even when previewed on my computer.
From all this, I've deduced that there must be some conflicting code that involves audio preloading when I try to start the game with my pc on Newgrounds. My questions are:
1) When I preview my game on Newgrounds, why won't it even load if there's audio in it and I use my pc? (Remember, it works if I preview it on newgrounds with my iPad, and it works even on my pc if I completely remove the sound files)
2) Why is it that the audio won't work on the Ipad? I added a onclick function at the very first frame of the game to start the sound, as suggested elsewhere; the function works but the sound won't start.
Thanks in advance for your help, please note that I have NO experience with Javascript (all I ever coded with is Actionscript) but I'm willing to learn and trying my best.
Here's the code I have in my index.html file:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CreateJS export from testgame</title>
<script src="http://code.createjs.com/easeljs-0.6.0.min.js"></script>
<script src="http://code.createjs.com/tweenjs-0.4.0.min.js"></script>
<script src="http://code.createjs.com/movieclip-0.6.0.min.js"></script>
<script src="http://code.createjs.com/preloadjs-0.3.0.min.js"></script>
<script src="http://code.createjs.com/soundjs-0.4.0.min.js"></script>
<script src="testgame.js"></script>
<script>
var canvas, stage, exportRoot;
function init() {
canvas = document.getElementById("canvas");
images = images||{};
var manifest = [
{src:"images/Bitmap10.png", id:"Bitmap10"},
{src:"images/Bitmap12.png", id:"Bitmap12"},
{src:"images/Bitmap13.png", id:"Bitmap13"},
{src:"images/Bitmap14.png", id:"Bitmap14"},
{src:"images/Bitmap15.png", id:"Bitmap15"},
{src:"images/Bitmap16.png", id:"Bitmap16"},
{src:"images/Bitmap17.png", id:"Bitmap17"},
{src:"images/Bitmap18.png", id:"Bitmap18"},
{src:"images/Bitmap19.png", id:"Bitmap19"},
{src:"images/Bitmap20.png", id:"Bitmap20"},
{src:"images/Bitmap21.png", id:"Bitmap21"},
{src:"images/Bitmap22.png", id:"Bitmap22"},
{src:"images/Bitmap23.png", id:"Bitmap23"},
{src:"images/Bitmap24.png", id:"Bitmap24"},
{src:"images/Bitmap30.png", id:"Bitmap30"},
{src:"images/Bitmap31.png", id:"Bitmap31"},
{src:"images/Bitmap32.png", id:"Bitmap32"},
{src:"images/Bitmap33.png", id:"Bitmap33"},
{src:"images/Bitmap34.png", id:"Bitmap34"},
{src:"images/Bitmap35.png", id:"Bitmap35"},
{src:"images/Bitmap36.png", id:"Bitmap36"},
{src:"images/Bitmap37.png", id:"Bitmap37"},
{src:"images/Bitmap38.png", id:"Bitmap38"},
{src:"images/Bitmap39.png", id:"Bitmap39"},
{src:"images/Bitmap4.png", id:"Bitmap4"},
{src:"images/Bitmap5.png", id:"Bitmap5"},
{src:"images/Bitmap6.png", id:"Bitmap6"},
{src:"images/Bitmap7.png", id:"Bitmap7"},
{src:"images/Bitmap8.png", id:"Bitmap8"},
{src:"images/Bitmap9.png", id:"Bitmap9"},
{src:"sounds/siglaintro.mp3", id:"siglaintro"},
{src:"sounds/siglaloop.mp3", id:"siglaloop"}
];
var loader = new createjs.LoadQueue(false);
loader.installPlugin(createjs.Sound);
loader.addEventListener("fileload", handleFileLoad);
loader.addEventListener("complete", handleComplete);
loader.loadManifest(manifest);
}
function handleFileLoad(evt) {
if (evt.item.type == "image") { images[evt.item.id] = evt.result; }
}
function handleComplete() {
exportRoot = new lib.testgame();
stage = new createjs.Stage(canvas);
stage.addChild(exportRoot);
stage.update();
createjs.Ticker.setFPS(24);
createjs.Ticker.addEventListener("tick", stage);
}
function playSound(id, loop) {
createjs.Sound.play(id, createjs.Sound.INTERRUPT_EARLY, 0, 0, loop);
}
</script>
</head>
<body onload="init();" style="background-color:#D4D4D4">
<canvas id="canvas" width="820" height="480" style="background-color:#ffff66"></canvas>
</body>
</html>
Issue solved. All I had to do was to use the most recent versions of the createjs tool in the html code, like this:
<script src="http://code.createjs.com/easeljs-0.7.1.min.js"></script>
<script src="http://code.createjs.com/tweenjs-0.5.1.min.js"></script>
<script src="http://code.createjs.com/movieclip-0.7.1.min.js"></script>
<script src="http://code.createjs.com/preloadjs-0.4.1.min.js"></script>
<script src="http://code.createjs.com/soundjs-0.5.2.min.js"></script>
So, problem solved, please ignore me, just coding around
We are using Vimeo to host corporate training videos and was wondering if there is a way using the API to trigger an event once the playback is complete?!.. We're trying to log when users have fully watched the training material.
Any suggestions welcome. Thank you in advance.
The Vimeo player fires many different javascript events. Finish is one of these events. You can find out more here : https://developer.vimeo.com/player/js-api#events
I set this up as a page on my server, and it works. Once the video player passes 3 seconds, the words You just made my function run. appear inside the tags.
I've included the full page code -- most of the javascript is from the Vimeo API example, and you wouldn't need it.
A few things I ran into - I couldn't get this to run on Jquery 1.10.X -- it looks like this may only work with jquery 1.7.2.
Also note, once the element is shown, it stays shown - so if you wanted it to hide itself again if the person rewinds the player... you'd have to build that in, probably with an "else" statement.
Last, I only tested this in Chrome, so check with your local Internet Exploder before going production.
<html xmlns="http://www.w3.org/1999/xhtml">
<meta name="viewport" content="width = device-width, initial-scale = 1.0" />
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://a.vimeocdn.com/js/froogaloop2.min.js"></script>
</head>
<iframe id="player1" src="http://player.vimeo.com/video/27855315?api=1&player_id=player1" width="400" height="225" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
<p>Video status: <span class="status">...</span></p>
<p><button>Play</button> <button>Pause</button></p>
<h3 id="show"></h3><!-- thats where the message will show -->
<script>
jQuery(document).ready(function($) { // WordPress needs jquery like this...
var iframe = $('#player1')[0],
player = $f(iframe),
status = $('.status');
// When the player is ready, add listeners for pause, finish, and playProgress
player.addEvent('ready', function() {
status.text('ready');
player.addEvent('pause', onPause);
player.addEvent('finish', onFinish);
player.addEvent('playProgress', onPlayProgress);
});
// Call the API when a button is pressed
$('button').bind('click', function() {
player.api($(this).text().toLowerCase());
});
function onPause(id) {
status.text('paused');
}
function onFinish(id) {
status.text('finished');
}
function onPlayProgress(data, id) {
status.text(data.seconds + 's played');
var time = data.seconds; //I added this var and the little if below...that's it.
if (time > 3) {
show.innerHTML = "You just made my function run."; }
}
// add an appropriate event listener
});
</script>
</html>
i am using Vimoe player.js
<script src="https://player.vimeo.com/api/player.js"></script>
and below is the code which i have also integrate onto a website to know how many logged in users watched the complete video.
player.on('ended', function(){
// Video Finished
// ajax call for custom event in WordPress
$.ajax({
url : '<?php echo admin_url("admin-ajax.php" ) ?>',
data : {
action: "create_update_user",
user_id : "<?php echo $user->ID; ?>",
post_id : "<?php echo get_the_ID(); ?>",
status : 'complete' },
dataType : "post",
type: "post",
success: function(response){
}
});
Hope it is useful because player.js is more useful instead of froogaloop2.min.js
thanks
I include the YouTube player as follows in my php file but the player does not show the fullscreen button. Switching to the flash player works (whether through changing the url from /embed to /v or by disabling &html5=1). What am I doing wrong?
An example is available here: http://jonnyrimkus.square7.ch/stuff/youtube_html5_fullscreen.php
<script>
var tag = document.createElement(\'script\');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName(\'script\')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
function onYouTubeIframeAPIReady() {
player = new YT.Player(\'player\', {
playerVars: {
\'allowfullscreen\': \'true\',
\'allowscriptaccess\': \'always\'
},
events: {
\'onReady\': onYouTubePlayerReady,
\'onStateChange\': playerStateChange,
\'onError\': playerStateError
}
});
}
</script>
<iframe id="player" width="425" height="356" border="0" frameborder="0" src="http://www.youtube.com/embed/36XdO9Iv9ew?enablejsapi=1&playerapiid=lastfmplayer&autoplay=1&html5=1&fs=1&origin=http://jonnyrimkus.square7.ch"></iframe>
The fullscreen button will also not be visible if the Youtube player is inside another iframe that does not have allowfullscreen attribute.
Unlike what Google's documentation says(as of 11/2014), the fs attribute in querystring does not seem to influence the visibility of fullscreen. The visibility seems to be influenced by allowfullscreen attribute in iframe which youtube player puts by default during instantiation. That said, if your embed the player inside another iframe you should also mark that iframe for allowfullscreen ( or all its variants webkitallowfullscreen mozallowfullscreen)
<iframe src='' frameborder='0' webkitallowfullscreen mozallowfullscreen allowfullscreen>
<!-- YT player-->
</iframe>
The way you are using the iframe api now does nothing, the api is made to bind on an empty element, like <div id="player"></div>, the id is the first argument in the new YT.Player function.
In order to load a youtube video with the iframe api you need this in the body:
<div id="player"></div>
<script type="text/javascript">
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: 480,
width: 640,
videoId: "36XdO9Iv9ew",
});
}
</script>
There is no need to explicitely specify you want to enable fullscreen when using the iframe api.
You can also just use the iframe without the api, you'll need to specify you want fullscreen when you use it.
<iframe width="640" height="480" frameborder="0" id="player" allowfullscreen="1" title="YouTube video player" src="http://www.youtube.com/embed/36XdO9Iv9ew?enablejsapi=1"></iframe>
Just using the iframe tag is a bit faster, but if you want to use the extra features of the iframe api you have no choice.
A page with examples (also check the source): http://qnet.co/yt
You can also implement the fullscreen feature yourself (not needed for Youtube, but still cool):
var goFullscreen = function(id) {
var el = document.getElementById(id);
if (el.requestFullScreen) {
el.requestFullScreen();
} else if (el.mozRequestFullScreen) {
el.mozRequestFullScreen();
} else if (el.webkitRequestFullScreen) {
el.webkitRequestFullScreen();
}
}
var leaveFullscreen = function() {
if (document.cancelFullScreen) {
document.cancelFullScreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
}
}
and to make the Youtube player go fullscreen with: goFullscreen('player'), and leave fullscreen with: leaveFullscreen()
The different versions of requestFullscreen and cancelFullscreen are for different browsers, because the standard is not yet completely finished
More info on Javascript Fullscreen: http://johndyer.name/native-fullscreen-javascript-api-plus-jquery-plugin/ (relative old document, but still valid)
off-topic: It is useless to echo such a string with php, you can just paste it in the body the file outside of the php tags.
This is still an issue in July 2014, and you just wonder if Google will ever fix this. Actually you can force the Flash player in another way at the client end by using a UA Spoofer, and for Google Chrome browser for instance, Chrome Web Store - djflhoibgkdhkhhcedjiklpkjnoahfmg and then spoof a browser that doesn't understand HTML5.
Actually HTML5 video is still a disaster, and the grainey spikey-jaggy edges to the video and the herringbone patterning though faint is still distracting. Whereas Flash is Smooth, Flawless, Reliable, and Sharp edges with zero patterning artifacts.
HTML5 - still big thumbs down, I wouldn't inflict it on users.
Oh yes and still Fullscreen not appear in embeds like this
Rick Astley - Never Gonna Give You Up # viewpure embed
http://viewpure.com/dQw4w9WgXcQ
You can use the above example to fiddle and diddle with different browser plugins.