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);
};

CONTACT

お問い合わせ

AEDI株式会社

〒710-0801 岡山県倉敷市酒津2549-2

貴社のサービス・商品のブランディング、デザイン、ホームページでお困りのこと、お仕事のご依頼、お見積もり、デザイン、ホームページ制作、その他AEDIのご提供するサービスに関することでご質問等ございましたらお気軽にお問い合わせください。

お問い合わせフォームとお電話より承っております。

アイデアを生み出すAEDIの事務所(岡山県倉敷市酒津)

お電話でのお問い合わせ: 月-土 9:00〜21:00(日祝を除く)

050-5899-6624