Build for :

• Creating new feature folders
• Generating the index.html

If this is required, i'm ready to send a PR.

what if i only want to select the video source

When I try to access: simpl.info/video2014 I get a 404 error.

Is this known? where can I find the content?

I'm trying to implement subtitles to a audio file to use it in a photo slideshow. This solution would be great but it doesn't work in Firefox. Is there any way to get it working? Thanks

Chrome is enforcing SSL for GUM, so it doesn't work on http anymore.

many people still don't know about querySelectors. I have a few simple examples at http://vanillajsf.tw/

I just got

 MediaRecorder is not supported by this browser.

 Try Firefox 29 or later, or Chrome 47 or later, with Enable experimental Web Platform features enabled from chrome://flags.

but I use Firefox 42

any ideas?

Hi,
I am new to JavaScript.
I want to get all audio & video source in client application (means without any web server e.g. apache).
I used getSources API to get all devices but it doesn,t work without web-server (apache server).
Could you please guide me how to get all local devices in client application (without any web-server)?

Thanks in Advance.

Hi,

Could you tell where is the video file stored? Is this happening on client side only or a file is stored on server side and then streamed back to client?

window.ononline = function() {
console.log("Visitor might be online.");
};

window.onoffline = function() {
console.log("Visitor is definitely offline.");
};

thanks for this nice sample. it is so helpful. but i am facing a problem.
in simpl / mediarecorder / js / main.js
u used

count++;
if (count > 1) {
return;
}
console.log(e);
videoElement.src = window.URL.createObjectURL(e.data);

as u used "if (count > 1) return;" so it executes once. i am trying to play in every 2 sec. i removed this condition checking. but in that case code also played first time only. what should i do to play in every 2 sec here ? Is there any issue ?

Hi Sam,
I have a requirement to encrypt a webm video using clear key encryption and play it as your example below.
http://simpl.info/eme/clearkey/

my question is how to do the encryption. I found below link, but I am not sure where to start from. I am not that good with linux. so please be kind enough to guide me with the steps of webm file encryption with clear key.

https://docs.google.com/document/d/17d6_KX5jX0gY1ygYbjqOEdVzuUGkPO53wL8t40dMGeQ/edit#

Would be awesome!

The EME page is an excellent resource for basic EME - downloading a WebM file with an encrypted stream (Chrome_44-enc_av.webm) and decoding it in the browser.

But, how was that encrypted WebM file created? ffmpeg? openssl? MP4Box? It's left quite a mystery, and Googling this only leads to encryption-as-a-service companies, and other confused idiots.

So, what is the secret sauce?

It would be convenient to embed some guidance in inline HTML:

  <video autoplay controls>
    <!-- ffmpeg -i Chrome_44.webm -eme-key ebdd62f16814d27b68ef122afce4ae3c \
         Chrome_44-enc_av.webm -->
    <source src="../video/Chrome_44-enc_av.webm"  type="video/webm" />
    <p>This browser does not support the video element.</p>
  </video>

I tried the sample (http://www.simpl.info/getusermedia/), but in my Opera is not working.
Device: Samsung Galaxy Y with Opera Mobile 12.10

Hi, i was trying to test the rtcdatachannel but i found that on /js/main.js on lines 19 and 20

var dataChannelSend = document.getElementById('#dataChannelSend');
var dataChannelReceive = document.getElementById('#dataChannelReceive');

should be

var dataChannelSend = document.getElementById('dataChannelSend');
var dataChannelReceive = document.getElementById('dataChannelReceive');

Sorry for the trouble, just noticed it, and thanks, i'm starting to develop something and this examples are really useful

Github allows you to add a website to a repository in the repo description. It would make sense to add a link to http://simpl.info/.

I'm getting an InvalidStateError while trying to run the EME example from the latest Chrome (36). This is what appears in the console: Uncaught InvalidStateError: Failed to execute 'endOfStream' on 'MediaSource': The 'updating' attribute is true on one or more of this MediaSource's SourceBuffers.

Hi,
I am new for JS. I tried to run Devicejs. But gave me the error Uncaught ReferenceError: module is not defined at like "module.exports = require("js/lib/Device.js");"?

As per my understanding, it detects all attached devices. Please correct me if I am wrong.
Thanks in Advnace

:) will try to do a pull on this one. Unless, Jake is faster.

For Webintents it must stnetnibew instead of webintents in the URL.

I refer to this demo of the repo.
In Chrome 53, two webcams are found, but as soon as I switch to the second webcam, the video-playback-canvas turns black. When I attach the webcams one by the other, they both work. When I connect both, the second never loads the live-image for preview. As the descriptions says: min Chrome 30, it might be that something has changed in the getSource API? Can anyone reproduce this problem?

When the source is changed, JS throws:
Uncaught TypeError: window.stream.stop is not a function GET https://simpl.info/getusermedia/sources/null

sys: Win7, Chrome 53.0.2785.143

EDIT: Solution here

I'm on Chrome 48.0.2564.116 m
After I press Start, the text field still gray out and 3 button gray out. Open console I see after 'Offer from localPeerConnection ... ' it does 2 loops saying 'local ice callback ... ' then 'Send channel state is: closed'

I'm wondering can we run the repo or this is just source code for reference? Because I didn't find a way to run it. I just saw bunch of source code without a server. Since there are only javascript so I bet it is running in node.js, but still how can I run it?
I was looking around for the whole day and still haven't see anywhere mentioned that.

More specifically, I was trying to run getusermedia, the simple webrtc example.

Thanks.

👯

I had some problems to changing camera on my app after an Chrome update.

I solve after change the line above

window.stream.stop();

to this:

window.stream.getVideoTracks()[0].stop();

'Using the 'capture' attribute as an enum is deprecated. Please use it as a boolean and specify the media types that should be accepted in the 'accept' attribute.'

The WebRTC getUserMedia link (http://www.simpl.info/getUserMedia/index.html) gives a 404 at the moment.

Hey,

first thanks or your example but the GitHub link (or hole project) seems to be broken.
http://www.simpl.info/rtcpeerconnection/

And i want you to ask how it would be possible to connect 2 PC to this example in a local network? Is there any way I can manually put IP adresses to the code or something.

I tried many examples to get a running WebRTC videochat between two local PCs but I wasn't successfull yet.

Thanks

Hi,

Although getusermedia/sources/js/main.js detects two cameras on my Android phone (Nexus4 with kitkat), the second camera stream stays black when switching. Both cameras are working, so I see the stream of camera1 if I select that one first, but when switching to camera2 afterwards, then camera2 stays black. Same vice versa. I see the stream of camera2 if I select that one first, but when switching to camera1 afterwards, then camera1 stays black. Pretty weird.

Not sure if it's an Android issue, or if you need specific code to properly switch cameras on Android on the fly?

Works flawlessly on the Desktop though.

Andreas

On the page http://www.simpl.info/notification/ notifications are not working in Firefox 30 under Windows 8.

I noticed EventSource#index.php

Is this due to hosting limitation?

Could we use some node.js like:

var http = require('http');
var sys = require('sys');
var fs = require('fs');

http.createServer(function(req, res) {

  if (req.headers.accept && req.headers.accept == 'text/event-stream') {
    if (req.url == '/events') {
      sendSSE(req, res);
    } else {
      res.writeHead(404);
      res.end();
    }
  } else {
    res.writeHead(200, {'Content-Type': 'text/html'});
    res.write(fs.readFileSync(__dirname + '/index.html'));
    res.end();
  }
}).listen(8000);


function sendSSE(req, res) {
  res.writeHead(200, {
    'Content-Type': 'text/event-stream',
    'Cache-Control': 'no-cache',
    'Connection': 'keep-alive'
  });

  var id = (new Date()).toLocaleTimeString();

  setInterval(function() {
    constructSSE(res, id, (new Date()).toLocaleTimeString());
  }, 5000);

  constructSSE(res, id, (new Date()).toLocaleTimeString());
}

function constructSSE(res, id, data) {
  res.write('id: ' + id + '\n');
  res.write("data: " + data + '\n\n');
}

The word is that Chrome Canary has support for the new Canvas Path Object. Looking around I do not yet see a way to utilize this feature. Is it possible to see a demo of Path Objects working on Simpl?

https://github.com/samdutton/simpl/blob/master/rtcpeerconnection/multi/index.html
This seems doesn't work well on chromium 34.

Hi, I am using chrome version 55,
it shows TypeError: ImageCapture is undefined in both chrome and firefox. i want to capture image and save it in database.But here not able to capture image.

After talking with @samdutton - It sounds like a great idea to work on it.
Open an issue, so I'll find time to do it! :)

This is a really great project! I have one little suggestion though...

I think that in some cases (particularly with the JavaScript APIs), it would be better to link through the file listing on GitHub rather than directly to the HTML page on GitHub.

For example, this page on XHR:
http://simpl.info/xhr/

...links through to the corresponding HTML file:
https://github.com/samdutton/simpl/blob/gh-pages/xhr/index.html

...but the really interesting stuff is actually in the associated JavaScript file, so it might make more sense to link to:
https://github.com/samdutton/simpl/tree/gh-pages/xhr

Just my $0.02.

Sorry for asking here, I don't know were to ask for help. Searches did not help (
Is there a way to save mediarecorder blob to database and re-display with ajax?
I get ajax jQuery "parserror" when I try to retrieve binary from MySQL.
Thank you guys!

Runnin on Firefox when I press start I get: ReferenceError: webkitRTCPeerConnection is not defined

RTCPeerConnection is currently implemented by Chrome and Opera as webkitRTCPeerConnection and by Firefox as mozRTCPeerConnection (http://www.html5rocks.com/en/tutorials/webrtc/basics/)

During the call with WebRTC app in CEF3, I am getting below Errors. I have done a lot analysis but could not figure it out reason/solution of this issue.. Please suggest what is the problem & what is the solution.

1448447657717 - WebRtcAdaptorImpl - ICE candidate received: sdpMLineIndex = 1, candidate = candidate:1972606970 2 tcp 1518214910 10.12.1.104 0 typ host tcptype active generation 0 for call : undefined
1448447658619 - WebRtcAdaptorImpl - Re-setting ice candidate collection timeout: 1000
1448447659623 - WebRtcAdaptorImpl - Re-setting ice candidate collection timeout: 1000
1448447660625 - WebRtcAdaptorImpl - Re-setting ice candidate collection timeout: 1000
1448447661628 - WebRtcAdaptorImpl - Re-setting ice candidate collection timeout: 1000
1448447662630 - WebRtcAdaptorImpl - Re-setting ice candidate collection timeout: 1000
1448447663632 - WebRtcAdaptorImpl - Re-setting ice candidate collection timeout: 1000
1448447664635 - WebRtcAdaptorImpl - Re-setting ice candidate collection timeout: 1000
1448447665636 - WebRtcAdaptorImpl - Re-setting ice candidate collection timeout: 1000
1448447666638 - WebRtcAdaptorImpl - Ice candidate collection interrupted after given timeout, invoking successCallback.
1448447666639 - WebRtcAdaptorImpl - previous mute state of call: false

Getting the delay of 9 seconds...

https://github.com/samdutton/simpl/blob/master/mutationobserver/index.html

We start with Edit me! here and end up deleting till there is nothing remaining. But on reaching Edit (ie. we delete !,e and m)there are two entries although deletion had occurred only once.

Old value: Edit
Old value: Edit 
Old value: Edit m
Old value: Edit me
Old value: Edit me!

Why?

see also: https://github.com/nickdesaulniers/MediaRecorderDemo

I know that it may not be the 'simplest' example, but as it is so epic, you should look to have a link to the mapTrack example code. It is a really good example of using the info to store metadata which can be used in so many other ways, and I haven't seen as good an example anywhere else on the web.

Or maybe add a section for 'awesome examples' to give these not-quite-so-trivial examples a home. Otherwise they are not as visible unless someone happens to know the name of them. (I only found mapTrack after finding the dedicated mapTrack github repository, and trying to make it work - it is out of date now). There is no linkage there to indicate that the 'live' version is now held at simpl.info.

When clicking HD on http://simpl.info/getusermedia/constraints/index.html the example fails with the following error:

NavigatorUserMediaError {constraintName: "minHeight", message: "", name: "ConstraintNotSatisfiedError"}

VGA and QVGA work as expected.

Edit:

Chrome Version 40.0.2214.93 (64-bit)

I am not able to get the EME example working in current Chrome (36) on OSX or Win7. Testing Win7 images on BrowserStack.com it works in Chrome 32 but fails in Chrome 33. Any idea what has changed?
An error of type "webkitkeyerror" appears in the console log. (e.errorCode.code: 1 which seems to mean: MediaKeyError.MEDIA_KEYERR_UNKNOWN )

Hi

not an issue but a clarification request.. I see that clearkey eme example ) uses a webm file.. will it work with a mp4 file?

if so, how should the file be encrypted?

thank you

The code in https://github.com/samdutton/simpl/blob/master/serviceworker/js/sw.js precaches a list of resources in oninstall and then uses a cache-first approach in the onfetch handler to serve the responses. The cached entries are never updated outside of the oninstall handler.

In practice, this means that the resources which are cached the very first time the page is opened on a given browser will be used indefinitely, until the service worker's code is modified and oninstall is triggered again. If you intend for this behavior, it should be highlighted prominently in the comments/docs, as it's a non-trivial behavior that I'm sure most developers won't be aware of. Most developers would assume that if they modified, e.g., main.js, then that change would (eventually) trickle down to their existing users.

Instead, I'd recommend following this example and include an explicit cache versioning string in the service worker script, along with instructions to developers that it needs to be bumped each time a precached file changes.

Bonus points if you also cache-bust the URLs used in the oninstall handler to ensure that when the cache version string is updated, it actually results in a fresh resource being retrieved from the network.

AFAIK, Chrome and Firefox are the only browsers that react to a view-source pseudo-protocol link. They just 404 in other browsers.

Perhaps linking to source code on Github would be better?

I reported this bug on Mozilla's Bugzilla but this appears to be a bug in the simpl.info/mse player, not Firefox:

https://bugzilla.mozilla.org/show_bug.cgi?id=1202580

STEPS TO REPRODUCE:

1. Set the following about:config prefs:
   media.mediasource.webm.enabled = true
   media.mediasource.format-reader.webm = true
2. Load http://simpl.info/mse/
3. Play the test video if it doesn't start automatically.

RESULT:
In Firefox 42 (Aurora/Dev Edition), the video plays for two seconds then stops. In Firefox 43 (Nightly), the video plays for only one second.

The diagnosis was that this test does not wait for sourceBuffer updateend before calling sourceBuffer.appendBuffer again. This also fails with mp4. Works ok if readChunk_(++i); is called on updateend.

https://github.com/samdutton/simpl/tree/master/js

This example requires an entire library :P

I think something more along the lines of like:

console.log('Hello World');

or

alert('Hello World');

or

var message = "Hello World";
alert("Hello World");