Django视频流和Safari HTML5 canvas

I'm streaming small videos from django view:

我正在从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:

还有像这样的html代码:

<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:

一切都很好，但是我需要从JS中获取视频截图，以便在画布上的视频框架上绘图。我使用它:

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(...).

它在Chrome中工作得很好，但是我总是在Safari中看到一个接一个的。drawimage(…)。

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

在django之前，我使用了php脚本，就像在这个链接中使用的那样:逐步地通过php文件来传输mp4, safari运行得很好。

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.

我可以在safari中获取视频上下文!为什么?谁能帮帮我吗?

1 个解决方案

#1

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):

不知道为什么会这样，可能有一些http头是错误的，但是我已经为nginx服务器找到了其他的解决方案(对于Apache，您可以使用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):

在nginx配置中(/etc/nginx/sites-available/your-site):

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

#1