健康意識の高まり

いろんなメモなど

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 )。