TE
TechEcho
Home24h TopNewestBestAskShowJobs
GitHubTwitter
Home

TechEcho

A tech news platform built with Next.js, providing global tech news and discussions.

GitHubTwitter

Home

HomeNewestBestAskShowJobs

Resources

HackerNews APIOriginal HackerNewsNext.js

© 2025 TechEcho. All rights reserved.

HTML5 webcam to canvas stream (Demo + annotated code)

60 pointsby cbrandolino_over 12 years ago

9 comments

programover 12 years ago
I got nice quality on Chrome 21. Substitute the window.requestAnimationFrame directive with:<p><pre><code> window.requestAnimationFrame = (function() { return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(callback) { window.setTimeout(callback, 1000 / 60); }; })(); </code></pre> and it will work in Opera 12 too.
评论 #4542755 未加载
jlsyncover 12 years ago
Last weekend at #devfestlondon I attempted streaming and sharing these video streams over socket.io with a node.js backend. Demo is <a href="http://svideo.herokuapp.com/" rel="nofollow">http://svideo.herokuapp.com/</a> and <a href="http://svideo.jit.su/" rel="nofollow">http://svideo.jit.su/</a> - your image stream is shared on the internet.
评论 #4544295 未加载
bencevansover 12 years ago
I wrote a li'l app that does something along the same lines. However it captures a data uri from the webcam video and sends it via a websocket to a second user who's also doing the same. It gives you a video chat just without the audio... <a href="https://github.com/bencevans/MediaStream" rel="nofollow">https://github.com/bencevans/MediaStream</a><p>Just thought it may be of interest ;)
franzeover 12 years ago
hi, this is as good a moment as any to promote a little bit a lib i coded some time ago.<p>a simple (cross browser) wrapper to make getUserMedia really simple, you call<p><pre><code> Sinne.getUserVideo(success, error[, options]) //https://github.com/franzenzenhofer/Sinne </code></pre> and get back a nice HTML5 video element with the webcam as the input<p>here is a simple demo using the `Sinne` <a href="http://www.backpacker.io/" rel="nofollow">http://www.backpacker.io/</a> - an HTML5 mirror
评论 #4543011 未加载
评论 #4543009 未加载
Jelte12345over 12 years ago
Strange enough my performance is real crappy (3fps) when I launch it, but when I switch to another tab and back it's great. This happens on Chrome 21 with none of the flags enabled.
dkroyover 12 years ago
Really cool, keep up the good work. It works in Google Chrome 21.0.1180.89, on Windows 7 just fine.
ionwakeover 12 years ago
the FPS are really low - is there a way to improve that?
评论 #4542681 未加载
ionwakeover 12 years ago
what is p2p performance like? what amount of code would have to be written?
评论 #4543020 未加载
jaynizover 12 years ago
SLOW CLAP
评论 #4543023 未加载