Question

编辑：我认为录制权限有问题会导致权限被拒绝。

这里的sandBox欣赏模块：

我目前正在与Reactjs合作，我很惊讶我遇到了似乎是Javascript的跨设备问题。我认为Javascript是一种适用于其虚拟机的语言。

所以，事实是我必须使用Reactjs构建一个记录器应用程序。它在我的设备（个人电脑和手机）上工作正常但在朋友的某些设备上失败了。该应用程序部署在Heroku上。所以我们假设在我们的设备上运行相同的代码。我已经删除了浏览器上的缓存数据，以确保一切都在中立环境中运行。我也删除了服务工作者。

那么为什么它可以在我的设备上运行而不是在朋友的设备上运行？我试图清理代码，似乎一切都很好。我确保元素是this.state构造函数变量的链接。这种东西。

但是，当我的朋友点击＆＃34;记录＆＃34;按钮，没有任何反应。似乎在回调级别上发生了一些错误，或类似的错误。

所以也许有人对这里的错误有所了解？我想可能会有一些优雅的降级，但我的代码的哪些部分？

这是我的react.js：

/* eslint-env browser */
// import "./audioRecording.css";
import React from 'react';
import Axios from "axios";
//import Bird from "./sounds/birds.mp3"
const audioType = 'audio/*';

class RecordingAPI extends React.Component {
  constructor(props) {
    super(props);

      // bind the functions
      this.deleteAudio=this.deleteAudio.bind(this);
      this.startRecording=this.startRecording.bind(this);
      this.stopRecording=this.stopRecording.bind(this);
      this.saveAudio=this.saveAudio.bind(this)
    // set the Component state
    this.state = {
      recording: false,
      audios: [],
      chunks : [],
      audioRecorder: [],
      url: "",
      base64Data : ""
    };
  }

  // onSubmit callback from another React-file-Component
  handleSubmit() {

  alert("base64Data in handleSubmit : " + this.state.base64Data)

    Axios.post("http://localhost:7500/api/files", {
      "word": this.props.word,
      "data": this.state.base64Data
    }).then(response => {
    console.log(response)
})
.catch(error => {
    console.log(error.response)
});

    //pass submitted value to true in order to declench allDelete function
    this.setState({base64Data: ""})
    alert("Message sent, congratulation =)")

    this.deleteAudio();
  }

  async componentDidMount() {
   const stream = await navigator.mediaDevices.getUserMedia({audio: true});
   // show it to user
   this.audio.srcObject = stream;
   // init recording
   this.mediaRecorder = new MediaRecorder(stream);
   // init data storage for video chunks
   var chunks = [];
   // listen for data from media recorder
   this.mediaRecorder.ondataavailable = e => {
     if (e.data && e.data.size > 0) {
       chunks.push(e.data);
       this.setState({chunks})
     }
   };
 }

  // start recording the audio
  startRecording(e) {
    e.preventDefault();
    this.setState({recording: true});
    // wipe old data chunks
  this.setState({chunks : []})
    // start recorder with 10ms buffer
    this.mediaRecorder.start(10); 

  }

  // stop recording the audio
  stopRecording(e) {
    e.preventDefault();
    // stop the recorder
    this.mediaRecorder.stop();
    // say that we're not recording
    this.setState({recording: false});
    // save the video to memory
    this.saveAudio();

  }

  // save the audio
  saveAudio() {
    // convert saved chunks to blob
    const blob = new Blob(this.state.chunks, {type: audioType});

    // generate video url from blob
    const audioURL = window.URL.createObjectURL(blob);

    const audios = this.state.audios.concat([audioURL]);
    this.setState({url: audioURL})
    // append videoURL to list of saved videos for rendering
    this.setState({audios});
    this.setState({audioRecorded: audios}) ;

    var reader = new FileReader();
    var base64Data ="";
    const scope = this ;
    reader.readAsDataURL(blob);
    reader.onloadend = (function() {
      base64Data = reader.result;
      scope.setState({base64Data : base64Data});

   })
  }

  // delete the audio instances url
  deleteAudio(audioURL) {
    this.setState({audios : []});
  }


  render() {
    const {recording, audios} = this.state;

    return (<div className="camera">
      <audio  autoPlay="false" style={{
          width: 400
        }} ref={a => {
          this.audio = a;
        }}>
        <p>Audio stream not available.
        </p>
      </audio>
      <div id="flexRecord">

         // display a record or stop_record button
        {
          !this.state.recording && <button id="record" onClick={e => this.startRecording(e)}>
              <span id="recordword">
                Record
              </span>
              <div id="circle"></div>
            </button>
        }
        {
          this.state.recording && <button id="stop" onClick={e => this.stopRecording(e)}>
              <span id="recordword">Stop
              </span>
            </button>
        }
      </div>
      <div>
        <h3 id="recordList">Recorded audios:
        </h3>

         // display audios players
        {
          audios.map((audioURL, i) => (<div key={`audio_${i}`}>
            <audio controls="controls" style={{
                width: 200
              }} src={audioURL}/>
            <div>
              <button onClick={() => this.deleteAudio(audioURL)}>Delete</button>
            </div>
          </div>))
        }
      </div>
    </div>);
  }
}
export default RecordingAPI

由于

跨设备，优雅的降级问题 - 我的录制功能在我的设备上运行良好但不适用于我朋友的设备

0 个答案: