WebRTC でウェブカメラの映像をブラウザに表示
してみた。
HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>test WebRTC</title> </head> <body> <h3>camera test</h3> <div id='msg'></div> <div style='border:1px solid blue'> <video id="live" width='400px' height='400px' autoplay controls></video> </div> <script src='main.js'></script> </body> </html>
JavaScript
var video = document.getElementById('live'); navigator.webkitGetUserMedia( 'video', // success function ( stream ) { video.src = window.webkitURL.createObjectURL( stream ); document.getElementById('msg').innerHTML = 'get video stream'; }, function ( error ) { console.log('Unable to get video stream'); } );
実際の動作はWebRTCテスト( Chrome Canary 必要 ) - jsdo.it - Share JavaScript, HTML5 and CSSで確認できます(要 Google Chrome Canary )。