Salut à tous,
Voilà au moins 2 semaines que je suis sur ce problème tout bête
Alors je m'explique je souhaite faire un mini-programme de visio-chat (chat avec caméra).
Le principe est que mon script javascript accède a la caméra, récupère le flux vidéo et l'encode en base64, jusque là c'est parfait, ensuite j'envoie le base64 généré via un post en xmlhttprequest vers une page php qui stocke le tout dans une base de donnée.
Le code :
L'autre code (php) :
Voilà, lors de la sortie du code base64 de la base de donnée il devient invalide.
Merci d'avance pour votre aide @+
Modifié par pinguix40 (12 Jul 2013 - 13:46)
Voilà au moins 2 semaines que je suis sur ce problème tout bête
Alors je m'explique je souhaite faire un mini-programme de visio-chat (chat avec caméra).
Le principe est que mon script javascript accède a la caméra, récupère le flux vidéo et l'encode en base64, jusque là c'est parfait, ensuite j'envoie le base64 généré via un post en xmlhttprequest vers une page php qui stocke le tout dans une base de donnée.
Le code :
<!doctype html>
<html>
<head>
<title>CamCam</title>
</head>
<body>
<canvas id="canvas">
</canvas>
<video id="video">
</video>
<input type="button" value="cheese" onclick="prendre()"/>
<script>
function getXMLHttpRequest() {
var xhr = null;
if (window.XMLHttpRequest || window.ActiveXObject) {
if (window.ActiveXObject) {
try {
xhr = new ActiveXObject('Msxml2.XMLHTTP');
} catch(e) {
xhr = new ActiveXObject('Microsoft.XMLHTTP');
}
} else {
xhr = new XMLHttpRequest();
}
} else {
alert('Votre navigateur ne supporte pas l\'objet XMLHTTPRequest...');
return null;
}
return xhr;
}
var canvas=document.getElementById('canvas');var ctx=canvas.getContext('2d'), streaming=false, width=600, height=450, video=document.getElementById('video');
function init() {
navigator.getMedia = ( navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ||
navigator.msGetUserMedia);
navigator.getMedia(
{
video: true,
audio: false
},
function(stream) {
if (navigator.mozGetUserMedia) {
video.mozSrcObject = stream;
} else {
var vendorURL = window.URL || window.webkitURL;
video.src = vendorURL ? vendorURL.createObjectURL(stream) : stream;
}
video.play();
},
function(err) {
console.log("Une erreur est survenue " + err);
}
);
}
function prendre() {
var finalheight=video.videoHeight / (video.videoWidth/width);
ctx.save();
ctx.translate(width, 0);
ctx.scale(-1, 1);
ctx.drawImage(video, 0, 0, width, finalheight);
ctx.restore();
ctx.scale(1, 1);
var xhr=getXMLHttpRequest();
xhr.onreadystatechange = function() {
if(xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0))
{
}
};
xhr.open('POST', 'http://192.168.0.131/camcam/traite.php', true);
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.setRequestHeader("Content-length", (canvas.toDataURL()).length);
xhr.send('flux=' + canvas.toDataURL());
}
init();
</script>
</body>
</html>
L'autre code (php) :
<?php
try
{
$bdd = new PDO('mysql:host=localhost;dbname=camcam', 'root', '********');
$bdd->exec('SET CHARACTER SET utf8');
}
catch(Exception $e)
{
die('Erreur : '.$e->getMessage());
}
if(isset($_POST['flux']))
{
$insert=$bdd->prepare('INSERT INTO flux_utilisateur (utilisateur, flux) VALUES(:pseudo, :flux)');
$insert->execute(array(
'flux' => $_POST['flux'],
'pseudo' => '******',
));
}
else
{
$cam=$bdd->query('SELECT * FROM flux_utilisateur WHERE pseudo=******');
$res=$cam->fetch();
echo '<img src="' . $res['flux'] . '" alt="Erreur lors de la récupération du flux"/>';
}
?>
Voilà, lors de la sortie du code base64 de la base de donnée il devient invalide.
Merci d'avance pour votre aide @+
Modifié par pinguix40 (12 Jul 2013 - 13:46)
.
.
.
(QuentinC et jb_gfx), mon problème est enfin résolus 
.