python与html网页websocket视频通信，上硬货了

无敌惊心小同学

已于 2022-09-18 23:56:55 修改

阅读量1.4k

点赞数 3

分类专栏：跨平台应用文章标签： python html websocket

于 2022-09-18 23:36:57 首次发布

本文链接：https://blog.csdn.net/qq_15011887/article/details/126924898

版权

跨平台应用专栏收录该内容

3 篇文章 1 订阅

订阅专栏

看抖音直播有遥控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())

网页端

<!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>