CODEWITHSUNDEEP
djangohtml5-canvasvideo-streaminghtml5-video
rozochkin
rozochkin

Reputation: 709

Django video streaming and Safari HTML5 canvas

I'm streaming small videos from django view:

def play(request):
    filename = settings.VIDEO_URL + extra_path
    wrapper = FileWrapper(file(filename, "rb"))
    response = HttpResponse(wrapper)
    response['Content-Type'] = 'video/mp4'
    response['Content-Length'] = os.path.getsize(filename)
return response

And have html code like this:

<video style="display: inline-block; width:500px; height:700px;">
<source type="video/mp4" src="play?v=1111">
<video>

Everything works fine, but i need to get video screenshot from JS for drawing above the video frame in canvas. I'm using it:

var video = document.querySelector('video');
var canvas = document.getElementById('canvas-bg');
var context = canvas.getContext('2d');
var w = canvas.width;
var h = canvas.height;
context.fillRect(0, 0, w, h);
context.drawImage(video, 0, 0, w, h);

It works good in Chrome, but i always getting empty context in Safari after context.drawImage(...).

Before django i used php script, like in this link: Streaming an mp4 through a php file progressively, and safari well worked.

Also if i'm changing:

<source type="video/mp4" src="play?v=1111">

to:

<source type="video/mp4" src="/static/video/myfunnyvideo.mp4">

I can get video context in safari! Why? Can anyone help me please.

Upvotes: 2

Views: 1578

Answers (1)

rozochkin
rozochkin

Reputation: 709

Don't know why it happens, maybe some http headers are wrong, but I've found other solution for nginx server (for Apache you can use XSendFile):

def play(request):
    extra_path = "myfunnyvideo.mp4"
    filename = settings.VIDEO_URL + extra_path
    response = HttpResponse(mimetype='video/mp4')
    response['Accept-Ranges'] = 'bytes'
    response['X-Accel-Redirect'] = filename
return response

and in nginx config (/etc/nginx/sites-available/your-site):

location /videos/ {
    internal;
    alias /var/www/some-folder/protected-folder;
}

Upvotes: 1

Related Questions