Giter VIP home page Giter VIP logo

django_rtsp_ipc's People

Contributors

arjhe avatar

Stargazers

 avatar

Watchers

 avatar  avatar

django_rtsp_ipc's Issues

Stratup

Initial Env Settings

  • pycharm create new project

git

# initialize repo
git init 
# create ignore file
echo > .gitignore
# to buffer zone
git commit -m "add ignore" .gitignore
# create new project on github
# indicate remote stock
git remote add origin https://github.com/ARJhe/django_rtsp_ipc.git
# push to remote
git push -u origin master

env setting

  • install django
    pip3 install django==3.0.2

  • configuration
    ๅœ–็‰‡

Django

  • startproject

django-admin startproject ipc_server
django-admin startapp streaming

  • [ipc_server] > settings.py
INSTALLED_APPS = [
    'streaming.apps.StreamingConfig',
    ...
  • create html file and directory under streaming
    [streaming] > [templates] > [streaming] > index.html
<!DOCTYPE html>
<html>
<head>
    <title>Live Cam</title>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
<video id="video1" autoplay controls="controls"></video>
<script>
        if (Hls.isSupported()) {
          var video1 = document.getElementById('video1');
          var hls1 = new Hls();
          // bind them together
          hls1.attachMedia(video1);
          hls1.on(Hls.Events.MEDIA_ATTACHED, function () {
            console.log("video and hls.js are now bound together !");
            // load variable from views.py
            hls1.loadSource("{{stream_path}}");
            hls1.on(Hls.Events.MANIFEST_PARSED, function (event, data) {
              console.log("manifest loaded, found " + data.levels.length + " quality level");
            });
          });
        }
</script>
</body>
</html>
  • under streaming directory create directory and put stream data in it.
    [streaming] > [static] > [live] > [stream](put data here)

  • set index.html view and set variable for hls to fetch data
    [streaming] > views.py

from django.shortcuts import render

stream_path = "http://127.0.0.1:8000/static/live/stream/mystream.m3u8"

def home(request):
    return render(request, 'streaming/index.html', {'stream_path': stream_path})
  • set streaming home url (create urls.py under streaming)
    [streaming] > urls.py
from django.urls import path
from . import views
urlpatterns = [
    path('', views.home, name='streaming_home'),
]
  • direct initial url to stream_home
    [ipc_server] > urls.py
from django.urls import path, include
urlpatterns = [
    path('admin/', admin.site.urls),
    # add url from streaming directory
    path('', include('streaming.urls'))
]

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.