samdutton / simpl Goto Github PK
View Code? Open in Web Editor NEWSimplest possible examples of HTML, CSS and Javascript:
Home Page: https://simpl.info
License: Apache License 2.0
Simplest possible examples of HTML, CSS and Javascript:
Home Page: https://simpl.info
License: Apache License 2.0
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/)
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.
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...
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');
}
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
Would be awesome!
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
On the page http://www.simpl.info/notification/ notifications are not working in Firefox 30 under Windows 8.
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
Build for :
If this is required, i'm ready to send a PR.
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");
When I try to access: simpl.info/video2014 I get a 404 error.
Is this known? where can I find the content?
The WebRTC getUserMedia link (http://www.simpl.info/getUserMedia/index.html) gives a 404 at the moment.
๐ฏ
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!
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.
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
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#
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();
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'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.
For Webintents it must stnetnibew
instead of webintents
in the URL.
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?
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! :)
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?
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?
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 tried the sample (http://www.simpl.info/getusermedia/), but in my Opera is not working.
Device: Samsung Galaxy Y with Opera Mobile 12.10
what if i only want to select the video source
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
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?
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 ?
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)
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
window.ononline = function() {
console.log("Visitor might be online.");
};
window.onoffline = function() {
console.log("Visitor is definitely offline.");
};
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 )
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,
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.
:) will try to do a pull on this one. Unless, Jake is faster.
Chrome is enforcing SSL for GUM, so it doesn't work on http anymore.
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?
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.
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.
https://github.com/samdutton/simpl/blob/master/rtcpeerconnection/multi/index.html
This seems doesn't work well on chromium 34.
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 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:
media.mediasource.webm.enabled
= truemedia.mediasource.format-reader.webm
= trueRESULT:
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
.
many people still don't know about querySelectors. I have a few simple examples at http://vanillajsf.tw/
'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.'
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.