| Autor | Zpráva | ||
|---|---|---|---|
| Ikki Profil |
#1 · Zasláno: 27. 6. 2018, 01:32:03
Zdravím,
již nějakou dobu na netu hledám něco, co mi bude vyhovovat, ale stále na to nemůžu narazit. Potřebuji udělat něco jako je na FB tzv. "živé vysílání", s tím, že si jej bude moci vytvořit každý uživatel a viditelné bude opět na nějakém odkaze uživatele. Dopracoval jsem se k tomu, že mám Webcam Video/Capture, který funguje bezvadně, nicméně tady nastává problém, že si nejsem úplně jistý, jak jej rozdělit na více uživatelů, nebo jak to vlastně rozdělit na odkazy. Danou funkci v tuto chvíli může použít kdokoli, kdo navštíví stránku, ale jak nastavit ten odkaz pro určité vysílání? Nebo je to vůbec možné? INDEX.HTML <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="author" content="Script Tutorials" />
<title>Webcam Video Capture in HTML5 and CSS3 filters | Script Tutorials</title>
<!-- Link styles -->
<link rel="stylesheet" href="style.css" />
<!-- Link scripts -->
<script src="script.js"></script>
</head>
<body>
<header>
<h2>Webcam Video Capture in HTML5 and CSS3 filters (<a href="http://www.script-tutorials.com/webcam-video-capture-in-html5-and-css3-filters/">Back to original tutorial</a>)</h2>
</header>
<div class="warning"><h2>Native web camera streaming (getUserMedia) is not supported in this browser.</h2></div>
<div class="container">
<h3>Current filter is: None</h3>
<button>Click here to change video filter</button>
<div style="clear:both"></div>
<div class="col">
<h2>HTML5 <video> object</h2>
<video></video>
</div>
<div class="col">
<h2>HTML5 <canvas> object</h2>
<canvas width="600" height="450"></canvas>
</div>
</div>
</body>
</html>/**
* Licensed under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
*
* Copyright 2012, Script Tutorials
* http://www.script-tutorials.com/
*/
// Main initialization
document.addEventListener('DOMContentLoaded', function() {
// Global variables
var video = document.querySelector('video');
var audio, audioType;
var canvas = document.querySelector('canvas');
var context = canvas.getContext('2d');
// Custom video filters
var iFilter = 0;
var filters = [
'grayscale',
'sepia',
'blur',
'brightness',
'contrast',
'hue-rotate',
'hue-rotate2',
'hue-rotate3',
'saturate',
'invert',
'none'
];
// Get the video stream from the camera with getUserMedia
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia || navigator.msGetUserMedia;
window.URL = window.URL || window.webkitURL || window.mozURL || window.msURL;
if (navigator.getUserMedia) {
// Evoke getUserMedia function
navigator.getUserMedia({video: true, audio: true}, onSuccessCallback, onErrorCallback);
function onSuccessCallback(stream) {
// Use the stream from the camera as the source of the video element
video.src = window.URL.createObjectURL(stream) || stream;
// Autoplay
video.play();
// HTML5 Audio
audio = new Audio();
audioType = getAudioType(audio);
if (audioType) {
audio.src = 'polaroid.' + audioType;
audio.play();
}
}
// Display an error
function onErrorCallback(e) {
var expl = 'An error occurred: [Reason: ' + e.code + ']';
console.error(expl);
alert(expl);
return;
}
} else {
document.querySelector('.container').style.visibility = 'hidden';
document.querySelector('.warning').style.visibility = 'visible';
return;
}
// Draw the video stream at the canvas object
function drawVideoAtCanvas(obj, context) {
window.setInterval(function() {
context.drawImage(obj, 0, 0);
}, 60);
}
// The canPlayType() function doesn’t return true or false. In recognition of how complex
// formats are, the function returns a string: 'probably', 'maybe' or an empty string.
function getAudioType(element) {
if (element.canPlayType) {
if (element.canPlayType('audio/mp4; codecs="mp4a.40.5"') !== '') {
return('aac');
} else if (element.canPlayType('audio/ogg; codecs="vorbis"') !== '') {
return("ogg");
}
}
return false;
}
// Add event listener for our video's Play function in order to produce video at the canvas
video.addEventListener('play', function() {
drawVideoAtCanvas(this, context);
}, false);
// Add event listener for our Button (to switch video filters)
document.querySelector('button').addEventListener('click', function() {
video.className = '';
canvas.className = '';
var effect = filters[iFilter++ % filters.length]; // Loop through the filters.
if (effect) {
video.classList.add(effect);
canvas.classList.add(effect);
document.querySelector('.container h3').innerHTML = 'Current filter is: ' + effect;
}
}, false);
}, false);Pokud by měl někdo nějaký nápad, nebo radu, budu velice rád a dotyčného, který mi s tím pomůže natolik, aby to fungovalo jak má, patřičně pozvu na pivo, nebo panáka! :) Děkuji všem. |
||
| Keeehi Profil |
#2 · Zasláno: 27. 6. 2018, 02:12:57
Ikki:
Pokud to správně vidím, tak to bere obraz z webkamery a zpětně si ho posílá do video tagu. To ale není streamování. Pro stream by bylo potřeba ty data brát a posílat je na nějaký server ze kterého by zase mohly být distribuovány dál. Řekněme si to ale upřímně, amatér nemá možnost sám vytvořit spolehlivou streamovací platformu. Na tom jsou tisíce hodin práce navíc odborníků a potřeboval by jsi minimálně desítky serverů. Tady nemá cenu vymýšlet vlastní řešení ale je lepší použít nějakou službu. |
||
| Ikki Profil |
#3 · Zasláno: 27. 6. 2018, 12:18:50
Jsem si toho vědom, nicméně potřebuji udělat livestream, je jedno zda přes nějakou službu nebo tak, ale potřebuji aby daný stream byl viditelný pouze u mne na stránce. Je možné to nějak udělat?
|
||
| Keeehi Profil |
#4 · Zasláno: 27. 6. 2018, 13:06:10
Ikki:
„ale potřebuji aby daný stream byl viditelný pouze u mne na stránce“ Co přesně si pod tím představuješ? Respektive chceš zřejmě zabránit nějaké situaci, jaké? Nebo jaký cíl sleduješ tou ochranou? Podle toho ti možná budeme schopni poradit. |
||
| Ikki Profil |
#5 · Zasláno: 27. 6. 2018, 13:33:32
Uvedu nějaký příklad, jelikož nevím jak to přesně nazvat.
Jsem hudebník, mám koncert a chci, aby za nějaký poplatek jej mohli vidět lidé, kteří se nemohou dostavit na koncert reálně. Napadne mne tedy, že jej budu streamovat na nějaké stránce (příkladem může být FB), ale chci, aby ten stream fungoval pouze na téhle stránce a nikdo jej nemůže sledovat jinde, nebo jej nějakým způsobem šířit, protože je to přeci jen placený stream. Potřeboval bych tedy nějakým způsobem zařídit, aby fungovali tyhle streamy pouze na téhle stránce. Zkoušel jsem to udělat pomocí FB, jenže ten stream mohou sledovat i FB uživatelé na dané stránce a to právě nechci. Instagram mi to taktéž nepovolí, a jinou službu, která streamuje (kromě twitch, a tam si ani nejsem jistý, zda by to fungovalo) neznám. |
||
| Keeehi Profil |
Ikki:
„nikdo jej nemůže sledovat jinde“ To obecně nejde moc zařídit. Stream je vlastně jen obyčejný tok dat. Pokud znáš jeho url, může se na něj napojit kdokoli*. Takže teoreticky někdo může zaplatit, pak si z kódu zjistit url streamu a tu pak někde šířit. Něco jako stoprocentní obrana neexistuje. Například pokud o to někdo bude stát, může si zaplatit a tím bude mít přístup k tvému streamu. Na tom počítači spustí program pro záznam obrazovky a udělá vlastní stream to. Což pak může šířit a ty nemáš jedinou možnost jak mu v tom zabránit. Pokud tedy budeme předpokládat jen "hodné" a netechnicky zdatné uživatele (což je ve většině případů pravda) tak bych navrhoval toto řešení. Vytvoříš si vlastní web kde implementuješ přihlašování a nějakou možnost internetových plateb. A pro stream použiješ youtube. Vložit stream na svůj web se dělá úplně stejně jako vložení obyčejného videa. A co se youtube týče tak stream se tam dá nastavit tak, že na tvém účtu vidět není. Musel bys znát jeho přesnou url. Normální a poctivý uživatel nemá jinou možnost se k streamu dostat než přes tvou stránku. Pokud se ale nějaká skupina domluví a bude technicky zdatná, stačí jim jeden platící. Teď záleží na tom, zda je toto řešení pro tebe dostačující. Jak jsem psal ale na začátku, neexistuje stoprocentní zabezpečení. Můžeš to lidem jen ztížit a pak už jen záleží na úrovni, jak moc jim to ztížíš. *Na toto téma nejsem odborník. Je možné, že se stream dá šifrovat tak, aby byl dešifrovatelný pouze na jednom zařízení ale já takový způsob neznám. |
||
| Ikki Profil |
#7 · Zasláno: 28. 6. 2018, 00:24:47
Je také možné, že to bude zdarma, byl to víceméně jen příklad. Co se týče youtube, tak jsem zkoušel vytvořit livestream s označením PRIVATE, po zadání odkazu do webu mi to vyhodilo, že se nedá zobrazit a na jiném prohlížeči jen prázdný obsah. Hledám na netu, ale nemůžu nic extra najít.
Děkuji ti za pomoc. |
||
| Keeehi Profil |
#8 · Zasláno: 28. 6. 2018, 00:50:28
Ikki:
„Je také možné, že to bude zdarma“ Tak o to méně práce :) „zkoušel vytvořit livestream s označením PRIVATE“ Private je jen pro určené přihlášené uživatele. To co ty chceš je unlisted.
|
||
| Ikki Profil |
#9 · Zasláno: 28. 6. 2018, 00:57:32
Jenže unlisted v livestreamu není, a nebo to tam alespoň nemohu najít.
Tuhle možnost mám jen u nahrání videa. |
||
| Keeehi Profil |
Ikki:
„enže unlisted v livestreamu není, a nebo to tam alespoň nemohu najít.“ Tak to já to tam tedy vpravo vidím. 
|
||
| Ikki Profil |
//EDIT: Dobře, youtube tedy mám. Je ještě nějaká možnost jak vložit Facebook livestream na web? Objevil jsem spoustu návodů, jenže to jsou návody takového typu, kdy je potřeba aby livestream skončil a bylo z toho jen video. To ztrácí pointu.
|
||
|
Časová prodleva: 6 let
|
|||
0