VideoタグとWebカメラの映像と音声を一つのVideoタグに合成してダウンロード | ツクロア - DESIGN LAB
HTML5のVideoタグにWebカメラの映像と音声を合成させて、1枚のビデオファイルを生成する方法について試してみました。どうもです、デザイナーの秋葉です、久々の技術のことを書いてみます。 参考にさせていただいたのはこちら https://html5experts.jp/mganeko/12475/ Webカメラからの映像や音声をgetUserMediaというメソッドを使ってストリームデータを取得して、ブラウザだけで動画ファイルを生成してユーザーはダウンロードできるものです。 ここで考えたのは、オリジナルのVideoタグの動画に、カメラの自分の映像やしゃべった声をスーパーインポーズして一つの動画ファイルにするって、HTML5でできるのかな？と思って試したら、ちょっと手間がかかるけどChromeブラウザでできた。 デモをこちらに上げておきました、Chrome 56以降で試してください。 h
iPhoneでビデオプレーヤーを立ち上げること無く、Safari内でムービーが流れているようにみせる - みかづきブログ その3
iPhoneでvideoタグのplayを叩くと、ビデオプレイヤーが立ち上がってしまいますがそのままブラウザ内で見たいというケースもあると思います。 そんなときにつかえるようなつかえないような技を紹介します。（iOS9.0.2 の iPhone6 では動きました） 用意するもの 再生したいムービー（mp4など） 再生したいムービーの音だけ切り出したもの（mp3など） ※ 音とムービーが同じ長さであることを前提としています ※ どちらもiOSで再生できるコーデックで書き出してください 方針 canvas、video、audioを用意 videoのsrcにmp4パスをいれる audioでmp3を再生 audioのcurrentTimeを取得 videoのcurrentTimeをaudioのcurrentTimeにあわせる（playはしない） canvasにvideoをレンダリング audioの再
GitHub - sunng87/heatcanvas: Pixel based heatmap with html5 canvas.
heatcanvas Note that this project is no longer active maintained. Please let me know(file an issue or send me email) if you are interested in taking over it. This is a simple heatmap api based on HTML5 canvas. A heat map is a graphical representation of data where the values taken by a variable in a two-dimensional table are represented as colors, according to Wikipedia. You can find an interactiv
Zoomquilt
The Zoomquilt A collaborative infinitely zooming painting Created in 2004 Up and down keys to navigate A project by Nikolaus Baumgarten Participating illustrators: Andreas Schumann, Eero Pitkänen, Florian Biege, Jann Kerntke, Lars Götze, Luis Felipe, Marcus Blättermann, Markus Neidel, Paul Painter, Oliver Schlemmer, Sonja Schneider, Thorsten Wolber, Tony Stanley, Ville Vanninen The Zoomquilt on Yo
HTML5でスマートフォン開発の理想と現実
Xamarin で Prism を使いたい！ ～「正式対応」 まで待てない人のための Prism 利用 Tips～Tatsuji Kuroyanagi
Javascriptでバーコードを読む at softelメモ
問題 Javascriptで画面上のバーコード画像からデータを読めますか？ 答え canvasに流し込んでビットマップを解析～の流れのようです。 思ったより簡単そうに見える実装で、白黒がきれいに判断できて、きれいに横を向いているときはうまくいくかなと思います。 細かい突っ込みですが、画像のサイズをオリジナルのサイズから拡大、縮小して白黒が若干ぼやけると（？）読めなくなったりするようです。 /* * Copyright (c) 2010 Tobias Schneider * This script is freely distributable under the terms of the MIT license. */ (function(){ var UPC_SET = { "3211": '0', "2221": '1', "2122": '2', "1411": '3', "1132
「crocro.jscam」ライブラリの使い方 ――JavaScriptでWebカメラの画像やマーカー情報を取得するライブラリ
はじめに いつもは「創活ノート」でマンガを描いている柳井です。その裏ではゴリゴリとコードを書いています。 今回公開したライブラリ「crocro.jscam」は、Webカメラの情報を取得したり、マーカー情報を取得したりするためのライブラリです。 簡単な設定で「2値化」「ラベリング」「マーカーの取得」を行えます。また、コールバック設定で「Webカメラの画素データ」や「ラベル情報」「マーカー情報」など、多彩な情報を取得できます。 最新のライブラリやサンプルコード、リファレンスは、下記のサイトで公開されています。ソースコード付きのサンプルを見れば、どういったことが行えるのか、イメージがつかめると思います。 「crocro.jscam」JavaScriptでWebカメラの画像を取得するライブラリ というわけで、どういったことができるのかイメージをつかんでもらうために、キャプチャした画像を掲載します。
Canvasをより手軽に使いやすくするフレームワーク·KineticJS MOONGIFT
KineticJSはCanvasタグを使ったベクターグラフィックをより簡単に使えるようにするJavaScriptライブラリです。 HTML5の登場によって、Web上でも高度な表現が可能になっています。とはいえそのためにすごい量のコーディングをしなければならないイメージがあります。しかしKineticJSを使えば分かりやすいコードで、ゲームやドローを伴ったグラフィックスが描けそうです。 サンプル。ボタンを押すとオブジェクトが動く。 こちらは星をドラッグアンドドロップできる。 世界地図のベクター画像。 ビルのマップ。マウスに反応して格好いい。 動物の絵と影をマッチさせるゲーム。 ここからは実際に利用されている例。ロボットアバターを作成する。 こんな感じに自由に選べる。 かつてはFlashでやっていたようなグラフィックがJavaScriptで実現する。 ひげを載せる遊び。これもKineticJS
第32回 HTML5によるリッチコンテンツ作成のためのJavaScriptライブラリ「CreateJS」 | gihyo.jp
CreateJSで提供される5つのツール 今回は、4月に公開されたばかりの「CreateJS」を紹介します。CreateJSはHTML5を利用したリッチコンテンツ作成のためのJavaScriptライブラリ/ツール集です。著名なFlashエンジニアであるGrant Skinner氏が開発しており、ActionScriptに似た使用感を実現している点が大きな特徴と言えます。 CreateJSでは、次の5つのツールが提供されています。 EaselJS TweenJS SoundJS PreloadJS Zoe それぞれ、以下のような機能を備えています。 EaselJS EaselJSはHTML5のキャンバス上にコンテンツを描画するためのJavaScriptライブラリです。提供されるAPIがActionScript風になっており、Flash開発者ができるだけ違和感なく利用できるように工夫されてる点
CanvasとFile APIとWeb Workersを組み合わせて画像にフィルタをかけてみた | b.n-at
A「彼女が欲しいです。」B「それ、html5でできるよ。」 という程度にはhtml5周辺おもしろいです。 今回はCanvasとFile APIとWeb Workersを組み合わせて画像にフィルタをかけてみました。デモは下の方にあります。 追記: 一部フィルタ処理にミスがあったのでコード修正しました… (´・ω・｀) はい、とりあえずFile APIです。今回はFileReaderを使うのでブラウザが対応しているかどうかはこんな感じで確認できました。 if(window.FileReader) { // 対応してる } else { // 対応してない } 画像を読み込んで表示するときの簡単な使い方はこんな感じです。 window.addEventListener('load', function() { document.getElementById('form').addEventL
JavaScript 3DレンダリングエンジンのThree.jsを試す
こんにちは。 KRAYアルバイトの浅海です。 今回は、最近ちまたで噂のThree.jsで遊んでみようとおもいます。 http://github.com/mrdoob/three.js webgl対応のブラウザで見ている方は、右上に3Dのボックスが表示されていると思います。 Three.jsを使えば、このようなことを簡単にJavascriptで実現できるのです。 半信半疑で使ってみたところ、たしかにThree.jsでは、3D特有の行列計算や数学的思考をせずとも、3Dを表示、操作することができました。 「ちょっとのプログラムで3Dができる。」 この面白さを皆さんに届けたいです。 目次 立方体を表示する 光をあてる テスクチャを貼り付ける マウスで回転させる マウスで移動させる クリック判定する Three.js web上には、HTML5のcanvasを利用した様々なサンプルページやアプリケーシ
橋本商会 » canvasで画像処理
html5のcanvasのピクセル単位の処理を試してみた。ここで動かせる → http://dev.shokai.org/test/canvas/cv/ ソースはここ https://github.com/shokai/js-canvas-test/tree/master/cv 輪郭抽出とかしてみた ■canvasでのピクセル処理方法 canvasはgetContext(‘2d’)してからgetImageDataするとImageDataオブジェクトが手に入る。 あとの処理はこんな感じ（画像をグレースケールにする例、cv/main.jsの39行目あたり） var canvas = $('canvas#img'); var ctx = canvas[0].getContext('2d'); var img = ctx.getImageData(0, 0, canvas[0].width, ca
WebSocketでバイナリデータを送受信してみる - hagino3000's blog
この記事はHTML5 Advent Calendarの8日目です。 いつの間にか手元の環境(Chrome17 dev + Node 0.6.3)においてWebSocketでバイナリデータが扱える様になっていたので何か作ってみようかと。 まず、NodeでWebSocketを使おうとしたらそれ用のライブラリを使う事になるのだが現時点でバイナリデータが扱えるのはWebSocket-Nodeのみだった。 当初はサーバーから画像のRAWデータをガンガンクライアントに送りまくるというのを作ろうとしたのだがnode-pngがNodeの0.6系に対応していなかったので断念。CanvasのgetImageDataで得られるデータをそのままサーバーに投げて、サーバー側で加工した物を受け取るサンプルを作った。 バイナリデータの送信 クライアントのコード(client.js) var socket = null;
SWF on iPhone!「FlashForward」 - KAYAC engineers' blog
※Chromeで本文エリアをスクロールするとエラーになるそうです。ごめんなさい！ こんにちは！１年間自転車通勤を続けた結果、健康診断で「おっ！」と言われて大満足のaragaです! SWFをiPhone上のSafariで動かすプロジェクト「FlashForward」をgithubで公開しました。 プロジェクト名 FlashForward ライセンス MIT FlashForwardとはなにか？ まずは、社内勉強会で発表した資料をご覧ください。 非常に操作性が悪くてすいません。が、実はこの資料はおそらく世界初の試みで作られています。 なんとSWF,SVG,Canvasの3種類のフォーマットで見る事が出来ます。 SWF SVG Canvas ※ Safari推奨 これらはFlashForwardを使ってFlashLite1.1で作ったSWFのスライドを変換しました。 このほかのサンプルはギャラリ
HTML5でPDFを描画するJSライブラリ「pdf.js」
pdf.js: Rendering PDF with HTML5 and JavaScript (Andreas Gal) HTML5 canvasで、PDFを読み込んで描画するJavaScriptライブラリ「pdf.js」が公開されています。 (英語) まだレイアウトが崩れてしまったり、動作が遅いですが、今後の開発が楽しみです。 ライセンスはBSDのようです。
ヒートマップが描画できるHTML5 canvasベースのJSライブラリ「heatmap.js」:phpspot開発日誌
heatmap.js | HTML5 Canvas Heatmap Library ヒートマップが描画できるHTML5 canvasベースのJSライブラリ「heatmap.js」。 ユーザのマウス位置をヒートマップという形で表示してサイトの利用方法を解析する方法がありますが、そのヒートマップを描画できるライブラリが公開されています。 取得されたデータを元にヒートマップを描画できるのは当然ながら、マウスを動かしてリアルタイムにブラウザに描画されるデモも一見の価値があります サイト上の以下のボタンを押しましょう。 リアルタイムでヒートマップが描画されます。Chromeだととってもなめらか アクセス解析的な利用はモチロンのこと、何か他のものにも使ってみると面白い効果が得られたりするのかも。 関連エントリ クリック位置のヒートマップを作成できるオープンソースやサービス色々
わずか8KBで直感的にCanvasが使えるjQueryプラグイン「jCanvas」 | Web活メモ帳
円を書く ↑drawArcメソッドで円を書く事ができます。 オプション引数で座標位置とサイズ、色などを指定します。 $("canvas.test").drawArc({ fillStyle: "black", x: 100, y: 100 }); 短形を書いて回転させる ↑rotateCanvasで回転軸の座業と角度を指定します。 $("canvas.test").rotateCanvas({ angle: 45, x: 100, y: 100 }) .drawRect({ fillStyle: "#000", x: 100, y: 100, width: 100, height: 50 }) .restoreCanvas(); グラデーションを作成する ↑gradientメソッドでグラーデーションオブジェクトを作成し、 描画する際に指定するとグラデーションが適用されます。 var lin
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://www.cmmntr.com/m/22
http://kudox.jp/html-css/html5-canvas-animation
IDEA * IDEA
