Reputation: 53
I am trying to build a web app that creates a video programmatically on button click in browser and displays it in the same browser for the user once it's created.
So far I have hooked up a script that makes the video when button is fired and that works. I also have a model where the same script uploads and stores the created videos and that works too.
Now I'm stuck trying to display the relevant video to the user that created it ie clicked the button. How do I do this? What methods should I use? I am not sure how to proceed.
In the example below I am able to display video with id=16. How can I adapt this so that the browser displays the relevant video rather than the video associated with id=16?
.html
{% load static %}
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<video width="320" height="240" controls>
<source src= "{{ MEDIA_URL }}{{ object.videofile }}" type='video/mp4'>
</video>
<p></p>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<button id="myClickButton" type="button">Click</button>
<div id="myOutput"></div>
<script>
$("#myClickButton").click(function() {
$.get("/output/", function(data) {
$("#myOutput").html(data);
}, "html");
});
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
</body>
</html>
models.py
from django.db import models
class VideoUpload(models.Model):
name= models.CharField(max_length=500)
videofile= models.FileField(upload_to='videos/', null=True)
views.py
def video_upload_detail_page(request):
obj = VideoUpload.objects.get(id=16)
template_name = 'video_upload_detail.html'
context = {"object": obj}
return render(request, template_name, context)
Upvotes: 0
Views: 104
Reputation: 844
first in your video model you need a foreign key, or m2m field I think to the user model. so to save the relation between user and his/her videos. then in template when the user pressed the button to save video, you already have access to user by using request.user and if user is authenticated or even for user(session) ip save that ip or user id, to video model appropriate field. using AJAX to send ip or id to backend maybe required. *note: if you want anonymous users be able to save their videos m2m field have to change to a char field to save the ip as a string
<input id="id_holder" type="hidden" value="{{ request.user.id }}" >
<script>
$("#myClickButton").click(function() {
// catch and send user id to use in get request
// in javascript using mines between string and int will convert string to int ;)
$.get(`/output/${$("#id_holder").val() - 0}`, function(data) {
$("#myOutput").html(data);
}, "html");
});
</script>
#urls.py
url_patterns =[
......
path('output/<int:user_id>' , views.output, name="output"),
......
note that it's possible to use a third model, to chain USER and Video models relation too.
first you need to catch the users IP, maybe using a function like this:
def get_client_ip(request):
x_forwarded_for = request.META.get('HTTP_X_FORWARDED_FOR')
if x_forwarded_for:
ip = x_forwarded_for.split(',')[0]
else:
ip = request.META.get('REMOTE_ADDR')
return ip
then in the Video model you have a models.char-field to store that IP and then anytime that IP is visiting the page, you can access the relevant Video instance like this:
video_instance = get_object_or_404(VideoModel, ip=str(get_client_ip(request))
Upvotes: 1