Yazılım.
CevapSitesi.com Beta!
Çözüm Noktası
Facebook, Twitter, Google+ veya e-posta ile paylaşın.
| Sorular | Makaleler | Üyeler | Etiketler  | İletişim
Soru sormak ya da cevap vermek için;
giriş yapın veya üye olun.

Sosyal medya hesaplarınızla da giriş yapabilirsiniz.

Yazılım Soruları

0

Videodan Canvas etiketine resim kopyalama işleminde (toDataURL) CORS Hatası

Html5 video tagının videoadan resim almak için oluşturduğumu fonksiyonda video crossorring değerini anonymous rağmen php tarafından header Access-Control-Allow-Origin:* yapmama rağmen canvas.toDataURL(); hata vermektedir. Bir türlü çözemedim. Yardımcı olursanız, sevinirim. Kolay gelsin...

<?php
	// Allow from any origin		
	header("Access-Control-Allow-Origin: *");
	header("Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS"); 
?>
<!DOCTYPE html>
<html lang="tr"> 
<head>
	<meta charset="utf-8">
	<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
	<meta name="viewport" content="width=device-width, initial-scale=1">	
	<meta name="author" content="Meku">
	<title>Tek Video Gösterimi</title>
</head>
<body>
<div class="previewBox">
	<button id ="posterOlustur">Resim Oluştur</button>
	<div class="preview">

	</div>
</div>	
<!--
	video etiketine crossorigin="anonymous" verdiğim zaman video oynamıyor.
	Vermediğim zaman javascript kodundanki
	img.src = canvas.toDataURL();
	satır çalışmıyor.
	"Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported"
	hatası veriyor. 
	
	Access-Control-Allow-Origin:* olması gereliyor fakat
	Yukarıdaki php header fonksiyonun etkisi olmuyor. 
	htacces ile denedim Access-Control-Allow-Origin değişmedi.
	
	Kod denemesini localhost ile yapıyorum etkisi varmıdır bilmiyorum.
	
-->
<video    width="400" controls>
  <source  src="https://www.html5rocks.com/en/tutorials/video/basics/devstories.webm" type="video/webm">	  
  Your browser does not support HTML5 video.
</video>

		
	
<script type="text/javascript" src="assets/js/jquery.min.js"></script>
<script>	
$('#posterOlustur').click(function(){
	var
	img= new Image, 
	canvas = document.createElement("canvas"),
	ctx = canvas.getContext("2d"),
	video = $('video').get(0);

	img.crossorigin ="anonymous";
	
	canvas.width = 320;
	canvas.height = 180;
	ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
	
	img.src = canvas.toDataURL();
	img.onload=function(){		
		$('.preview').html(img);
	}
				
	
});		

</script>
</body>
</html>

1 Cevap

0
Şurada bununla ilgili bir şeylerden bahsetmişler.

  • Chrome tarayıcısı 80'den farklı bir port için https protokolü kullanılmadığında bu hatayı verdiriyor.
  • Video yüklenmeden crossorigin anonnymous yapılmazsa hata ortaya çıkar.
  • Vidreonun src özelliğini atamak için JavaScript kullanıyorsanız crossOrigin yerine crossorigin yazınca da bu hata çıkıyor.

Protokol, port veya alt alan adlarını kontrol etmek lazım. Biraz kod eklerseniz belki daha fazla yardımcı olabiliriz.

Kod eklendikten sonra cevap:

Bu benim yaptığım bir iş değil ancak bence başka siteden bir video içinden resim almaya çalıştığından CORS engeliyle karşılaşman doğal.

Ayrıca kendi PHP sayfandan bildirdiğin Access-Control-Allow-Origin, başka web sayfalarının senin sayfanı veya kaynaklarını kullanmasına izin vermek veya vermemekle ilgilidir. Senin başka sitenin kaynaklarına erişmene izin vermez.

Eğer video kendi sitende ise protokol / port / subdomain eşleşmelerini yine de gözden geçirmekte fayda var.



Cevaplayan: 03.03.18 09:55
cevapsitesi
101,166p 10ü
Haklısınız ama Crome CORS eklentisi bu olayı çözüyor, bundan dolayı video kaynağı başka bir yerde de olsa çözümü var diye düşündüm.  Teşekkür ederim cevabınız için. Kolay gelsin. →  mkucukk 03.03.18 13:30
Chrome CORS eklentisine baktım. moesif.net'in API'sinin dökümantasyonunda kendi sitesine bir çok istek yapıldığı görülüyor. Bu işi kaynağı kendi sitesine sunucu tarafında yükleyerek veya transfere aracılık ederek yaptığını düşünüyorum.

Eğer tarayıcı ile resim alınması gerekmiyor ve bir sunucunuz varsa veya kendiniz için bu işi yapmak istiyorsanız FFMPEG kullanmanızı öneririm. Tarayıcıda işlem yapılacaksa hedef sunucuya indirilip kullanılabilir. →  cevapsitesi 04.03.18 02:19