5+App & 大模型打造一个自己的视觉AI对话机器人-CSDN博客

本文链接：https://blog.csdn.net/jaja1223/article/details/142327960

MiniCPM-V 2.6多模态模型的“品尝”告一段落了~从图片、视频，再到实时视频，可能一步一步走过来，里面的东西还有很多没有挖掘出来，但是需要放下一段时间了~至此也是为了记录自己最近的所有工作，写下这篇~

本文将对之前pc端的性能进行一次调整，然后是移动端的简单demo代码实现~

pc & 5+App 前端都将改为画布只截图缓存，然后统一发送后端整合成mp4格式的视频，这里直接以5+App来作为样例说明~pc端的可以参考修改。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title></title>
</head>
<body>
	<video id="video" style="height: 400px; border: 1px solid red;" autoplay muted></video>
	<canvas id="canvas" style="display: none;"></canvas>
	<div id="ask"></div>
	<button id="miaoshu">都有什么？</button>
	<script>
		let interval = null;
		let imglist = [];
		let video = document.getElementById('video');
		let canvas = document.getElementById('canvas');
		let context = canvas.getContext('2d');
		navigator.mediaDevices.getUserMedia({
			video: {
				facingMode: { exact: "environment" } // 请求后置摄像头
			}
		})
		.then(stream => {
			video.srcObject = stream;
		})
		.catch(err => {
			alert(err)
		});
		
		interval = setInterval(() => {
		  context.drawImage(video, 0, 0, canvas.width, canvas.height);
		  canvas.toBlob((blob) => {
			if (blob) {
			  imglist.push(blob);
			}
		  }, 'image/jpeg', 0.9); // 使用 JPEG 格式
		}, 20); // 抽取一帧
		
		document.getElementById("miaoshu").addEventListener('click',function(){
			let formData = new FormData();
			for(let num in imglist){
			  formData.append("video", imglist[num]);
			}
			fetch('xxxxxxxx/videostream', {
			  method: "POST",
			  body: formData,
			})
			.then(response => {
				if (!response.ok) {
					throw new Error('网络响应不是 OK');
				}
				return response.json(); // 解析 JSON 响应
			})
			.then(data => {
				// 显示返回的数据
				let formData2 = new FormData();
				formData2.append("key", data.message.key);
				formData2.append("q", "视频中都出现了什么?");
				fetch('xxxxxxxxx/askvideostream', {
				  method: "POST",
				  body: formData2
				})
				.then(response2 => {
					if (!response2.ok) {
						throw new Error('网络响应不是 OK');
					}
					return response2.json(); // 解析 JSON 响应
				})
				.then(data2 => {
					imglist = [];
					// 显示返回的数据
					document.getElementById("ask").innerHTML = data2.message;
				})
				.catch(error2 => {
					console.error('请求失败:', error2);
				});
			})
			.catch(error => {
				console.error('请求失败:', error);
			});
		})
		
	</script>
</body>
</html>

后端代码接收处进行了修改，保存成list缓存了。

    video_files = request.files.getlist('video')
    b = uuid.uuid4()
    c = b.hex
    queuelist = []
    for video_file in video_files:
        nparr = np.frombuffer(video_file.read(), np.uint8)
        frame = cv2.imdecode(nparr, cv2.IMREAD_COLOR)
        queuelist.append(frame)
    sessionMap[c] = queuelist

解析的代码，没有实质的变更，参考上面文章即可。

独立的视觉AI分析算是到此结束了，如果想真的让他变得更“机器人”一些，那就需要记录每次的“问“，”答”，作为入参，让“它”拥有上下文，这样就更能顺畅的像个“机器人”了~

感谢大家~

运行样例：