Невозможно отобразить поток веб-камеры в React - PullRequest
Новая
       3

Невозможно отобразить поток веб-камеры в React

0 голосов
/ 17 июня 2020

Я пытаюсь отобразить поток с веб-камеры, но он показывает только пустой раздел .

Моя среда - ubuntu 18-06, python -3.6. Вот что я пробовал (я подозреваю, что проблема может быть из-за строки sr c (но я все еще не знаю). 

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 console 

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()

Ответы [ 2 ]

0 голосов
/ 17 июня 2020

Предупреждение, которое вы видите в консоли, связано с тем, что allowFullScreen не поддерживает логическое значение в качестве значения.

Вы можете устранить это предупреждение, добавив настройки "true" в качестве значения. 

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

См .: https://github.com/facebook/react/issues/7848#issuecomment -334594775

Однако это не причина, по которой вы видите пустой экран. Какой источник загружается в iframe?

0 голосов
/ 17 июня 2020

попробуйте вот так. 

<iframe allowFullScreen="true"
    title='camera feed'

    // !!! TO CHANGE !!!
    src="//:0"
    frameBorder="0"
    width="100%"
    height="576" />

или вы можете сделать вот так 

<iframe src="your_page_url"
    allowfullscreen="allowfullscreen"
    mozallowfullscreen="mozallowfullscreen"
    msallowfullscreen="msallowfullscreen"
    oallowfullscreen="oallowfullscreen"
    webkitallowfullscreen="webkitallowfullscreen" />

вы можете использовать файл sr c в аргументе videoCapture, как показано ниже. 

cap = cv2.VideoCapture(src)
...