swoole 直播

admin

主要使用 webstocket
& L+ ]2 K* `# g: g6 d上代码

前端

观看页面

1. <script type="text/javascript">
     l; ]8 X& \3 _
2. var ws = new WebSocket('ws://192.168.0.150:9502');
   ( I$ e. l& B# `( h) }7 H& ]
3. 
   : ^$ U* z. K6 i; h4 ~% u: l
4. ws.onopen = function() {
   $ k' g4 b6 f+ \9 L5 C! q
5.     console.log("连接成功");
   
6. };
   
7. ws.onmessage = function(e) {
   ; K: L3 ]2 t  `! O9 x
8.    console.log(e);
   
9. 
   " E( `7 X& M/ k& J: M9 ?
10.    var data = e.data;
    4 j. i/ g2 b3 I" l3 q* W. b
11.    document.getElementById('player').src=data;
    4 G" Q9 W7 x% b5 l* ^
12. };
    
13. ws.onerror = function() {
    
14.     console.log("关闭连接");
    
15. };
    
16. </script>

复制代码

录像页面

最好用火狐测试。

1. <canvas id="output" style="display:none"></canvas>
   
2. 
   1 t2 Q5 ?9 x5 ^: |6 E' c6 ]
3. 
   
4. 
   " J5 o' K; f' b, A  T; P' @5 u
5. <script type="text/javascript" charset="utf-8">
   
6. 
   5 b3 N- U7 x3 f' U  d
7. 
   2 g% Q1 O2 i1 \8 O: L  {$ i
8.     var socket = new WebSocket('ws://192.168.0.150:9502');
   
9.     //socket.send("嗨我登陆了");
   
10. 
    
11.     var back = document.getElementById('output');
    8 V6 Z- i* A! V2 l+ S3 M7 V8 l
12.     var backcontext = back.getContext('2d');
    
13.     var video = document.getElementsByTagName('video')[0];
    # d" K# A2 |2 O* x9 V
14.    
    % g  u  P. `$ h
15.     var success = function(stream){
    9 ]; a1 X5 R# V' _" n2 Q* ]$ [
16.         video.src = window.URL.createObjectURL(stream);
    
17.     }
    
18. 
    ; e+ T. z0 a+ \6 p# C  `
19.     socket.onopen = function(){
    ) e# R6 k) J. A/ \9 n- V- H
20.         draw();
    ! d/ I/ }' P2 g9 J; N( A! [9 `
21.     }
    
22. 
    / Z7 f3 S: s4 ?8 ]
23.     var draw = function(){
    
24.         try{
    & X8 {  z( K8 H9 ^- o8 I
25.             backcontext.drawImage(video,0,0, back.width, back.height);
    2 ?8 D' Q( k) \! T8 ]3 {
26.         }catch(e){
    
27.             if (e.name == "NS_ERROR_NOT_AVAILABLE") {
    
28.                 return setTimeout(draw, 100);
    ' G3 o+ q% h' m( {8 k1 C! o
29.             } else {
    + P" ], p2 k1 A# |6 Z  |
30.                 throw e;
    9 h: h- G2 P, J* \
31.             }
    8 n3 H! ?% H! W. J
32.         }
    
33.         if(video.src){
    * R  s2 Y4 `7 U5 z" f7 Y# m
34.             socket.send(back.toDataURL("image/jpeg", 0.5));
    
35.         }
    6 @  g% A  }) ~
36.         setTimeout(draw, 100);
    
37.     }
    
38.     navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia ||
    
39.     navigator.mozGetUserMedia || navigator.msGetUserMedia;
    
40.     navigator.getUserMedia({video:true, audio:false}, success, console.log);
    4 y8 `' t$ p1 f" k. X1 W- ~
41. </script>

复制代码

1. php
   / S9 \* }4 K1 B, {6 B+ ?
2. 
   
3. $server = new swoole_websocket_server("0.0.0.0", 9502);
   
4. 
   ) u8 c% I: r+ Y% V
5. $server->on('open', function (swoole_websocket_server $server, $request) {
   
6. 
   & r* T3 U/ {8 h6 q
7.     echo "新用户id:{$request->fd}加入了\n";
   & K% Z( O, L1 H3 U$ W5 E5 p! w" Y
8.    // echo "server: handshake success with fd{$request->fd}\n";
   # d" S" v! i$ o* q7 L! E
9. });
   3 l2 R6 H/ t7 r1 {% G9 b% r! @
10. 
    # q9 I' [4 [0 h& ^2 k, H) {( d
11. $server->on('message', function (swoole_websocket_server $server, $frame) {
    2 z) z! @# N! \
12. 
    0 D* s2 M$ U, H
13.     //循环所有数据
    7 Z/ f# g: b. x/ `) K; U' I( q
14.     foreach($server->connections as $fd) {
    
15.         //返回数据
    
16.         $server->push($fd, $frame->data);
    9 d! X; E4 s% v: A
17.     }
    
18. 
    
19. });
    ' X) I! u' d" F2 u% ^
20. 
    
21. $server->on('close', function ($ser, $fd) {
    ; x* y# @$ r* @; U8 |/ X
22.     echo "用户id: {$fd} 退出\n";
    
23. });
    
24. 
    * @! S1 z, V- V* B0 c
25. $server->start();

复制代码

# v. [  v/ Z. T. N! a3 q
! C* H, }* a# V1 e( f
0 D. l0 ?( Z3 l7 n/ p  h


. d3 f# i7 L2 T2 D
4 O2 B; w, b- n" P5 o, l# o