質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

WebRTC

WebRTC(Web Real-Time Communication)とは、プラグイン無しでウェブブラウザ間の音声通話・ビデオチャットなどリアルタイムコミュニケーションができるオープンフレームワークです。W3CがAPIレベルで、IETFがプロトコルレベルでそれぞれ標準化が進められています。

Q&A

0回答

800閲覧

webRTCで撮影した動画の保存について

rikutennis

総合スコア55

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

WebRTC

WebRTC(Web Real-Time Communication)とは、プラグイン無しでウェブブラウザ間の音声通話・ビデオチャットなどリアルタイムコミュニケーションができるオープンフレームワークです。W3CがAPIレベルで、IETFがプロトコルレベルでそれぞれ標準化が進められています。

0グッド

1クリップ

投稿2020/08/25 03:10

以下のサンプルコードで明るさを調整することができましたが、保存した映像に反映されません。
何か方法はありますでしょうか?

HTML

1<!doctype html> 2<html> 3<head> 4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 5 <title>MediaRecorder</title> 6</head> 7<body> 8 <button onclick="startVideo()">Start Camera</button> 9 <button onclick="stopVideo()">Stop Camera</button> 10 &nbsp;&nbsp; 11 <button onclick="startRecording()">Start Recording</button> 12 <button onclick="stopRecording()">Stop Recording</button> 13 <a href="#" id="downloadlink">Download</a> 14 <br /> 15 <video id="local_video" autoplay style="width: 480px; height: 360px; border: 1px solid black;"></video> 16 <p>明るさ調整</p> 17 <input type="range" oninput="changeBrightness(this.valueAsNumber);" value="1" step="0.0001" min="0.5" max="2"> 18 <br/> 19 <video id="playback_video" autoplay style="width: 480px; height: 360px; border: 1px solid black;"></video> 20 <br /> 21</body> 22<script type="text/javascript"> 23 // ==== (1) カメラ映像の取得の準備 ==== 24 var localVideo = document.getElementById('local_video'); 25 var localStream = null; 26 // ==== (1) カメラ映像の取得の準備 ==== 27 28 // ==== (2) 録画の準備 ==== 29 // --- recording --- 30 var recorder = null; 31 var blobUrl = null; 32 var chunks = []; 33 var playbackVideo = document.getElementById('playback_video'); 34 // ==== (2) 録画の準備 ==== 35 36 // ==== (3) ダウンロードの準備 ==== 37 var anchor = document.getElementById('downloadlink'); 38 // ==== (3) ダウンロードの準備 ==== 39 40 // ==== (1) カメラ映像の取得 ==== 41 // -- カメラ映像を取得 -- 42 function startVideo() { 43 // Chrome 53から使える、新しい書き方。 promise を返す 44 navigator.mediaDevices.getUserMedia({ 45 video: true, 46 audio: false 47 }) 48 .then(function (stream) { // success 49 localStream = stream; 50 51 // videoタグで表示 52 localVideo.srcObject = localStream; // Chrome 53から使える (window.URL.createObjectURLを使わなくても良い) 53 }).catch(function (error) { // error 54 console.error('mediaDevice.getUserMedia() error:', error); 55 return; 56 }); 57 } 58 59 // -- カメラ映像を停止 -- 60 function stopVideo() { 61 if (localStream) { 62 // track 毎に停止 63 for (track of localStream.getTracks()) { 64 track.stop(); 65 } 66 localStream = null; 67 } 68 69 // videoタグを停止 70 localVideo.pause(); 71 localVideo.srcObject = null; // Chrome 53から使える (window.URL.revokeObjectURLを使わなくても良い) 72 } 73 // ==== (1) カメラ映像の取得 ==== 74 75 // ==== (2) 録画 ==== 76 // -- 録画開始 -- 77 function startRecording() { 78 // チェック 79 if (! localStream) { 80 console.warn('stream not ready'); 81 return; 82 } 83 if (recorder) { 84 console.warn('already recording'); 85 return; 86 } 87 88 recorder = new MediaRecorder(localStream); 89 /* -- option を使う場合のサンプル -- 90 var options = { 91 audioBitsPerSecond : 64000, 92 videoBitsPerSecond : 512000, 93 mimeType : 'video/webm; codecs=vp9' 94 }; 95 recorder = new MediaRecorder(localStream, options); 96 -- option を使う場合のサンプル ---*/ 97 98 chunks = []; // 格納場所をクリア 99 100 // 録画進行中に、インターバルに合わせて発生するイベント 101 recorder.ondataavailable = function(evt) { 102 console.log("data available: evt.data.type=" + evt.data.type + " size=" + evt.data.size); 103 chunks.push(evt.data); 104 }; 105 106 // 録画停止時のイベント 107 recorder.onstop = function(evt) { 108 console.log('recorder.onstop(), so playback'); 109 recorder = null; 110 playRecorded(); 111 }; 112 113 // 録画スタート 114 recorder.start(1000); // インターバルは1000ms 115 console.log('start recording'); 116 } 117 118 // -- 録画停止 -- 119 function stopRecording() { 120 if (recorder) { 121 recorder.stop(); 122 console.log("stop recording"); 123 } 124 } 125 126 // -- 再生 -- 127 function playRecorded() { 128 if (! blobUrl) { 129 window.URL.revokeObjectURL(blobUrl); 130 blobUrl = null; 131 } 132 133 // Blob 134 var videoBlob = new Blob(chunks, { type: "video/webm" }); 135 136 // 再生できるようにURLを生成 137 blobUrl = window.URL.createObjectURL(videoBlob); 138 139 // ==== (3) ダウンロード ==== 140 // ダウンロードの準備 141 anchor.download = 'recorded.webm'; 142 anchor.href = blobUrl; 143 // ==== (3) ダウンロード ==== 144 145 // 録画した内容を再生 146 if (blobUrl) { 147 playbackVideo.src = blobUrl; 148 149 // 再生終了時の処理 150 playbackVideo.onended = function() { 151 playbackVideo.pause(); 152 playbackVideo.src = ""; 153 }; 154 155 // 再生開始 156 playbackVideo.play(); 157 } 158 } 159 // ==== (2) 録画 ==== 160 var changeBrightness = function (val) { 161 localVideo.style.webkitFilter = "brightness(" + val + ")"; 162 playbackVideo.style.webkitFilter = "brightness(" + val + ")"; 163 }; 164 165 166</script> 167</html> 168 169

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問