python与html网页websocket视频通信，上硬货了_原生html用websocket传递命令裁剪视频

作者：不正经 | 2024-03-21 09:38:23

踩

原生html用websocket传递命令裁剪视频

看抖音直播有遥控4g小车去买东西的。突然想自己做个遥控机器人给自己办事。AI当然不能差但是后期再说，把道路随便用神经网络映射下就可以自主送货了。

好了不吹牛了，第一步是视频通讯，如果远端是Windows当然最好容易开发但是成本太高了，闲置安卓手机虽然多，但是安卓编程阅读成本太高。剩下一个跨平台的html网页应用开发简单快速就选它了。服务端就用python。如果Windows平台肯定选UDP速度最快,可是网页环境只有tcp，只有玩websocket了。

上代码遍布下去了，复制粘贴就可以用。
细节自己去摸索吧。语音下个文章发。本地环境，上服务器环境我现在还用不到。
python服务器端代码

import base64
import asyncio
import websockets
import cv2
import math
import np


async def echo(websocket, path):
    #fetch msg
    async for message in websocket:
        #print("got a message:{}".format(message))
        #image = np.asarray(bytearray(message), dtype="uint8")
        #print(message)
        imm=base64.b64decode(message.split(',')[1])#去掉类型头
        #print(len(imm))


        im=np.asarray(list(imm), dtype="uint8")#解码成cv2可阅读的格式

        im2 = cv2.imdecode(im, cv2.IMREAD_COLOR)
        cv2.imshow('Image',im2)
        cv2.waitKey(1)
        
        
        
        #await websocket.send(message)
        
        

async def main():
    # 
    async with websockets.serve(echo, "192.168.1.102", 8765):
        await asyncio.Future()  # run forever

asyncio.run(main())

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

网页端

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>自由网 -FD</title>
</head>
<body>
 
 

  <video id="video" src=""></video>
  <canvas id="canvas"></canvas>
</body>
<script>
      //媒体对象
      var video = document.getElementById('video')

      var canvas = document.getElementById('canvas')
         canvas.width = 400;
         canvas.height = 300;



const mediaStreamConstraints = {
  video: true, 
  audio: false,
  video: {
            width: 400,
            height: 300,
			facingMode: "environment"
       }

};
function gotLocalMediaStream(mediaStream) {
  video.srcObject =  mediaStream//创建并实力化
    video.play();
	onetu();
	onetu();
	onetu();
}
// Create WebSocket connection.
const socket = new WebSocket('ws://192.168.1.102:8765');

// Connection opened
socket.addEventListener('open', function (event) {
    
});

// Listen for messages
socket.addEventListener('message', function (event) {
    console.log('Message from server ', event.data);
});
navigator.mediaDevices.getUserMedia(mediaStreamConstraints).then(gotLocalMediaStream).catch();

       var context = canvas.getContext("2d"); //c创建对象
        
         setInterval(function(){ //setTimeout(function(){//
          var co =   context.drawImage(video,0,0);//剪切图像
		  //console.log(co)
           img = context.getImageData(0, 0, 400, 300)//获取图片信息
           data = img.data//获取图片信息
		   context.putImageData(img,0,0)
		   
		   im=canvas.toDataURL("image/jpe")
		   //console.log(im)
		   //im2=base64ToBlob(im,"image/jpe")
           //console.log(Date())//打印时间
		   
		   if (socket.readyState==1){socket.send(im);}		    			        
         }, 43)   



//赋值粘贴即可用不懂的地方自己慢慢百度。注意ip地址填对，或者填本地。
</script>
</html>


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
66
67
68
69
70
71
72
73
74
75
76
77
78

怎么传视频我想秀一波。
需要审核，审核通过后我再贴进来。

websocket视频通讯

本节完，下节声音通讯，差点把我弄奔溃了，视频十几分钟的事，以为语音那不是两三分钟的事。虽然我们经常使用语音的即时通讯，但是此内容属于生僻内容非常难以跑通代码。网上又搜不到例子，我来打样例吧。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/不正经/article/detail/280090