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

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

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

Google Chromeは携帯、テレビ、デスクトップなどの様々なプラットフォームで利用できるウェブブラウザです。Googleが開発したもので、Blink (レンダリングエンジン) とアプリケーションフレームワークを使用しています。

HTML5

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

2回答

3360閲覧

Chromeのデスクトップキャプチャーの画質

kuttsun

総合スコア55

Chrome

Google Chromeは携帯、テレビ、デスクトップなどの様々なプラットフォームで利用できるウェブブラウザです。Googleが開発したもので、Blink (レンダリングエンジン) とアプリケーションフレームワークを使用しています。

HTML5

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

4クリップ

投稿2015/09/22 14:57

お世話になります。
Chrome(Chromium)の拡張機能を使用して、デスクトップ画面等をキャプチャし、ブラウザ上に表示するアドオンを作成してみたのですが、画面がとても粗くて見れたものではありませんでした。
画質を良くする方法やアドバイス等がありましたら、宜しくお願い致します。
######画面のキャプチャ(Firefoxの画面をChromiumに表示してます)
イメージ説明
######ソースコード
全ソース載せてしまって申し訳ありません...(どこを抜粋していいかわからなかったもので)

lang

1// manifest.json 2{ 3 "name": "Screen Share app", 4 "description": "sample app", 5 "version": "0.1", 6 "manifest_version": 2, 7 "icons": { 8 "16": "icon.png", 9 "128": "icon.png" 10 }, 11 "background": { 12 "scripts": ["background.js"] 13 }, 14 "permissions": [ 15 "desktopCapture" 16 ], 17 "browser_action": { 18 } 19}

lang

1// background.js 2chrome.browserAction.onClicked.addListener(function(){ 3 chrome.tabs.create({ 4 url: "index.html"}); 5});

lang

1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4<meta charset="utf-8"> 5<link href="style.css" rel="stylesheet"> 6<style> 7video{ 8 width: 100%; 9 height: 100%; 10 border: 1px solid gray; 11} 12</style> 13</head> 14<body> 15<button id="start">Start</button><br> 16<video id="video" autoplay></video> 17<script type="text/javascript" src="app.js"></script> 18</body> 19</html>

lang

1// app.js 2document.getElementById("start").addEventListener("click", function(e){ 3 chrome.desktopCapture.chooseDesktopMedia( 4 ["screen", "window"], 5 function(streamId) { 6 navigator.webkitGetUserMedia( 7 { 8 audio: false, 9 video: { mandatory: { 10 chromeMediaSource: "desktop", 11 chromeMediaSourceId: streamId 12 } 13 } 14 }, 15 function(stream){ 16 document.getElementById("video").src = URL.createObjectURL(stream); 17 }, 18 function(){ 19 alert("error"); 20 } 21 ); 22 } 23 ); 24});

######補足情報(言語/FW/ツール等のバージョンなど)
LinuxMint 17.1
Chromium 43.0.2357.81
######最終的にやりたいこと
WebRTCを使用してP2Pでスクリーンシェアしたいと考えています。

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

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

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

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

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

guest

回答2

0

問題はまだよく分からないのですが、自分が以前実験した際はCanvasでの描画な為か画質はそこそよかったですよ。VideoではなくCanvasで一度やってみてはどうでしょうか??

投稿2015/09/23 15:37

fukumi822

総合スコア228

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

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

kuttsun

2015/09/25 15:38 編集

回答ありがとうございます。 とりあえずcanvasで実装してみましたが、現時点ではvideoの場合とあまり変わっていません。 GetUserMedia→video→canvasという手順で描画しているのが原因かもしれません。 もしかしたらvideoを介さずにできる方法があるのかもしれませんので、いろいろ調べてみたいと思います。 ありがとうございました。
fukumi822

2015/09/25 15:51

ソースの「stream」って、多分URLdata?、ではないですか?もし、そうならcanvasに画像として描画できるはずなのでvideo通さなくても済みます
guest

0

ベストアンサー

Chrome拡張のポップアップ上に主ウィンドウに表示されている内容を表示されているようですが、大きさの比率等変わったりしないでしょうか?videoタグの仕様を詳しくはしらないのですが、サポートされている解像度(画面の大きさ)が決まっているようです。

参考: https://webrtchacks.com/video-constraints-2/

サンプルに画面共有しているものがあるので、そちらも試されてはいかがでしょうか?

サンプル:ScreenStream

投稿2015/09/22 16:50

退会済みユーザー

退会済みユーザー

総合スコア0

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

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

kuttsun

2015/09/23 13:10

回答ありがとうございます。 いろいろと調べては試していますが、仰るとおり単に解像度の問題かもしれません。 サンプルが何故か動作しないのですが、いただいた情報を元にいろいろと調べてみたいと思います。 ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問