WebRTCでWebカメラからHTMLに動画表示/ビデオキャプチャ

Facebookでシェア Twitterでシェア

iOS11からWebRTCがモバイルSafariに対応しましたのでWebカメラ(ウェブカム)を使いカメラに写っている動画(今回は音声なし)をHTMLに表示/ビデオキャプチャするデモを作ってみました。

* PCをご使用の場合、ブラウザはChrome、Firefox、Safari、Opera、Edgeでご確認ください。

Front Camera

フロント(イン)カメラ

フロント(イン)カメラ(ノーマル表示)

CSS Filter Effects

フロント(イン)カメラ – CSS フィルター(ブラー・色相回転・明る・彩度・階調反転・透明度・コントラスト・グレースケール・セピア)

CSS3のフィルターで簡単にエフェクトを追加できます。(2017年11月12日現時点でPCをご使用の場合、ブラウザはChrome、Firefox、Safari、Operaでご確認ください。)


Rear Camera

リア(バック/アウト)カメラ

リア(バック/アウト)カメラのあるPC、タブレット、スマホ等でご確認ください。

リア(バック/アウト)カメラ(ノーマル表示)

CSS Filter Effects

リア(バック/アウト)カメラ – CSS フィルター(ブラー・色相回転・明る・彩度・階調反転・透明度・コントラスト・グレースケール・セピア)


Code

フロント(イン)カメラ/リア(バック/アウト)カメラ(JavaScript内にコメントアウト)から動画表示用グレースケールの場合のHTML、CSS、JavaScriptのコードを記しました。

HTML

<!doctype html>
<html lang="ja">
<head>
<title>タイトル</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" type="text/css" href="style.css">
<body>
<video id="video" autoplay playsinline></video>
<script type="text/javascript" src="script.js"></script>
</body>
</html>

JavaScript

navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
var URL = window.URL || window.webkitURL;
var RTCPeerConnection = window.RTCPeerConnection || window.webkitRTCPeerConnection || window.mozRTCPeerConnection;
var RTCSessionDescription = window.RTCSessionDescription || window.webkitRTCSessionDescription || window.mozRTCSessionDescription;
var RTCIceCandidate = window.RTCIceCandidate || window.webkitRTCIceCandidate || window.mozRTCIceCandidate;

// フロント(イン)カメラの場合	
const medias = {audio : false, video : { facingMode: "user" }},
      video  = document.getElementById("video");

// リア(バック/アウト)カメラの場合
/* const medias = {audio : false, video : { facingMode: { exact: "environment" } }},
      video  = document.getElementById("video"); */

navigator.getUserMedia(medias, successCallback, errorCallback);	

function successCallback(stream) {
  video.srcObject = stream;
};

function errorCallback(error) {
  alert(error);
};

CSS

#video {
  display: block;
  width: 100%;
  /* フロント(イン)カメラの場合は左右反転させる。リア(バック/アウト)カメラの場合は削除 */
  transform: scale(-1, 1);
  /* グレースケールの場合 */
  -webkit-filter: grayscale(100%); 
  filter: grayscale(100%);
}

参照: