Главная
Блог разработчиков phpBB
 
+ 17 предустановленных модов
+ SEO-оптимизация форума
+ авторизация через соц. сети
+ защита от спама

Трансляция видео и звука с web камеры на сайт

Anna | 31.05.2014 | нет комментариев

В данном материале я попытаюсь пошагово рассказать о том, как организовать трансляцию видео и звука с web камеры на сайт. Данный материал будет пригоден для всех желающих организовать на своём сайте видеочат либо систему видеотрансляций (скажем такого плана).

Для реализации замышленного нам потребуется сервер с установленным Red5 сервером и всякий инструмент, дозволяющий трудиться с flash, т.к. нам понадобится сделать две флешки — одна для транслирующего, иная для смотрящих.

Что такое RED5?

Red5 — это RTMP медиасервер с открытым начальным кодом тот, что поддерживает:
— Потоковое Аудио/Видео (FLV и MP3);
— Запись пользовательских потоков данных (Recording Client Streams) (только для FLV);
— Shared Objects;
— Live Stream Publishing;
— Remoting;

Нам собственно понадобится последнее (Live Stream Publishing).

Об установке red5 сервера дюже отлично написано здесь, а на официальном сайте дозволено скачать сам сервер и дополнительную информацию по работе с ним, а также уйма примеров.

Возможен вы совладали с установкой и видите сокровенное

image

А при попытке открыть http:// вашсайт.ru:5080 вы попадаете на Red5 Test Page. Если так, то дальше у вас всё получится!

Первым делом следует удостовериться, что в состав установленного red5 сервера входят примеры, в частности нас волнует «oflaDemo» (если нет, то http:// вашсайт.ru:5080/installer)

image

Проверить работоспособность дозволено зайдя http:// вашсайт.ru:5080/demos/ofla_demo.html и нажав connect. Значок должен стать зелёным если все работает.

Все подготовительные шаги сделаны. Дальше нам понадобится разработать 2 flash ролика. Один для транслирующего, 2-й для смотрящих. Воспользуемся для этого программой Flash CS6 Professional.

Broadcaster.fla

Сделаем новейший документ и назовём его Broadcaster. Разместим объект videoContainer на рабочую область и зададим ей и видео контейнеру размеры 320х240 (640×480).

Также разместим на рабочую область 2 кнопки — Транслировать и Остановить.

image

Данный flash ролик будет трудиться с web камерой, микрофоном и будет источником видео и звука для red5 сервера.

В самом минимальном варианте довольно 2х кнопок и видео контейнера для организации трансляции, в расширенном варианте дозволено доработать выбор камеры, если их не одна, а также выбор микрофона и включение либо отключение его. И много много чего-либо ещё.

В действиях добавляем следующих код в начале документа:

import flash.media.Camera;
import flash.media.Video;
import flash.events.MouseEvent;
import flash.net.NetConnection;
import flash.net.NetStream;
import flash.display.Sprite;
import flash.events.Event;
import flash.events.NetStatusEvent;

var streamID; //важная переменная в которой будет храниться идентификатор потока

Получаем ID потока из HTML документа (предполагается, что идентификаторы хранятся в некой таблице на стороне сервера и подтягиваются в зависимости от каких-то параметров, но в финальном выводе в документ передаётся идентификатор неповторимый как для транслирующего, так и для смотрящего)

streamID = root.loaderInfo.parameters.userid; 
var nc:NetConnection = new NetConnection();  //объявляем переменные для NetConnection 
var ns:NetStream;

PlayButton.visible=false;
PauseButton.visible=false;

//Запускаем камеру при запуске ролика
cam = Camera.getCamera();

if (cam != null){ 
	cam.setMode(320, 240, 28); //Задаётся размер изображения
	cam.setQuality(0,85); //Задаётся качество видео
        videoContainer.attachCamera(cam); 
	PlayButton.visible=true;  //Если камера установлена, то показываем кнопку для начала трансляции
}else{
	camnotfound.visible=true;  //Если камера не установлена, показываем сообщение, предупреждающее что камеры нет (добавлено в моём готовом решении)
	PlayButton.visible=false;  //Если камера не установлена, не даём вероятности запустить трансляцию
}

PlayButton.addEventListener(MouseEvent.CLICK, PlayClick);		
PauseButton.addEventListener(MouseEvent.CLICK, PauseClick);

Дальше опишем функцию PlayClick

function PlayClick(e){
	PlayButton.visible=false;
        PauseButton.visible=true;
	nc.connect("rtmp://ваш сайт.ru/oflaDemo");	 //необходимо указать адрес сервера и имя приложения
}

 

function OnStatus(event){
	if(event.info.code=="NetConnection.Connect.Success"){
		ns = new NetStream(nc);
		ns.attachCamera(cam);
		ns.attachAudio(mic);
		ns.publish(streamID, "live");
	}
}

Опишем функцию остановки трансляции

function PauseClick(e){
	PlayButton.visible=true;
	PauseButton.visible=false;
	nc.close();
}

Код целиком

import flash.media.Camera;
import flash.media.Video;
import flash.events.MouseEvent;
import flash.net.NetConnection;
import flash.net.NetStream;
import flash.display.Sprite;
import flash.events.Event;
import flash.events.NetStatusEvent;

var streamID;

streamID = root.loaderInfo.parameters.userid;

var nc:NetConnection = new NetConnection();   
var ns:NetStream;

PlayButton.visible=false;
PauseButton.visible=false;

//Запускаем камеру при запуске ролика
cam = Camera.getCamera();

if (cam != null){ 
    cam.setMode(320, 240, 28); 
    cam.setQuality(0,85); 
        videoContainer.attachCamera(cam); 
    PlayButton.visible=true;  
}else{
    camnotfound.visible=true;  
    PlayButton.visible=false;  
}

PlayButton.addEventListener(MouseEvent.CLICK, PlayClick);		
PauseButton.addEventListener(MouseEvent.CLICK, PauseClick);

function PlayClick(e){
    PlayButton.visible=false;
        PauseButton.visible=true;
    nc.connect("rtmp://ваш сайт.ru/oflaDemo");	 //необходимо указать адрес сервера и имя приложения
}

function OnStatus(event){
    if(event.info.code=="NetConnection.Connect.Success"){
        ns = new NetStream(nc);
        ns.attachCamera(cam);
        ns.attachAudio(mic);
        ns.publish(streamID, "live");
    }
}

function PauseClick(e){
    PlayButton.visible=true;
    PauseButton.visible=false;
    nc.close();
}

Дальше сделаем Subscriber.fla

Сделаем новейший документ и назовём его Subscriber. Разместим объект videoContainer на рабочую область и зададим ей и видео контейнеру размеры 320х240 (640×480).

Дальше в действиях разместим код

import flash.media.Camera;
import flash.media.Video;
import flash.events.MouseEvent;
import flash.net.NetConnection;
import flash.net.NetStream;
import flash.display.Sprite;
import flash.events.*;

var clientObj:Object = new Object();

var myClient = {};
myClient.onBWDone = onBWDone;

streamID = root.loaderInfo.parameters.id; // Получаем переменную с идентификатором трансляции

nc = new NetConnection();
nc.connect("rtmp://ваш сайт.ru/oflaDemo/");  //адрес вашего сайта и имя приложения
nc.addEventListener(NetStatusEvent.NET_STATUS, onNetStatus);  
nc.client = myClient;

function onNetStatus (event:NetStatusEvent)
{

      if (event.info.code=="NetConnection.Connect.Success") {
	     var ns:NetStream = new NetStream(nc);
	     videoContainer.attachNetStream(ns);
	     ns.play(streamID,-1);
	     ns.client = clientObj;
      }

}

На этом разработка закончена. Осталось только вставить в документы код плееров.

Для Broadcaster:

<script language="javascript">AC_FL_RunContent = 0;</script>
<script src="inc/AC_RunActiveContent.js" language="javascript"></script>
<script language="javascript">
	if (AC_FL_RunContent == 0) {
		alert("This page requires AC_RunActiveContent.js.");
	} else {
		AC_FL_RunContent(
			'codebase', 'http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0',
			'width', '320',
			'height', '240',
			'src', 'Broadcaster',
			'quality', 'high',
			'pluginspage', 'http://www.macromedia.com/go/getflashplayer',
			'align', 'middle',
			'play', 'true',
			'loop', 'true',
			'scale', 'showall',
			'wmode', 'window',
			'devicefont', 'false',
			'id', 'Broadcaster',
			'bgcolor', '#ffffff',
			'name', 'Broadcaster',
			'menu', 'true',
			'allowFullScreen', 'false',
			'allowScriptAccess','sameDomain',
			'movie', 'Broadcaster',
			'flashvars', 'id=123456', 
			'salign', ''
			);
	}
</script>
<noscript>
	<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="320px" height="240px" id="SimpleBroadcaster" align="middle">
	<param name="allowScriptAccess" value="sameDomain" />
	<param name="allowFullScreen" value="false" />
	<param name="movie" value="Broadcaster.swf" /><param name="quality" value="high" /><param name="bgcolor" value="#ffffff" />	<embed src="inc/Broadcaster.swf" quality="high" bgcolor="#ffffff" width="320px" height="240px" name="SimpleBroadcaster" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
	</object>
</noscript>

Для Subscriber:

<script language="javascript">AC_FL_RunContent = 0;</script>
<script src="inc/AC_RunActiveContent.js" language="javascript"></script>
<script language="javascript">
	if (AC_FL_RunContent == 0) {
		alert("This page requires AC_RunActiveContent.js.");
	} else {
		AC_FL_RunContent(
			'codebase', 'http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0',
			'width', '320',
			'height', '240',
			'src', 'Subscriber',
			'quality', 'high',
			'pluginspage', 'http://www.macromedia.com/go/getflashplayer',
			'align', 'middle',
			'play', 'true',
			'loop', 'true',
			'scale', 'showall',
			'wmode', 'window',
			'devicefont', 'false',
			'id', 'Subscriber',
			'bgcolor', '#000',
			'name', 'Subscriber',
			'menu', 'true',
			'allowFullScreen', 'true',
			'allowScriptAccess','sameDomain',
			'movie', 'Subscriber',
			'flashvars', 'id=123456', 
			'salign', ''
			); 
	}
</script>
<noscript>
	<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="320px" height="240px" id="Subscriber" align="middle">
	<param name="allowScriptAccess" value="sameDomain" />
	<param name="allowFullScreen" value="true" />
	<param name="movie" value="Subscriber.swf" /><param name="quality" value="high" /><param name="bgcolor" value="#000" />	<embed src="Subscriber.swf" quality="high" bgcolor="#000" width="320px" height="240px" style="background:#000" name="Subscriber" align="middle" allowScriptAccess="sameDomain" allowFullScreen="true" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
	</object>
</noscript>

На этом всё. Сейчас открыв страницу Broadcaster и начав трансляцию дозволено будет следить неограниченному числу лиц вашу трансляцию на странице Subscriber.

image

Рабочий пример: Страница для транслирующего и для смотрящего (Нужно зайти на страницу Транслирующего, дать разрешение и нажать Play для начала трансляции, на странице смотрящего вы увидите видео с вашей камеры (т.к. идентификатор не неповторимый в примере, на странице смотрящего вы можете увидеть кого-то иного, кто в данный момент транслирует))

Ссылка на архив с исходниками flash роликов

Верю данный материал был пригоден тем, кто хочет либо хотел сделать видео трансляции на своём сайте, но по каким-то причинам не сумел.

Источник: programmingmaster.ru

Оставить комментарий
Форум phpBB, русская поддержка форума phpBB
Рейтинг@Mail.ru 2008 - 2017 © BB3x.ru - русская поддержка форума phpBB