php workman视频直播

通过websoket   捕抓每0.1秒的画面给客户端.

下载地址http://www.workerman.net/camera

 

录像页面

 1 <html>
 2 <head>
 3     <meta http-equiv="content-type" content="text/html; charset=utf-8">
 4     <title>live cam 录像页面</title>
 5 </head>
 6 <body>
 7     <video autoplay id="sourcevid" style="width:320;height:240px"></video>
 8     <br>
 9     提示：最好用火狐测试，谷歌浏览器升级了安全策略，谷歌浏览器只能在https下才能利用html5打开摄像头。
10 
11     <canvas id="output" style="display:none"></canvas>
12 
13     <script type="text/javascript" charset="utf-8">
14 
15         var socket = new WebSocket("ws://"+document.domain+":8080");
16         var back = document.getElementById('output');
17         var backcontext = back.getContext('2d');
18         var video = document.getElementsByTagName('video')[0];
19         
20         var success = function(stream){
21             video.src = window.URL.createObjectURL(stream);
22         }
23 
24         socket.onopen = function(){
25             draw();
26         }
27 
28         var draw = function(){
29             try{
30                 backcontext.drawImage(video,0,0, back.width, back.height);
31             }catch(e){
32                 if (e.name == "NS_ERROR_NOT_AVAILABLE") {
33                     return setTimeout(draw, 100);
34                 } else {
35                     throw e;
36                 }
37             }
38             if(video.src){
39                 socket.send(back.toDataURL("image/jpeg", 0.5));
40             }
41             setTimeout(draw, 100);
42         }
43         navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia ||
44         navigator.mozGetUserMedia || navigator.msGetUserMedia;
45         navigator.getUserMedia({video:true, audio:false}, success, console.log);
46     </script>
47 </body>
48 </html>

 

 

直播接收页面

 1 <html>
 2 <head>
 3     <meta http-equiv="content-type" content="text/html; charset=utf-8">
 4     <title>live cam 接收页面</title>
 5 </head>
 6 <body>
 7     <img id="receiver" style="width:320px;height:240px"/>
 8     <br><br>如果显示空白，说明当前没有人在直播，<a href="/camera.html" target="_blank">点击这里直播</a>
 9     <script type="text/javascript" charset="utf-8">
10         var receiver_socket = new WebSocket("ws://"+document.domain+":8008");
11         var image = document.getElementById('receiver');
12         receiver_socket.onmessage = function(data)
13         {
14             image.src=data.data;
15         }
16     </script>
17 </body>
18 </html>

 

posted @ 2017-09-21 02:38  wujunbin  阅读(1777)  评论(0)  编辑  收藏  举报