CODEWITHSUNDEEP
javascriptreactjsgetusermedia
Ayan
Ayan

Reputation: 2918

How to display live camera feed in reactJs

UPDATE

I tried modifying the code to use srcObject but somehow it didnt work. 

componentDidMount() {
    navigator.mediaDevices.getUserMedia({ video: true, audio: true })
        .then( stream => {
            console.log(stream);
            this.streamVideo(stream);
        })
        .catch(error => {
            console.log(error);
        })
}

streamVideo = (stream) => {
    this.selfVid.srcObject = stream;
};
.
.
.
<video autoPlay className="attendee"/>
<video autoPlay className="selfView" ref={ selfVid => { this.selfVid = selfVid }}/>

Not sure if I am doing things correctly.

Original Question

I am trying to use webRTC for the first time, so was following some articles but somehow I am not being able to display my camera feed in a video element. With the present code, the camera turns on but throws a TypeError.

Snippet 

componentDidMount() {
    navigator.mediaDevices.getUserMedia({ video: true, audio: true })
        .then( stream => {
            console.log(stream);
            console.log(window.URL.createObjectURL(stream));
            this.setState({ videoSource: window.URL.createObjectURL(stream) });
        })
        .catch(error => {
            console.log(error.name);
        })
}
.
.
.

<div className="videoWrapper">
    <video autoPlay className="attendee"/>
    <video autoPlay className="selfView" src={ this.state.videoSource }/>
</div>

My Console 

Invalid URI. Load of media resource  failed.
MediaStream { id: "{78f74e3c-53f5-4aef-93c8-fd5a5a967bb3}", active: true, onaddtrack: null, onremovetrack: null }
TypeError

Upvotes: 1

Views: 2831

Answers (3)

jpmc
jpmc

Reputation: 1193

I'm doing the same thing at the moment, webRTC in reactJS, it's working... here's my code, hopefully helps:

        navigator.getUserMedia(
            { video: true, audio: true },
            stream => {
              const localVideo = document.getElementById("local-video");
              if (localVideo) {
                localVideo.srcObject = stream;
              }

              stream.getTracks().forEach(track => this.state.peerConnection.addTrack(track, stream));

            },
            error => {
              console.warn(error.message);
            }
        );

Upvotes: 1

Ayan
Ayan

Reputation: 2918

I found where I was going wrong. 

componentDidMount() {
        navigator.mediaDevices.getUserMedia({ video: true, audio: true })
            .then( stream => {
                console.log(stream);
                this.selfVid.current.srcObject = stream;
            })
            .catch(error => {
                console.log(error);
            })
    }
    .
    .
    .
    <video autoPlay className="selfView" ref={ this.selfVid } />

Upvotes: 1

Philipp Hancke
Philipp Hancke

Reputation: 17305

URL.createObjectURL(mediaStream) has been deprecated and removed a while ago. Don't rely on outdated documentation.

Set the media elements srcObject property to the stream

Upvotes: 0

Related Questions