PCのカメラを起動する - ushumpei’s blog

WebRTCで遊んでみたいので、手始めにPCの内臓カメラを起動するだけのページを作成します。

navigatorオブジェクトのgetUserMediaメソッドを使用することでデバイスにアクセスできるみたいです。ただ、ブラウザ環境ごとにこのメソッドがあったりなかったりするため、代替となる関数を列挙してそのうちあったものを使用する、というコードを書きます。

navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || window.navigator.mozGetUserMedia || navigator.msGetUserMedia;

メソッド自体はこんな形をしています。

navigator.getUserMedia(constraints,successCallback,errorCallback)

次にこのAPIを使用してメディアに接続します。

    navigator.getUserMedia({video: true, audio: true},
    stream => {
      video.src = window.URL.createObjectURL(stream);
    },
    error => {
      console.error(error);
      return;
    });

あとは適当にhtmlをかいた、ら動くと思ったのですが、エラーも吐かずになぜか動かない。

そういえばwebサーバに置かないとダメ、みたいなことを聞いた気がしたので、nodeでexpressを使ってサーバを立てました。

mkdir webrtc
cd webrtc
npm init -y
npm install express

二つのファイルを作成します。

server.js

var express = require('express');
var app = express();

app.get('/', function (req, res) {
  res.sendFile(__dirname + '/index.html');
});

app.use(function(err, req, res, next) {
  console.error(err.stack);
  res.status(500).send('Something broke!');
});

app.listen(3000);

index.html

<html>
  <head>
    <title>sample</title>
  </head>
  <body>
  <video id='video' autoplay></video>
  <script type="text/javascript">
    let video = document.querySelector('video');
    navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;

    navigator.getUserMedia({video: true, audio: true},
    stream => {
      video.src = window.URL.createObjectURL(stream);
    },
    error => {
      console.error(error);
      return;
    });
  </script>
  </body>
</html>