teratail
回答率
85.47%
質問するログイン新規登録
トップに関する質問Canvasでvideo要素をキャプチャするとAndroid版Chrome・Firefoxだけエラーが出る

編集履歴

質問編集履歴

13

​

2021/11/19 12:18

投稿

JRNA03
JRNA03

スコア12

test CHANGED
File without changes
test CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
 
4
4
 
5
- JavaScript のプレイヤーにて再生している HLS 形式の動画を Canvas の機能でキャプチャ（スクリーンショット）し、それを HTMLCanvasElement.toBlob() で Blob 化して XHR でサーバーにアップロードする機能を実装していますが、Android 版の Chrome・Firefox でのみうまくく動きません。
5
+ JavaScript のプレイヤーにて再生している HLS 形式の動画を Canvas の機能でキャプチャ（スクリーンショット）し、それを HTMLCanvasElement.toBlob() で Blob 化して XHR でサーバーにアップロードする機能を実装していますが、Android 版の Chrome・Firefox でのみうまく動きません。
6
6
 
7
7
 
8
8
 

12

​

2021/11/19 12:18

投稿

JRNA03
JRNA03

スコア12

test CHANGED
File without changes
test CHANGED
@@ -2,25 +2,23 @@
2
2
 
3
3
 
4
4
 
5
- プレイヤーにて再生させている動画 (HLSにて再生) を Canvas にてキャプチャ(スクリーンショット)し、それを toBlob() で Blob 化し Ajax でサーバーにアップロードする機能を実装していますが、Android 版 Chrome・Firefox でのみ上手く動きません。
5
+ JavaScript のプレイヤーにて再生している HLS 形式の動画を Canvas の機能でキャプチャ（スクリーンショット）し、それを HTMLCanvasElement.toBlob() で Blob 化して XHR でサーバーにアップロードする機能を実装していますが、Android 版の Chrome・Firefox でのみうまくく動きません。
6
6
 
7
7
 
8
8
 
9
- - **Android 版 Chrome ( Opera 等の Chrome 系ブラウザを含む)・Firefox でのみ発生する**
9
+ - **Android 版の Chrome 系ブラウザと Firefox でのみ発生する**
10
10
 
11
- - Chrome と Firefox ではエラー内容が異なる
11
+ - Chrome と Firefox はエラー内容が異なる
12
12
 
13
- - **PC 版の Safari・Chrome・Firefox では普通にキャプチャが出来る**(エラーが発生しない)
13
+ - **PC 版の Safari・Chrome・Firefox ではエラーも発生せず、正常にキャプチャができる**
14
14
 
15
- - iOS 版 Safari (Chrome・Firefox を含む)では Canvas が空になる(画像化しても真っ白)現象が起きていたが、こちらは同じ関数内でキャプチャさせる事で解決した
15
+ - iOS 版の Safari では Canvas が空になり画像化しても真っ白になる現象が起きていたが、こちらは同じ関数内でキャプチャする事で解決した
16
16
 
17
- - **HLS ではなく通常の動画をキャプチャさせると Android 版 Chrome では上手く行くが、Android 版 Firefox は HLS の時と同じエラーが出る**
17
+ - HLS 形式ではなく通常の MP4 の動画をキャプチャすると Android 版の Chrome では正常にキャプチャができるようになるが、Android 版の Firefox は HLS の時と同様のエラーが表示されている
18
-
19
- - HLS の再生には hls.js を使用 (DPlayerというプレイヤーを利用しています)
20
18
 
21
19
 
22
20
 
23
- JavaScript は初心者で Canvas も殆ど触ったことがなく、どのように解決すればいいか悩んでいます。
21
+ JavaScript は初心者で Canvas もほとんど触ったことがなく、どのように解決すればいいか悩んでいます。
24
22
 
25
23
  宜しくお願いします。
26
24
 
@@ -28,8 +26,8 @@
28
26
 
29
27
  ### 確認ブラウザ
30
28
 
31
- - iOS: Safari・Chrome・Firefox
29
+ - iOS: Safari (Chrome・Firefox)
32
30
 
33
- - Android: Chrome・Firefox・Opera
31
+ - Android: Chrome・Firefox
34
32
 
35
33
  - PC (Windows・Mac): Safari・Chrome・Firefox

11

＿

2021/11/19 12:17

投稿

JRNA03
JRNA03

スコア12

test CHANGED
File without changes
test CHANGED
@@ -26,84 +26,6 @@
26
26
 
27
27
 
28
28
 
29
- ### 発生している問題・エラーメッセージ
30
-
31
-
32
-
33
- ```Chrome
34
-
35
- Uncaught DOMException: Failed to execute 'toBlob' on 'HTMLCanvasElement': Tainted canvases may not be exported.
36
-
37
- at HTMLImageElement.<anonymous> (http://192.168.1.xx:xxxx/files/script.js:166:14)
38
-
39
- at HTMLImageElement.dispatch (https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js:2:41772)
40
-
41
- at HTMLImageElement.y.handle (https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js:2:39791)
42
-
43
- ```
44
-
45
-
46
-
47
- ```Firefox
48
-
49
- NS_ERROR_NOT_AVAILABLE: script.js:165
50
-
51
- <匿名> http://192.168.1.xx:xxxx/files/script.js:165
52
-
53
- jQuery
54
-
55
- -------------------
56
-
57
- dispatch
58
-
59
- handle
60
-
61
- -------------------
62
-
63
- ```
64
-
65
-
66
-
67
- ### 該当のソースコード
68
-
69
- ```HTML
70
-
71
- <video webkit-playsinline="" playsinline="" crossorigin="anonymous" preload="metadata" src="stream/stream.m3u8"></video>
72
-
73
- ```
74
-
75
- ```JavaScript
76
-
77
- $('#tweet-picture').click(function(event){
78
-
79
- $("#tweet-status").html('キャプチャ中…');
80
-
81
- // 動画のキャンバス
82
-
83
- var canvas = document.createElement('canvas');
84
-
85
- var video = document.getElementsByClassName('dplayer-video-current')[0];
86
-
87
- canvas.width = video.videoWidth;
88
-
89
- canvas.height = video.videoHeight;
90
-
91
- canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
92
-
93
- canvas.toBlob(function(blob){
94
-
95
- file = blob;
96
-
97
- $("#tweet-status").html('キャプチャした画像を選択しました。');
98
-
99
- });
100
-
101
- });
102
-
103
- ```
104
-
105
-
106
-
107
29
  ### 確認ブラウザ
108
30
 
109
31
  - iOS: Safari・Chrome・Firefox

10

_

2021/03/06 22:39

投稿

JRNA03
JRNA03

スコア12

test CHANGED
File without changes
test CHANGED
@@ -2,27 +2,25 @@
2
2
 
3
3
 
4
4
 
5
- プレイヤーにて再生させている動画(HLSにて再生)をCanvasにてキャプチャ(スクリーンショット)し、それをtoBlobにてBlob化し、
5
+ プレイヤーにて再生させている動画 (HLSにて再生) を Canvas にてキャプチャ(スクリーンショット)し、それを toBlob() で Blob 化し Ajax でサーバーにアップロードする機能を実装していますが、Android 版 Chrome・Firefox でのみ上手く動きません。
6
-
7
- Ajaxでサーバーにアップロードする機能を実装していますが、Android版Chrome・Firefoxでのみ上手く動きません。
8
6
 
9
7
 
10
8
 
11
- - **Android版Chrome(Opera等のChrome系ブラウザを含む)・Firefoxでのみ発生する**
9
+ - **Android 版 Chrome ( Opera 等の Chrome 系ブラウザを含む)・Firefox でのみ発生する**
12
10
 
13
- - ChromeとFirefoxではエラー内容が異なる
11
+ - Chrome と Firefox ではエラー内容が異なる
14
12
 
15
- - **PC版のSafari・Chrome・Firefoxでは普通にキャプチャが出来る**(エラーが発生しない)
13
+ - **PC 版の Safari・Chrome・Firefox では普通にキャプチャが出来る**(エラーが発生しない)
16
14
 
17
- - iOS版Safari(Chrome・Firefoxを含む)ではCanvasが空になる(画像化しても真っ白)現象が起きていたが、こちらは同じ関数内でキャプチャさせる事で解決した
15
+ - iOS 版 Safari (Chrome・Firefox を含む)では Canvas が空になる(画像化しても真っ白)現象が起きていたが、こちらは同じ関数内でキャプチャさせる事で解決した
18
16
 
19
- - **HLSではなく通常の動画をキャプチャさせるとAndroid版Chromeでは上手く行くが、Android版FirefoxはHLSの時と同じエラーが出る**
17
+ - **HLS ではなく通常の動画をキャプチャさせると Android 版 Chrome では上手く行くが、Android 版 Firefox は HLS の時と同じエラーが出る**
20
18
 
21
- - HLSの再生にはhls.jsを使用(DPlayerというJS製動画プレイヤーを利用しています)
19
+ - HLS の再生には hls.js を使用 (DPlayerというプレイヤーを利用しています)
22
20
 
23
21
 
24
22
 
25
- JavaScriptは初心者でCanvasも殆ど触ったことがなく、どのように解決すればいいか悩んでいます。
23
+ JavaScript は初心者で Canvas も殆ど触ったことがなく、どのように解決すればいいか悩んでいます。
26
24
 
27
25
  宜しくお願いします。
28
26
 
@@ -106,12 +104,10 @@
106
104
 
107
105
 
108
106
 
109
- ### 補足
107
+ ### 確認ブラウザ
110
108
 
111
- 確認ブラウザ…
109
+ - iOS: Safari・Chrome・Firefox
112
110
 
113
- - iOS… Safari・Chrome・Firefox
111
+ - Android: Chrome・Firefox・Opera
114
112
 
115
- - Android… Chrome・Firefox・Opera
116
-
117
- - PC(Windows・Mac)… Safari・Chrome・Firefox
113
+ - PC (Windows・Mac): Safari・Chrome・Firefox

9

調べて解決した点を踏まえ大幅に修正しました

2020/09/12 06:27

投稿

JRNA03
JRNA03

スコア12

test CHANGED
@@ -1 +1 @@
1
- HLSのvideo要素をCanvasでスクリーンショットするとスマホブラウザでエラーが出る
1
+ Canvasでvideo要素をキャプチャするとAndroid版Chrome・Firefoxだけエラーが出る
test CHANGED
@@ -2,21 +2,23 @@
2
2
 
3
3
 
4
4
 
5
- プレイヤーにて再生させている動画(HLSにて再生)をCanvasにてスクリーンショット(キャプチャ)し、それをtoBlobにてBlob化し、
5
+ プレイヤーにて再生させている動画(HLSにて再生)をCanvasにてキャプチャ(スクリーンショット)し、それをtoBlobにてBlob化し、
6
6
 
7
- Ajaxでサーバーにアップロードする機能を実装していますが、スマホでのみ何故か上手く動きません。
7
+ Ajaxでサーバーにアップロードする機能を実装していますが、Android版Chrome・Firefoxでのみ上手く動きません。
8
8
 
9
9
 
10
10
 
11
- 【追記】色々試しているのですが、通常通り動画を読み込んだ際は正常にキャプチャ出来るようで、問題はHLSで再生させている事にありそうな気がします…
11
+ - **Android版Chrome(Opera等のChrome系ブラウザを含む)・Firefoxでのみ発生する**
12
12
 
13
+ - ChromeとFirefoxではエラー内容が異なる
13
14
 
15
+ - **PC版のSafari・Chrome・Firefoxでは普通にキャプチャが出来る**(エラーが発生しない)
14
16
 
15
- PCのChrome・Firefox・Safariでは正常に動作したのですが、何故かスマホのSafari・Chrome・Firefox・Opera等のブラウザでは下のようなエラーが出てしまうようで、正常に動作しません。
17
+ - iOS版Safari(Chrome・Firefoxを含む)ではCanvasが空になる(画像化しても真っ白)現象が起きていたが、こちらは同じ関数内でキャプチャさせる事で解決した
16
18
 
17
- Androidの方はクロスオリジン(CROS)に関連しているエラーらしいのですが、動画は全て同じドメイン上から配信している他、Canvasで他のドメインの画像を読み込んでいる訳でもなく、何故エラーが出るのか不可解です。
19
+ - **HLSではなく通常の動画をキャプチャさせるとAndroid版Chromeでは上手く行くが、Android版FirefoxはHLSの時と同じエラーが出る**
18
20
 
19
- iOSの方はエラーが起きているわけではなく、一応正常に取得したはずなのに真っ白で取得されてしまう、といった所のようです。(PCのSafariでは通常通りキャプチャできます)
21
+ - HLSの再生にはhls.jsを使用(DPlayerというJS製動画プレイヤーを利用しています)
20
22
 
21
23
 
22
24
 
@@ -30,29 +32,11 @@
30
32
 
31
33
 
32
34
 
33
- まず、iOSの場合は、Safari・Chrome・Firefox全てにおいて、「一応実行は出来るが真っ白な画像(サイズは動画の大きさ(動画が720pなら1280×720の画素になる))しか取得できない」という問題が発生します。
35
+ ```Chrome
34
36
 
35
- また、Androidの場合は、Chrome・Firefox・Opera全てでCanvas自体は取得できているようなんですが、
37
+ Uncaught DOMException: Failed to execute 'toBlob' on 'HTMLCanvasElement': Tainted canvases may not be exported.
36
38
 
37
- 以下のようなtoBlobの処理でTainted canvases may not be exported.エラーが出てしまい、実行の途中でエラーになるためBlob化画像が取得できないためアップロードできない、という問題が発生しています。
38
-
39
-
40
-
41
- エラーメッセージ自体は「汚染されたキャンバスはエクスポートできません。」との事ですが、別ドメインのM3U8やTSを読み込んでいる訳でもないので不可解というか…
42
-
43
-
44
-
45
- 下記はAndroidのChromeにて、Chrome DevTool(リモートで開発者ツールが使える)を使うことで取得しましたが、
46
-
47
- 他のスマホブラウザに関してはどのようなエラーが出ているのかはまだ試せていません…
48
-
49
-
50
-
51
- ```
52
-
53
- (index):yyy Uncaught DOMException: Failed to execute 'toBlob' on 'HTMLCanvasElement': Tainted canvases may not be exported.
54
-
55
- at HTMLImageElement.<anonymous> (http://192.168.1.xx:xxxx/:yyy:zz)
39
+ at HTMLImageElement.<anonymous> (http://192.168.1.xx:xxxx/files/script.js:166:14)
56
40
 
57
41
  at HTMLImageElement.dispatch (https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js:2:41772)
58
42
 
@@ -62,23 +46,45 @@
62
46
 
63
47
 
64
48
 
65
- ### 該当のソースコード
49
+ ```Firefox
50
+
51
+ NS_ERROR_NOT_AVAILABLE: script.js:165
52
+
53
+ <匿名> http://192.168.1.xx:xxxx/files/script.js:165
54
+
55
+ jQuery
56
+
57
+ -------------------
58
+
59
+ dispatch
60
+
61
+ handle
62
+
63
+ -------------------
64
+
65
+ ```
66
66
 
67
67
 
68
68
 
69
+ ### 該当のソースコード
70
+
71
+ ```HTML
72
+
73
+ <video webkit-playsinline="" playsinline="" crossorigin="anonymous" preload="metadata" src="stream/stream.m3u8"></video>
74
+
75
+ ```
76
+
69
77
  ```JavaScript
70
78
 
79
+ $('#tweet-picture').click(function(event){
71
80
 
81
+ $("#tweet-status").html('キャプチャ中…');
72
82
 
73
- $('#picture').click(function(event){
83
+ // 動画のキャンバス
74
-
75
- $("#status").html('キャプチャ中…');
76
84
 
77
85
  var canvas = document.createElement('canvas');
78
86
 
79
87
  var video = document.getElementsByClassName('dplayer-video-current')[0];
80
-
81
- canvas.crossOrigin = 'Anonymous';
82
88
 
83
89
  canvas.width = video.videoWidth;
84
90
 
@@ -100,30 +106,12 @@
100
106
 
101
107
 
102
108
 
103
- ### 試したこと・補足
109
+ ### 補足
104
110
 
111
+ 確認ブラウザ…
105
112
 
113
+ - iOS… Safari・Chrome・Firefox
106
114
 
107
- toBlob()自体がダメかと思いtoDataURL()なども試してみたのですが、同じエラーが出てしまいます。
115
+ - Android… Chrome・Firefox・Opera
108
116
 
109
-
110
-
111
- canvas.crossOrigin = 'anonymous'; とするという手法が公開されていましたが、上手くいきませんでした…
112
-
113
-
114
-
115
- HLSやjQueryのJSファイル自体を自ドメイン内にしてみたりもしましたが、状況は変わらず…
116
-
117
-
118
-
119
- エラーが出るブラウザは、上記の通り
120
-
121
- iOS…Safari・Chrome・Firefox(エンジンが同じなので全て動かないと思われる)
122
-
123
- Android…Chrome・Firefox・Opera
124
-
125
- です。
126
-
127
- PCではChrome・Firefox・Safariで動作確認をしています。
117
+ - PC(Windows・Mac)… Safari・Chrome・Firefox
128
-
129
- (EdgeはMStoBlobとかを使えとか論外なので切り捨ててます(そろそろChromiumベースになるし))

8

修正

2019/05/01 12:52

投稿

JRNA03
JRNA03

スコア12

test CHANGED
File without changes
test CHANGED
@@ -112,6 +112,10 @@
112
112
 
113
113
 
114
114
 
115
+ HLSやjQueryのJSファイル自体を自ドメイン内にしてみたりもしましたが、状況は変わらず…
116
+
117
+
118
+
115
119
  エラーが出るブラウザは、上記の通り
116
120
 
117
121
  iOS…Safari・Chrome・Firefox(エンジンが同じなので全て動かないと思われる)

7

修正

2019/04/30 17:35

投稿

JRNA03
JRNA03

スコア12

test CHANGED
File without changes
test CHANGED
@@ -108,7 +108,7 @@
108
108
 
109
109
 
110
110
 
111
- img.crossOrigin = 'anonymous';を使うという手法が主に公開されていましたが、上手くいきませんでした…(そもそも外部ドメインの画像は取得してないし…)
111
+ canvas.crossOrigin = 'anonymous'; とするという手法が公開されていましたが、上手くいきませんでした…
112
112
 
113
113
 
114
114
 
@@ -120,6 +120,6 @@
120
120
 
121
121
  です。
122
122
 
123
- PCではChrome・Firefox・Safariで動作確認をしています
123
+ PCではChrome・Firefox・Safariで動作確認をしています。
124
124
 
125
125
  (EdgeはMStoBlobとかを使えとか論外なので切り捨ててます(そろそろChromiumベースになるし))

6

修正

2019/04/30 17:27

投稿

JRNA03
JRNA03

スコア12

test CHANGED
File without changes
test CHANGED
@@ -35,6 +35,10 @@
35
35
  また、Androidの場合は、Chrome・Firefox・Opera全てでCanvas自体は取得できているようなんですが、
36
36
 
37
37
  以下のようなtoBlobの処理でTainted canvases may not be exported.エラーが出てしまい、実行の途中でエラーになるためBlob化画像が取得できないためアップロードできない、という問題が発生しています。
38
+
39
+
40
+
41
+ エラーメッセージ自体は「汚染されたキャンバスはエクスポートできません。」との事ですが、別ドメインのM3U8やTSを読み込んでいる訳でもないので不可解というか…
38
42
 
39
43
 
40
44
 

5

HLSが原因ではないか説

2019/04/30 17:25

投稿

JRNA03
JRNA03

スコア12

test CHANGED
@@ -1 +1 @@
1
- video要素をCanvasでスクリーンショットするとスマホブラウザでエラーが出る
1
+ HLSのvideo要素をCanvasでスクリーンショットするとスマホブラウザでエラーが出る
test CHANGED
@@ -2,9 +2,13 @@
2
2
 
3
3
 
4
4
 
5
- プレイヤーにて再生させている動画をCanvasにてスクリーンショット(キャプチャ)し、それをtoBlobにてBlob化し、
5
+ プレイヤーにて再生させている動画(HLSにて再生)をCanvasにてスクリーンショット(キャプチャ)し、それをtoBlobにてBlob化し、
6
6
 
7
7
  Ajaxでサーバーにアップロードする機能を実装していますが、スマホでのみ何故か上手く動きません。
8
+
9
+
10
+
11
+ 【追記】色々試しているのですが、通常通り動画を読み込んだ際は正常にキャプチャ出来るようで、問題はHLSで再生させている事にありそうな気がします…
8
12
 
9
13
 
10
14
 

4

コードを修正しました

2019/04/30 17:24

投稿

JRNA03
JRNA03

スコア12

test CHANGED
File without changes
test CHANGED
@@ -60,37 +60,23 @@
60
60
 
61
61
  ```JavaScript
62
62
 
63
- initScreenshotCanvas () {
64
-
65
- if (this.player.options.screenshot) {
66
-
67
- const canvas = document.createElement('canvas');
68
-
69
- canvas.width = this.player.video.videoWidth;
70
-
71
- canvas.height = this.player.video.videoHeight;
72
-
73
- canvas.getContext('2d').drawImage(this.player.video, 0, 0, canvas.width, canvas.height);
74
-
75
-
76
-
77
- return canvas;
78
-
79
- }
80
-
81
- return false;
82
-
83
- }
84
-
85
63
 
86
64
 
87
65
  $('#picture').click(function(event){
88
66
 
89
67
  $("#status").html('キャプチャ中…');
90
68
 
91
- var img = new Image();
69
+ var canvas = document.createElement('canvas');
92
70
 
71
+ var video = document.getElementsByClassName('dplayer-video-current')[0];
72
+
73
+ canvas.crossOrigin = 'Anonymous';
74
+
75
+ canvas.width = video.videoWidth;
76
+
93
- canvas = initScreenshotCanvas();
77
+ canvas.height = video.videoHeight;
78
+
79
+ canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
94
80
 
95
81
  canvas.toBlob(function(blob){
96
82
 

3

訂正

2019/04/30 17:02

投稿

JRNA03
JRNA03

スコア12

test CHANGED
@@ -1 +1 @@
1
- Canvasで動画をキャプチャするとエラーがスマホだけ出る
1
+ video要素をCanvasでスクリーンショットするとスマホブラウザでエラーが出る
test CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
 
4
4
 
5
- プレイヤーにて再生させている動画をCanvasにてキャプチャし、それをtoBlobにてBlob化し、
5
+ プレイヤーにて再生させている動画をCanvasにてスクリーンショット(キャプチャ)し、それをtoBlobにてBlob化し、
6
6
 
7
7
  Ajaxでサーバーにアップロードする機能を実装していますが、スマホでのみ何故か上手く動きません。
8
8
 
@@ -118,14 +118,14 @@
118
118
 
119
119
 
120
120
 
121
- エラーが出るブラウザは、
121
+ エラーが出るブラウザは、上記の通り
122
122
 
123
- iOS…Safari・Chrome(エンジンが同じなので全て動かないと思われる)
123
+ iOS…Safari・Chrome・Firefox(エンジンが同じなので全て動かないと思われる)
124
124
 
125
125
  Android…Chrome・Firefox・Opera
126
126
 
127
127
  です。
128
128
 
129
+ PCではChrome・Firefox・Safariで動作確認をしています
129
130
 
130
-
131
- PCではChrome・Firefoxで動作確認をしています(EdgeはMStoBlobとかを使えとか論外なので切り捨てています(そろそろChromiumベースになるし))
131
+ (EdgeはMStoBlobとかを使えとか論外なので切り捨ててます(そろそろChromiumベースになるし))

2

訂正

2019/04/22 19:38

投稿

JRNA03
JRNA03

スコア12

test CHANGED
File without changes
test CHANGED
@@ -8,13 +8,11 @@
8
8
 
9
9
 
10
10
 
11
- PCのChrome・Firefoxでは正常に動作したのですが、何故かスマホのSafari・Chrome・Firefox・Opera等のブラウザでは下のようなエラーが出てしまうようで、正常に動作しません。
11
+ PCのChrome・Firefox・Safariでは正常に動作したのですが、何故かスマホのSafari・Chrome・Firefox・Opera等のブラウザでは下のようなエラーが出てしまうようで、正常に動作しません。
12
-
13
- しかも、iOSとAndroidでエラーの動作が違うという不可解な状況です。
14
12
 
15
13
  Androidの方はクロスオリジン(CROS)に関連しているエラーらしいのですが、動画は全て同じドメイン上から配信している他、Canvasで他のドメインの画像を読み込んでいる訳でもなく、何故エラーが出るのか不可解です。
16
14
 
17
- iOSの方はエラーの把握が出来ていません…
15
+ iOSの方はエラーが起きているわけではなく、一応正常に取得したはずなのに真っ白で取得されてしまう、といった所のようです。(PCのSafariでは通常通りキャプチャできます)
18
16
 
19
17
 
20
18
 

1

大幅加筆

2019/04/22 19:21

投稿

JRNA03
JRNA03

スコア12

test CHANGED
@@ -1 +1 @@
1
- CanvasのtoBlob()がスマホでのみ Tainted canvases may not be exported. エラーが出る
1
+ Canvasで動画をキャプチャするとエラーがスマホだけ出る
test CHANGED
@@ -4,13 +4,17 @@
4
4
 
5
5
  プレイヤーにて再生させている動画をCanvasにてキャプチャし、それをtoBlobにてBlob化し、
6
6
 
7
- Ajaxでサーバーに送信するプログラムを書いています。
7
+ Ajaxでサーバーにアップロードする機能を実装していますが、スマホでのみ何故か上手く動きません。
8
8
 
9
9
 
10
10
 
11
- PCのChrome・Firefoxでは正常に動作したのですが、何故かスマホのChrome・Firefox・Operaでは下のようなエラーが出てしまいます。
11
+ PCのChrome・Firefoxでは正常に動作したのですが、何故かスマホのSafari・Chrome・Firefox・Opera等のブラウザでは下のようなエラーが出てしまうようで、正常に動作しません。
12
12
 
13
+ しかも、iOSとAndroidでエラーの動作が違うという不可解な状況です。
14
+
13
- クロスオリジン(CROS)に関連しているエラーらしいのですが、動画は全て同じドメイン上から配信している他、Canvasで他のドメインの画像を読み込んでいる訳でもなく、何故エラーが出るのか不可解です。
15
+ Androidの方はクロスオリジン(CROS)に関連しているエラーらしいのですが、動画は全て同じドメイン上から配信している他、Canvasで他のドメインの画像を読み込んでいる訳でもなく、何故エラーが出るのか不可解です。
16
+
17
+ iOSの方はエラーの把握が出来ていません…
14
18
 
15
19
 
16
20
 
@@ -20,23 +24,21 @@
20
24
 
21
25
 
22
26
 
23
- ### 試したこと・補足
27
+ ### 発生している問題・エラーメッセージ
24
28
 
25
29
 
26
30
 
31
+ まず、iOSの場合は、Safari・Chrome・Firefox全てにおいて、「一応実行は出来るが真っ白な画像(サイズは動画の大きさ(動画が720pなら1280×720の画素になる))しか取得できない」という問題が発生します。
32
+
27
- toBlob()自体がダメかと思いtoDataURL()なども試してみたのですが、同じエラーが出てしまいます。
33
+ また、Androidの場合は、Chrome・Firefox・Opera全てでCanvas自体は取得できているようなんですが、
34
+
35
+ 以下のようなtoBlobの処理でTainted canvases may not be exported.エラーが出てしまい、実行の途中でエラーになるためBlob化画像が取得できないためアップロードできない、という問題が発生しています。
28
36
 
29
37
 
30
38
 
31
- img.crossOrigin = 'anonymous';を使うという手法が主に公開されていましたが、上手くいきませんでした…(そもそも外部ドメインの画像は取得してないし…)
39
+ 下記はAndroidのChromeにて、Chrome DevTool(リモートで開発者ツールが使える)を使うことで取得しましたが、
32
40
 
33
-
34
-
35
- エラーメッセージはスマホでChromeを開き、Chrome DevTool(リモートで開発者ツールが使える)を使うことで取得しましたが、ほかのスマホブラウザに関してはどのようなエラーが出ているのかは分かりません(ただし、キャプチャ画像を選択しました の通知がいくら待っても出ない点は共通しているので、恐らく同じエラーで落ちていると思われます)。
36
-
37
-
38
-
39
- ### 発生している問題・エラーメッセージ
41
+ 他のスマホブラウザに関してはどのようなエラーが出ているのかはまだ試せていません…
40
42
 
41
43
 
42
44
 
@@ -103,3 +105,29 @@
103
105
  });
104
106
 
105
107
  ```
108
+
109
+
110
+
111
+ ### 試したこと・補足
112
+
113
+
114
+
115
+ toBlob()自体がダメかと思いtoDataURL()なども試してみたのですが、同じエラーが出てしまいます。
116
+
117
+
118
+
119
+ img.crossOrigin = 'anonymous';を使うという手法が主に公開されていましたが、上手くいきませんでした…(そもそも外部ドメインの画像は取得してないし…)
120
+
121
+
122
+
123
+ エラーが出るブラウザは、
124
+
125
+ iOS…Safari・Chrome(エンジンが同じなので全て動かないと思われる)
126
+
127
+ Android…Chrome・Firefox・Opera
128
+
129
+ です。
130
+
131
+
132
+
133
+ PCではChrome・Firefoxで動作確認をしています(EdgeはMStoBlobとかを使えとか論外なので切り捨てています(そろそろChromiumベースになるし))