I have successfully moved this video camera that I have written in HTML to the right, so that it is in the center of the form, but would like to know how I can find the exact center of the form by finding the total width an dividing it by two in CSS. Any ideas on how I can get the full size of the width of the form?
The following is the source code:
<html>
<head>
<title>Webcam</title>
<style>
div.video-wrap
{
position: relative;
left: 450px;
}
</style>
</head>
<body>
<h2>Image Recognition Login</h2>
<div class="video-wrap">
<video id="video" playsinline autoplay></video>
</div>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<p>Click the following <span class="glyphicon glyphicon-camera"></span>
button to take a facial image of yourself (be sure to look straight into the camera):</p>
<p>
<a href="#" class="btn btn-info btn-lg">
<span class="glyphicon glyphicon-camera"></span> Camera
</a>
</p>
</div>
<div class="controller">
<button id="snap">Capture</button>
</div>
<canvas id="canvas" width="640" height="480"></canvas>
<script>
'use strict';
const video = document.getElementById('video');
const canvas = document.getElementById('canvas');
const snap = document.getElementById('snap');
const errorMsgElement = document.getElementById('spanErrorMsg');
const constraints =
{
audio: true,
video:
{
width: 1280, height: 550
}
};
async function init()
{
try
{
const stream = await navigator.mediaDevices.getUserMedia(constraints);
handleSuccess(stream);
}
catch(e)
{
errorMsgElement.innerHTML = `navigator.getUserMedia.error:${e.toString()}`;
}
}
function handleSuccess(stream)
{
window.stream = stream;
video.srcObject = stream;
}
init();
var context = canvas.getContext('2d');
snap.addEventListener("click", function()
{
// drawImage(image, xCoordinate, yCoordinate, recWidth, recHeight)
context.drawImage(video, 0, 0, 640, 480);
});
</script>
</body>
</html>
You can assign a second class (or better, an id) to the div, then use css on that class/id to move it
Related
I am trying to create a voice-controlled website. What I exactly plan to do is say 'hello' to trigger the button 'Open WebCam'. I am using Annyang for processing my voice commands and simple javascript selectors to open the webcam. But even though, these two work fine separately but every time I try to integrate these two for the final result, I get stuck.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Voice Control</title>
</head>
<style>
div {
width: 500px;
height: 400px;
border: 2px solid black;
position: relative;
}
video {
width: 500px;
height: 400px;
object-fit: cover;
}
</style>
<body>
<center>
<div>
<video id="vid"></video>
</div>
<br />
<button id="but" autoplay>
Open WebCam
</button>
</center>
</body>
<script src="//cdnjs.cloudflare.com/ajax/libs/annyang/2.6.1/annyang.min.js"></script>
<script>
if(annyang) {
var commands = {
'hello': function() {
document.addEventListener("DOMContentLoaded", () => {
var but = document.getElementById("but");
var video = document.getElementById("vid");
var mediaDevices = navigator.mediaDevices;
vid.muted = true;
but.addEventListener("click", () => {
// Accessing the user camera and video.
mediaDevices
.getUserMedia({
video: true,
audio: true,
})
.then((stream) => {
// Changing the source of video to current stream.
video.srcObject = stream;
video.addEventListener("loadedmetadata", () => {
video.play();
});
})
.catch(alert);
});
});
}
};
annyang.addCommands(commands);
annyang.start();
}
</script>
</html>
I have a simple form where a user can enter input a name and submit , when user enter the user name, automatically the video is played in iframe, when user click submit, I want to open a new page which contain a video automatically the video should play when user click submit.
Here is what I have gone so far:
Form page HTML.
<!DOCTYPE html>
<html>
<head>
<title>Wideo iframe</title>
<!-- Website Font style -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
<!-- Google Fonts -->
<link href='https://fonts.googleapis.com/css?family=Passion+One' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Oxygen' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="./css/style.css">
<link rel="stylesheet" href="./css/form.css">
</head>
<body>
<iframe id="videoframe" src="videoframe.html"></iframe>
<br />
<div class="container">
<div class="row main">
<div class="main-login main-center">
<h5>WYP: Formularz.</h5>
<form id="formData" name="contact" role="form" method="post" action="thankspage.html" target="_blank">
<div class="form-group">
<label for="name" class="cols-sm-2 control-label">Imie</label>
<div class="cols-sm-10">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-user fa" aria-hidden="true"></i></span>
<input type="text" class="form-control" name="name" id="name" placeholder="Enter your Name" />
</div>
</div>
</div>
<input type="submit" id="button" value="submit" class="btn btn-primary btn-lg">
</form>
</div>
</div>
</div>
</body>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin="anonymous"></script>
<script src="js/form.js" type="text/javascript"></script>
</html>
here is form.js
//form script
$(document).ready(function () {
$(window).resize(resizeIframe);
$(window).resize();
//play a video when user enter aa name
$("input#name").on("change", function () {
document.getElementById('videoframe').contentWindow.postMessage( "event=fieldchanged&fieldtype=" + "name" + "&value=" + $("input#name").val(), "*");
});
// play a video when a user clicks submit button this is not working !!!!!!!
$("#button").on("click", function(){
document.getElementById('videoframe').contentWindow.postMessage(
JSON.stringify({
event: 'submitSlide()'
}), "*")
})
});
function resizeIframe() {
console.log($("iframe#videoframe").width()*576/1024 );
$("iframe#videoframe").height( $("iframe#videoframe").width()*576/1024 );
}
here is videogframe.js
var autoplay = true;
var movieName1 = "./videos/videoplayback.mp4"
var movieThanks = "./videos/darasa.mp4"
function resizeFunction() {
$("#videowrapper").height($("#videowrapper").width() * 576 / 1024);
}
window.addEventListener("message", receiveMessage, false);
function receiveMessage(eventPosted) {
var values = eventPosted.data.split("&");
var event = values[0].split("=")[1];
var fieldtype = values[1].split("=")[1];
var value = values[2].split("=")[1];
console.log(event, fieldtype, value);
switch (event) {
case "fieldchanged":
switch (fieldtype) {
case "name":
openSlide("nameSlide", {
value: value
});
case "submit":
openSlide("submitSlide", {
value: value,
});
break;
default:
break;
}
break;
default:
console.log("Event not supported");
break;
}
}
function openSlide(slideName, params) {
switch (slideName) {
case "nameSlide":
openName(params);
break;
case "submitSlide":
openSubmit(params);
break;
}
}
var params = null;
function openName(_params) {
playVideo(movieName1);
}
function openSubmit(_params){
playVideo(movieThanks);
}
// function top play video
function playVideo(src) {
$("#playervideo").attr("src", src);
$("#playervideo")[0].muted = false;
if (autoplay == true) {
var playPromise = $("#playervideo")[0].play();
if (playPromise !== undefined) {
playPromise.then(function () {}).catch(function () {
if (autoplay == true) {
$("#video-unmute-button").addClass("show");
$("#playervideo")[0].muted = true;
var playPromise2 = $("#playervideo")[0].play();
playPromise2.then(function () {
}).catch(function () {
$("#video-start-button").addClass("show");
$("#video-start-button").on("click", function () {
$("#playervideo")[0].muted = false;
$("#playervideo")[0].play();
$("#video-start-button").removeClass("show");
});
});
console.log("pause force");
} else {
}
});
} else {}
} else {
}
}
Here video frame html page.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Wideo iframe</title>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="videowrapper">
<video id="playervideo" controls></video>
<canvas id="videocanvas" width="1024" height="576"></canvas>
<div id="testform"><input type="text"/></div>
</div>
</body>
<script src="jslibs/howler.min.js"></script>
<script src="https://code.createjs.com/1.0.0/createjs.min.js"></script>
<script src="js/videoframe.js" type="text/javascript"></script>
</html>
Am using post messege for communication.
Everything works as expected except when I click submit , it just open new page without playing a video .
UPDATE: please any one does not understand what I want , down
Here is repo for what I am trying to do : Video frame
just clone the repo run the page named formpage.html, start filling
the form u will see automatically video plays, but when u click the
submit button just opnes the page but the video is not playing : Test
it your self
UPDATE: to be more specific I want to use post message like this by adding event listner.
// play a video after the user click submit button
$("input#button").on("click", function () {
document.getElementById('videoframe').contentWindow.postMessage( "event=fieldchanged&fieldtype=" + "submit" + "&value=" + $("input#button").val(), "*");
});
Why my video is not playing? what am I doing wrong? thanks.
The problem is actually very simple, it's not working because you're putting the video tag inside the iframe tag in your thankspage.html, remove the iframe tag and add the muted flag and it should work.
So change this
<iframe id="videoframe" src="videoframe.html">
<video width="320" height="240" controls autoplay>
<source src="./video/janusz.mp4" type="video/mp4">
</video>
</iframe>
to this :
<video width="320" height="240" controls autoplay muted>
<source src="./videos/janusz.mp4" type="video/mp4">
</video>
This will of course break your CSS, but you can easily manage to resize it accordingly afterwards by putting the video tag inside a div and manipulate the div.
As you can see here : https://jsfiddle.net/8xfq9urh/
I have a video element displaying a camera source being fed via navigator.getUserMedia (or relevant). How do I determine the codec being utilized to display the video source? I need this information to properly utilize MediaSource.isTypeSupported().
Here is a full-page source of what I'm tinkering with.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Display Webcam Stream & Capture Image</title>
<script type="application/javascript">
//<![CDATA[
window.onload = function(event)
{
if (navigator.getUserMedia) {console.log('1, navigator.getUserMedia');navigator.getUserMedia({video: true}, handleVideo, videoError);}
else if (navigator.mozGetUserMedia) {console.log('2, navigator.mozGetUserMedia');navigator.mozGetUserMedia({video: true}, handleVideo, videoError);}
else if (navigator.webkitGetUserMedia) {console.log('3, navigator.webkitGetUserMedia');navigator.webkitGetUserMedia({video: true}, handleVideo, videoError);}
else if (navigator.msGetUserMedia) {console.log('4, navigator.msGetUserMedia');navigator.msGetUserMedia({video: true}, handleVideo, videoError);}
else if (navigator.oGetUserMedia) {console.log('5, navigator.oGetUserMedia');navigator.oGetUserMedia({video: true}, handleVideo, videoError);}
else {alert('Error: browser not supported?\n\n'+MediaDevices.getUserMedia());}
}
function handleVideo(stream)
{
document.querySelector('#video_example').src = window.URL.createObjectURL(stream);
}
function videoError(e) {
// do something
}
function capture_image()
{
var video = document.querySelector('#video_example');
var canvas = document.createElement('canvas');
canvas.width = video.videoWidth;
canvas.height = video.videoHeight;
var ctx = canvas.getContext('2d');
ctx.drawImage(video, 0, 0);
document.getElementsByTagName('body')[0].appendChild(canvas);
}
//]]>
</script>
<style>
#container {height: 768px; margin: 0px auto; width: 1024px;}
#video_example {height: 768px; width: 1024px;}
</style>
</head>
<body>
<div id="container">
<video autoplay="true" id="video_example"></video>
<input onclick="capture_image();" type="button" value="Capture Image" />
</div>
</body>
</html>
Mozilla's Developer Network (MDN) didn't seem to suggest anything of the likes exists?
https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement
Hey my image wont load onto the canvas. I've been at this for hours and I cant figure out what it is. I started to debug my code in google chrome and the console says canvas.width is set to null. Thats the only error I can find.
Here is my code:
function gameLoop()
{
drawBackground();
drawPlayer();
}
function drawBackground()
{
var img = new Image();
img.src = "Images/GrassTexture.png";
g.drawImage(img,0, 0, 500, 500);
}
function drawPlayer()
{
var player1 = new Image();
player1.src = "Images/Players/Mignolet.png";
g.drawImage(player1,0, 0,50 , 50);
}
setInterval(gameLoop, 1);
var canvas = document.getElementById("Canvas");
canvas.width = 500;
canvas.height = 500;
var g = canvas.getContext("2d");
html
html>
<head>
<title>Football</title>
<link rel="stylesheet" type="text/css" href="Css/Css.css">
</head>
<body>
<script type="text/javascript" src="Js/Js.js"></script>
<div id="Background">
<div id="Header">
</div>
<div id="Wrapper">
<canvas id="Canvas">
</canvas>
</div>
</div>
</body>
</html>
Css
#Canvas
{
border: 1px solid black;
width:500px;
height:500px;
margin-left: 300px
}
the script is being called before the html is rendered which is why you were getting the error. its always best to place scripts just before the <body> tag ends.
<html>
<head>
<title>Football</title>
<link rel="stylesheet" type="text/css" href="Css/Css.css">
</head>
<body>
<div id="Background">
<div id="Header">
</div>
<div id="Wrapper">
<canvas id="Canvas">
</canvas>
</div>
</div>
<script type="text/javascript" src="Js/Js.js"></script>
</body>
I am trying to create an HTML5 video player without the default controls that will play/pause by simply clicking the video(or overlaying div). I want to hide the default controls completely. I want the user to only be able to pause/play by clicking on the video. Is this possible? My initial strategy was to overlay a transparent div above the element that would serve as my play/pause button. Below is the HTML and javascript I started, but need a little bit of help. Thanks everyone!
<!-- Video -->
<div style="height:980px;height:540px;">
<div style="z-index:100;position:absolute;">
<video id="myVideo" width="980" height="540" poster="http://d3v.lavalobe.com/voicecarousel/images/Carousel_Still.png" audio="muted" autoplay="true">
<source src="http://d3v.lavalobe.com/voicecarousel/video/CarouselWBG_v3.mp4" type="video/mp4">
</video>
</div>
<div id="imgPoster" style="height:300px; width:300px; background-color:red; z-index:500;position:absolute;"></div>
</div>
<!-- end Video -->
<!-- JAVASCRIPT FOR VIDEO PLAYER -->
<script type="text/javascript">
var videoEl = $('#myVideo');
playPauseBtn = $('#imgPoster');
playPauseBtn.bind('click', function () {
if (videoEl.paused) {
videoEl.play();
} else {
videoEl.pause();
}
});
videoEl.removeAttribute("controls");
</script>
<!-- END JAVASCRIPT FOR VIDEO PLAYER -->
There's no need for two id attributes in the video tag, and there's no need for a separate source tag if only using one file format, and the video and poster you are linking to does not exist.
Anyway, example below:
<video id="myVideo" width="980" height="540" poster="http://d3v.lavalobe.com/voicecarousel/images/myPoster.png" audio="muted" autoplay="true" src="http://d3v.lavalobe.com/voicecarousel/video/myVid.mp4" type="video/mp4">
</video>
<script type="text/javascript">
$("#myVideo").bind("click", function () {
var vid = $(this).get(0);
if (vid.paused) {
vid.play();
} else {
vid.pause();
}
});
</script>
EDIT: adding a fiddle : http://jsfiddle.net/SKfBY/
Had a quick look at your site, and the video is cool :-)
If you look closely you'll see that there are two jQuery files added, not really the problem here, but you only need one, the second one will make your page load slower.
Also not the problem, but you should consider using the HTML5 doctype like below, as the video element is HTML5, but most browsers will figure it out anyway.
The problem seems to be my fault, jsFiddle automagically inserts the $document.ready function, and I forgot it in my example, that's why it's not working for you.
Here is a complete rundown of how I would write it, I removed both instances of jQuery for you and replaced with Google's version of jQuery, wich is usually a better option, and also you should probably remove any scripts that you don't need, like removing swfObject if the site does not contain any flash files using swfobject etc.
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="http://dev4.baytechlabs.com/Voice_Carousel/css/main/style.css"/>
<link rel="stylesheet" type="text/css" href="http://dev4.baytechlabs.com/Voice_Carousel/css/main/thickbox.css"/>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script src="http://dev4.baytechlabs.com/Voice_Carousel/js/main/cufon-yui.js" type="text/javascript"></script>
<script src="http://dev4.baytechlabs.com/Voice_Carousel/js/main/Pristina_400.font.js" type="text/javascript"></script>
<script src="http://dev4.baytechlabs.com/Voice_Carousel/js/main/MomsTypewriter_400.font.js" type="text/javascript"></script>
<script src="http://dev4.baytechlabs.com/Voice_Carousel/js/main/cufon-config.js" type="text/javascript"></script>
<script src="http://dev4.baytechlabs.com/Voice_Carousel/js/thickbox.js" type="text/javascript"></script>
<script src="http://dev4.baytechlabs.com/Voice_Carousel/js/swfobject.js" type="text/javascript"></script>
<script type="text/javascript" src="http://dev4.baytechlabs.com/Voice_Carousel/js/facebox/facebox.js"></script>
<link href="http://dev4.baytechlabs.com/Voice_Carousel/js/facebox/facebox.css" media="screen" rel="stylesheet" type="text/css"/>
<script type="text/javascript">
$(document).ready(function() {
$("#myVideo").bind("click", function () {
var vid = $(this).get(0);
if (vid.paused) {
vid.play();
} else {
vid.pause();
}
});
});
</script>
</head>
<body>
<video id="myVideo" width="980" height="540" audio="muted" autoplay="true" src="http://d3v.lavalobe.com/voicecarousel/video/CarouselWBG_v3.mp4" type="video/mp4">
</video>
</body>
</html>
This code works for me:
function vidplay() {
var video = document.getElementById("video1");
var button = document.getElementById("play");
if (video.paused) {
video.play();
button.textContent = "||";
} else {
video.pause();
button.textContent = ">";
}
}
function restart() {
var video = document.getElementById("video1");
video.currentTime = 0;
}
function skip(value) {
var video = document.getElementById("video1");
video.currentTime += value;
}
But setting the time to 0 rewound the video only; no playback. So I wanted the video to replay after rewinding, and came up with this:
function restart() {
var video = document.getElementById("video1");
var button = document.getElementById("play");
if (video.paused) {
}
else {
video.pause();
}
video.currentTime = 0;
video.play();
button.textContent = "||";
}
Here are the buttons:
<div id="buttonbar">
<button id="restart" onclick="restart();">[]</button>
<button id="rew" onclick="skip(-10)"><<</button>
<button id="play" onclick="vidplay()">></button>
<button id="fastFwd" onclick="skip(10)">>></button>
</div>
My two-cent's worth...
Cheers