Peer JS Video Chat for Dummies

581 views

Skip to first unread message

martin Backmann

unread,

Apr 29, 2015, 12:19:10 PM4/29/15

to pee...@googlegroups.com

Hi everybody,

I am trying to do a simple video chat using Peer JS.
No fancy stuff - just one webpage where to video from host and remote peer is streamed when the website is entered (no call, no room choice).
I set up a Peer JS page on my webserver.

However, I am asked about permission to camera and mic but I do not see any video.
I am not sure how to display the host and remote stream in a video element.

Does anybody has any help?
Here is my code

<html>
    <head>

        <script src="http://cdn.peerjs.com/0.3/peer.js"></script>
    <style>
        video {
            width: 320px;
            minFrameRate": 30;
        }
    </style>

    </head>

    <body>

               <script type="text/javascript">


           var peer = new Peer({key: '...'});

           peer.on('open', function(id) {
console.log('My peer ID is: ' + id);
});

var conn = peer.connect('another-peers-id');
conn.on('open', function(){
conn.send('hi!');
});

peer.on('connection', function(conn) {
conn.on('data', function(data){
    // Will print 'hi!'
    console.log(data);
});
});

navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
navigator.getUserMedia({video: true, audio: true}, function(stream) {
var call = peer.call('another-peers-id', stream);
call.on('stream', function(remoteStream) {
    // Show stream in some <video> element.


});
}, function(err) {
console.log('Failed to get local stream' ,err);
});

navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
peer.on('call', function(call) {
navigator.getUserMedia({video: true, audio: true}, function(stream) {
    call.answer(stream); // Answer the call with an A/V stream.
    call.on('stream', function(remoteStream) {
      // Show stream in some <video> element.
    });
}, function(err) {
    console.log('Failed to get local stream' ,err);
});
});


        </script>

    </body>
</html>

Thank you so much for your help!

Hernan Daniel Garcia Sifontes

unread,

May 10, 2015, 12:19:21 AM5/10/15

to pee...@googlegroups.com

Don't repeat this:

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

navigator.getUserMedia({video: true, audio: true}, function(stream) { ... } );

Try again and tell us.

Regards

Reply all

Reply to author

Forward

0 new messages