今天就同事提出關(guān)于網(wǎng)頁(yè)視頻功能的實(shí)現(xiàn)問題，到家以后苦思冥想后決定根據(jù)自己的思路試驗(yàn)一下，果然簡(jiǎn)陋的視頻功能就出爐了，如下代碼如有勘誤、寫錯(cuò)的地方請(qǐng)指正，臨時(shí)工代碼也請(qǐng)各位看客見諒。
例子有很多不足，我是將image的base64l整個(gè)送到node然后派發(fā)給各個(gè)客戶端，數(shù)據(jù)量有點(diǎn)大，希望這方面有人能指點(diǎn)我一下謝謝。
準(zhǔn)備知識(shí)（注url不是官方的，是我寫例子是看的）
1、w3c媒體相關(guān)api知識(shí)(
https://developer.mozilla.org/zh-CN/docs/WebRTC/navigator.getUserMedia)
2、 canvas
3、安裝nodejs及ws模塊
4、了解基本的websocket的機(jī)制以及相關(guān)api（
http://ued.sina.com.cn/?p=900)
大概思路：
1、根據(jù)瀏覽器相關(guān)的api獲取媒體流，getUserMedia在各個(gè)瀏覽器api名字不一樣，還有那些版本支持可以找相關(guān)文檔
代碼：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
html代碼：<video id="video"></video><br> <br> js代碼:;(function($) {
$.video = function(s) {
var s = $.extend({
video: true,
audio: true,
goStream: goStream,
noStream: noStream,
callBack: null,
videoId: 'video'
}, s),
video = $('#' + s.videoId),
canvas = $('#' + s.canvasId),
getUserMedia = (navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia);
if(!getUserMedia) {
alert('不支持');
return false;
}
function noStream(err) {
if(err.PERMISSION_DENIED) {
alert('用戶拒絕了瀏覽器請(qǐng)求媒體的權(quán)限');
} else if(err.NOT_SUPPORTED_ERROR) {
alert('constraint中指定的媒體類型不被支持');
} else if(err.MANDATORY_UNSATISFIED_ERROR) {
alert('指定的媒體類型未接收到媒體流');
}
console.log(err);
}
function goStream(stream) {
video[0].src = URL.createObjectURL(stream);
if(typeof s.callBack == 'function') {
s.callBack(video[0]);
}
stream.oninactive = noStream;
}
getUserMedia.call(navigator, {video: s.video, audio: s.audio}, s.goStream, s.noStream);
}
})(jQuery);<br> $(function() { <br> $.video({callBack: function(video){<br> video.play();<br> });<br> });
經(jīng)過上一步驟基本上網(wǎng)頁(yè)上已經(jīng)呈現(xiàn)出來您視頻頭所捕獲的圖像了
2、 讓canvas繪制視頻頭捕捉的圖像
1
2
3
4
5
6
7
8
9
10
11
12
13
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext("2d");
$.video({callBack: function(video) {
video.addEventListener('play', function(){
var $this = this;
setInterval(function() {
ctx.drawImage(video, 0, 0);
var image = canvas.toDataURL("image/png");<br> //繪制到頁(yè)面去代碼略
}, 500);
},false);
video.play();<br> }});
經(jīng)過上一步驟網(wǎng)頁(yè)就會(huì)看到一個(gè)視頻頭步驟的頭像，一個(gè)canvas動(dòng)態(tài)繪制的圖像
3、既然本地已經(jīng)沒有問題下，那么就讓其他人跟我一起視頻吧
在我最開始的時(shí)候我想著架php服務(wù)器，輪訓(xùn)的方式請(qǐng)求去推和拉下來一針一針的圖片，但是每次請(qǐng)求和服務(wù)器要處理下來開銷很大，所以替代的當(dāng)然是現(xiàn)在比較流行的websocket
當(dāng)然由于本人沒了解過websocket所以也不能說websocket對(duì)于這個(gè)例子有什么優(yōu)勢(shì)。我只是聽同事說這個(gè)比用笨重的服務(wù)器處理好，我就本著看看了解一下的態(tài)度，寫了下面幾行生硬的代碼。
記得你要有node，如果你不會(huì)node一定要看（
http://www.nodebeginner.org/index-zh-cn.html）
服務(wù)器端代碼：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
var http = require('http');
var app = http.createServer(function(req, res) {
}).listen(8888);
var WebSocketServer =require('ws').Server;
var wss = new WebSocketServer( { server : app });
wss.on('connection', function(ws) {
var clients = wss.clients, len = clients.length, i =0;
for(; i< len; i++) {
clients[i].send(JSON.stringify({'type':'system', 'msg': 'connection'}));
}
ws.on('message', function(data, flags) {
var clients = wss.clients, len = clients.length, i =0;
console.log(data);
for(; i< len; i++) {
clients[i].send(data);
}
});
ws.on('close', function(e) {
if(e == 10001) {
console.log('現(xiàn)有終端連接數(shù):' + wss.clients.length);
}
console.log('colse');
})
});
客戶端代碼：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
function get_uuid() {
var uuid = '';
for (var i = 0; i < 32; i++) {
uuid += Math.floor(Math.random() * 16).toString(16);
}
return uuid;
}
var uuid = get_uuid();
$(function() {
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext("2d");
var a = webSocketFuc();
$.video({callBack: function(video) {
video.addEventListener('play', function(){
var $this = this;
setInterval(function() {
ctx.drawImage(video, 0, 0);
var image = canvas.toDataURL("image/png");
a.send(JSON.stringify({type: 'image', uuid: uuid, msg: image, }));
}, 500);
},false);
video.play();
}});
$(document).on('click','#send', function() {
var msg = $('#test').val();
a.send(JSON.stringify({'type': 'chat', msg: msg}));
})
})
function webSocketFuc() {
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext("2d");
var wsServer = '
<div>該例子 在支持html的video標(biāo)簽的前提下，還要支持Navigator.getUserMedia(標(biāo)準(zhǔn)，各個(gè)瀏覽器接口不同)前提下</div>
