Question

大家，我正在尝试制作具有这些功能的明信片应用程序

使用网络摄像头从用户捕获图像数据
修改图片以包含消息（最好使用HTML画布）
最后，将修改后的图片作为附件发送电子邮件

首先从网络摄像头捕获图像，我想将package.searchpath转换为 React ，但我被卡住了

我已经在之前的项目中为第二个和最后一个项目符号编写了代码，但是 第一个项目符号 正在撼动我的大脑。

作为参考，我使用MDN HTML code启动，但出现了一些错误

我的问题：

目前getUserMedia()并未接收constraints及其stream 绕过catch(err)并直接转到takePicture()。有没有理由直接进入捕捉功能？
在使用变量之前，我是否应该将变量附加到页面？特别是在clearPhoto()和<!DOCTYPE html> <html> <head> <title></title> <script src="https://code.jquery.com/jquery-2.2.0.min.js"></script> <script src="http://localhost:5000/bundle.js" defer></script> </head> <body> <div id='wrapper'> <canvas id='canvas'></canvas> </div> <div id="root"></div> </body> </html>

以下是当前的HTML代码：

import React from 'react';
import ReactDOM from 'react-dom';
import {Component} from 'react'
import $ from 'jquery';



// CSS Styling

const styles = {
  capture: {
    display: 'flex',
    flexWrap: 'wrap',
    justifyContent: 'center',
  },
  picSize: {
    display: 'flex',
    maxWidth: 340,
    maxHeight: 340,
    minWidth: 340,
    minHeight: 340,
    margin: 30,
  },
  box: {
    maxWidth: 340,
    maxHeight: 340,
    minWidth: 340,
    minHeight: 340,
    border: '10px solid green',
  }
}

const Camera = (props) => {
    return(
      <div className="camera"
    style={ styles.box }
  >
    <video id="video"
      style={ styles.picSize }
    ></video>
    <button id="startbutton"
      onClick={ props.handleStartClick }
    >Take photo</button>
  </div>
    )
}

const Photo = (props) => {
    return(
        <div className="output"
            style={ styles.box }>
           <img id="photo" alt="Your photo"
              style={ styles.picSize } />
              <button id="saveButton" onClick={ props.handleSaveClick }>Save Photo</button>
         </div>
    )
}

//Components
class Capture extends React.Component{
  constructor(props) {
    super(props);
    this.state = {  
  constraints: { photo: null,audio: false, video: { width: 320, height: 320, startbutton:null } }
  };
    this.handleStartClick = this.handleStartClick.bind(this);  
    this.takePicture = this.takePicture.bind(this);  
    this.clearPhoto = this.clearPhoto.bind(this);  
  }
  componentDidMount(){
    const constraints = this.state.constraints;  
    console.log("CONSTRAINTS:",constraints)
const getUserMedia = (params) => (  
  new Promise((successCallback, errorCallback) => {
    return navigator.webkitGetUserMedia.call(navigator, params, successCallback, errorCallback);
  })
);

getUserMedia(constraints)  
.then((stream) => {
  const video = document.querySelector('video');
  const vendorURL = window.URL || window.webkitURL;

  video.src = vendorURL.createObjectURL(stream);
  video.play();
})
.catch((err) => {
  console.log(err);
});

this.clearPhoto(); 
  }

clearPhoto(){
      const canvas = document.querySelector('canvas');  
      const photo = document.getElementById('photo');  
      const context = canvas.getContext('2d');  
      const { width, height } = this.state.constraints.video;  
      context.fillStyle = '#FFF';  
      context.fillRect(0, 0, width, height);

      const data = canvas.toDataURL('image/png');  
      photo.setAttribute('src', data); 
    }

handleStartClick(event){
    event.preventDefault();  
    this.takePicture();  
    }

takePicture(){
    const canvas = document.querySelector('canvas');  
    const context = canvas.getContext('2d');  
    const video = document.querySelector('video');  
    const photo = document.getElementById('photo');  
    const { width, height } = this.state.constraints.video;
    const startbutton = document.getElementById('startbutton');

     let streaming = false;

    canvas.width = width;  
    canvas.height = height;  
    context.drawImage(video, 0, 0, width, height);

    const data = canvas.toDataURL('image/png'); 
    console.log("PHOTO:",photo) 
    photo.setAttribute('src', data);  


    navigator.getMedia = ( navigator.getUserMedia ||
                           navigator.webkitGetUserMedia ||
                           navigator.mozGetUserMedia ||
                           navigator.msGetUserMedia);

    navigator.getMedia(
      {
        video: true,
        audio: false
      },
      function(stream) {
        if (navigator.mozGetUserMedia) {
          video.mozSrcObject = stream;
        } else {
          var vendorURL = window.URL || window.webkitURL;
          video.src = vendorURL.createObjectURL(stream);
        }
        video.play();
      },
      function(err) {
        console.log("An error occured! " + err);
      }
    )
console.log("VIDEO:",video)
    video.addEventListener('canplay', function(ev){
    video.setAttribute('width', width);
    video.setAttribute('height', height);
    canvas.setAttribute('width', width);
    canvas.setAttribute('height', height);
    streaming = true;


    }, false);
console.log("Start Button:",startbutton)

startbutton.addEventListener('click', function(event){
      event.preventDefault();
      this.takePicture();
      console.log("Taking pictures:",this.takePicture())
    }, false);

  this.clearPhoto();
  }
render(){
    return (  
      <div className="capture"
        style={ styles.capture }
      >
        <Camera
          handleStartClick={ this.handleStartClick }
        />
        <canvas id="canvas"
          style={ styles.picSize }
          hidden
        ></canvas>
        <Photo />
      </div>
    );
  }
}
ReactDOM.render(
  <Capture />,
  document.getElementById('root')
);

这是我目前的React代码：

addInfo

将HTML代码转换为工作React

0 个答案: