I want to build a web video chat application using ONLY javascript,HTML5,css. Currently i tried to application that works in browser but little slow.
My basic logic is using java script writing a file to external file From there data initializing to image so that flow of image look like video
writing to php file code
<script>
var onFailSoHard = function (e) {
console.log('Reeeejected!', e);
};
window.URL = window.URL || window.webkitURL;
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia || navigator.msGetUserMedia;
var video = document.querySelector('video');
if (navigator.getUserMedia) {
navigator.getUserMedia({
audio: true,
video: true
}, function (stream) {
video.src = window.URL.createObjectURL(stream);
}, onFailSoHard);
} else {
video.src = 'somevideo.webm'; // fallback.
}
var canvas = document.querySelector('canvas');
var ctx = canvas.getContext('2d');
setInterval(function () {
ctx.drawImage(video, 0, 0, video.width, video.height, 0, 0, canvas.width, canvas.height);
var imgData = canvas.toDataURL();
$.post('upload.php', {
data: (encodeURIComponent(imgData))
});
}, 0.01);
</script>
php code to write to external file
<?php
$data=rawurldecode ($_POST['data']);
file_put_contents('data.txt',$data);
?>
Reading from external file
<?php
header('Content-type:image/png');
readfile('data.txt');
?>
showing image image so that look like video
<script>
setInterval(function () {
$.get('streamData.php', function (data) {
$('#live').attr('src', data);
});
}, 1000 / 80);
</script>
This code is Working but problem this code is "It is too slow" and this is not working becaming more slow in Mobile devices please help me to work this properly??
Or suggest any other way of building slimier type of browser based app that should work in all devices (Devices that not use WEBRTC).
Instead of post/get use Websockets. It's possible with PHP (install eg. http://socketo.me/) but definitely not the way I'd go (I'd just use Node.js).
You should use websockets because GET/POST is heavy for the server and slower, like Miszy said you can use Node.js with socket.io. You can also create the server using Python or Go.