目的

getUserMedia()でブラウザから端末の映像と音声を取得する。

環境

OS: macOS Mojave 10.14.4
ブラウザ: Google Chrome 73.0.3683.103
エディター: Visual Studio Code 1.33.0
ローカルサーバー: Live Server（VSCode拡張機能）

ゴール

ソース

javascript

js/main.js

"use strict";

// 映像と音声をストリーミングする
const mediaStreamConstraints = {
  video: true,
  audio: true
};

// ストリームが読み込まれる動画要素
const localVideo = document.querySelector("video");

// 動画で再生されるlocalStream。
let localStream;

// video要素にMediaStreamを追加する処理。
function gotLocalMediaStream(mediaStream) {
  localStream = mediaStream;
  localVideo.srcObject = mediaStream;
}

// エラー処理
function handleLocalMediaStreamError(error) {
  console.log("navigator.getUserMedia error: ", error);
}

// MediaStreamを初期化
navigator.mediaDevices
  .getUserMedia(mediaStreamConstraints)
  .then(gotLocalMediaStream)
  .catch(handleLocalMediaStreamError);

概要

js/main.js

"use strict";

'use strict';を使うと、的確なエラーチェックが行われる。

js/main.js

// 映像と音声をストリーミングする
const mediaStreamConstraints = {
  video: true,
  audio: true
};

constraints引数で取得するメディアを指定できる。

js/main.js

// 動画で再生されるlocalStream。
let localStream;

// video要素にMediaStreamを追加する処理。
function gotLocalMediaStream(mediaStream) {
  localStream = mediaStream;
  localVideo.srcObject = mediaStream;
}

getUserMedia（）が成功すると、カメラからの映像と音声がvideo要素のソースとして設定される。

html

index.html

<!DOCTYPE html>
<html lang="jp">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>WebRTC - getUserMedia()</title>
  <link rel="stylesheet" href="./css/main.css">
</head>
<body>
  <h1>WebRTC - getUserMedia()</h1>
  <video autoplay playsinline></video>
  <script src="js/main.js"></script>
</body>
</html>

概要

index.html

<video autoplay playsinline></video>

autoplayは必ず設定する。

css

css/main.css

video {
  max-width: 100%;
  width: 320px;
}

動画の適切なサイズと最大サイズを設定するためにwidthとmax-widthを追加する。高さは自動計算される。

その他

ブラウザのConsoleでlocalStream.getVideoTracks()を叩くと、videoTracksの情報が取得できる。

引用元

Real time communication with WebRTC