swoole 直播

admin

主要使用 webstocket
上代码

前端

观看页面

1. <script type="text/javascript">
   
2. var ws = new WebSocket('ws://192.168.0.150:9502');
   ' `; I4 D# E- D) U9 u" U3 W
3. 
   5 R% ]# p* I  A$ j# x# h/ _  W% v$ t
4. ws.onopen = function() {
   
5.     console.log("连接成功");
   
6. };
   % S: G1 h, i/ Z3 B! E9 }  J4 W
7. ws.onmessage = function(e) {
   % S* v! b0 |6 O5 `; e' E! e9 Q
8.    console.log(e);
   " U, J( f1 R6 A% n+ ~' ~+ m
9. 
   
10.    var data = e.data;
    
11.    document.getElementById('player').src=data;
    
12. };
    3 R# y4 F0 R+ Z3 Y  O
13. ws.onerror = function() {
    ' U- o# N, b  r* m  i
14.     console.log("关闭连接");
    . P$ M$ O) E# N3 f' F4 N
15. };
    6 G7 F( X- Z! r: h- Y
16. </script>

复制代码

录像页面

最好用火狐测试。

1. <canvas id="output" style="display:none"></canvas>
   * F( g' J2 X7 N4 R
2. 
   
3. 
   9 |8 X( a8 ?- l8 H
4. 
   
5. <script type="text/javascript" charset="utf-8">
   
6. 
   * D; k/ r3 S" x) x
7. 
   7 U- e/ [, O3 \) b; C2 s- Z
8.     var socket = new WebSocket('ws://192.168.0.150:9502');
   
9.     //socket.send("嗨我登陆了");
   6 T$ C# c5 M' H9 o2 T7 H
10. 
    
11.     var back = document.getElementById('output');
    6 ?% ^2 {+ n% B" P: ?
12.     var backcontext = back.getContext('2d');
    0 X; W# }8 O6 K5 V% _: n
13.     var video = document.getElementsByTagName('video')[0];
    
14.    
    / c3 T0 \' k2 _- Y
15.     var success = function(stream){
    
16.         video.src = window.URL.createObjectURL(stream);
    
17.     }
    ' T! x1 x4 A/ t" D& p0 ]
18. 
    + ^7 s( |4 A( v8 f2 X
19.     socket.onopen = function(){
    , ]4 k* }5 K6 v& h. A+ ^, a
20.         draw();
    
21.     }
    % Y2 D, z: @/ F% [
22. 
    5 X: y, \# k# e9 Y# Q+ x. Z. |7 [
23.     var draw = function(){
    
24.         try{
    ' y% m/ \7 n" \
25.             backcontext.drawImage(video,0,0, back.width, back.height);
    9 i4 t9 d" n4 {) d9 C/ K
26.         }catch(e){
    
27.             if (e.name == "NS_ERROR_NOT_AVAILABLE") {
    : `/ X( ^& p2 `4 h; o& z
28.                 return setTimeout(draw, 100);
    
29.             } else {
    
30.                 throw e;
    2 a3 |8 H/ H1 V$ O$ q' Z, U' b
31.             }
    $ r4 @6 a; Z/ E4 \; C; S1 ~; y
32.         }
    
33.         if(video.src){
    
34.             socket.send(back.toDataURL("image/jpeg", 0.5));
    
35.         }
    
36.         setTimeout(draw, 100);
    5 F; [) ^+ @% X) M: O9 ~
37.     }
    
38.     navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia ||
    ' y  n( e  w3 b. S4 D, B$ y% {
39.     navigator.mozGetUserMedia || navigator.msGetUserMedia;
    " @" f7 g  B. P4 c" \. z
40.     navigator.getUserMedia({video:true, audio:false}, success, console.log);
    
41. </script>

复制代码

1. php
   7 Z/ A: ^& k* S# `+ |9 B
2. 
   
3. $server = new swoole_websocket_server("0.0.0.0", 9502);
   ! B& I, W; U" v! B: d% _
4. 
   8 m9 z+ o4 P2 ?2 q
5. $server->on('open', function (swoole_websocket_server $server, $request) {
   
6. 
   
7.     echo "新用户id:{$request->fd}加入了\n";
   
8.    // echo "server: handshake success with fd{$request->fd}\n";
   
9. });
   ! z6 s( T/ c  G' ?! z3 t7 o
10. 
    
11. $server->on('message', function (swoole_websocket_server $server, $frame) {
    9 j+ b* m8 I6 g) D
12. 
    
13.     //循环所有数据
    # H9 s: [2 c1 _  j7 u# j
14.     foreach($server->connections as $fd) {
    
15.         //返回数据
    
16.         $server->push($fd, $frame->data);
    
17.     }
    
18. 
    ; {! y  V# x( }0 b8 s' o) d2 Q
19. });
    / ?, u6 ~  f/ E7 c
20. 
    ( }6 M  k9 u* `7 ^, E$ ^
21. $server->on('close', function ($ser, $fd) {
    6 s. X% o5 X% B# M0 E/ l$ s
22.     echo "用户id: {$fd} 退出\n";
    
23. });
    9 d& l# q! E7 `# z+ m' h# P% Q
24. 
    
25. $server->start();

复制代码

! D0 E2 I6 g, B; ]% K/ M5 E