GithubHelp home page GithubHelp logo

googlecodelabs / webrtc-web Goto Github PK

View Code? Open in Web Editor NEW
729.0 729.0 342.0 124 KB

Realtime communication with WebRTC

Home Page: https://codelabs.developers.google.com/codelabs/webrtc-web/

License: Apache License 2.0

HTML 5.46% JavaScript 94.10% CSS 0.44%

webrtc-web's Introduction

Realtime communication with WebRTC

This code has the resources you need for the codelab Realtime communication with WebRTC.

This is a work in progress. If you find a mistake or have a suggestion, please file an issue. Thanks!

What you'll learn

  • Get video from your webcam
  • Stream video with RTCPeerConnection
  • Stream data with RTCDataChannel
  • Set up a signaling service to exchange messages
  • Combine peer connection and signaling
  • Take a photo and share it via a data channel

What you'll need

  • Chrome 47 or above.
  • Web Server for Chrome, or use your own web server of choice.
  • The sample code.
  • A text editor.
  • Basic knowledge of HTML, CSS and JavaScript, Node.JS.

For 'step-04', 'step-05', 'step-06'

Run npm install before running the code.

webrtc-web's People

Contributors

aaronang avatar abrarjahin avatar fippo avatar mco-gh avatar nitobuendia avatar notmariazoe avatar pierrefritsch avatar samdutton avatar scrum avatar vikaskedia avatar zarie avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

webrtc-web's Issues

Not correctly checking number of clients in room (step-04)

In step-04/index.js the server checks how many clients are in the room by calling

var numClients = io.sockets.sockets.length;
log('Room ' + room + ' now has ' + numClients + ' client(s)');

However this returns undefined, as well as doesn't actually try and check for the given room.

A proposed fix:

var clientsInRoom = io.nsps['/'].adapter.rooms[room];
var numClients = clientsInRoom === undefined ? 0 : Object.keys(clientsInRoom).length;

Or if you also want to upgrade to socket v1.4

var clientsInRoom = io.nsps['/'].adapter.rooms[room];
var numClients = clientsInRoom === undefined ? 0 : Object.keys(clientsInRoom.sockets).length;

A full fix + some small cleans up :) would look like

var clientsInRoom = io.nsps['/'].adapter.rooms[room];
var numClients = clientsInRoom === undefined ? 0 : Object.keys(clientsInRoom).
// socket.io 1.4.8
var numClients = clientsInRoom === undefined ? 0 : Object.keys(clientsInRoom.sockets).length;

// max two clients
if (numClients === 2) {
  socket.emit('full', room);
  return;
}

log('Room ' + room + ' now has ' + (numClients + 1) + ' client(s)');

if (numClients === 0) {
  socket.join(room);
  log('Client ID ' + socket.id + ' created room ' + room);
  socket.emit('created', room, socket.id);

} else {
  log('Client ID ' + socket.id + ' joined room ' + room);
  io.sockets.in(room).emit('join', room);
  socket.join(room);
  socket.emit('joined', room, socket.id);
  io.sockets.in(room).emit('ready');
}

See: https://github.com/AlexRobinson-/webrtc-web/blob/fix-check-room-clients/step-04/index.js

STEP 7

hello everyone! i am new here.
i have followed all the steps mentioned.
i downloaded node.js from the node.org updated it to its latest version. i also installed the npm packager too. but it did not show me the bash dialog box.
after that after creating the index.js file in the work directory, i gave the "node index.js" command but it gave me the following error

Error: Cannot find module 'socket.io'
at Function.Module._resolveFilename (module.js:469:15)
at Function.Module._load (module.js:417:25)
at Module.require (module.js:497:17)
at require (internal/module.js:20:19)
at Object. (C:\Users\Bilal\Desktop\work\index.js:6:16)
at Module._compile (module.js:570:32)
at Object.Module._extensions..js (module.js:579:10)
at Module.load (module.js:487:32)
at tryModuleLoad (module.js:446:12)
at Function.Module._load (module.js:438:3)

Also i am having trouble in loading the localhost:8080

kindly help me with this. thanks in advance

step-06 is not working

The app works fine till step-05 but after include step-06 into my code then it shows getUserMedia() error: ReferenceError. When it not working from work directory then I tried directly from the step-06 directory but still same error shows. Can you please look into that.

https and socketIO listen port

I'm trying to setup a little public vps to test webrtc but I have this problem:
if I want to use the webcam I need to secure my hosting with SSL, so the webserver is running on port 443; now in index.js I tell to socketIO to listen on port 8080 but if I visit my site (https://mysite.com) index.js is not fired, if I visit my site with 8080 port (https://mysite.com:8080) I get an error 'ERR_SSL_VERSION_OR_CIPHER_MISMATCH' with chrome.

How can I solve this?

Step-02 Not Working. Start Button does not get the video strem

Hello Everyone!
I simply want to start by saying that I am new to this technology and that today is my first day using it so I am not very fluent with the the proper terminology.

My problem is simple, yet very strange!
When I click on "Start" the browser takes a while to load the stream and the I get a black window.
Then, when clicking on "Call" nothing happens but when I click "Hang Up" then I get two black windows.

So, I am not sure what info I should give you to fix this problem but I will start by saying that I am using Google Chrome 58 on Ubuntu 16.04 and step-01 worked flawless even when adding the effects.
I will provide more informations and logs as requested.
I am also providing a console log of everything that happens from "Start" to "Hang Up".
log.txt

Steps cannot run without a server.

The navigator.getUserMediaStep's callback won't trigger in step 1 to 3.
This cause the video will not show.
After adding a node server, the affected step's video can show again.
Any thoughts?

Peer closing issue

I tried to implement multi connections at a time
same time A can communicate B and C and communicate with D , while I disconnect A from B , C and D also disconnected , how to close a specific peer connection without affecting other peer connections .

Step-07, Number of client undefined

the client count is broken, please replace:

var numClients = io.sockets.sockets.length;

by

var numClients = Object.keys(io.sockets.sockets).length;

as the #5 already mentioned

Step 05

In the file main.js the function handleRemoteStreamAdd is declared twice.
In the file index.js: var numClients = io.sockets.sockets.length; - variable numClients = undefined
Probably should be Object.keys(io.sockets.sockets).length

Step-6: cannot send photo

Here is the error message from the console:

Sending a total of 1228800 byte(s)
main.js:309 Uncaught TypeError: Cannot read property 'send' of undefined
at sendPhoto (main.js:309)
at HTMLButtonElement.snapAndSend (main.js:328)
sendPhoto @ main.js:309
snapAndSend @ main.js:328

Snap is captured by does not send to the first tab.

Here is the complete console log:
image

Error getting turn server, fixed by passing config.

Did this and it worked for me:
pc = new RTCPeerConnection(pcConfig)
requestTurn was throwing a CORS error for me, so i removed this part
if (location.hostname !== 'localhost') { requestTurn( 'https://computeengineondemand.appspot.com/turn?username=41784574&key=4080218913' ); }

If I am doing something wrong please let me know! Maybe this isnt following best standards, but now it works.
This is for part 5 btw.

Step 7 socket.io and node.js

instead of downloading the socket file use this: <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.3/socket.io.js"></script>

concerning node.js --> node index.js
it through several errors and doesn't work:
node index.js
c:\webrtc-web-master\work\node_modules\node-static\lib\node-static.js:348
mime.lookup(files[0]) ||
^
TypeError: mime.lookup is not a function
at Server.respond (c:\webrtc-web-master\work\node_modules\node-static\lib\node-static.js:348:28)
at c:webrtc-web-master\work\node_modules\node-static\lib\node-static.js:64:22
at FSReqWrap.oncomplete (fs.js:123:15)

calling http://localhost:8080/
returns: net::ERR_CONNECITON_REFUSED

how do we get this working?

Step - 06 Render photo function is useless

I was trying to save the image from the canvas to a database using canvas.toDataURL in the renderPhoto(data) and didn't succeeded in doing so.
I noticed that console.log() isn't working on that function so I decided to totally comment out renderPhoto(data) function and still the code is working fine. I can still see the image on the canvas without the renderPhoto(data) function.
I even cleared the cache. Didn't help.

Use latest adapter

Hi. I noticed that adapter is in local folder. What about using latest adapter?
In index.html it will be like

....
<script src="//webrtc.github.io/adapter/adapter-latest.js"></script>
<script src="js/main.js"></script>
....

`stream` object in global scope?

Maybe I'm missing something but on this page of the tutorial (https://codelabs.developers.google.com/codelabs/webrtc-web/#3) it says

The stream object passed to getUserMedia() is in global scope, so you can inspect it from the browser console: open the console, type stream and press Return. (To view the console in Chrome, press Ctrl-Shift-J, or Command-Option-J if you're on a Mac.)

however I was unable to access stream from the console.

Issue with STUN and TURN in step5 (video streaming)

Hello,
It seems that there is an error in var pcConfig

var pcConfig = {
  'iceServers': [{
    'urls': 'stun:stun.l.google.com:19302' // this should be 'url': ... not 'urls'
  }]
};

later the url of iceServers are checked in the requestTurn function. What I do not understand is why is the stun server never used? The requestTurn function only checks for urls starting with 'turn:(...)'
if (pcConfig.iceServers[i].url.substr(0, 5) === 'turn:') {
Nowhere else are the urls even accessed. Is there code missing from the code sample? This would explain why I can't get the code to work outside of my local network.

No mention of Node.js requirement

In step 7, corresponding to the "step-04" folder, you ask the user to run the commands "npm install" and "node index.js".

At no point in time do you provide a link for the user to install Node.js so that these commands will work. Nor is it mentioned in "Overview" under "What you'll need". It also takes some research to learn that NPM does not need to be installed separately because it is included with Node.js.

Secondly, after the "npm install" command, there is this sentence:

You may get warnings, but if there are errors in red, ask for help!

The user is not in a classroom. There is no teacher to ask for help from.

Streaming Video

I am trying to modify the step 2 & step 6 code in order to make a basic video chat application. I was able to do the signaling, but can not stream the actual data. Has anyone done something similar like this or ran into a similar problem because there is no tutorial for an actual p2p video chat with socket.io

Thanks,
-Justin

Codelab uses deprecated methods of RTCPeerConnection

The codelab's repository contains the following code in the main.js file:

function createPeerConnection() {
  try {
    pc = new RTCPeerConnection(null);
    pc.onicecandidate = handleIceCandidate;
    pc.onaddstream = handleRemoteStreamAdded;
    pc.onremovestream = handleRemoteStreamRemoved;
    console.log('Created RTCPeerConnnection');
  } catch (e) {
    console.log('Failed to create PeerConnection, exception: ' + e.message);
    alert('Cannot create RTCPeerConnection object.');
    return;
  }
}

function maybeStart() {
  console.log('>>>>>>> maybeStart() ', isStarted, localStream, isChannelReady);
  if (!isStarted && typeof localStream !== 'undefined' && isChannelReady) {
    console.log('>>>>>> creating peer connection');
    createPeerConnection();
    pc.addStream(localStream);
    isStarted = true;
    console.log('isInitiator', isInitiator);
    if (isInitiator) {
      doCall();
    }
  }
}

The above code uses addstream and onaddstream which are both being depreciated according to this

Is adaptor.js taking care of the differences in the API or is this an issue?

Video from webcam not showing

I am unable to see the video from my webcam...i tried index file for step01 folder bt still am unable to see a video ..

Media Server

I am trying to implement media server for step 5 , If any one having the code please help me.

other browser's support

Does it support other browsers (FF etc)? If not, any ideas what changes might be needed or any other simple projects to use?

fixing step-05 and step-06 enabling ssl in node.js

I'm testing all the steps on my server and everything worked ok until the step-05. then after watching some videos about webRTC it was clear that the problem was with https, webrtc no longer work on unsecured http sites, so I fixed the problem using the same ssl certificates that my apache configuration uses:

in the file index.js you have to change the following lines:

var http = require('https');

and also add this line:

const fs = require('fs');
var options = {
key: fs.readFileSync('/etc/apache2/ssl/yoursite.key'),
cert: fs.readFileSync('/etc/apache2/ssl/yoursite.crt')
};

and change the var app line with this:

var app = http.createServer(options,function(req, res) {
fileServer.serve(req, res);
}).listen(8080);

and problem solved!!!

this is my entire step-05 index.js remember to change your ssl certificates.

`'use strict';

var os = require('os');
var nodeStatic = require('node-static');
var http = require('https');
var socketIO = require('socket.io');

var fileServer = new(nodeStatic.Server)();
//Inicio parte ssl
const fs = require('fs');

var options = {
key: fs.readFileSync('/etc/apache2/ssl/yoursite.key'),
cert: fs.readFileSync('/etc/apache2/ssl/yoursite.crt')
};

var app = http.createServer(options,function(req, res) {
fileServer.serve(req, res);
}).listen(8080);
//fin parte ssl

var io = socketIO.listen(app);
io.sockets.on('connection', function(socket) {

// convenience function to log server messages on the client
function log() {
var array = ['Message from server:'];
array.push.apply(array, arguments);
socket.emit('log', array);
}

socket.on('message', function(message) {
log('Client said: ', message);
// for a real app, would be room-only (not broadcast)
socket.broadcast.emit('message', message);
});

socket.on('create or join', function(room) {
log('Received request to create or join room ' + room);

var numClients = io.sockets.sockets.length;
log('Room ' + room + ' now has ' + numClients + ' client(s)');

if (numClients === 1) {
  socket.join(room);
  log('Client ID ' + socket.id + ' created room ' + room);
  socket.emit('created', room, socket.id);

} else if (numClients === 2) {
  log('Client ID ' + socket.id + ' joined room ' + room);
  io.sockets.in(room).emit('join', room);
  socket.join(room);
  socket.emit('joined', room, socket.id);
  io.sockets.in(room).emit('ready');
} else { // max two clients
  socket.emit('full', room);
}

});

socket.on('ipaddr', function() {
var ifaces = os.networkInterfaces();
for (var dev in ifaces) {
ifaces[dev].forEach(function(details) {
if (details.family === 'IPv4' && details.address !== '127.0.0.1') {
socket.emit('ipaddr', details.address);
}
});
}
});

socket.on('bye', function(){
console.log('received bye');
});

});
`

Codelabs tutorial code snippets do not match example code

As it stands, codelab tutorial snippets do not match project code.
For example, the tutorial at Stream video with RTCPeerConnection has the following snippet:

function onIceCandidate(pc, event) {
  if (event.candidate) {
    getOtherPc(pc).addIceCandidate(
      new RTCIceCandidate(event.candidate)
    ).then(
      function() {
        onAddIceCandidateSuccess(pc);
      },
      function(err) {
        onAddIceCandidateError(pc, err);
      }
    );
    trace(getName(pc) + ' ICE candidate: \n' + event.candidate.candidate);
  }
}

However, the analogous sample code from the github repository appears to have entirely different variable names. pc1 is now localPeerConnection and pc2 appears to be remotePeerConnection.

 if (iceCandidate) {
    const newIceCandidate = new RTCIceCandidate(iceCandidate);
    const otherPeer = getOtherPeer(peerConnection);

    otherPeer.addIceCandidate(newIceCandidate)
      .then(() => {
        handleConnectionSuccess(peerConnection);
      }).catch((error) => {
        handleConnectionFailure(peerConnection, error);
      });

    trace(`${getPeerName(peerConnection)} ICE candidate:\n` +
          `${event.candidate.candidate}.`);
  }
}

These differences in code are present at all steps of the tutorial. Changing the tutorial so that the variable names match will increase clarity and make it easier to follow, especially at the later steps when signalling is introduced.

socket.io newbies won't know how /socket.io/socket.io.js is served

In the codelab step 7. Set up a signaling service to exchange messages, the code for index.html contains the line:

<script src="/socket.io/socket.io.js"></script>

Not all readers of this codelab might have the implicit knowledge that this works because the HTTP server is wrapped in Socket.IO, which intercepts requests for /socket.io/socket.io.js and sends the appropriate response automatically.

I advocate it would be helpful to add a hint about this.

WebRTC is not working connecting Safari with Chrome for Android

WebRTC is not working connecting Safari with Chrome for Android. From Chrome on Desktop to Safari there is no problem. Also Safari - Safari gives no problems.

I posted this question also on StackOverflow earlier but without any results.

Apple is natively supporting WebRTC since iOS 11 and Safari 11 on the desktop.

I installed the codelab on a Ubuntu server. For the test I used both devices within the same WiFi network, just to make sure.

It works WELL in these cases (see specifications devices):

  • Desktop/Chrome <-> Desktop/Safari
  • Desktop/Chrome <-> Android/Tab/Chrome
  • Desktop/Chrome <-> iPad/Safari
  • Desktop/Chrome <-> iPhone/Safari
  • Desktop/Safari <-> iPad/Safari
  • Desktop/Safari <-> iPhone/Safari
  • iPad/Safari <-> iPhone/Safari

It's NOT working in these cases:

  • Android/Tab/Chrome <-> iPad/Safari
  • Android/Tab/Chrome <-> iPhone/Safari
  • Android/Tab/Chrome <-> Desktop/Safari

Specifications of the devices:

Desktop/Chrome

  • Macbook MacOS 10.12.6
  • Chrome 63.0.3239.132

Desktop/Safari

  • Macbook MacOS 10.12.6
  • Safari 11.0.2

Android/Tab/Chrome

  • Samsung Galaxy Tab3 8.0 inch (SM-T310)
  • Android 4.4.2
  • Chrome 63.0.3239.111

iPad/Safari

  • iPad mini 2 (A1489)
  • iOS 11.2.2
  • Safari

iPhone/Safari

  • iPhone 6 (A1586)
  • iOS 11.2.2
  • Safari
  1. Android/Tab/Chrome <-> iPad/Safari

Android/Tab/Chrome sends an offer, then iPad/Safari receives it, but then giving an error:

Unhandled Promise Rejection: OperationError (DOM Exception 34): 
Failed to set remote offer sdp: Session error code: ERROR_CONTENT. 
Session error description: Failed to set remote video description send parameters..

The sdp offer:

v=0
o=- 7644883235956031763 2 IN IP4 127.0.0.1
s=-
t=0 0
a=group:BUNDLE audio video
a=msid-semantic: WMS Yiel2ebiIcKBPDaLuAqKaFpR93Mbz1tSsNRm
m=audio 9 UDP/TLS/RTP/SAVPF 111 103 9 0 8 105 13 110 113 126
c=IN IP4 0.0.0.0
a=rtcp:9 IN IP4 0.0.0.0
a=ice-ufrag:mXxq
a=ice-pwd:T4vRjmDaHYES+J3WJ8NAx65S
a=ice-options:trickle
a=fingerprint:sha-256 B1:36:E3:06:6E:6F:73:59:96:BB:74:95:79:20:64:F6:45:AD:99:1A:43:78:AD:CA:CA:7A:D9:23:2C:D8:C5:07
a=setup:actpass
a=mid:audio
a=extmap:1 urn:ietf:params:rtp-hdrext:ssrc-audio-level
a=sendrecv
a=rtcp-mux
a=rtpmap:111 opus/48000/2
a=rtcp-fb:111 transport-cc
a=fmtp:111 minptime=10;useinbandfec=1
a=rtpmap:103 ISAC/16000
a=rtpmap:9 G722/8000
a=rtpmap:0 PCMU/8000
a=rtpmap:8 PCMA/8000
a=rtpmap:105 CN/16000
a=rtpmap:13 CN/8000
a=rtpmap:110 telephone-event/48000
a=rtpmap:113 telephone-event/16000
a=rtpmap:126 telephone-event/8000
a=ssrc:1841783350 cname:RdL9LRY2OCXO8jbB
a=ssrc:1841783350 msid:Yiel2ebiIcKBPDaLuAqKaFpR93Mbz1tSsNRm e1a0f1a7-66bf-4921-9677-30e5e838ad02
a=ssrc:1841783350 mslabel:Yiel2ebiIcKBPDaLuAqKaFpR93Mbz1tSsNRm
a=ssrc:1841783350 label:e1a0f1a7-66bf-4921-9677-30e5e838ad02
m=video 9 UDP/TLS/RTP/SAVPF 96 97 98 99 100 101 102
c=IN IP4 0.0.0.0
a=rtcp:9 IN IP4 0.0.0.0
a=ice-ufrag:mXxq
a=ice-pwd:T4vRjmDaHYES+J3WJ8NAx65S
a=ice-options:trickle
a=fingerprint:sha-256 B1:36:E3:06:6E:6F:73:59:96:BB:74:95:79:20:64:F6:45:AD:99:1A:43:78:AD:CA:CA:7A:D9:23:2C:D8:C5:07
a=setup:actpass
a=mid:video
a=extmap:2 urn:ietf:params:rtp-hdrext:toffset
a=extmap:3 http://www.webrtc.org/experiments/rtp-hdrext/abs-send-time
a=extmap:4 urn:3gpp:video-orientation
a=extmap:5 http://www.ietf.org/id/draft-holmer-rmcat-transport-wide-cc-extensions-01
a=extmap:6 http://www.webrtc.org/experiments/rtp-hdrext/playout-delay
a=extmap:7 http://www.webrtc.org/experiments/rtp-hdrext/video-content-type
a=extmap:8 http://www.webrtc.org/experiments/rtp-hdrext/video-timing
a=sendrecv
a=rtcp-mux
a=rtcp-rsize
a=rtpmap:96 VP8/90000
a=rtcp-fb:96 ccm fir
a=rtcp-fb:96 nack
a=rtcp-fb:96 nack pli
a=rtcp-fb:96 goog-remb
a=rtcp-fb:96 transport-cc
a=rtpmap:97 rtx/90000
a=fmtp:97 apt=96
a=rtpmap:98 VP9/90000
a=rtcp-fb:98 ccm fir
a=rtcp-fb:98 nack
a=rtcp-fb:98 nack pli
a=rtcp-fb:98 goog-remb
a=rtcp-fb:98 transport-cc
a=rtpmap:99 rtx/90000
a=fmtp:99 apt=98
a=rtpmap:100 red/90000
a=rtpmap:101 rtx/90000
a=fmtp:101 apt=100
a=rtpmap:102 ulpfec/90000
a=ssrc-group:FID 659734980 914875391
a=ssrc:659734980 cname:RdL9LRY2OCXO8jbB
a=ssrc:659734980 msid:Yiel2ebiIcKBPDaLuAqKaFpR93Mbz1tSsNRm 53ce1350-e2ef-426e-9023-e91e4ea08dc6
a=ssrc:659734980 mslabel:Yiel2ebiIcKBPDaLuAqKaFpR93Mbz1tSsNRm
a=ssrc:659734980 label:53ce1350-e2ef-426e-9023-e91e4ea08dc6
a=ssrc:914875391 cname:RdL9LRY2OCXO8jbB
a=ssrc:914875391 msid:Yiel2ebiIcKBPDaLuAqKaFpR93Mbz1tSsNRm 53ce1350-e2ef-426e-9023-e91e4ea08dc6
a=ssrc:914875391 mslabel:Yiel2ebiIcKBPDaLuAqKaFpR93Mbz1tSsNRm
a=ssrc:914875391 label:53ce1350-e2ef-426e-9023-e91e4ea08dc6

If iPad/Safari first sends an offer, same error message on the Android/Tab/Chrome.

  1. Same error in case:

Android/Tab/Chrome <-> iPhone/Safari
Android/Tab/Chrome <-> Desktop/Safari

Uncaught (in promise) DOMException: Failed to set remote offer sdp: 
Session error code: ERROR_CONTENT. Session error description: 
Failed to set remote video description send parameters..

UPDATE:

Since upgrading from iOS 11.1.2 to iOS 11.2.2 the other problem Desktop/Chrome <-> iPhone/Safari is solved. So this is working right now.

Error step-04 folder

I have read and done all chapters without any problems. But I get an error while doing: "7. Set up a signaling service to exchange messages". I use git clone to get the code on my localhost. I delete the work directory and rename the step-04 folder to work. I go inside the work folder. I do a npm install. Then node index.js. It's running without a response, so that's fine. From my browser, I open localhost:8080 (like it is said). The browser gives error: ERR_CONNECTION_REFUSED. In the node console I get the following error message:

/Users/My_Name/Localhost/webrtc-googlecodelabs/work/node_modules/node-static/lib/node-static.js:348
                      mime.lookup(files[0]) ||
                           ^
TypeError: mime.lookup is not a function
    at Server.respond (/Users/My_Name/Localhost/webrtc-googlecodelabs/work/node_modules/node-static/lib/node-static.js:348:28)
    at /Users/My_Name/Localhost/webrtc-googlecodelabs/work/node_modules/node-static/lib/node-static.js:64:22
    at FSReqWrap.oncomplete (fs.js:123:15)

The same error I get with step-05 and step-06.

I have Node v6.10.2 and Chrome 62.

What am I doing wrong?

Webpage buttons fail to navigate setps

This issue is for the website (https://codelabs.developers.google.com/codelabs/webrtc-web/), not the repo code itself.

I'm on Chrome Canary Version 55.0.2853.0 canary (64-bit), there is no issue for me on Chrome Version 52.0.2743.116 m

When pressing the blue arrow buttons at the bottom to navigate, the page content disappears and there is a console error (seen below). Using the sidebar navigation works, so long as the buttons have not been clicked before.


codelab.js:15494 Uncaught TypeError: Failed to execute 'animate' on 'Element': 'function (a){return a}' is not a valid value for easing
    at Object.b.newUnderlyingAnimationForKeyframeEffect (codelab.js:15494)
    at b.Animation._rebuildUnderlyingAnimation (codelab.js:15493)
    at b.Animation (codelab.js:15493)
    at b.AnimationTimeline._play (codelab.js:15493)
    at Object.b.newUnderlyingAnimationForGroup (codelab.js:15494)
    at b.Animation._rebuildUnderlyingAnimation (codelab.js:15493)
    at b.Animation (codelab.js:15493)
    at b.AnimationTimeline._play (codelab.js:15493)
    at b.AnimationTimeline.play (codelab.js:15493)
    at HTMLElement._runAnimationEffects (codelab.js:15711)

404 Issue

Step 4 adds the line
<script src="/socket.io/socket.io.js"></script>
to index.html
However this file is not provided by repo and no information is given on how to go about installing it.

streaming

step 2, used like video chat between 2 pc? someone do it?

Avoid deprecated code in https://codelabs.developers.google.com/codelabs/webrtc-web/#3

in this step the code should be updated to:

'use strict';

var constraints = {
  audio: false,
  video: true
};
var video = document.querySelector('video');

function successCallback(stream) {
  window.stream = stream; // stream available to console
  if (window.URL) {
    video.srcObject = stream;
  } else {
    video.src = stream;
  }
}

function errorCallback(error) {
  console.log('navigator.getUserMedia error: ', error);
}

navigator.mediaDevices.getUserMedia(constraints)
  .then(successCallback)
  .catch(errorCallback);

Change the extension of html to php

Is there any way to change the front-end of the WebRTC video conference HTML page into .php extension instead of .html extension?
As i would like to connect it to the database. Thanks

No Video in step 05

Hi,

I got through all the steps with caution, my node server is running, my webconsole is positive about people coming in the chatroom and about the connections being made but there isn't any display of video on any tab !

15

16

17

Could you help me please ? :/

Step-2 - Update of adapter.js required to work on Edge

Summary
In order to have the Step-2 working on Edge, I had to change the adapter.js library to the latest one.

Issue details
On Edge, the Start action works perfectly but the Call doesn't start the second stream.
No error visible on the console, but the pc2.onaddstream is never called by the app.

Workaround
By using the latest version of adapter.js: https://webrtc.github.io/adapter/adapter-latest.js (as of today: 6.1.1), the sample of the codelab - Step-2 was able to raise the "pc2.onaddstream" event and the code works perfectly since then.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.