Bonjour,
Je risque d'avoir de propos raciste envers IE voir même IE phobe dans se topic !!!
Bon vous allez rire, j'ai un bug quand j'affiche mon "site" (oui, c'est qu'une page en fait) sous IE.
Mais ce bug est quand même bizarre. Je vous fait un dessins.
Voilà donc, je suis au boulot, la page est hébergée sur le serveur chez moi, et dans le PC du boulot également (avec wamp sur les deux machine). La caméra est sur le même réseau que le PC du boulot.
Bon est-ce clair ? :p
Voilà à quoi ressemble ma page web
Donc quand je regarde ma page qui est sur le PC boulot, tout fonctionne sous FireFox, sous IE j'ai deux boutons (droite et gauche) qui ne fonctionnent pas quand j'ai la camera activée... Enfin ils fonctionnent, mais ils ne restent pas enclenché alors qu'ils le devraient...
Et quand je regarde la page hébergée chez moi, tout fonctionne sous FireFox mais sous IE... C'est carrément l'affichage de la camera qui ne fonctionne pas... Le clic sur Afficher la vidéo semble rafraichir la page. Je pense que le problème des boutons droite et gauche reste le même...
Voici le code des pages :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- Ici on appelle jquery depuis google -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<title>Page de test</title>
<!-- Affichage de la camera -->
<SCRIPT LANGUAGE="JavaScript">
function camera(mondiv){
// Set the BaseURL to the URL of your camera
var BaseURL = "http://192.168.1.48/"; //http://192.168.1.48/
// DisplayWidth & DisplayHeight specifies the displayed width & height of the image.
// You may change these numbers, the effect will be a stretched or a shrunk image
var DisplayWidth = "700"; //700
var DisplayHeight = "900"; //900
// This is the path to the image generating file inside the camera itself
var File = "axis-cgi/mjpg/video.cgi?resolution=1920x1080";
// No changes required below this point
var output = "";
if ((navigator.appName == "Microsoft Internet Explorer" ) &&
(navigator.platform != "MacPPC" ) && (navigator.platform != "Mac68k" ))
{
// If Internet Explorer under Windows then use ActiveX
output = '<OBJECT ID="Player" width='
output += DisplayWidth;
output += ' height=';
output += DisplayHeight;
output += ' CLASSID="CLSID:DE625294-70E6-45ED-B895-CFFA13AEB044" ';
output += 'CODEBASE="';
output += BaseURL;
output += 'activex/AMC.cab#version=3,20,18,0">';
output += '<PARAM NAME="MediaURL" VALUE="';
output += BaseURL;
output += File + '">';
output += '<param name="MediaType" value="mjpeg-unicast">';
output += '<param name="ShowStatusBar" value="1">';
output += '<param name="ShowToolbar" value="1">';
output += '<param name="AutoStart" value="1">';
output += '<param name="StretchToFit" value="1">';
output += '<BR><B>Axis Media Control</B><BR>';
output += 'The AXIS Media Control, which enables you ';
output += 'to view live image streams in Microsoft Internet';
output += ' Explorer, could not be registered on your computer.';
output += '<BR></OBJECT>';
}
else {
// If not IE for Windows use the browser itself to display
theDate = new Date();
output = '<IMG SRC="';
output += BaseURL;
output += File;
output += '&dummy=' + theDate.getTime().toString(10);
output += '" HEIGHT="';
output += DisplayHeight;
output += '" WIDTH="';
output += DisplayWidth;
output += '" ALT="Camera Image">';
}
// document.write(output);
document.getElementById(mondiv).innerHTML = output;
document.Player.ToolbarConfiguration = "play,+snapshot,+fullscreen"
// document.Player.UIMode = "MDConfig";
// document.Player.MotionConfigURL = "/axis-cgi/operator/param.cgi?ImageSource=0"
// document.Player.MotionDataURL = "/axis-cgi/motion/motiondata.cgi";
}
</SCRIPT>
<script type="text/javascript">
var image = 'GappRPstopyel.jpg';
var size = 102936;
var time1 = 0;
var time2 = 0;
var vitesse = 0;
function start_test_vitesse()
{
document.getElementById("content").style.visibility="visible";
document.getElementById("erreur").style.visibility="hidden";
time1 = new Date();
time1 = time1.getTime();
var img = new Image();
img.src = image+'?'+time1;
img.onload=end_test_vitesse;
}
function end_test_vitesse()
{
var time2 = new Date();
time2 = time2.getTime();
var ms = time2-time1;
vitesse = Math.round(size/ms*100)/100;
document.getElementById('vitesse').value=vitesse+'ko/s';
if(vitesse<56){
alert("Votre connexion est trop lente, c'est un risque pour les personnes ainsi que le matériel.");
}
}
var passé = false;
$(document).ready(function () {
// ici on creer une fonction on lui passe un paramettre un id et un statut
function sendPhp(mot,valeur){
$.ajax({
type: "POST",//je dis a ajax d'envoiyer les donnees en post
data: {mot : mot,valeur : valeur}, //ici j'envoi les variable statut et id a fichier.php
url: "Commande1.php",//le fichier php
success:function(data){
//ici tu peux ajouter une image ou text pour dire que cela c'est bien passe
}
});
}
function switchImg(images,type){
var src=images.attr('src'); //on récupéré la valeur src de l'image actuelle
if(type == '1'){
if(src=='DP2.png'){ //si le src vos plus.png alors on initialise la variable img a moin.png
var img='DP1.png';
sendPhp('5','10');
}
else{//sinon elle vos plus.png
var img='DP2.png';
sendPhp('5','01');
}
}
if(type == '2'){
if(src=='AU.png'){ //si le src vos plus.png alors on initialise la variable img a moin.png
var img='AU1.png';
sendPhp('2','00');
}
}
if(type == '3'){
if(src=='AU1.png'){ //si le src vos plus.png alors on initialise la variable img a moin.png
var img='AU.png';
sendPhp('2','11');
}
}
images.attr("src", img); //on modifie le src par la nouvelle valeur
}
$(".gaucheTete").mouseup(function(){
sendPhp('3','00');
}).mousedown(function(){
sendPhp('3','10');
}).mousemove(function(){
sendPhp('3','00');
});
$(".droiteTete").mouseup(function(){
sendPhp('3','00');
}).mousedown(function(){
sendPhp('3','01');
}).mousemove(function(){
sendPhp('3','00');
});
function removeclass(){
$("#action1").removeClass('activer');
$("#action2").removeClass('activer');
}
$("#action1").click(function() {
$("#action1").addClass("activer");
setTimeout(removeclass,2000);
if($("#action2").hasClass("activer")==true){
sendPhp('4','11');
setTimeout(sendPhp,5000,'4','00');
}
});
$("#action2").click(function() {
$("#action2").addClass("activer");
setTimeout(removeclass,2000);
if($("#action1").hasClass("activer")==true){
sendPhp('4','11');
setTimeout(sendPhp,5000,'4','00');
}
});
$(".plusoumoins").mouseup(function(){
switchImg($(this),1);//on appelle la fonction et on lui donne en paramètre l'objet
});
$(".AU").mousedown(function(){
switchImg($(this),2);
});
$(".AUrelache").mouseup(function(){
switchImg($(".AU"),3);//on appelle la fonction et on lui donne en paramètre l'objet
});
function char($text)
{
$text = htmlentities($text, ENT_NOQUOTES, "UTF-8");
$text = htmlspecialchars_decode($text);
return $text;
}
$("#BoutonCam").click(function(){
if(document.getElementById("BoutonCam").value == "Afficher la vidéo"){
document.getElementById("BoutonCam").value="Cacher la vidéo";
camera("camera");
}
else{
location.reload();
//document.getElementById("BoutonCam").value="Afficher la vidéo";
//document.getElementById("camera").innerHTML = '';
}
});
});
</script>
</head>
<body onload="javascript:start_test_vitesse();">
<?
mysql_connect("localhost","user","");
mysql_select_db("test");
$sql = 'SELECT Valeurs FROM mots WHERE ID = 5';
$mot5 = mysql_query($sql);
$row5 = mysql_fetch_row($mot5);
$sql = 'SELECT Valeurs FROM mots WHERE ID = 2';
$mot2 = mysql_query($sql);
$row2 = mysql_fetch_row($mot2);
mysql_close();
?>
<!--
ici je mets une image je mets une class car plus facile pour ecouter les evenements si il en a plusieurs
et je mets un id qui n'ai pas top car un id ne peu pas commence par un numerique puis ne peu pas etre un doublons mais bon ici je c'est sur element jouer
-->
<iframe src="../test/lecture.php" width="420" height="30"></iframe>
<table>
<tr>
<td>
<div id="erreur">Javascript est désactivé. Vous devez l'activer pour utiliser la commande.</div>
<div id ="content" style="width:1100px; height:720px; visibility:hidden;" > <!-- test -->
<!-- Affichage des images -->
<?
if($row2['0'] == 11){
echo '<img src="AU.png" id="AU" class="AU" style="float:left; margin:0;"/>';
}else{
echo '<img src="AU1.png" id="AU" class="AU" style="float:left; margin:0;"/>';
}
?>
<img src="PoussoireV.png" id="action1" class="" style="float:left; margin:0;"/>
<img src="G.png" id="1" class="gaucheTete" style="float:left; margin:0;"/>
<img src="D.png" id="1" class="droiteTete" style="float:left; margin:0;"/>
<?
if($row5['0'] == 10){
echo '<img src="DP1.png" id="1" class="plusoumoins" style="float:left; margin:0;"/>';
}else{
echo '<img src="DP2.png" id="1" class="plusoumoins" style="float:left; margin:0;"/>';
}
?>
<img src="Logo.png" id="1" class="" style="float:left; margin:0;"/>
<img src="PoussoireV2.png" id="action2" class="" style="float:left; margin:0;"/>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br />
<img src="AUrelache.jpg" id="1" class="AUrelache" align="center"/>Relacher l'arrêt d'urgence
<br><br><br><br />
<input type="button" id="BoutonCam" value="Afficher la vidéo" />
</div>
</td>
<td>
<?php /*?><div id="camera2">
<input type="button" id="BoutonCam" value="Afficher vidéo" />
<?
if($row2['0'] == 11){
echo '<img src="AU.png" id="AU" class="AU" style="float:left; margin:0;"/>';
}else{
echo '<img src="AU1.png" id="AU" class="AU" style="float:left; margin:0;"/>';
}
?>
<img src="PoussoireV.png" id="action1" class="" style="float:left; margin:0;"/>
<img src="G.png" id="1" class="gaucheTete" style="float:left; margin:0;"/>
<img src="D.png" id="1" class="droiteTete" style="float:left; margin:0;"/>
<?
if($row5['0'] == 10){
echo '<img src="DP1.png" id="1" class="plusoumoins" style="float:left; margin:0;"/>';
}else{
echo '<img src="DP2.png" id="1" class="plusoumoins" style="float:left; margin:0;"/>';
}
?>
<img src="Logo.png" id="1" class="" style="float:left; margin:0;"/>
<img src="PoussoireV2.png" id="action2" class="" style="float:left; margin:0;"/>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br />
<img src="AUrelache.jpg" id="1" class="AUrelache" align="center"/>Relacher l'arrêt d'urgence
<br><br><br><br />
<input type="button" id="BoutonCam" value="Afficher vidéo" />
</div><?php */?>
</td>
<td>
<div id="camera"></div>
</td>
</tr>
<tr>
<td>
Vitesse de connexion: <input type="text" id="vitesse" size="27" /><input type="button" value="Tester" onclick="javascript:start_test_vitesse();" />
</td>
<td>
</td>
</tr>
</table>
</body>
</html>
Voilà j'espère que c'est assez clair, c'est pas facile à expliquer comme problème ^^'
Merci de votre lecture.
Bonjour,
Je risque d'avoir de propos raciste envers IE voir même IE phobe dans se topic !!!
Bon vous allez rire, j'ai un bug quand j'affiche mon "site" (oui, c'est qu'une page en fait) sous IE.
Mais ce bug est quand même bizarre. Je vous fait un dessins.
[img]http://img22.imageshack.us/img22/3728/schemap.png[/img]
Voilà donc, je suis au boulot, la page est hébergée sur le serveur chez moi, et dans le PC du boulot également (avec wamp sur les deux machine). La caméra est sur le même réseau que le PC du boulot.
Bon est-ce clair ? :p
Voilà à quoi ressemble ma page web
[url=http://img845.imageshack.us/img845/4772/mapage.png][img]http://img845.imageshack.us/img845/4772/mapage.png[/img][/url]
Donc quand je regarde ma page qui est sur le PC boulot, tout fonctionne sous FireFox, sous IE j'ai deux boutons (droite et gauche) qui ne fonctionnent pas quand j'ai la camera activée... Enfin ils fonctionnent, mais ils ne restent pas enclenché alors qu'ils le devraient...
Et quand je regarde la page hébergée chez moi, tout fonctionne sous FireFox mais sous IE... C'est carrément l'affichage de la camera qui ne fonctionne pas... Le clic sur Afficher la vidéo semble rafraichir la page. Je pense que le problème des boutons droite et gauche reste le même...
Voici le code des pages :
[php]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- Ici on appelle jquery depuis google -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<title>Page de test</title>
<!-- Affichage de la camera -->
<SCRIPT LANGUAGE="JavaScript">
function camera(mondiv){
// Set the BaseURL to the URL of your camera
var BaseURL = "http://192.168.1.48/"; //http://192.168.1.48/
// DisplayWidth & DisplayHeight specifies the displayed width & height of the image.
// You may change these numbers, the effect will be a stretched or a shrunk image
var DisplayWidth = "700"; //700
var DisplayHeight = "900"; //900
// This is the path to the image generating file inside the camera itself
var File = "axis-cgi/mjpg/video.cgi?resolution=1920x1080";
// No changes required below this point
var output = "";
if ((navigator.appName == "Microsoft Internet Explorer" ) &&
(navigator.platform != "MacPPC" ) && (navigator.platform != "Mac68k" ))
{
// If Internet Explorer under Windows then use ActiveX
output = '<OBJECT ID="Player" width='
output += DisplayWidth;
output += ' height=';
output += DisplayHeight;
output += ' CLASSID="CLSID:DE625294-70E6-45ED-B895-CFFA13AEB044" ';
output += 'CODEBASE="';
output += BaseURL;
output += 'activex/AMC.cab#version=3,20,18,0">';
output += '<PARAM NAME="MediaURL" VALUE="';
output += BaseURL;
output += File + '">';
output += '<param name="MediaType" value="mjpeg-unicast">';
output += '<param name="ShowStatusBar" value="1">';
output += '<param name="ShowToolbar" value="1">';
output += '<param name="AutoStart" value="1">';
output += '<param name="StretchToFit" value="1">';
output += '<BR><B>Axis Media Control</B><BR>';
output += 'The AXIS Media Control, which enables you ';
output += 'to view live image streams in Microsoft Internet';
output += ' Explorer, could not be registered on your computer.';
output += '<BR></OBJECT>';
}
else {
// If not IE for Windows use the browser itself to display
theDate = new Date();
output = '<IMG SRC="';
output += BaseURL;
output += File;
output += '&dummy=' + theDate.getTime().toString(10);
output += '" HEIGHT="';
output += DisplayHeight;
output += '" WIDTH="';
output += DisplayWidth;
output += '" ALT="Camera Image">';
}
// document.write(output);
document.getElementById(mondiv).innerHTML = output;
document.Player.ToolbarConfiguration = "play,+snapshot,+fullscreen"
// document.Player.UIMode = "MDConfig";
// document.Player.MotionConfigURL = "/axis-cgi/operator/param.cgi?ImageSource=0"
// document.Player.MotionDataURL = "/axis-cgi/motion/motiondata.cgi";
}
</SCRIPT>
<script type="text/javascript">
var image = 'GappRPstopyel.jpg';
var size = 102936;
var time1 = 0;
var time2 = 0;
var vitesse = 0;
function start_test_vitesse()
{
document.getElementById("content").style.visibility="visible";
document.getElementById("erreur").style.visibility="hidden";
time1 = new Date();
time1 = time1.getTime();
var img = new Image();
img.src = image+'?'+time1;
img.onload=end_test_vitesse;
}
function end_test_vitesse()
{
var time2 = new Date();
time2 = time2.getTime();
var ms = time2-time1;
vitesse = Math.round(size/ms*100)/100;
document.getElementById('vitesse').value=vitesse+'ko/s';
if(vitesse<56){
alert("Votre connexion est trop lente, c'est un risque pour les personnes ainsi que le matériel.");
}
}
var passé = false;
$(document).ready(function () {
// ici on creer une fonction on lui passe un paramettre un id et un statut
function sendPhp(mot,valeur){
$.ajax({
type: "POST",//je dis a ajax d'envoiyer les donnees en post
data: {mot : mot,valeur : valeur}, //ici j'envoi les variable statut et id a fichier.php
url: "Commande1.php",//le fichier php
success:function(data){
//ici tu peux ajouter une image ou text pour dire que cela c'est bien passe
}
});
}
function switchImg(images,type){
var src=images.attr('src'); //on récupéré la valeur src de l'image actuelle
if(type == '1'){
if(src=='DP2.png'){ //si le src vos plus.png alors on initialise la variable img a moin.png
var img='DP1.png';
sendPhp('5','10');
}
else{//sinon elle vos plus.png
var img='DP2.png';
sendPhp('5','01');
}
}
if(type == '2'){
if(src=='AU.png'){ //si le src vos plus.png alors on initialise la variable img a moin.png
var img='AU1.png';
sendPhp('2','00');
}
}
if(type == '3'){
if(src=='AU1.png'){ //si le src vos plus.png alors on initialise la variable img a moin.png
var img='AU.png';
sendPhp('2','11');
}
}
images.attr("src", img); //on modifie le src par la nouvelle valeur
}
$(".gaucheTete").mouseup(function(){
sendPhp('3','00');
}).mousedown(function(){
sendPhp('3','10');
}).mousemove(function(){
sendPhp('3','00');
});
$(".droiteTete").mouseup(function(){
sendPhp('3','00');
}).mousedown(function(){
sendPhp('3','01');
}).mousemove(function(){
sendPhp('3','00');
});
function removeclass(){
$("#action1").removeClass('activer');
$("#action2").removeClass('activer');
}
$("#action1").click(function() {
$("#action1").addClass("activer");
setTimeout(removeclass,2000);
if($("#action2").hasClass("activer")==true){
sendPhp('4','11');
setTimeout(sendPhp,5000,'4','00');
}
});
$("#action2").click(function() {
$("#action2").addClass("activer");
setTimeout(removeclass,2000);
if($("#action1").hasClass("activer")==true){
sendPhp('4','11');
setTimeout(sendPhp,5000,'4','00');
}
});
$(".plusoumoins").mouseup(function(){
switchImg($(this),1);//on appelle la fonction et on lui donne en paramètre l'objet
});
$(".AU").mousedown(function(){
switchImg($(this),2);
});
$(".AUrelache").mouseup(function(){
switchImg($(".AU"),3);//on appelle la fonction et on lui donne en paramètre l'objet
});
function char($text)
{
$text = htmlentities($text, ENT_NOQUOTES, "UTF-8");
$text = htmlspecialchars_decode($text);
return $text;
}
$("#BoutonCam").click(function(){
if(document.getElementById("BoutonCam").value == "Afficher la vidéo"){
document.getElementById("BoutonCam").value="Cacher la vidéo";
camera("camera");
}
else{
location.reload();
//document.getElementById("BoutonCam").value="Afficher la vidéo";
//document.getElementById("camera").innerHTML = '';
}
});
});
</script>
</head>
<body onload="javascript:start_test_vitesse();">
<?
mysql_connect("localhost","user","");
mysql_select_db("test");
$sql = 'SELECT Valeurs FROM mots WHERE ID = 5';
$mot5 = mysql_query($sql);
$row5 = mysql_fetch_row($mot5);
$sql = 'SELECT Valeurs FROM mots WHERE ID = 2';
$mot2 = mysql_query($sql);
$row2 = mysql_fetch_row($mot2);
mysql_close();
?>
<!--
ici je mets une image je mets une class car plus facile pour ecouter les evenements si il en a plusieurs
et je mets un id qui n'ai pas top car un id ne peu pas commence par un numerique puis ne peu pas etre un doublons mais bon ici je c'est sur element jouer
-->
<iframe src="../test/lecture.php" width="420" height="30"></iframe>
<table>
<tr>
<td>
<div id="erreur">Javascript est désactivé. Vous devez l'activer pour utiliser la commande.</div>
<div id ="content" style="width:1100px; height:720px; visibility:hidden;" > <!-- test -->
<!-- Affichage des images -->
<?
if($row2['0'] == 11){
echo '<img src="AU.png" id="AU" class="AU" style="float:left; margin:0;"/>';
}else{
echo '<img src="AU1.png" id="AU" class="AU" style="float:left; margin:0;"/>';
}
?>
<img src="PoussoireV.png" id="action1" class="" style="float:left; margin:0;"/>
<img src="G.png" id="1" class="gaucheTete" style="float:left; margin:0;"/>
<img src="D.png" id="1" class="droiteTete" style="float:left; margin:0;"/>
<?
if($row5['0'] == 10){
echo '<img src="DP1.png" id="1" class="plusoumoins" style="float:left; margin:0;"/>';
}else{
echo '<img src="DP2.png" id="1" class="plusoumoins" style="float:left; margin:0;"/>';
}
?>
<img src="Logo.png" id="1" class="" style="float:left; margin:0;"/>
<img src="PoussoireV2.png" id="action2" class="" style="float:left; margin:0;"/>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br />
<img src="AUrelache.jpg" id="1" class="AUrelache" align="center"/>Relacher l'arrêt d'urgence
<br><br><br><br />
<input type="button" id="BoutonCam" value="Afficher la vidéo" />
</div>
</td>
<td>
<?php /*?><div id="camera2">
<input type="button" id="BoutonCam" value="Afficher vidéo" />
<?
if($row2['0'] == 11){
echo '<img src="AU.png" id="AU" class="AU" style="float:left; margin:0;"/>';
}else{
echo '<img src="AU1.png" id="AU" class="AU" style="float:left; margin:0;"/>';
}
?>
<img src="PoussoireV.png" id="action1" class="" style="float:left; margin:0;"/>
<img src="G.png" id="1" class="gaucheTete" style="float:left; margin:0;"/>
<img src="D.png" id="1" class="droiteTete" style="float:left; margin:0;"/>
<?
if($row5['0'] == 10){
echo '<img src="DP1.png" id="1" class="plusoumoins" style="float:left; margin:0;"/>';
}else{
echo '<img src="DP2.png" id="1" class="plusoumoins" style="float:left; margin:0;"/>';
}
?>
<img src="Logo.png" id="1" class="" style="float:left; margin:0;"/>
<img src="PoussoireV2.png" id="action2" class="" style="float:left; margin:0;"/>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br />
<img src="AUrelache.jpg" id="1" class="AUrelache" align="center"/>Relacher l'arrêt d'urgence
<br><br><br><br />
<input type="button" id="BoutonCam" value="Afficher vidéo" />
</div><?php */?>
</td>
<td>
<div id="camera"></div>
</td>
</tr>
<tr>
<td>
Vitesse de connexion: <input type="text" id="vitesse" size="27" /><input type="button" value="Tester" onclick="javascript:start_test_vitesse();" />
</td>
<td>
</td>
</tr>
</table>
</body>
</html>
[/php]
Voilà j'espère que c'est assez clair, c'est pas facile à expliquer comme problème ^^'
Merci de votre lecture.
