侯小啾 2022-06-12 13:25 采纳率: 75%
浏览 174
已结题

前端摄像头处理实时视频问题

问题遇到的现象和发生背景

请求帮忙讲解或者修改代码前端。我的需求是,想要在web前端用摄像头实时拍摄视频,然后不直接显示该视频画面。将每一帧画面传递到后端程序代码中,使用python opencv将图像处理好之后再传回来显示画面(对应img id="video" width="480" height="720" src="{{ url_for('home.video_viewer') }}"这一句)。

其中,我对前端代码中的video.addEventListener("DOMContentLoaded", function () 这一大段代码最不理解,可能也存在问题,请求各位佬讲解或修改一下!
这一段的作用python获取视频数据的代码相对应,对应python代码为:

if request.method == 'POST':
        imgData = base64.b64decode(request.form['imgdata'].replace('data:image/png;base64,', ''))

(即从form标签的imgdata中取到视频数据)(作为参考)

问题相关代码

前端代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        img {
            border: 1px solid #ccc;
            display: block;
            margin: 100px 0 20px 700px;
            float: left;
        }

    </style>
</head>
<body>
    <img id="video" width="480" height="720" src="{{ url_for('home.video_viewer') }}">
    <script type="text/javascript">
    window.addEventListener("DOMContentLoaded", function() {
        var video = document.getElementById("video");
        var videoObj = {"video" : true};
        var errBack = function(error) {
            console.log("Video capture error: ", error.code);
        };
        if (navigator.getUserMedia) {
            navigator.getUserMedia(videoObj, function(stream) {
                video.srcObject = stream;
            }, errBack);
        } else if (navigator.webkitGetUserMedia) {
            navigator.webkitGetUserMedia(videoObj, function(stream) {
                video.srcObject = window.webkitURL.createObjectURL(stream);
            }, errBack);
        } else if (navigator.mozGetUserMedia) {
            navigator.mozGetUserMedia(videoObj, function (stream) {
                video.srcObject = window.URL.createObjectURL(stream);
            }, errBack);
            }
        }, false);


    video.addEventListener("DOMContentLoaded", function () {
        var dataURL = canvas.toDataURL();
        var temp = document.createElement("form");
        temp.action = "http://127.0.0.1:5002";
        temp.method = "post";
        temp.style.display = "none";
        var opt = document.createElement("textarea");
        opt.name ="imgdata";
        opt.value = dataURL;
        temp.appendChild(opt);
        document.body.appendChild(temp);
        temp.submit();
    });

</script>
</body>
</html>
  • 写回答

2条回答 默认 最新

  • 溪风沐雪 2022-06-12 15:51
    关注

    总感觉你这逻辑是错误的,为什么不直接用后端采集视频然后处理完给前端显示呢

    评论

报告相同问题?

问题事件

  • 已结题 (查看结题原因) 6月14日
  • 修改了问题 6月12日
  • 修改了问题 6月12日
  • 创建了问题 6月12日

悬赏问题

  • ¥15 如何删除这个虚拟音频
  • ¥50 hyper默认的default switch
  • ¥15 网站打不开,提示502 Bad Gateway
  • ¥20 基于MATLAB的绝热压缩空气储能系统代码咨询
  • ¥15 R语言建立随机森林模型出现的问题
  • ¥20 unity内置语言切换的按钮设置
  • ¥15 中级微观经济学,生产可能性边界问题
  • ¥15 TCP传输时不同网卡传输用时差异过大
  • ¥15 请各位看看我写的属于什么算法,或者有更正确的写法?
  • ¥15 html5 qrcode 扫描器