swoole 直播

admin

主要使用 webstocket
上代码

前端

观看页面

1. <script type="text/javascript">
   1 @) I, Y* X9 \
2. var ws = new WebSocket('ws://192.168.0.150:9502');
   ! ?# E# a2 h( u' R+ n
3. 
   $ s' ~. T# B6 M  g) t
4. ws.onopen = function() {
   % z- q# R# S& [# ~$ h# `
5.     console.log("连接成功");
   
6. };
   
7. ws.onmessage = function(e) {
   
8.    console.log(e);
   ; ~# w2 x1 Q; L9 i' Q0 [
9. 
   
10.    var data = e.data;
    0 C; Q/ ~6 F. B6 ?# H, j) P
11.    document.getElementById('player').src=data;
    
12. };
    0 t# j9 ]7 q3 M+ b
13. ws.onerror = function() {
    
14.     console.log("关闭连接");
    * W6 W! _) e  f
15. };
    
16. </script>

复制代码

录像页面

最好用火狐测试。

1. <canvas id="output" style="display:none"></canvas>
   + }; f. M& O2 p  ]0 a& e- h
2. 
   7 |0 u$ W0 u, t/ ~( R. B
3. 
   8 ^* t+ y( ]( M8 r9 J
4. 
   
5. <script type="text/javascript" charset="utf-8">
   
6. 
   
7. 
   
8.     var socket = new WebSocket('ws://192.168.0.150:9502');
   $ I" U; C# Z% ^8 x% W
9.     //socket.send("嗨我登陆了");
   
10. 
    1 M2 @2 P' P% p6 o
11.     var back = document.getElementById('output');
    
12.     var backcontext = back.getContext('2d');
    . o$ H9 i1 \2 j: h5 K
13.     var video = document.getElementsByTagName('video')[0];
    : Y+ d" J6 G9 M; g5 U& r
14.    
    
15.     var success = function(stream){
    * H: `! b" b! y3 r9 M& D  j  _
16.         video.src = window.URL.createObjectURL(stream);
    
17.     }
    & ^9 b! a0 A; e# A7 h2 K
18. 
    
19.     socket.onopen = function(){
    7 E. y4 o+ s2 O  x2 H$ @3 a9 d  x
20.         draw();
    
21.     }
    4 L; V1 P* w) t! S8 X
22. 
    
23.     var draw = function(){
    ) U( V+ J# z* x4 `8 r' X9 E  I
24.         try{
    
25.             backcontext.drawImage(video,0,0, back.width, back.height);
    
26.         }catch(e){
      V' @0 L# r; M) ?4 t$ Z& E& }
27.             if (e.name == "NS_ERROR_NOT_AVAILABLE") {
    
28.                 return setTimeout(draw, 100);
    % @; b. k/ }5 r
29.             } else {
    " ?. o8 L; G5 X0 _9 R
30.                 throw e;
    
31.             }
    
32.         }
    ) I4 m& U' C" z9 P$ E- N* w# |
33.         if(video.src){
    
34.             socket.send(back.toDataURL("image/jpeg", 0.5));
    
35.         }
    
36.         setTimeout(draw, 100);
    ! Y: u4 v! ^7 ]% O6 [# g
37.     }
    
38.     navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia ||
    
39.     navigator.mozGetUserMedia || navigator.msGetUserMedia;
    + W" e: F# b# Y
40.     navigator.getUserMedia({video:true, audio:false}, success, console.log);
    
41. </script>

复制代码

1. php
   
2. 
   
3. $server = new swoole_websocket_server("0.0.0.0", 9502);
   
4. 
   6 P7 e% s. y6 e/ O% ^- Z
5. $server->on('open', function (swoole_websocket_server $server, $request) {
   
6. 
   4 a: \* r6 @& e* ^1 k0 c$ S
7.     echo "新用户id:{$request->fd}加入了\n";
   
8.    // echo "server: handshake success with fd{$request->fd}\n";
   
9. });
     }7 ~; L; B/ T0 l3 w- I
10. 
    - A1 I7 v9 I  c* {- w- C, @$ l' J
11. $server->on('message', function (swoole_websocket_server $server, $frame) {
      y) e$ ]' ~8 R% {9 b6 A; p
12. 
    . m$ T) e7 Q# t8 r
13.     //循环所有数据
    
14.     foreach($server->connections as $fd) {
    ! |3 J2 a/ K: @6 g
15.         //返回数据
    . Z$ a& H+ ^! ^: u4 A- S% Q6 n2 f
16.         $server->push($fd, $frame->data);
    / v. U+ L" [/ u/ I& p3 M& ]0 X
17.     }
    
18. 
    
19. });
    
20. 
    
21. $server->on('close', function ($ser, $fd) {
    , n1 h5 M% n& G% r+ m4 p7 G$ c
22.     echo "用户id: {$fd} 退出\n";
    3 G3 t* u0 Q8 O
23. });
    + ^  r3 ~/ W6 n
24. 
    
25. $server->start();

复制代码

4 [7 n3 o( |" [# A
; O2 L8 V' ?) I! E
2 w7 N# u# |; a



7 r% x; w0 j! K- b$ u& Z: D