jsdo.itにWebカメラのキャプチャー機能を追加する #Silverlight

まぁFlashとかでできるらしいが

初代MacBook Airのバッテリーが膨らんで、蓋がしまらなくなっても新しいMacBookを買えそうにない kjunichiです。

WebCamのキャプチャーってFlashとか使うとできるようですが、自分が知ってるのは、 Silverlightでの方法なので、今回はその方法の紹介、と言うか、備忘録

大まかな方針

キャプチャーはSilverlightで行う、キャプチャーした画像をSilverlightからJavaScriptを呼び出し、 SLを保持しているHTML側に持ってくる。HTML5で追加されたpostMessageの仕組みを使い、 jsdo.it側に画像を持ってくる。

Google App EngineにSilverlightのキャプチャーアプリを置く

MainPage.xaml

<UserControl x:Class="SLWebCam.MainPage"     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"     mc:Ignorable="d"     d:DesignHeight="300" d:DesignWidth="400">     <Grid x:Name="LayoutRoot" Background="White" Height="372" Width="400">         <Grid.ColumnDefinitions>             <ColumnDefinition Width="145*" />             <ColumnDefinition Width="255*" />         </Grid.ColumnDefinitions>         <Border BorderBrush="Silver" BorderThickness="1" Height="240" HorizontalAlignment="Left" Margin="0,12,0,0" Name="border1" VerticalAlignment="Top" Width="320" Grid.ColumnSpan="2">             <Rectangle Height="340" VerticalAlignment="Center" Width="320">                 <Rectangle.Fill>                     <VideoBrush x:Name="Display" Stretch="Uniform"/>                 </Rectangle.Fill>             </Rectangle>         </Border>         <Grid Height="74" HorizontalAlignment="Left" Margin="0,564,0,0" Name="grid1" VerticalAlignment="Top" Width="650" Grid.ColumnSpan="2">             <TextBox Height="24" HorizontalAlignment="Left" Margin="165,6,0,0" Name="emailAddr" VerticalAlignment="Top" Width="396" />             <!--<Button Content="Send" Height="23" Name="button2" Width="75" Click="button2_Click" Margin="0,7,6,13" />-->             <TextBox Height="24" HorizontalAlignment="Left" Margin="165,41,0,0" Name="textBox2" VerticalAlignment="Top" Width="396" />         </Grid>         <Button Content="Capture Start" Height="23" HorizontalAlignment="Left" Name="button1" VerticalAlignment="Top" Width="317" Click="button1_Click" Margin="3,259,0,0" Grid.ColumnSpan="2" />     </Grid> </UserControl>

MainPage.xaml.cs

using System; using System.Collections.Generic; using System.Linq; using System.Net; using System.Windows; using System.Windows.Controls; using System.Windows.Documents; using System.Windows.Input; using System.Windows.Media; using System.Windows.Media.Animation; using System.Windows.Shapes; using System.Threading; using System.Windows.Media.Imaging; using FluxJpeg.Core; using System.IO; using FluxJpeg.Core.Encoder; namespace SLWebCam {     public partial class MainPage : UserControl     {         SynchronizationContext syncContext;         private CaptureSource capsource = new CaptureSource();         public ImageBrush capturedImage;         WebClient client = new WebClient();         // 画像データ         byte<span data-unlink> imageData;         private Boolean gStartCap = true;         VideoFormat format;         public MainPage()         {             InitializeComponent();             // WebCamのセットアップ             capsource.VideoCaptureDevice = CaptureDeviceConfiguration.GetDefaultVideoCaptureDevice();             capsource.VideoCaptureDevice.DesiredFormat = new VideoFormat(PixelFormatType.Unknown, 320, 240, 30);             Display.SetSource(capsource);             //キャプチャー完了したら、呼び出すメソッドを登録しておく。             capsource.CaptureImageCompleted +=                new EventHandler<CaptureImageCompletedEventArgs>(Capsource_CaptureImageCompleted);             format = (from VideoFormat f in capsource.VideoCaptureDevice.SupportedFormats                           where f.PixelWidth <= 1024                           orderby f.PixelWidth * f.PixelHeight descending                           select f).FirstOrDefault<VideoFormat>();             capturedImage = new ImageBrush();         }         void Capsource_CaptureImageCompleted(object sender, CaptureImageCompletedEventArgs e)         {             // Set the Image object to the WriteableBitmap passed in through the event arguments             capturedImage.ImageSource = e.Result;             WriteableBitmap bmap = new WriteableBitmap(e.Result);             // JPEG形式で画像を保持する。             imageData = this.GetBufferAsJPEG(bmap);                          //キャプチャーを停止する。             capsource.Stop();             // JavaScriptに撮影データを送信する。             // Base64変換する。             string base64String =         System.Convert.ToBase64String(imageData,                                       0,                                       imageData.Length);             System.Windows.Browser.HtmlPage.Window.Invoke("showDate"        , new object</span> {             base64String, DateTime.Now         });                        button1.Content = "Capture Start";         }         // JPEG変換したバイト配列を返す。         private byte<span data-unlink> GetBufferAsJPEG(WriteableBitmap bitmap)         {             int width = bitmap.PixelWidth;             int height = bitmap.PixelHeight;             int bands = 3;             byte</span>[,] raster = new byte[bands][,];             for (int i = 0; i < bands; i++)             {                 raster[i] = new byte[width, height];             }             for (int row = 0; row < height; row++)             {                 for (int column = 0; column < width; column++)                 {                     int pixel = bitmap.Pixels[width * row + column];                     raster[0][column, row] = (byte)(pixel >> 16);                     raster[1][column, row] = (byte)(pixel >> 8);                     raster[2][column, row] = (byte)pixel;                 }             }             ColorModel model = new ColorModel { colorspace = ColorSpace.RGB };             FluxJpeg.Core.Image img = new FluxJpeg.Core.Image(model, raster);             MemoryStream stream = new MemoryStream();             JpegEncoder encoder = new JpegEncoder(img, 90, stream);             encoder.Encode();             //JPEGにエンコードした結果をMemoryStreamを使って取り出す。             stream.Seek(0, SeekOrigin.Begin);             byte[] binaryData = new Byte[stream.Length];             long bytesRead = stream.Read(binaryData, 0, (int)stream.Length);             //取り出したバイト配列を返す。             return binaryData;         }         // キュプチャーボタン         private void button1_Click(object sender, RoutedEventArgs e)         {             //現在の状態に応じて処理を決める。             if (((string)button1.Content).Equals("Capture Start"))             {                                 //textBox1.Text = "width = " + format.PixelWidth + " , height = " + format.PixelHeight;                 capsource.VideoCaptureDevice.DesiredFormat = format;                 if (CaptureDeviceConfiguration.AllowedDeviceAccess || CaptureDeviceConfiguration.RequestDeviceAccess())                 {                     if (capsource.State != CaptureState.Started)                     {                         capsource.Stop();                         Display.SetSource(capsource);                         capsource.Start();                                              }                     else                     {                         capsource.Stop();                     }                 }                 syncContext = SynchronizationContext.Current;                 button1.Content = "Snap shot";             }             else if (button1.Content.Equals("Snap shot"))             {                 button1.Content = "Wait...";                 // スナップショットを撮る。                 // キャプチャーする。                 capsource.CaptureImageAsync();                             }         }        private void button2_Click(object sender, RoutedEventArgs e)         {             gStartCap = false;             button1.Content = "Capture Start";         }     } }

Silverlightを保持するHTMLのソースの一部

<script type="text/javascript">      function postMessage(msg){      var targetWindow = parent.window;       targetWindow.postMessage(msg,"*"); }     // SLから呼び出されるスクリプト     function showDate(msg, date) {         //jsdo.itの親ウィンドウにpostMessageする。         postMessage(msg);     }     </script>

jsdo.it側

jsdo.itでWebCamを使う - jsdo.it - share JavaScript, HTML5 and CSS

参考サイト

• http://www.ibm.com/developerworks/jp/web/library/wa-crossdomaincomm/
• http://www.devsite.jankh.net/dnsljavascript.html

関連キーワード

• WebRTC
これが実装されれば、SilverlightやFlashも不要で本当にブラウザだけで可能になる模様。

関連Jsdo.it作品

関連記事

• Windows 7 64ビット版でProcessingでJMyron使えた！
• node.jsで顔検出してみた
• ProcessingでLifeCamCinemaを使ってみた
• iOS11でWebRTCがiPhoneのSafariで使えるのか試した

8年前の記事

• 東西線にて

4年前の記事

• 本命登場！

3年前の記事

• MacBook Airのセカンドデスクトップマシン化

1年後の記事

• 非アプリでiPhoneのカメラロールの写真を扱う

5年後の記事

• Rust入門者向けハンズオン #2 に行ってきた