javascript - Live Video Stream PHP -
i'm trying create simple video , audio stream test website. aim in php.
there 1 streamer ever if changes anything.
i have set couple pages. index streamer opens cam. posts video source small script save video source file.
the third page people watch stream from. grabs source url file , loads canvas.
it works fine until try load video canvas. on streamer's page, same it's when grab file.
current code:
index.php (streamer's page)
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>voice chat</title> </head> <body> <canvas id="c" height="100" width="100"></canvas> <video id="v" autoplay muted="muted" style="display:none"></video> <script src="../jquery.min.js"></script> <script> var name = prompt('hi, name?'); var video = document.getelementbyid('v'); navigator.getusermedia = navigator.getusermedia || navigator.webkitgetusermedia || navigator.mozgetusermedia || navigator.msgetusermedia; if (navigator.getusermedia) { navigator.getusermedia({audio: true, video: true}, function(stream) { video.src = window.url.createobjecturl(stream); }, function(e) { console.log('nope!', e); }); } document.addeventlistener('domcontentloaded', function() { var canvas = document.getelementbyid('c'); var context = canvas.getcontext('2d'); var cw = canvas.width; var ch = canvas.height; v.addeventlistener('play', function() { draw(this,context,cw,ch); }, false); }, false); function draw(v,c,w,h) { c.drawimage(v,0,0,w,h); $.post('stream.php', {src:v.src,user:name}); settimeout(draw,20,v,c,w,h); } </script> </body> </html> stream.php (saves source file)
<?php if (isset($_post['src'])) { $src = $_post['src']; $user = $_post['user']; $fp = fopen('streams\\' . $user . '.txt','w'); fwrite($fp, $src); fclose($fp); } ?> watch.php
<?php if (!isset($_get['u'])) { $files = scandir('streams\\'); foreach($files $file) { $user = substr($file, 0, strlen($file) - 4); echo '<a href="#" id="' . $user . '">' . $user . '</a><br />'; } ?> <script> var els = document.queryselectorall('a'); nodelist.prototype.foreach = array.prototype.foreach; els.foreach(function(v) { v.onclick = function() { location.href = 'http://localhost' + location.pathname + '?u=' + v.id; } }); </script> <?php } else { ?> <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>watch stream</title> </head> <body> <canvas id="c"></canvas> <script src="../jquery.min.js"></script> <script> var user = '<?=$_get['u'];?>'; var canvas = document.getelementbyid('c'); var context = canvas.getcontext('2d'); var cw = canvas.width; var ch = canvas.height; var video = document.createelement('video'); video.autoplay = 'autoplay'; function load() { $.ajax({ url : 'streams\\' + user + '.txt', cache : false, success : function(src) { video.src = src; draw(video, context, cw, ch); } }); } function draw(v,c,w,h) { c.drawimage(v,0,0,w,h); settimeout(load,20); } </script> </body> </html> <?php } ?> is able tell me i'm doing wrong?
Comments
Post a Comment