swoole 直播

admin

主要使用 webstocket
. q3 \# m( j7 p+ |7 s- U1 j: N上代码

前端

观看页面

1. <script type="text/javascript">
   
2. var ws = new WebSocket('ws://192.168.0.150:9502');
   . [& J6 r5 D# \. a- K  E3 S! m
3. 
   
4. ws.onopen = function() {
   
5.     console.log("连接成功");
   
6. };
   
7. ws.onmessage = function(e) {
   ' ]0 C) `8 r: Z! N
8.    console.log(e);
   ) ~( _2 @/ ]3 p# [
9. 
   
10.    var data = e.data;
    ! l  J( [) |( M% @$ L
11.    document.getElementById('player').src=data;
    , F5 N7 N; d; m2 Q+ i# _$ L
12. };
    ' p4 y7 m8 |4 z  J  Z2 e) y" X: ^0 d. B
13. ws.onerror = function() {
    ) O' Y0 ]. o) M& C
14.     console.log("关闭连接");
    
15. };
    
16. </script>

复制代码

录像页面

最好用火狐测试。

1. <canvas id="output" style="display:none"></canvas>
   
2. 
   
3. 
   ) U: Q9 L/ r; Z3 r' `; E9 N
4. 
   6 \9 _8 v& b0 _* R0 A
5. <script type="text/javascript" charset="utf-8">
   
6. 
   % K/ b% ~- T5 q- Q
7. 
   / h: i: U" ^& g- a- ^! J
8.     var socket = new WebSocket('ws://192.168.0.150:9502');
   
9.     //socket.send("嗨我登陆了");
   ' ~+ w% @+ k1 {( g3 J5 I7 ~" Q
10. 
    
11.     var back = document.getElementById('output');
    
12.     var backcontext = back.getContext('2d');
    . q1 I6 z. _% G" z, J+ L1 M
13.     var video = document.getElementsByTagName('video')[0];
    
14.    
    + f" N' g' M, j1 D5 z8 G8 m" [
15.     var success = function(stream){
    - M  {+ l) i3 m& D2 L# `
16.         video.src = window.URL.createObjectURL(stream);
    $ m  R+ V+ r) I( @( O  a( |
17.     }
    
18. 
    
19.     socket.onopen = function(){
    / m6 s" S* t: |; D
20.         draw();
    
21.     }
    
22. 
    
23.     var draw = function(){
    
24.         try{
    
25.             backcontext.drawImage(video,0,0, back.width, back.height);
    
26.         }catch(e){
      o3 m1 a( g; W: ~& h; G& h
27.             if (e.name == "NS_ERROR_NOT_AVAILABLE") {
    + K- M/ }! J& @; Z9 e! y7 o' i, ?
28.                 return setTimeout(draw, 100);
    
29.             } else {
    
30.                 throw e;
    
31.             }
    % C1 {5 ^2 J- ?: ?/ y( Z8 j
32.         }
    
33.         if(video.src){
    
34.             socket.send(back.toDataURL("image/jpeg", 0.5));
    " e3 X# W( F, {$ L
35.         }
    . C4 \/ z; F) X9 F, `
36.         setTimeout(draw, 100);
    ; y0 J+ [$ R% b
37.     }
    
38.     navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia ||
    
39.     navigator.mozGetUserMedia || navigator.msGetUserMedia;
    
40.     navigator.getUserMedia({video:true, audio:false}, success, console.log);
    ! m8 ]7 D$ k$ ?3 M  q
41. </script>

复制代码

1. php
   8 s* I! Z4 b0 z6 M8 {+ Q+ B
2. 
   
3. $server = new swoole_websocket_server("0.0.0.0", 9502);
   
4. 
   # ~' c2 l( b* v
5. $server->on('open', function (swoole_websocket_server $server, $request) {
   
6. 
   
7.     echo "新用户id:{$request->fd}加入了\n";
   3 Z6 q' Z! n. I9 m
8.    // echo "server: handshake success with fd{$request->fd}\n";
   ( m0 ]. A' h" t9 u# i5 x( Q$ ?
9. });
   
10. 
    
11. $server->on('message', function (swoole_websocket_server $server, $frame) {
    ) }8 g2 ?, P4 x
12. 
      o7 }  n, @2 o  d: u8 D# Y% ]# ?
13.     //循环所有数据
    
14.     foreach($server->connections as $fd) {
    6 c9 j- S* I0 f& L8 S
15.         //返回数据
    
16.         $server->push($fd, $frame->data);
    1 c1 a/ c/ ^  @% N/ o
17.     }
    - S% H- I! `" ?4 u0 @
18. 
    
19. });
    9 m: z5 Z! C& x9 ~) O' O# L/ {, L
20. 
    
21. $server->on('close', function ($ser, $fd) {
    5 F5 R# {" s  E: G0 C9 F4 {0 a
22.     echo "用户id: {$fd} 退出\n";
    9 i3 X4 u' o: ?; J6 H6 [
23. });
    / o4 R$ w! ^1 a2 \- e3 |: k; [) g/ l
24. 
    8 Q% S0 {3 `2 ~" n/ M  q
25. $server->start();

复制代码

+ u$ o* G$ v- _' G4 U, V1 I/ U. {& `
. d3 U1 s; i  f
9 U* t/ @1 u: T& r5 D

( C& m7 s5 h4 R5 j& V" S8 f; K
/ M5 O7 h- j: n
/ S. l% C* z& s$ c4 G

5 _$ f2 \6 U6 M) z) d' T/ O% Z
. ~- b. c/ g, M; {( g2 j