LoginSignup
1

More than 3 years have passed since last update.

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

Last updated at Posted at 2019-04-11

目的

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

環境

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

ゴール

Kapture 2019-04-11 at 22.11.57 (1).gif

ソース

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の情報が取得できる。 スクリーンショット 2019-04-11 22.37.27.png

引用元

Real time communication with WebRTC

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1