CODEWITHSUNDEEP
javascripthtmlwebrtc
deepjyoti22
deepjyoti22

Reputation: 197

WebRTC video not being able to see

How do i enable WebRTC video(and audio too) viewing in browsers like Chrome and Mozilla.

The code i am using is this

HTML : 

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8" />
            <title> WebRTC</title>

        </head>
        <body>
        <video id="peer2-to-peer1" autoplay controls style="width:40%;"></video>

            <script src="script.js"></script>
        </body>
    </html>

javascript file :

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

    if (navigator.getUserMedia) {

        navigator.getUserMedia({

          audio: true
        }, function(localMediaStream) {alert('in');
      var video = document.querySelector('video');
      video.src = window.URL.createObjectURL(localMediaStream);
      video.onloadedmetadata = function(e) {
         // Do something with the video here.
      };
   }, onError);
    } else {
        alert('getUserMedia is not supported in this browser.');
    }

    function onSuccess() {
        alert('Successful!');
    }

    function onError() {
        alert('There has been a problem retrieving the streams - did you allow access?');
    }

BUT ,

i am getting an error because onSuccess function is'nt called.

LINK :

http://www.creativebloq.com/javascript/get-started-webrtc-1132857

Upvotes: 1

Views: 2183

Answers (3)

sinhayash
sinhayash

Reputation: 2803

DEMO

HTML:

<html>
<head>
    <title>Record and Play Simple Messages</title>
    <link rel="stylesheet" type="text/css" href="./css/style.css">
</head>
<body>
    <p>Demo for GetUserMedia()</p>
    <video id="localStream"></video>
    <script type="text/javascript" type="javascript" src="./js/script.js" ></script>
</body>
</html>

JS:

var video = document.querySelector('video');

navigator.getUserMedia =
    navigator.getUserMedia ||
    navigator.webkitGetUserMedia ||
    navigator.mozGetUserMedia ||
    navigator.msGetUserMedia;

window.URL = window.URL || window.webkitURL || window.mozURL || window.msURL;

function errorCallback(error) {
    console.log('An error occurred: ' + error.code);
}

if (navigator.getUserMedia) {
    navigator.getUserMedia({video: true, audio: true}, function(stream){
        if (video.mozSrcObject !== undefined) {
            video.mozSrcObject = stream;
        } else {
            video.src = (window.URL && window.URL.createObjectURL(stream)) || stream;
        }
        video.play();
    }, errorCallback);
} else {
    console.log('getUserMedia() not supported in this browser.');
}

Upvotes: 0

Benjamin Trent
Benjamin Trent

Reputation: 7566

First problem is that you are not requiring video on your getUserMedia. Your params suggest only audio is required no video: true parameter in your call. Yes, onSuccess is never called but that does not matter as you have the callback inside of the function call itself. To call onSucess your syntax is something like:

getUserMedia({"audio": true, "video": true}, onSuccess, onFailure);

Secondly, have onSuccess take a parameter, which will be the media stream. You would need to attach the stream src to the video src object in the onSuccess function if you want it to do anything with the media stream.

Upvotes: 1

Timotheus.Kampik
Timotheus.Kampik

Reputation: 2503

Instead of onSuccess() you call this:

function(localMediaStream) {alert('in');
  var video = document.querySelector('video');
  video.src = window.URL.createObjectURL(localMediaStream);
  video.onloadedmetadata = function(e) {
     // Do something with the video here.
  };

}

onSuccess() is simply never been called.

It is furthermore necessary to load the files from a web server (e.g. have a server running on localhost). As the tutorial states, accessing the html file on your local hard drive won't work.

Upvotes: 0

Related Questions