├── readme.md ├── receive.html ├── send.html ├── server.php └── socket.js /readme.md: -------------------------------------------------------------------------------- 1 | # Live video stream 2 | Live video stream with `swoole` php extension. 3 | 4 | ## Usage 5 | - clone this repo 6 | - open terminal and type `php server.php` 7 | - open localhost:8000/send.html to start live stream 8 | - open localhost:8000/receive.html to receive live stream 9 | -------------------------------------------------------------------------------- /receive.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | Live Video Stream 12 | 13 | 14 |

Revieve Live Stream

15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 39 | 40 | -------------------------------------------------------------------------------- /send.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | Live Video Stream 12 | 18 | 19 | 20 |

21 |

22 |

23 |

Make Live Stream

24 | 35 | 36 |

37 | 38 | 39 |

40 |

41 | Compress Percent: 42 | 43 |

44 |

45 | 46 | 47 |

48 |

49 |

50 |

51 |

52 |

53 |

54 |

55 |

56 |

57 |

58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | -------------------------------------------------------------------------------- /server.php: -------------------------------------------------------------------------------- 1 | on("open", function (swoole_websocket_server $server, $request) { 6 | echo "Server: handshake success with fd{$request->fd}\n"; 7 | }); 8 | 9 | $server->on("message", function (swoole_websocket_server $server, $frame) { 10 | echo "Receive from {$frame->fd}\n"; 11 | $data = $frame->data; 12 | 13 | foreach ($server->connections as $fd) { 14 | $server->push($fd, $data); 15 | } 16 | }); 17 | 18 | $server->on("close", function ($server, $fd) { 19 | echo "Client {$fd} closed\n"; 20 | }); 21 | 22 | $server->start(); -------------------------------------------------------------------------------- /socket.js: -------------------------------------------------------------------------------- 1 | var ws = new WebSocket("ws://127.0.0.1:6001"); 2 | localStorage.selector = 1; 3 | 4 | ws.onopen = function() { 5 | console.log("handshake success"); 6 | }; 7 | 8 | ws.onmessage = function(e) { }; 9 | 10 | ws.onerror = function() { 11 | $('#message').text('Websocket Error'); 12 | console.log("error"); 13 | }; 14 | 15 | var video = document.querySelector('video'); 16 | var canvas = window.canvas = document.querySelector('canvas'); 17 | 18 | $('#select_video').on('click', function() { 19 | localStorage.selector = 0; 20 | $('#file_selector').show(); 21 | }); 22 | 23 | $('#select_camera').on('click', function() { 24 | localStorage.selector = 1; 25 | $('#file_selector').hide(); 26 | }); 27 | 28 | $('#start_push').on('click', function() { 29 | $('#canvas').show(); 30 | var id = setInterval(function() { draw(id) }, 24); 31 | 32 | if (parseInt(localStorage.selector) == 1) { 33 | 34 | navigator.getMedia = navigator.getUserMedia || 35 | navigator.webkitGetUserMedia || 36 | navigator.mozGetUserMedia || 37 | navigator.msGetUserMedia; 38 | 39 | navigator.getMedia({ 40 | video: true, 41 | audio: true 42 | }, function(stream) { 43 | video.srcObject = stream; 44 | video.play(); 45 | }, function(error) { 46 | console.log(error); 47 | }); 48 | 49 | } else { 50 | $('#video')[0].play(); 51 | } 52 | }); 53 | 54 | $('#stop_push').on('click', function() { 55 | clearInterval(parseInt(localStorage.interval_id)); 56 | $('#video')[0].pause(); 57 | }); 58 | 59 | document.querySelector('input[name=file_selector]').onchange = function(e) { 60 | var file = e.target.files[0]; 61 | var objecturl = window.URL.createObjectURL(file); 62 | 63 | $('#video')[0].src = objecturl; 64 | } 65 | 66 | function draw(id) { 67 | localStorage.interval_id = id; 68 | 69 | if (ws.readyState == 1) { 70 | var compress_precent = parseInt($('#compress_precent').val())/100; 71 | canvas.width = video.videoWidth*compress_precent; 72 | canvas.height = video.videoHeight*compress_precent; 73 | canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height); 74 | push(canvas.toDataURL('image/webp')); 75 | } 76 | } 77 | 78 | function push(data) { 79 | ws.send(data); 80 | } --------------------------------------------------------------------------------