FMS3系列(五)：通過FMS實現時時視頻聊天（Flash|Flex）【轉】

本系列的前幾篇文章中分別介紹了,連接FMS服務器、建立播放程序以及在線視頻錄製以及回放等功能的實現。相信看過前面幾篇文章的朋友已經對FMS有了一定的認識，並熟悉了常用的編程模式。本文將結合前面幾篇文章所出現的技術點，來實現一個時時視頻聊天程序。

      通過FMS實現視頻時時聊天其實很簡單，也就是操作時時流。如果是單向視頻聊天，則兩端一邊一邊爲發佈端一邊爲訂閱端，如果是雙向視頻聊天，則兩邊都分別是發佈端和訂閱端。

      如果從技術實現上來分析，單向視頻聊天就是一邊發佈流另一邊播放流，雙向視頻聊天則是兩邊都需要提供兩個流，一個負責發佈流，一個負責播放流。在說專業點就是一個創建流並且發送到服務器的客戶端叫發佈，一個創建流來接受內容的客戶端叫訂閱，當同一個客戶端同是發佈和訂閱時，它必須創建兩個流，一個是輸出流，一個是接受流。

       說了這麼多下面看看具體是怎麼實現的，要實現視頻聊天上面分析過，就是一邊發佈時時視頻流一邊播放，這同樣離不開連接FMS，代碼如下：

<!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />-->private function onPublishClick(evt:MouseEvent):void
{
      nc = new NetConnection();
      nc.connect("rtmp://localhost/LiveStreams");
      nc.addEventListener(NetStatusEvent.NET_STATUS,onNetStatusHandler);
}

 

       通過點擊按扭連接（NetConnection）FMS服務器，然後向FMS發佈(publish)視頻流，達到視頻發佈的目的。這裏需要注意一點，在發佈方法publish()中後一參數爲“live”，表示時時視頻流。以live的形式發佈的流不會在FMS裏生成.fla文件，不同於“record”錄製視頻流生成.flv的視頻文件。

<!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />-->private function onNetStatusHandler(evt:NetStatusEvent):void
 {
       trace(evt.info.code);
       if(evt.info.code=="NetConnection.Connect.Success")
       {
           ns=new NetStream(nc);
           ns.addEventListener(NetStatusEvent.NET_STATUS,onNetStatusHandler);
           ns.client=new CustomClient();
           ns.attachCamera(cam);
           ns.attachAudio(mic);
           ns.publish(txtInput.text,"live");
       }
}

 

      實現視頻發佈的核心技術點就是獲取視頻、音頻數據，分別通過Camera和Microphone的靜態方法實現。參考代碼：

<!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />-->public function PublishStream():void
{
    btnPublish.label="發佈視頻";
    btnPublish.addEventListener(MouseEvent.CLICK,onPublishClick);
            
    //獲取視頻和聲音,並將視頻顯示到Flash界面
    cam = Camera.getCamera();
    mic = Microphone.getMicrophone();
    video = new Video(320,240);
    video.attachCamera(cam);
    video.x=20;
    video.y=20;
    addChild(video);
}

 

      通過以上步驟就完成了視頻聊天的視頻流發佈端的開發，完整的示例代碼如下：

<!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />-->package
{
    import flash.net.*;
    import flash.events.*;
    import flash.display.*;
    import flash.media.*;
    import fl.controls.*;
    
    public class PublishStream extends Sprite
    {
        private var video:Video;
        private var nc:NetConnection;
        private var ns:NetStream;
        private var cam:Camera;
        private var mic:Microphone;
        
        public function PublishStream():void
        {
            btnPublish.label="發佈視頻";
            btnPublish.addEventListener(MouseEvent.CLICK,onPublishClick);
            
            //獲取視頻和聲音,並將視頻顯示到Flash界面
            cam = Camera.getCamera();
            mic = Microphone.getMicrophone();
            video = new Video(320,240);
            video.attachCamera(cam);
            video.x=20;
            video.y=20;
            addChild(video);
        }
        
        private function onPublishClick(evt:MouseEvent):void
        {
            nc = new NetConnection();
            nc.connect("rtmp://localhost/LiveStreams");
            nc.addEventListener(NetStatusEvent.NET_STATUS,onNetStatusHandler);
        }
        
        private function onNetStatusHandler(evt:NetStatusEvent):void
        {
            trace(evt.info.code);
            if(evt.info.code=="NetConnection.Connect.Success")
            {
                ns=new NetStream(nc);
                ns.addEventListener(NetStatusEvent.NET_STATUS,onNetStatusHandler);
                ns.client=new CustomClient();
                ns.attachCamera(cam);
                ns.attachAudio(mic);
                ns.publish(txtInput.text,"live");
            }
        }
    }
}

 

      視頻接收端相對發佈端更簡單，提供一個NetConnetion連接到發佈端的FMS，通過NetStream播放時時視頻流就完成。代碼很簡單，基本上都是在本系列前幾篇文章中出現過的代碼片段整合而成，詳細見下代碼塊：

<!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />-->package
{
    import flash.net.*;
    import flash.events.*;
    import flash.display.*;
    import flash.media.*;
    
    public class LiveStream extends Sprite
    {
        private var video:Video;
        private var nc:NetConnection;
        private var ns:NetStream;
        
        public function LiveStream():void
        {
            nc = new NetConnection();
            nc.connect("rtmp://localhost/LiveStreams");
            nc.addEventListener(NetStatusEvent.NET_STATUS,onNetStatusHandler);
        }
        
        private function onNetStatusHandler(evt:NetStatusEvent):void
        {
            if(evt.info.code=="NetConnection.Connect.Success")
            {
                ns=new NetStream(nc);
                ns.addEventListener(NetStatusEvent.NET_STATUS,onNetStatusHandler);
                ns.client=new CustomClient();
                video=new Video();
                video.attachNetStream(ns);
                ns.play("1111");//1111爲流的名字,對應於視頻流發佈端的publish("1111","live").
                addChild(video);
            }
        }
    }
}

 

      OK,到這裏視頻聊天的兩端都完成了，如果需要做雙向視頻聊天，只需要在每一邊多提供一個流就可以了，兩端都實現發佈視頻流和接收視頻流數據。

      或許看完文章的朋友回問到CustomClient是那裏來的，CustomClient是爲了處理元數據的，可以通過元數據向實況視頻添加一些格外的屬性，本文暫時不討論，有興趣的朋友可以查看官方文檔瞭解。

本文示例程序下載：點擊下載Flash版示例源代碼    點擊下載Flex版示例源代碼