问题遇到的现象和发生背景
请求帮忙讲解或者修改代码前端。我的需求是，想要在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>
