python使用websocket借助node.js把视频流推到前端页面显示

之前也推过流到前端页面,也是用的websocket技术,但是需要另外的插件、且前端展示较为复杂。这次采用python+node.js+websocket进行推流。
1.下载node.js,如图所示为node.js文件夹
在这里插入图片描述
server.js内容如下:

let WebSocketServer = require('ws').Server,
    wss = new WebSocketServer({ port: 3303});

wss.on('connection', function (ws) {
    console.log('客户端已连接');
    ws.on('message', function (message) {
        wss.clients.forEach(function each(client) {
            client.send(message);
        });
        console.log(message.length);
    });
});

player.html文件内容如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
    <img id="resImg" src="" />
</div>
<script src="jquery.min.js" ></script>
<script>
        let ws = new WebSocket("ws://127.0.0.1:3303/");
        ws.onopen = function(evt) {
            console.log("Connection open ...");
            ws.send("Hello WebSockets!");
        };
 
        ws.onmessage = function(evt) {
            $("#resImg").attr("src",evt.data);
            console.log( "Received Message: " + evt.data);
           // ws.close();
        };
 
        ws.onclose = function(evt) {
            console.log("Connection closed.");
        };
 
</script>
</body>
</html>

2.node环境下运行server.js文件,在node安装目录下输入cmd进行命令行,并运行命令node server.js 运行成功如下图所示:
在这里插入图片描述
在这里插入图片描述
3.执行ython代码,代码如下,因为我这个是用spyder编辑器运行的所以需要添加import nest_asyncio
nest_asyncio.apply()这两行代码,如果不是spyder编辑器运行需要把这两行去掉。

# -*- coding: utf-8 -*-
"""
Created on Mon Jul 19 15:00:20 2021

@author: 24281
"""

import asyncio
import nest_asyncio
nest_asyncio.apply()
import websockets
import base64
from cv2 import cv2
import numpy as np

capture = cv2.VideoCapture("rtmp://58.200.131.2:1935/livetv/hunantv")
if not capture.isOpened():
    print('quit')
    quit()
ret, frame = capture.read()
encode_param=[int(cv2.IMWRITE_JPEG_QUALITY),95]

# 向服务器端实时发送视频截图
async def send_msg(websocket):
    global ret,frame
    while ret:
        #图像编码
        result, imgencode = cv2.imencode('.jpg', frame, encode_param)
        data = np.array(imgencode)
        img = data.tostring()

        # base64编码传输
        img = base64.b64encode(img).decode()
        await websocket.send("data:image/jpeg;base64,"+img)
        ret, frame = capture.read()
# 客户端主逻辑
async def main_logic():
    async with websockets.connect('ws://127.0.0.1:3303') as websocket:
        await send_msg(websocket)
loop = asyncio.get_event_loop()
result = loop.run_until_complete(main_logic())

4.打开player.html页面,湖南卫视拉流页面如下图所示:
在这里插入图片描述
下次加上目标检测!

  • 3
    点赞
  • 22
    收藏
    觉得还不错? 一键收藏
  • 12
    评论
当前,WebSocket 不是最佳的选择来传输实时视频流,因为它不适用于高带宽和大数据量的传输。然而,如果你的视频流是经过编码和分段处理的,你可以使用 WebSocket 将这些分段发送到后端进行处理。 下面是一个示例代码,展示了如何使用 HTML、JavaScript 和 WebSocket视频流推送到 Node.js 服务器: 在前端的 HTML 文件中: ```html <!DOCTYPE html> <html> <head> <title>视频流传输</title> </head> <body> <video id="videoElement" width="640" height="480" controls autoplay></video> <script src="app.js"></script> </body> </html> ``` 在前端的 JavaScript 文件(app.js)中: ```javascript const videoElement = document.getElementById('videoElement'); const socket = new WebSocket('ws://localhost:8080'); // 当 WebSocket 连接建立成功时 socket.onopen = () => { navigator.mediaDevices.getUserMedia({ video: true, audio: false }) .then((stream) => { const mediaRecorder = new MediaRecorder(stream); // 当有新的视频数据可用时,将数据发送到后端 mediaRecorder.ondataavailable = (event) => { socket.send(event.data); }; // 开始录制视频 mediaRecorder.start(); }) .catch((error) => { console.error('获取摄像头失败:', error); }); }; // 当收到来自后端的消息时,将消息添加到 video 元素的源中播放 socket.onmessage = (event) => { videoElement.srcObject = event.data; }; ``` 在后端的 Node.js 服务器中: ```javascript const WebSocket = require('ws'); const wss = new WebSocket.Server({ port: 8080 }); wss.on('connection', (ws) => { ws.on('message', (message) => { // 处理接收到的视频数据,可以进行分段存储或其他操作 console.log('收到视频数据:', message); }); }); ``` 请注意,以上代码只是一个简单的示例,用于演示基本的原理。在实际应用中,你可能需要更多的处理和优化,例如视频编码、分段处理、视频流的传输协议等。另外,还要确保前端和后端的连接正确建立,并适当处理错误和关闭事件。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 12
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值