2、还可以学习下canvas，有选择性的把视频流画到canvas上，可以或许可以减少带宽压力。
基于STRATUS +FLEX+MYSQL的简易在线随机视频聊天室的开发：
1.Flash Builder 4开发的，默认用的是Flex SDK4.0
2.开发最好用flash payer 10 debug version（可以进行调试）
3.申请一个 Stratus develper key：8b0f114ef5a20c433d5c2a33-201aeea5601b
首先使用node.js 搭建一个简易的 websocket服务器：
var cons = new Array()
var ws = require('ws').Server
var server = new ws({ port: 8888 })
server.on('connection', function (ws) {
console.log('new connection founded successfully')
cons.push(ws)
ws.on('message', function (data) {
for (var i = 0i <cons.lengthi++) {
cons[i].send(data)
}
})
ws.on('close', function () {
for (var i = 0i <cons.lengthi++) {
if (cons[i] == ws) cons.splice(i, 1)
}
})
})
console.log('websocket-server running...')
接下来为了更容易理解， 我在这分为两个页面，一个为视频者页面，另一个是观看者页面
下面代码为视频者页面：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />
<title></title>
<script src="jQuery_1.8.2.min.js"></script>
<script type="text/javascript">
$(function () {
var video = document.getElementById("video")
var canvas = document.getElementById("canvas"),
context = canvas.getContext("2d")
var w
if (navigator.webkitGetUserMedia) {
navigator.webkitGetUserMedia({ video: true }, function (stream) {
video.src = window.webkitURL.createObjectURL(stream)
video.play()
w = new WebSocket(url)
w.onopen = function () {
sendImg()
}
w.onmessage = function (e) {
sendImg()
}
}, function () {
console.log("video error")
})
var host = 'localhost'
var port = 8888
var url = 'ws://' + host + ':' + port + '/'
function sendImg() {
context.drawImage(video, 0, 0, 320, 320)
var imgData = canvas.toDataURL()
w.send(imgData)
}
}
})
</script>
</head>
<body>
<video id="video" width="640" height="480" style="background:#000" autoplay></video>
<canvas style="display:none" id="canvas" width="320" height="320"></canvas>
</body>
</html>
接下来是观看者页面：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />
<title></title>
<script src="jQuery_1.8.2.min.js"></script>
<script>
$(function () {
var host = 'localhost'
var port = 8888
var url = 'ws://' + host + ':' + port + '/'
var w = new WebSocket(url)
w.onmessage = function (e) {
$("#canvas").attr("src", e.data)
}
})
</script>
</head>
<body>
<img id="canvas" width="320" height="320" />
</body>
</html>
注：希望可以帮到你!
WebRTC给我们带来了浏览器中的视频、音频聊天体验。但个人认为，它最实用的特性莫过于DataChannel——在浏览器之间建立一个点对点的数据通道。在DataChannel之前，浏览器到浏览器的数据传递通常是这样一个流程：浏览器1发送数据给服务器，服务器处理，服务器再转发给浏览器2。这三个过程都会带来相应的消耗，占用服务器带宽不说，还减缓了消息从发送到接收的时间。其实最理想的方式就是浏览器1直接与浏览2进行通信，服务器不需要参与其中。WebRTC DataChannel就提供了这样一种方式。
如果对WebRTC和DataChannel不太了解的同学，可以先阅读如下文章：
- WebRTC的RTCDataChannel
- 使用WebRTC搭建前端视频聊天室——信令篇
- 使用WebRTC搭建前端视频聊天室——入门篇
当然服务器完全不参与其中，显然是不可能的，用户需要通过服务器上存储的信息，才能确定需要和谁建立连接。这里通过一个故事来讲述建立连接的过程：
不如钓鱼去
一些背景：
现在，老刘听说老姚钓鱼技术高超，想和老姚讨论钓鱼技巧。只要老刘和老姚相互之间知道对方的门牌号以及凭证，就可以串门了:
老刘和老姚相互之间知道了对方的门牌号和小区出入凭证，他们相互之间有什么需要交流的直接串门就行了，消息不再需要门卫老大爷来代为传达了
换个角度
我们把角色做一个映射：
于是乎故事就变成了这样：
这样，就建立了一个点对点的信道，流程如下所示：
故事
老刘和老姚已经可以相互串门了，经过一段时间的交流感情越来越深。老姚的亲友送了20斤葡萄给老姚，老姚决定送10斤给老刘。老姚毕竟年事已高，不可能一次带10斤。于是乎，老姚将葡萄分成了10份，每次去老刘家串门就送一份过去。
这里可以做如下类比：
这其实就是通过datachannel传输文件的方式，首先将文件分片，然后逐个发送，最后再统一的进行组合成一个新的文件
分片
通过HTML5的File API可以将type为file的input选中的文件读取出来，并转换成data url字符串。这也就为我们提供了很方便的分片方式：
组合
通过datachannel发送的分片数据，我们需要将其进行组合，由于是data url字符串，在接收到所有包之后进行拼接就可以了。拼接完成后就得到了一个文件完整的data url字符串，那么我们如何将这个字符串转换成文件呢？
方案一：直接跳转下载
既然是个dataurl，我们直接将其赋值给window.location.href自然可以下载，但是这样下载是没法设定下载后的文件名的，这想一想都蛋疼
方案二：通过a标签下载
这个原理和跳转下载类似，都是使用dataurl本身的特性，通过创建一个a标签，将dataurl字符串赋值给href属性，然后使用download确定下载后的文件名，就可以完成下载了。但是很快又有新问题了，稍微大一点的文件下载的时候页面崩溃了。这是因为dataurl有大小限制
方案三：blob
其实可以通过给a标签创建blob url的方式来进行下载，这个没有大小限制。但是我们手上是dataurl，所以需要先进行转换：
获得blob后，我们就可以通过URL API来下载了：
这里有几个点：
1. datachannel其实是可以直接传送blob的，但是只有ff支持，所以传data url
2. chrome下载是直接触发的，不会进行询问，firefox会先询问后下载，在询问过程中如果执行了revokeObjectURL，下载就会取消，囧
升级
如我们所知，WebRTC最有特点的地方其实是可以传输getUserMedia获得的视频、音频流，来实现视频聊天。但事实上我们的使用习惯来看，一般人不会一开始就打开视频聊天，而且视频聊天时很消耗内存的（32位机上一个连接至少20M左右好像，也有可能有出入）。所以常见的需求是，先建立一个包含datachannel的连接用于传输数据，然后在需要时升级成可以传输视频、音频。
看看我们之前传输的session description，它其实来自Session Description Protocol。可以看到wiki上的介绍：
这意味着什么呢？我们之前建立datachannel是没有加视频、音频流的，而这个流的描述是写在SDP里面的。现在我们需要传输视频、音频，就需要添加这些描述。所以就得重新获得SDP，然后构建offer和answer再传输一次。传输的流程和之前一样，没什么区别。但这一次，我们不需要传输任何的ice candidate，这里我曾经遇到了坑，经过国外大大的点拨才明白过来。
Peertc
我将datachannel和websocket组合，实现了一个构建点对点连接的库Peertc，它提供非常简洁的方式来建立连接和发送数据、文件和视频/音频流，详情见github。走过路过的记得star一下哦，有什么bug也非常希望能够提出来。
最后
WebRTC的点对点方式能够运用在很多场景：
- 如web qq这种Web IM工具，这就不说了
- 如象棋这种双人对战 游戏 ，每一步的数据服务器时不关心的，所以完全可以点对点发送
- 一对一在线面试、在线教育，这其实是即时通信的一个业务方向
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）