时间戳

首页 > 解决方案 > 无法在反应中显示网络摄像头流

node.js - 无法在反应中显示网络摄像头流

问题描述

我试图显示我的网络摄像头流，但它只显示空白部分。

我的环境是ubuntu 18-06，python-3.6。这是我尝试过的（我怀疑问题可能是由于 src 行（但我仍然不知道）。

import React from 'react';
import styled from 'styled-components'

const VideoFeed = () => {
    const VideoFeedSection = styled.section`
        display: flex;
        flex-direction: column;
        margin: 40px 10px;
        background-color: #ffffff;
        padding: 20px;
        width: 45vw;
        h2 {
            margin-top : 0;
            font-size: 45px;
            line-height: 1;
            font-weight: normal;
            color: #013087;
            text-align: center;
        }
`
    return (
            <VideoFeedSection className='some-space'>
                <h2>Video Feed - classroom 1</h2>
                <iframe allowFullScreen
                        title = 'camera feed'

            // !!! TO CHANGE !!!
                        src="//:0"
                        frameBorder="0"
                        width="100%"
                        height="576" />
            </VideoFeedSection>
    );
};

export default VideoFeed;

这是来自 chrome 控制台的错误

Warning: Received `true` for a non-boolean attribute `webkitallowfullscreen`.

If you want to write it to the DOM, pass a string instead: webkitallowfullscreen="true" or webkitallowfullscreen={value.toString()}.
    in iframe (at VideoFeed.jsx:24)
    in section (created by Context.Consumer)
    in StyledComponent (created by styled.section)
    in styled.section (at VideoFeed.jsx:22)
    in VideoFeed (at App.js:31)
    in main (created by Context.Consumer)
    in StyledComponent (created by [styled.main)]
    in styled.main (at App.js:30)
    in App (at src/index.js:7) index.js:1375

视频流源只是来自网络摄像头

import numpy as np
import cv2

cap = cv2.VideoCapture(0)

while(True):
    # Capture frame-by-frame
    ret, frame = cap.read()

    # Our operations on the frame come here
    gray = cv2.cvtColor(frame, cv2.COLOR_BGR2GRAY)

    # Display the resulting frame
    cv2.imshow('frame',gray)
    if cv2.waitKey(1) & 0xFF == ord('q'):
        break

# When everything done, release the capture
cap.release()
cv2.destroyAllWindows()

标签： node.jspython-3.xreactjsnumpyvideo-streaming

解决方案

您在控制台中看到的警告是因为 allowFullScreen 不支持布尔值作为值。

"true"您可以通过将设置添加为值来解决该警告。

    <iframe 
      allowFullScreen="true"
      webkitallowfullscreen="true"
      mozallowfullscreen="true"

见：https ://github.com/facebook/react/issues/7848#issuecomment-334594775

但是，这不是您看到空白屏幕的原因。您在 iframe 中加载的源是什么？

推荐阅读