जेएस पर एक वीडियो प्रसारण का निर्माण

ग्राहक भाग

<video autoplay id="vid" style="display:none;"></video> <canvas id="canvas" width="640" height="480" style="border:1px solid #d3d3d3;"></canvas><br> 

 var video = document.querySelector("#vid"), canvas = document.querySelector('#canvas'), ctx = canvas.getContext('2d'), localMediaStream = null, onCameraFail = function (e) { console.log('Camera did not work.', e); //   ,     }; navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia; window.URL = window.URL || window.webkitURL; navigator.getUserMedia({video: true}, function(stream) { video.src = window.URL.createObjectURL(stream); localMediaStream = stream; }, onCameraFail); 

 cameraInterval = setInterval(function(){ snapshot();}, 1); function snapshot(){ if(localMediaStream){ ctx.drawImage(video, 0, 0); } } 

 <button onclick="startBroadcasting()">Start Broadcasting</button> <button onclick="stopBroadcasting()">Stop Broadcasting</button> 

 var isBroadcasting = false, broadcastingTimer; function sendSnapshot(){ if(localMediaStream && !isBroadcasting){ isBroadcasting = true; $.post("/", { p: "new", text: ctx.canvas.toDataURL("image/webp", quality); // quality -  (float) }, function(result){ console.log(result); //  ,  -    isBroadcasting = false; } ); } } //         function startBroadcasting(){ broadcastingTimer = setInterval(sendSnapshot, 1); } function stopBroadcasting(){ clearInterval(broadcastingTimer); } 

सर्वर साइड (नोड जेएस)

 var qs = require('querystring'); var imageData = ""; var myId = 1; /*   */ if(req.method == "POST"){ var fullBody = ""; req.on('data', function(chunk){ fullBody += chunk.toString(); }); req.on('end', function(){ res.writeHead(200, {'Content-Type': 'text/html'}); var POST = qs.parse(fullBody); if(POST["p"] == "new"){ //   imageData = POST["text"]; myId += 1; res.write(imageData); }else if(POST["p"] == "ajax"){ if(myId > parseInt(POST["last"])){ if(typeof(imageData) != "undefined"){ res.write(document.body.innerHTML = ('<img src=" + '"' + imageData + '"' + "/>');" + "\n"); res.write("last_message_id = " + myId + ";"); } } } res.end(); }); }else{ /*    ,   . */} 

 if($_GET['p'] == "ajax"){ Header("Cache-Control: no-cache, must-revalidate"); Header("Pragma: no-cache"); Header("Content-Type: text/javascript; charset=windows-1251"); $file = file("monitor_id.txt"); $id = $file[0]; if($id > $_GET['last']){ $text_file = file("monitor_command.txt"); $count = count($text_file); $last = $id; echo "var main = $('#main'); \n"; for($i = 0; $i < 1; $i++){ $s = $text_file[$i]; while(strpos($s, chr(92)) !== false){ $s = str_replace(chr(92), "", $s); } echo $s; } echo "\n"; echo "last_message_id = $id;"; } }elseif((isset($_GET['p']) && $_GET['p'] == "new") || (isset($_POST['p']))){ $file = file("monitor_id.txt"); $id = $file[0]; $fh = fopen("monitor_command.txt", "w+"); $get_text = $_POST['text']; $gt = $get_text; while(strpos($get_text, "\r\n") !== false){ $get_text = str_replace("\r\n", "</br>", $get_text); } fwrite($fh, "document.body.innerHTML = ('<img src=".'"'.".$get_text.'"'."/>);\n"); fclose($fh); $fhn = fopen("monitor_id.txt", "w+"); fwrite($fhn, $id + 1); fclose($fhn); echo $get_text; } 

ग्राहक पक्ष (प्रसारण देखें)

 var last_message_id = 0, load_in_process = false; function Load() { if(!load_in_process) { load_in_process = true; $.post("/", { p: "ajax", last: last_message_id, version: version }, function (result) { eval(result); load_in_process = false; }); } } var loadInterval = setInterval(Load, 1); 

निष्कर्ष