WebRTC available on the Chrome dev channel

3,323 views
Skip to first unread message

Serge Lachapelle

unread,
Jan 18, 2012, 12:50:20 PM1/18/12
to discuss...@googlegroups.com
Hi all,

WebRTC is now available in Chrome, as part of the dev channel, with a command line switch.



Oh.... and we have a shiny new Google+ page!

Thank you all for your patience! We are looking forward to hearing from you.

/Serge
Message has been deleted

Leo Brown

unread,
Jan 18, 2012, 2:45:16 PM1/18/12
to discuss...@googlegroups.com
Hi Serge,

Great news. I've installed the latest dev channel of Chrome on OSX, but it took a while to find the right call to run it in OSX, perhaps you could include it in your Readme with default Linux, OSX and Windows examples?

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --enable-media-stream --enable-p2papi 

Also, I'm finding it very hard to determine the steps for this step:
- A peerconnection_server binary (make peerconnection_server).
I can't see peerconnection_server referenced anywhere but will keep reading. More pointers on this would be great.

So far I have retrieved the test file from SVN using  curl and opened it in the Dev Chrome from this URL:


Chrome responds "You must have a WebRTC capable browser in order to make calls using this test page." which makes me think that perhaps there's a bigger issue.

Leo

Andrew MacDonald

unread,
Jan 18, 2012, 2:52:53 PM1/18/12
to discuss...@googlegroups.com
On Wed, Jan 18, 2012 at 11:45 AM, Leo Brown <l...@netfuse.org> wrote:
> So far I have retrieved the test file from SVN using  curl and opened it in the Dev Chrome from this URL:
>
>   http://webrtc.googlecode.com/svn/trunk/test/functional_test/webrtc_test.html
>
> Chrome responds "You must have a WebRTC capable browser in order to make calls using this test page." which makes me think that perhaps there's a bigger issue.

That's some (perhaps unfortunate) static text. It doesn't mean your
browser isn't WebRTC capable.

Paul Neave

unread,
Jan 18, 2012, 2:54:12 PM1/18/12
to discuss...@googlegroups.com
I get the same problem on Mac OS X 10.7, Chrome Canary (using the --enable-media-stream flag). I get an error "Failed to load resource" on first load, then on reloading a simple GET undefined error.

This code works somewhat:

function successCallback(stream) {
    console.log(stream);
    video.src = window.webkitURL.createObjectURL(stream);
}

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

navigator.webkitGetUserMedia('video', successCallback, errorCallback);

However setting the video.src is the problem as window.webkitURL.createObjectURL(stream); returns undefined. Setting video.src = stream; doesn't work either. So no camera access so far.
Paul.

Andreas Kuckartz

unread,
Jan 18, 2012, 3:16:25 PM1/18/12
to discuss...@googlegroups.com
I am mostly lurking here - but that is really great news!

Cheers,
Andreas

On 18.01.2012 18:50, Serge Lachapelle wrote:
> Hi all,
>
> WebRTC is now available in Chrome, as part of the dev channel, with a
> command line switch.
>
> Chromium blog
> post: http://blog.chromium.org/2012/01/real-time-communications-in-chrome.html
>
> WebRTC.org blog post with
> details: http://www.webrtc.org/blog/webrtcnowavailableinthechromedevchannel
>
>
> Oh.... and we have a shiny new Google+ page

> <https://plus.google.com/u/0/b/113817074606039822053/113817074606039822053/posts>!

Serge Lachapelle

unread,
Jan 18, 2012, 3:49:46 PM1/18/12
to discuss...@googlegroups.com
be sure to start chrome with the --enable-media-stream switch on the command line, otherwise no joy.

/S
--
Serge Lachapelle | Product Manager | ser...@google.com | +46 732 01 22 32
Google Sweden AB | Kungsbron 2, SE-111 22 Stockholm | Org. nr. 556656-6880 

Apparently, this footer is required in Europe. Apologies. This email may be confidential or privileged.  If you received this communication by mistake, please don't forward it to anyone else,please erase all copies and attachments, and please let me know that it went to the wrong person.  Thanks.

Greg Miernicki

unread,
Jan 18, 2012, 4:50:46 PM1/18/12
to discuss...@googlegroups.com
I get a:

Uncaught TypeError: Object #<Navigator> has no method 'getUserMedia'

when trying to access the camera with the sample code provided on w3:

<article>
 <style scoped>
  video { transform: scaleX(-1); }
  p { text-align: center; }
 </style>
 <h1>Snapshot Kiosk</h1>
 <section id="splash">
  <p id="errorMessage">Loading...</p>
 </section>
 <section id="app" hidden>
  <p><video id="monitor" autoplay></video> <canvas id="photo"></canvas>
  <p><input type=button value="&#x1F4F7;" onclick="snapshot()">
 </section>
 <script>
  navigator.getUserMedia({video:true}, gotStream, noStream);
  var video = document.getElementById('monitor');
  var canvas = document.getElementById('photo');
  function gotStream(stream) {
    video.src = URL.createObjectURL(stream);
    video.onerror = function () {
      stream.stop();
    };
    stream.onended = noStream;
    video.onloadedmetadata = function () {
      canvas.width = video.videoWidth;
      canvas.height = video.videoHeight;
      document.getElementById('splash').hidden = true;
      document.getElementById('app').hidden = false;
    };
  }
  function noStream() {
    document.getElementById('errorMessage').textContent = 'No camera available.';
  }
  function snapshot() {
    canvas.getContext('2d').drawImage(video, 0, 0);
  }
 </script>
</article>

from :


Here's my about:version

Google Chrome18.0.1011.1 (Official Build 118106canary
OSMac OS X
WebKit535.18 (@105195)
JavaScriptV8 3.8.6
Flash11.2.202.160
User AgentMozilla/5.0 (Macintosh; Intel Mac OS X 10_7_2) AppleWebKit/535.18 (KHTML, like Gecko) Chrome/18.0.1011.1 Safari/535.18
Command Line/Applications/Google Chrome Canary.app/Contents/MacOS/Google Chrome Canary --enable-media-stream --enable-p2papi --flag-switches-begin --js-flags=--harmony --enable-media-source --flag-switches-end



Paul Neave

unread,
Jan 18, 2012, 4:55:41 PM1/18/12
to discuss...@googlegroups.com
It uses the webkit prefix, so:

navigator.webkitGetUserMedia('video', successCallback, errorCallback);

Also this API uses the old style string rather than an object, so 'video' rather than { 'video: true' } as the first parameter.

All that said, still no joy for me. I'm using the --enable-media-stream flag too. I'll try to get a simple HTML demo together.
Paul.

Greg Miernicki

unread,
Jan 18, 2012, 5:23:23 PM1/18/12
to discuss...@googlegroups.com
I'm getting mixed results with webkitGetUserMedia:

on OSX Chrome Canary (I don't have a camera) and get "No camera detected" instead of the previous error.

However, on Ubuntu Chrome Dev (which has a camera), I still get the same "has no method" error.
Message has been deleted

Greg Miernicki

unread,
Jan 18, 2012, 6:38:16 PM1/18/12
to discuss...@googlegroups.com
Tinker and ye shall figure it out!

Working demo :

Paul Neave

unread,
Jan 18, 2012, 7:09:11 PM1/18/12
to discuss...@googlegroups.com
Ah perfect! Thanks Greg! Not sure why my code wasn't working, this looks great.

Paul Neave

unread,
Jan 18, 2012, 7:20:44 PM1/18/12
to discuss...@googlegroups.com
Ah, it wasn't working for me because I was using a local file:/// rather than hosting it on my server. I guess this is a security protection - it works when I host the file on localhost or upload it to server.
Paul.

Justin Uberti

unread,
Jan 18, 2012, 10:34:38 PM1/18/12
to discuss...@googlegroups.com
Nice work. You probably noticed the screenshot button only works once, this is a known issue and should be fixed soon.

Greg Miernicki

unread,
Jan 18, 2012, 10:39:30 PM1/18/12
to discuss...@googlegroups.com
I was a bit curious about that unexpected behavior, thanks for clearing that up ;)

In Seuk Lee

unread,
Jan 19, 2012, 1:48:57 AM1/19/12
to discuss...@googlegroups.com
I made loopback webrtc sample.
 
The page has two local video and one remote video (I tried to make two but I couldn''t).
Two use streams made by calling 'webkitGetUserMedia'.
And one use stream made by calling 'processSignalingMessage'.
 
Actually I tried to send local video using pc1(PeerConnection1) and receive it using pc2.
But it dose not work. I found that only one peerconnection(pc1)'s 'processSignalingMessage' function works properly.
(Maybe first created peerconnection)
 
I want to use several peerconnections in one page to show serveral peer's video.
Does anybody know how I can do it?
 
Followings are also a bit strange things for me.
- SignalingCallback was called several times after addStream function called.
- When peerconnection created with 'audio' option, it does not work.
 
Thanks.
 
 
 

<html>
<head>
<title> Chrome WebRTC loopback </title>
</head>

<body onload="initialize()" onunload="uninitialize()">

<input type="button" value="Connect" onclick="connect()" id="connectBtn">
<div>
 <textarea id="status" style="width:600pt;height:200pt"></textarea>
</div>


<table>
<tr>
 <td>Local</td>
 <td>Remote</td>
</tr>
<tr>
 <td>
  <video id="localVideo1" width="267" height="200" autoPlay></video>
 </td>
 <td>
  <video id="remoteVideo1" width="267" height="200" autoPlay></video>
  </td>
</tr>
<tr>
 <td>
  <video id="localVideo2" width="267" height="200" autoPlay></video>
 </td>
 <td>
  <video id="remoteVideo2" width="267" height="200" autoPlay></video>
  </td>
</tr>
</table>

<script>


var pc1, pc2;
var localstream1, localstream2;


function initialize()
{
 pc1 = new webkitPeerConnection('STUN stun.l.google.com:19302', signalingCallback1);
 pc2 = new webkitPeerConnection('STUN stun.l.google.com:19302', signalingCallback2); 
 
 report('PeerConnections created ' + pc1 +":"+ pc2);
 
 navigator.webkitGetUserMedia('video audio', gotStream2, noStream);

 navigator.webkitGetUserMedia('video audio', gotStream1, noStream);

 pc1.onended = function () {
  report('stream.onended... ');
  stopSteam();    
 }

 pc1.onaddstream = function(event) {
  
  report('pc1.onaddstream:'+event+'');
  var stream = event.stream;
  var url =  webkitURL.createObjectURL(stream);
  remoteVideo1.src = url;

  report('pc1.remote Video url:'+url+'');
 }
 pc2.onaddstream = function(event) {

  report('pc2.onaddstream:'+event+'');
  var stream = event.stream;
  var url =  webkitURL.createObjectURL(stream);
  remoteVideo2.src = url;
  report('pc2.remote Video url set()'+url+'');
 }
}


function report(s) {
 document.getElementById('status').textContent = (s + '\r\n' + document.getElementById('status').textContent);
}


function gotStream1(stream) {
 localstream1 = stream;

 var url =  webkitURL.createObjectURL(stream);
 localVideo1.src = url;
 report("gotStream1 "+url);
}

function gotStream2(stream) {
 localstream2 = stream;

 var url =  webkitURL.createObjectURL(stream);
 localVideo2.src = url;
 report("gotStream2 "+url);
}

function noStream() {
 report('Could not obtain access to your microphone.');
}

function signalingCallback1(msg, source) {
 try
 {
  //report("signalingCallbackLocal("+msg+");");
  report("signalingCallback1();");
  pc1.processSignalingMessage(msg);
  //pc2.processSignalingMessage(msg);
  report("signalingCallback1 success");
 }
 catch (e)
 {
  alert("exception on signalingCallback "+e);
 }
}

function signalingCallback2(msg, source) {
 try
 {

  //report("signalingCallbackRemote("+msg+");");
  report("signalingCallback2();");
  //pc1.processSignalingMessage(msg);
  pc2.processSignalingMessage(msg);
  report("signalingCallback2 success");
 }
 catch (e)
 {
  alert("exception on signalingCallback "+e);
 }
}

function connect() {

 pc1.addStream(localstream1);
 pc2.addStream(localstream2);
}

</script>


 </body>
</html>

Henrik Grunell

unread,
Jan 19, 2012, 5:15:41 AM1/19/12
to discuss...@googlegroups.com
On Thu, Jan 19, 2012 at 07:48, In Seuk Lee <inseu...@gmail.com> wrote:
I made loopback webrtc sample.
 
The page has two local video and one remote video (I tried to make two but I couldn''t).
Two use streams made by calling 'webkitGetUserMedia'.
And one use stream made by calling 'processSignalingMessage'.
 
Actually I tried to send local video using pc1(PeerConnection1) and receive it using pc2.
But it dose not work. I found that only one peerconnection(pc1)'s 'processSignalingMessage' function works properly.
(Maybe first created peerconnection)
 
I want to use several peerconnections in one page to show serveral peer's video.
Does anybody know how I can do it?
Currently, only one PeerConnection is supported.

 
Followings are also a bit strange things for me.
- SignalingCallback was called several times after addStream function called.
This is normal.
 
- When peerconnection created with 'audio' option, it does not work.
Only audio and video is supported at the moment. Not video only or audio only.
 
/Henrik

TwinLife Dev Team

unread,
Jan 19, 2012, 1:18:57 PM1/19/12
to discuss...@googlegroups.com
Hello,

Is it possible to activate the log mechanism of WebRTC from Chrome
command line?

Thanks for your help,
Christian

Guido Tapia

unread,
Jan 20, 2012, 1:11:35 AM1/20/12
to discuss...@googlegroups.com
This is exciting stuff, but what really got my attention was this point in section 2 of the draft specs:

Now, I'm having a look at the demo, the specs, api, etc and everything seems so interlinked with MediaStreams that I can't see how to begin to understand how I would send an arbitrary blob between peers.

Is there any sample code anywhere that can help me with this?

PS: Great work

Justin Uberti

unread,
Jan 20, 2012, 9:50:38 AM1/20/12
to discuss...@googlegroups.com
In this version, there is no support for sending application data between peers.

t0015m1th

unread,
Jan 22, 2012, 11:43:20 AM1/22/12
to discuss...@googlegroups.com
Excellent!

I note three issues and hope you fine GentlePeople can assist -

1) Do you know why certain transforms kill the stream? Specifically, I want to mirror the image in the X-axis and tried
    -webkit-transform: scaleX(-1);
to which it properly mirrors the first frame and then stops (freezes) with no discernable error that I can find. Similar results with matrix transforms, although resizing seems to work just fine.

2) Do you know WHY the button click in your example only works once?

3) Do you know WHY the web page must be hosted on a server (i.e. not a local file)?  One comment said it might be security, but that seems backwards and makes no sense to me.  Especially since you have to (currently) explicitly start Chrome with --enable-media-stream.  What could the security issue possibly be?

Justin Uberti

unread,
Jan 23, 2012, 2:59:36 PM1/23/12
to discuss...@googlegroups.com
On Sun, Jan 22, 2012 at 11:43 AM, t0015m1th <br...@bkmcm.com> wrote:
Excellent!

I note three issues and hope you fine GentlePeople can assist -

1) Do you know why certain transforms kill the stream? Specifically, I want to mirror the image in the X-axis and tried
    -webkit-transform: scaleX(-1); 

to which it properly mirrors the first frame and then stops (freezes) with no discernable error that I can find. Similar results with matrix transforms, although resizing seems to work just fine.

This is working for me.
 
2) Do you know WHY the button click in your example only works once?

Probably the known issue, since fixed, with drawImage(). 

3) Do you know WHY the web page must be hosted on a server (i.e. not a local file)?  One comment said it might be security, but that seems backwards and makes no sense to me.  Especially since you have to (currently) explicitly start Chrome with --enable-media-stream.  What could the security issue possibly be?

That's just the way it works. Other things are disabled for file: content as well. Try using the local webserver that comes with the AppEngine SDK. 

Jaap Haitsma

unread,
Jan 23, 2012, 8:56:26 PM1/23/12
to discuss...@googlegroups.com
It works for me under windows when I use the dev version but under Linux it doesn´t

Under linux navigator.webkitGetUserMedia does not exist

Is it expected that Linux does not work?

Jaap

Rob Wilson

unread,
Feb 2, 2012, 10:16:27 AM2/2/12
to discuss...@googlegroups.com
This is great, thanks.

A quick question. When I use this demo, http://miernicki.com/cam.html, which I'm running locally, shut the browser down and restart the demo again, I get no camera feed. I have to restart the machine to get the feed back. Is there a way of closing the connection gracefully before exiting?

Rob

▴triune.

unread,
Feb 2, 2012, 11:11:42 AM2/2/12
to discuss...@googlegroups.com
You can set src="" on the video object via javascript to achieve th effect of turning off the camera. However, for me, closing the tab turns off my camera (and opening a new tab to the page turns it back on). I think the Chrome team is still working on this a lot for stuff like granting a webpage permission to turn on the device and what they have so far is a very rough "first draft". Expect much more features and support in later revisions...


Rob

--
.:t.

Senthil Kumar

unread,
Feb 18, 2012, 1:13:38 AM2/18/12
to discuss...@googlegroups.com
When I hit the URL directly, it works. But when I save the html file (cam.html) locally to my hard-drive and point my browser to it, it fails to show the video.

Any ideas?

Paul Neave

unread,
Feb 18, 2012, 3:21:05 AM2/18/12
to discuss...@googlegroups.com
I think this is an intended security restriction - webcam access is only allowed online rather than from a local file.

Paul.

Guillem

unread,
Feb 18, 2012, 5:32:17 AM2/18/12
to discuss...@googlegroups.com
I think you need load the cam.html in a local apache server not directly from the folders.
Reply all
Reply to author
Forward
0 new messages