在tornado服务器上创建视频分发，客户端用websocket连接服务端接收视频流并显示。
1、插上USB摄像头，先用工具查看usb占用的哪个接口：
USB摄像头占用video74端口。
2、添加tornado调用摄像头，实时把图像发送给ws连接对象：
JPEG_HEADER = "data:image/jpeg;base64," # 这个是对图片转码用的
# 开启一个摄像头
cap = cv2.VideoCapture(74)
def get_image_dataurl():
# (1).从摄像头读取数据, 读取成功 ret为True,否则为False,frame里面就是一个三维数组保存图像
ret, frame = cap.read()
# (2).先将数组类型编码成 jepg 类型的数据,然后转字节数组,最后将其用base64编码
r, buf = cv2.imencode(".jpeg", frame)
dat = Image.fromarray(np.uint8(buf)).tobytes()
img_date_url = JPEG_HEADER + str(base64.b64encode(dat))[2:-1]
return img_date_url
class CaptureHandler(RequestHandler):
# 这里是显示监控的页面
def get(self, *args, **kwargs):
self.render("capture.html")
class VideoHandler(WebSocketHandler):
# 处理接收数据，用户发送数据请求后反馈一帧图像
def on_message(self, message):
self.write_message({"img": get_image_dataurl()})
3、创建网页文件如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>display</title>
</head>
<body>
<!--
canvas 这个标签常用来绘制图像
-->
<canvas id="canvas"></canvas>
</body>
<script>
var address = "192.168.3.232";
var port = 9000;
var ws = new WebSocket("ws://192.168.3.232:9000/video");
var canvas = document.getElementById("canvas");
var start = document.getElementById("start");
//设置一个定时10ms,等待WebSocket 连接完成
var timer = setInterval(function () {
if (ws.readyState == 1){
//想服务器发送数据,请求图片,这里发送的内容随便都可以
ws.send("msg");
clearInterval(timer);
}
},10);
//信息的回调处理函数
ws.onmessage = function (res) {
//(1).首先获取到一帧帧的图片
console.log("接收到数据");
var img_src = JSON.parse(res.data)["img"];
var img = new Image();
img.src = img_src;
//(2).展示出来
var ctx = canvas.getContext("2d"); // 2维图像
img.onload = function(){
canvas.setAttribute("width",img.width);
canvas.setAttribute("height",img.height);
ctx.drawImage(img,0,0,600,800); //后面两个0代表从坐标(0,0)的位置开始绘制图片
}
ws.send("msg");
}
</script>
</html>
3、添加路由：
from views.capture import CaptureHandler as capture_get
from views.capture import VideoHandler as vide_capt
admin_urls = [
(r"/", app_index),
(r"/chat", app_chat),
(r"/can", app_can_get),
(r"/can_test", app_can_test),
(r"/capture", capture_get),
(r"/video", vide_capt)
]
4、服务运行后打开网址：
http://192.168.3.232:9000/capture
效果如下：
5、用手机打开网址：
6、cpu占用如下图：
视频非常流畅。
更多回帖
