代码片段 – 编程技术记录

iOS13 同一App实现多窗口（iPad和Vision平台）

holdsky — Mon, 26 Feb 2024 09:54:22 +0000

在Info.plist中配置多窗口支持

Enable Multiple Windows 置为 YES
新建一个Scene配置（如果只有一个窗口，则不需要此操作）

判断当前环境是否支持多窗口

iOS13及以上支持多窗口；iPad设备和Vision设备支持，但iPhone不支持。

 if (@available(iOS 13.0, *))
{
    if (UIApplication.sharedApplication.supportsMultipleScenes)
    {// Info.plist也配置了多窗口开关

        if  (UIDevice.currentDevice.userInterfaceIdiom == UIUserInterfaceIdiomPad
            || UIDevice.currentDevice.userInterfaceIdiom == UIUserInterfaceIdiomVision)
        {
            //支持多窗口
        }
    }
}

使用API创建新窗口

创建新的SceneDelegate

当App启用Scene后，需要使用Scene管理Window。为了管理新窗口，我们新建一个SceneDelegate


@interface SecondSceneDelegate : UIResponder < UIWindowSceneDelegate ,NSUserActivityDelegate>

@property (nonatomic,strong) UIWindow * window;

@end

@implementation SecondSceneDelegate
// 将要连接到某个场景（Window需要依附在具体场景）
- (void)scene:(UIScene *)scene willConnectToSession:(UISceneSession *)session options:(UISceneConnectionOptions *)connectionOptions
{
    if (self.window == nil)
    {
        SecondSceneViewController *vc = [[SecondSceneViewController alloc] init]; // 自己定义的页面
        UINavigationController *naviVc = [[UINavigationController alloc] initWithRootViewController:vc];//页面导航
        self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
        self.window.windowScene = (UIWindowScene *)scene;
        self.window.rootViewController = naviVc;
        [self.window makeKeyAndVisible];
    }
}
@end

创建新窗口

使用requestSceneSessionActivation

NSUserActivity * activity = [[NSUserActivity alloc] initWithActivityType:@"open_by_first"];
[UIApplication.sharedApplication requestSceneSessionActivation:nil  //此参数为nil时，表示要求系统创建一个SceneSession
                                                  userActivity:activity
                                                       options:optios
                                                  errorHandler:^(NSError * _Nonnull error) {
    NSLog(@"%@",error);
}];

同时兼容iOS13及以上和iOS12及以下

请先去除工程中的StoryBoard的相关配置（否则，以下代码可能不会完全生效）。

在Info.plist中配置多窗口支持（参考上文）

略

修改AppDelegate


@interface AppDelegate : UIResponder 

@property (nullable, nonatomic, strong) UIWindow *window; // 添加属性，注意这是UIApplicationDelegate的协议实现

@end

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    if (@available(iOS 13.0, *))
    { //iOS 13，启用Scene后，窗口在Scene的实现里创建
        return YES;
    }
    else
    {
        FirstSceneViewController *vc = [[FirstSceneViewController alloc] init]; // 自己定义的页面
        UINavigationController *naviVc = [[UINavigationController alloc] initWithRootViewController:vc];//页面导航
        self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
        self.window.rootViewController = naviVc;
        [self.window makeKeyAndVisible];
        return YES;
    }
}

- (UISceneConfiguration *)application:(UIApplication *)application configurationForConnectingSceneSession:(UISceneSession *)connectingSceneSession options:(UISceneConnectionOptions *)options 
{
    NSString *cfgName = @"FirstScene"; //场景名字
    if ([options.userActivities.objectEnumerator.nextObject.activityType isEqualToString:@"open_by_first"]) //使用哪个场景
    {
        cfgName = @"SecondScene";
    }
    return [[UISceneConfiguration alloc] initWithName:cfgName sessionRole:connectingSceneSession.role];
}
@end

创建（修改）SceneDelegate

为求简单，本文采用多组Window+SceneDelegate来管理多个窗口，即每个Window都有自己的SceneDelegate。本文实现了两个窗口的情形。

第一个SceneDelegate代码如下


@interface FirstSceneDelegate : UIResponder 

@property (strong, nonatomic) UIWindow * window;

@end

@implementation FirstSceneDelegate

- (void)scene:(UIScene *)scene willConnectToSession:(UISceneSession *)session options:(UISceneConnectionOptions *)connectionOptions 
{
    session.userInfo = @{@"userData":@"first_session"};
    if (self.window == nil)
    {
        FirstSceneViewController *vc = [[FirstSceneViewController alloc] init]; // 自己定义的页面
        UINavigationController *naviVc = [[UINavigationController alloc] initWithRootViewController:vc];//页面导航
        self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
        self.window.windowScene = (UIWindowScene *)scene;
        self.window.rootViewController = naviVc;
        [self.window makeKeyAndVisible];
    }
}
@end

第二个SceneDelegate代码如下


@interface SecondSceneDelegate : UIResponder < UIWindowSceneDelegate ,NSUserActivityDelegate>

@property (nonatomic,strong) UIWindow * window;

@end

@implementation SecondSceneDelegate

// 将要连接到某个场景（Window需要依附在具体场景）
- (void)scene:(UIScene *)scene willConnectToSession:(UISceneSession *)session options:(UISceneConnectionOptions *)connectionOptions
{
    session.userInfo = @{@"userData":@"second_session"};
    if (self.window == nil)
    {
        SecondSceneViewController *vc = [[SecondSceneViewController alloc] init]; // 自己定义的页面
        UINavigationController *naviVc = [[UINavigationController alloc] initWithRootViewController:vc];//页面导航
        self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
        self.window.windowScene = (UIWindowScene *)scene;
        self.window.rootViewController = naviVc;
        [self.window makeKeyAndVisible];
    }

}

@end

在第一个窗口的页面下，使用按钮打开第二个窗口

按钮事件响应

- (void)onClickButton:(id)sender
{
    if (@available(iOS 13.0, *))
    {
        if (UIApplication.sharedApplication.supportsMultipleScenes)
        {
            if  (UIDevice.currentDevice.userInterfaceIdiom == UIUserInterfaceIdiomPad
                 || UIDevice.currentDevice.userInterfaceIdiom == UIUserInterfaceIdiomVision)
            {

                // 查找，确定是否已经打开过
                UISceneSession *foundSession = nil;
                NSString * foundStr = @"second_session";
                for (UISceneSession * session in UIApplication.sharedApplication.openSessions)
                {
                    if (session.userInfo && [foundStr isEqualToString:session.userInfo[@"userData"]])
                    {
                        foundSession = session;
                        break;
                    }
                }

                UISceneActivationRequestOptions *optios = nil;
                if (foundSession) // 已存在，激活即可
                {
                    [UIApplication.sharedApplication requestSceneSessionActivation:foundSession
                                                                      userActivity:nil
                                                                           options:optios
                                                                      errorHandler:^(NSError * _Nonnull error) {
                        NSLog(@"%@",error);
                    }];
                }
                else // 新建场景
                {
                    NSUserActivity * activity = [[NSUserActivity alloc] initWithActivityType:@"open_by_first"];
                    [UIApplication.sharedApplication requestSceneSessionActivation:nil 
                                                                      userActivity:activity
                                                                           options:optios
                                                                      errorHandler:^(NSError * _Nonnull error) {
                        NSLog(@"%@",error);
                    }];
                }
            }
        }
    }
}

其他注意事项

启用Scene后，UIAlertView将无法使用（运行时崩溃），需要用UIAlertController进行替换
在iPad端，实现多窗口时，需要将Info.list里的Requires full screen置为false，同时要设置为支持所有屏幕方向。否则可能会收到类似错误“the delegate of workspace fbscenemanger declined to create scene”

iOS运行时解析embedded.mobileprovison

holdsky — Tue, 11 Apr 2023 00:58:14 +0000

embedded.mobileprovison是由二进制的加密数据和普通文本字符串组成，我们使用NSPropertyListSerialization类解析普通文本字符串

首先将普通文本字符串提前出来，这里用到了NSScanner

NSString *embeddedPath = [[NSBundle mainBundle] pathForResource:@"embedded" ofType:@"mobileprovision"];
    NSString *embeddedProvisioning = [NSString stringWithContentsOfFile:embeddedPath encoding:NSISOLatin1StringEncoding error:nil];
    NSScanner *scanner = [[NSScanner alloc] initWithString:embeddedProvisioning];
    if (![scanner scanUpToString:@"" intoString:&extractedPlist]) {
        NSLog(@"parse embedded.mobilerovision error, no plist markup");
        return nil;
    }
    extractedPlist = [extractedPlist stringByAppendingString:@""]; //添加xml标签结束标记

然后就可以使用NSPropertyListSerialization解析了

    NSError *error;
    NSDictionary *plist = [NSPropertyListSerialization propertyListWithData:[extractedPlist dataUsingEncoding:NSISOLatin1StringEncoding] options:NSPropertyListImmutable format:nil error:&error];
    if (error || ![plist isKindOfClass:[NSDictionary class]])
    {
        NSLog(@"parse embedded.mobilerovision error, %@",error);
        return nil;
    }
    return plist; //返回结果

参考
https://www.process-one.net/blog/reading-ios-provisioning-profile-in-swift/

iOS App页面置灰实现

holdsky — Tue, 14 Dec 2021 02:19:00 +0000

App页面置灰，本质是将彩色图像转换为灰度图像，本文提供两种方法实现，一种是App整体置灰，一种是单个页面置灰，可结合具体的业务场景使用。

方法一：分别将图片和文字置灰

一般情况下，App页面的颜色深度是24bit，也就是RGB各8bit；如果算上Alpha通道的话就是32bit，RGBA(或者ARGB)各8bit。灰度图像的颜色深度是8bit，这8bit表示的颜色不是彩色，而是256种不同亮度的黑色或白色。
说到灰度图像，在YUV颜色空间上---其中Y代表亮度，调整Y值就可以得到不同的灰度图像。
理论上，颜色空间RGB和YUV是等价的，同一种颜色用RGB或YUV都可以表示。从RGB数值对应到亮度Y，一般采用公式Y = 0.299R+0.587G+0.114B，得到的结果再填充到RGB上就得到了对应的灰度RGB颜色。

Y = 0.299R+0.587G+0.114B
Gray = RGB(Y,Y,Y)

以上是方法一App页面置灰的原理基础。

UIImage转成灰度图

核心是创建一个灰度空间，然后将图像绘制到这个空间上

－(UIImage*)getGrayImage:(UIImage*)sourceImage 
{ 
   int width = sourceImage.size.width; 
   int height = sourceImage.size.height; 

   // 创建灰度空间
   CGColorSpaceRef colorSpace =CGColorSpaceCreateDeviceGray(); 
   // 创建绘制上下文
   CGContextRef context =CGBitmapContextCreate(nil,width,height,8,0,colorSpace,kCGImageAlphaNone); 
   CGColorSpaceRelease(colorSpace); 

   if(context== NULL){ 
       return nil; 
   }

   // 绘制原始图像到新的上下文（灰度）
   CGContextDrawImage(context,CGRectMake(0,0, width, height), sourceImage.CGImage); 
   // 获取灰度图像
   CGImageRef grayImageRef =CGBitmapContextCreateImage(context);
   // CGImage -> UIImage
   UIImage*grayImage=[UIImage imageWithCGImage:grayImageRef];
   //回收资源
   CGContextRelease(context);
   CGImageRelease(grayImageRef);

   return grayImage; 
}

UIColor转成灰度颜色

比较简单了，使用公式就可以了Y = 0.299R+0.587G+0.114B

UIColor *color = xxxx;
CGFloat r,g,b,a;
[color getRed:&r green:&g> blue:&b alpha:&a];
CGFloat y = 0.299*r+0.587*g+0.114*b;
UIColor *gray = [UIColor colorWithRed:y green:y blue:y alpha:a]

方法二：给App整体添加灰色滤镜

这个方法可以是App整体置灰，包括WebView页面。
原理就是把App页面当成一副图像，使用另一副偏灰图像和这个图像进行叠加运算，从而得到新的图像。
iOS 提供了Core Image 滤镜，这些滤镜可以设置在UIView.layer上。
我们要做的就是选取合适的滤镜，并将滤镜放置到App的最顶层


// 最顶层视图，承载滤镜，自身不接收、不拦截任何触摸事件
@interface UIViewOverLay : UIView
@end

@implementation UIViewOverLay
-(UIView*)hitTest:(CGPoint)point withEvent:(UIEvent *)event
{
    return nil;
}
@end

UIWindow *window = App的Window;
UIViewOverLay *overlay = [[UIViewOverLay alloc]initWithFrame:self.window.bounds];
overlay.translatesAutoresizingMaskIntoConstraints = false;
overlay.backgroundColor = [UIColor lightGrayColor];
overlay.layer.compositingFilter = @"saturationBlendMode";
[window addSubview:overlay];

最后通过各种方法，要保证overlay在最顶层.

上面使用的是UIView承载滤镜，其实看代码就知道了也可以直接使用CALayer来承载滤镜（需要注意的是在UIWindow上直接添加CALayer时，在某些特殊的场景可能会造成绘制异常）

方法三: 给App整体添加灰色滤镜（私有API）

灵感来自UIVisualEffectView这个公开的API。既然这个类能够实现App任意页面的毛玻璃效果--一个基于高斯模糊的滤镜，那么必然可以仿照这个类实现其他滤镜效果。于是找到了CAFilter这个私有API，示意代码如下

        //获取RGBA颜色数值
        CGFloat r,g,b,a;
        [[UIColor lightGrayColor] getRed:&r green:&g blue:&b alpha:&a];
        //创建滤镜
        id cls = NSClassFromString(@"CAFilter");
        id filter = [cls filterWithName:@"colorMonochrome"];
        //设置滤镜参数
        [filter setValue:@[@(r),@(g),@(b),@(a)] forKey:@"inputColor"];
        [filter setValue:@(0) forKey:@"inputBias"];
        [filter setValue:@(1) forKey:@"inputAmount"];
        //设置给window
        window.layer.filters = [NSArray arrayWithObject:filter];

参考

WebRTC初学Demo

holdsky — Tue, 19 Oct 2021 01:52:57 +0000

webrtc介绍

简介实现基本的数据通道文件传输修改传输速度限制选择并读取文件数据自动下载文件完整代码音视频通话https访问音视频流完整代码屏幕共享捕捉屏幕完整代码NAT穿透之STUN/TURN信令服务器信令服务实现完整代码

详细请访问

简介

WebRTC（网页实时通信技术），是一系列为了建立端到端文本或者随机数据的规范，标准，API和概念的统称。

任何实现了WebRTC标准的软件之间均可通信，如PC浏览器--手机浏览器、浏览器--App、App--App。通信双方是对等的，但通常还要引入服务端，以便于对等端能够找到对方。

移动端浏览器对WebRTC的支持

Android 4.4以上
iOS 11以上

WebRTC应用不需要非常高性能就能够平稳运行、拥有良好体验。对于WebRTC来说，获取特定硬件的权限也不是必需的。Web应用和原生应用对比：

原生应用会比Web应用更快，拥有更高级别的硬件权限；混合应用的运行速度更慢，不能使用移动设备的全部权限。
原生应用在不同的平台上的代码复用度有待提高；混合应用开发起来会更快，更省钱

结论：如果高性能和极致体验不是软件的必不可少的要求，那么，在绝大多数情况下，用户根本注意不到原生和混合WebRTC应用之间的差别。

实现基本的数据通道

对浏览器而言，WebRTC API处于底层且十分复杂。不过我们可以使用封装好的高级别的API----simple-peer是一个基础的，非常洁净的低层P2P连接封装器.下面的示例是simple-peer的一个标准例子。


<html>
  <body>
      <style>
        #outgoing {
          width: 100%;
          word-wrap: break-word;
          white-space: normal;
        }
      style>
    <form>
      <textarea id="incoming">textarea>
      <button type="submit">submitbutton>
    form>
    <pre id="outgoing">pre>
    <script src="simplepeer.min.js">script>
    <script>
      const p = new SimplePeer({
        initiator: location.hash === '#1',
        trickle: false
      })

      p.on('error', err => console.log('error', err))

      p.on('signal', data => {
        console.log('SIGNAL', JSON.stringify(data))
        document.querySelector('#outgoing').textContent = JSON.stringify(data)
      })

      document.querySelector('form').addEventListener('submit', ev => {
        ev.preventDefault()
        p.signal(JSON.parse(document.querySelector('#incoming').value))
      })

      p.on('connect', () => {
        console.log('CONNECT')
        p.send('whatever' + Math.random())
      })

      p.on('data', data => {
        console.log('data: ' + data)
      })
    script>
  body>
html>

演示步骤:

1、创建index.html文件，文件内容为上面的代码
2、下载simplepeer.min.js，放到和index.html同目录下
3、用浏览器打开file:///本地路径目录/index.html#1（这里使用file协议，是因为没有部署index.html到服务端），可以看到网页中输出了一个offer邀请信令，格式类似下面例子


{"type":"offer","sdp":"v=0\r\no=- 8456412157049919494 2 IN IP4 127.0.0.1\r\ns=-\r\nt=0 0\r\na=group:BUNDLE 0\r\na=extmap-allow-mixed\r\na=msid-semantic: WMS\r\nm=application 53799 UDP/DTLS/SCTP webrtc-datachannel\r\nc=IN IP4 171.84.6.216\r\na=candidate:1841888059 1 udp 2113937151 0ec970aa-e465-4105-a65e-81ec6552c7e5.local 53799 typ host generation 0 network-cost 999\r\na=candidate:842163049 1 udp 1677729535 171.84.6.216 53799 typ srflx raddr 0.0.0.0 rport 0 generation 0 network-cost 999\r\na=ice-ufrag:UqLe\r\na=ice-pwd:f08ur1ltpmFSGbMp/cwf9KkF\r\na=fingerprint:sha-256 71:60:B4:28:15:B6:5E:D4:CE:76:49:F8:B2:CE:44:E4:F8:F9:FD:14:7B:AA:DA:AA:BE:DF:66:62:27:2E:E9:00\r\na=setup:actpass\r\na=mid:0\r\na=sctp-port:5000\r\na=max-message-size:262144\r\n"}

4、用另外一个浏览器打开file:///本地路径目录/index.html，注意没有#1，然后将步骤3中的offer信令复制到本步骤中网页的提交框中，并提交，然后可以在网页中看到一answer应答信令，格式类似下面例子


{"type":"answer","sdp":"v=0\r\no=- 5040306846154650858 2 IN IP4 127.0.0.1\r\ns=-\r\nt=0 0\r\na=group:BUNDLE 0\r\na=extmap-allow-mixed\r\na=msid-semantic: WMS\r\nm=application 9 UDP/DTLS/SCTP webrtc-datachannel\r\nc=IN IP4 0.0.0.0\r\na=candidate:1841888059 1 udp 2113937151 71a8e768-d70d-4554-8ce3-c3d1ee6751a0.local 49173 typ host generation 0 network-cost 999\r\na=ice-ufrag:VhmK\r\na=ice-pwd:KVNGXnCYlO1TaAqAEnhObWP4\r\na=fingerprint:sha-256 5E:09:41:CF:D8:25:46:D4:E4:D7:B6:FB:6D:E7:18:7F:BE:CB:4B:98:28:72:95:06:78:24:FB:6C:6F:B4:50:AE\r\na=setup:active\r\na=mid:0\r\na=sctp-port:5000\r\na=max-message-size:262144\r\n"}

5、将步骤4中的answer信令制到步骤3中网页的提交框中，并提交。打开浏览器的开发者模式，可以看到两个浏览器已经建立了数据通道，并互相发送了一个随机数消息

文件传输

建立起基本的数据通道后，就可以做一些比较直观的不那么抽象事情了，比如传输文件。对于使用WebRTC进行文件传输，有一些细节需要处理

修改传输速度限制

Chrome默认将WebRTC的数据通道传输速度限制在30K，我们可以修改SDP的内容来提高上限,例如256K。


let peer = new SimplePeer()
peer.on('signal', data => {
    data.sdp = data.sdp.replace( 'b=AS:30', 'b=AS:262144' );
    console.log('SIGNAL', JSON.stringify(data))
})

选择并读取文件数据

我们选取基本的input控件作为文件选择器,并监听文件选择动作。


<input type="file" onchange="OnFileSelected(this.files)"/>
<script>
    //选中文件
    function OnFileSelected(files)
    {
        file = files[0];
        let fileReader = new FileReader();
        fileReader.onload = (ev)=>{
            let blobData = ev.currentTarget.result;
            console.log(blobData)
        }
        fileReader.readAsArrayBuffer( file.slice( 0, file.size ) );
    }
script>

考虑到传输速度限制，在读取文件内容时，应进行切片--循环读取、发送，直到文件末尾。

自动下载文件

接收完成后，数据还保存在浏览器内存（缓存）中，需要触发文件下载机制将数据下载到本地。


let blobData = '接收的数据'
let blob = new window.Blob( blobData );
let anchor = document.createElement( 'a' );
anchor.href = URL.createObjectURL( blob );
anchor.download = '文件名';
anchor.textContent = '下载文件';
anchor.click()

完整代码


<html>
    <head>
        <meta charset="utf-8"/>
        <meta name="viewport" content="width=device-width,initial-scale=1"/>
    head>
  <body>
    <style>
        #outgoing {
          width: 100%;
          word-wrap: break-word;
          white-space: normal;
        }
      style>
    <form>
      <textarea id="incoming">textarea>
      <button type="submit">提交button>
    form>
    <div>口令div>
    <pre id="outgoing">pre>
    
    <input id="fileinput" type="file" onchange="OnFileSelected(this.files)" hidden="true"/>
    <script src="simplepeer.min.js">script>
    <script>
        //单个块大小
        const MAX_CHUNK_SIZE = 1024 * 256;

        //选中文件
        function OnFileSelected(files)
        {
            file = files[0];
            sendFile(file)
        }

        var peer;
        if (location.hash === '#1') {
            peer = new SimplePeer({ initiator: true,
                                    trickle: false});
        } else {
            peer = new SimplePeer({ initiator: false,
                                    trickle: false});
        }
        peer.on('error', err => console.log('error', err));
        peer.on('error', err => console.log('error', err));
        peer.on('signal', data => {
            //modify sdp to increase block size
            data.sdp = data.sdp.replace( 'b=AS:30', 'b=AS:'+MAX_CHUNK_SIZE.toString() ); 
            document.querySelector('#outgoing').textContent = JSON.stringify(data);
        });

        document.querySelector('form').addEventListener('submit', ev => {
            ev.preventDefault()
            peer.signal(JSON.parse(document.querySelector('#incoming').value));
        });

        peer.on('connect', () => {
            console.log('CONNECT');
            // show file input button
            document.querySelector('#fileinput').removeAttribute("hidden")
        });
        
        // receive file
        peer.on('data', data => {
            recvFile(data);
        });

        function sendFile(file)
        {
            console.log("send file name size");
            peer.send(JSON.stringify({
                fileName: file.name,
                fileSize: file.size
            }));

            console.log("send file data");
            let fileReader = new FileReader();
            let readEnd = {"end":false};
            let startPos = 0;

            function readFile(file)
            {
                let end = startPos + MAX_CHUNK_SIZE;
                if (end > file.size) {
                    end = file.size;
                    readEnd.end = true;
                }
                let fc = file.slice( startPos, end );
                startPos = end;
                fileReader.readAsArrayBuffer( fc );
            }
            
            fileReader.onload = (ev)=>{
                let blobData = ev.currentTarget.result;
                console.log("send file data ", startPos)
                peer.send(blobData);
                if (readEnd.end === false) {
                    readFile(file)
                }
            }

            readFile(file);
        }

        let recvFileInfo = undefined;
        let recvFileData = [];
        let recvLen = 0;
        function recvFile(data)
        {
            if (recvFileInfo === undefined)
            {
                recvFileInfo = JSON.parse( data.toString() );
            }
            else 
            {
                recvLen += data.byteLength;
                recvFileData.push(data);
                console.log("recv " + recvFileInfo.fileName + " " + recvLen.toString() + "/" + recvFileInfo.fileSize.toString());
                // receive end
                if (recvLen >= recvFileInfo.fileSize)
                {
                let blob = new window.Blob( recvFileData );
                var anchor = document.createElement( 'a' );
                anchor.href = URL.createObjectURL( blob );
                anchor.download = recvFileInfo.fileName;
                anchor.textContent = '下载';
                    recvFileInfo = undefined;
                    anchor.click();
                }
            }
        }
    script>
  body>
html>

演示步骤:

1、创建index.html文件，文件内容为上面的代码
2、下载simplepeer.min.js，放到和index.html同目录下
3、用浏览器打开file:///本地路径目录/index.html#1（这里使用file协议，是因为没有部署index.html到服务端），可以看到网页中输出了一个offer邀请信令。
4、用另外一个浏览器打开file:///本地路径目录/index.html，注意没有#1，然后将步骤3中的offer信令复制到本步骤中网页的提交框中，并提交，然后可以在网页中看到一answer应答信令。
5、将步骤4中的answer信令制到步骤3中网页的提交框中，并提交。打开浏览器的开发者模式，可以看到两个浏览器已经建立了数据通道，此时可以传输文件了。

音视频通话

还是使用simple-peer,利用浏览器的媒体能力，搭建一个简单的局域网内音视频通话模型。

https

一般情况下，在线网页使用浏览器的摄像头和麦克风能力时，浏览器的要求是使用htpps。这里，我们使用python简单的搭建一个https服务器

首先，用openssl自签名一个RSA证书（如果有机构颁发的证书，则可以忽略此步骤）


openssl req -x509 -newkey rsa:2048 -keyout key.pem -out cert.pem -days 365

上述命令会要求输入初始密码，可以输入简单的密码如123456（仅测试用），同时输出两个文件key.pem和cert.pem，记住两个文件的路径。

参考Simple Python HTTP(S) Server — Example，创建https_server.py文件,内容如下


xxxxxxxxxx
#!/usr/bin/python
# -*- coding: UTF-8 -*-

import sys

if sys.version_info.major > 2:   # python 3
    from http.server import HTTPServer as BaseHTTPServer
    from http.server import BaseHTTPRequestHandler as SimpleHTTPRequestHandler
else: #python 2
    from BaseHTTPServer import HTTPServer
    from SimpleHTTPServer import SimpleHTTPRequestHandler

import ssl

httpd = HTTPServer(('', 4443),SimpleHTTPRequestHandler)

httpd.socket = ssl.wrap_socket (httpd.socket,
        keyfile="key.pem",
        certfile='cert.pem', server_side=True)

httpd.serve_forever()

把key.pem和cert.pem放在和https_server.py同目录下，然后运行命令并输入证书密码（本例为123456）


xxxxxxxxxx
python https_server.py

一个简单的https服务搭建完毕

访问音视频流

我们可以使用navigator.mediaDevices.getUserMedia来获取音视频流数据


xxxxxxxxxx
navigator.mediaDevices.getUserMedia({
            video: true,
            audio: true
        }).then((stream)=>{
            //音视频流 stream
        }).catch(() => {
            //捕获到异常
        })

获取到媒体流后,可以将媒体数据展示在video标签上，这样更加直观。需要注意的是，对于iOS设备，建议使用iOS11以后的版本，且需要添加playsinline webkit-playsinline="true"以解决video标签的黑屏/白屏问题。


xxxxxxxxxx

<video id="idvv" playsinline webkit-playsinline="true" />
<script>
    navigator.mediaDevices.getUserMedia({
            video: true,
            audio: true
        }).then((stream)=>{
            //音视频流 stream
            var video = document.querySelector("idvv")
            if ('srcObject' in video) {
                video.srcObject = stream
            } else {
                video.src = window.URL.createObjectURL(stream)
            }
            video.play()
        }).catch(() => {
            //捕获到异常
        })
script>

完整代码


xxxxxxxxxx
<html>
    <head>
        <meta charset="utf-8"/>
        <meta name="viewport" content="width=device-width,initial-scale=1"/>
    head>
  <body>
    <style>
        #outgoing {
          width: 100%;
          word-wrap: break-word;
          white-space: normal;
        }
      style>
    <form>
      <textarea id="incoming">textarea>
      <button type="submit">提交button>
    form>
    <div>口令div>
    <pre id="outgoing">pre>
    <div>媒体流div>

    
    <video width="40%" id="streamLocal" playsinline webkit-playsinline="true" />
    <video width="40%" id="streamRemote" playsinline webkit-playsinline="true" />

    <script src="simplepeer.min.js">script>
    <script>
        // get video/voice stream
        navigator.mediaDevices.getUserMedia({
            video: true,
            audio: true
        }).then(gotMedia).catch(() => {})
      
        var peer;
        function gotMedia (stream) {
            // show local record video stream 
            showVideoStream("#streamLocal",stream)

            if (location.hash === '#1') {
                peer = new SimplePeer({ initiator: true,
                                        trickle: false,
                                        stream: stream })
            } else {
                peer = new SimplePeer({initiator:false,
                                       trickle: false,
                                       stream: stream})
            }
            peer.on('error', err => console.log('error', err))

            peer.on('signal', data => {
                console.log('SIGNAL', JSON.stringify(data))
                document.querySelector('#outgoing').textContent = JSON.stringify(data)
            })

            document.querySelector('form').addEventListener('submit', ev => {
                ev.preventDefault()
                peer.signal(JSON.parse(document.querySelector('#incoming').value))
            })

            peer.on('stream', stream => {
                // got remote video stream, now let's show it in a video tag
                showVideoStream("#streamRemote",stream)
            })
        }

        function showVideoStream(id,stream) {
            var video = document.querySelector(id)
            if ('srcObject' in video) {
                video.srcObject = stream
            } else {
                video.src = window.URL.createObjectURL(stream) // for older browsers
            }
            video.play()
        }
    script>
  body>
html>

演示步骤:

1、创建index.html文件，文件内容为上面的代码，放在https_server.py同目录下
2、下载simplepeer.min.js，放到和index.html同目录下
3、运行 python https_server.py
4、用浏览器打开https://ip地址:4443/index.html#1，可以看到网页中输出了一个offer邀请信令。
5、用局域网内的另外一个终端浏览器打开https://ip地址:4443/index.html，注意没有#1，然后将步骤4中的offer信令复制到本步骤中网页的提交框中，并提交，然后可以在网页中看到一answer应答信令。
6、将步骤4中的answer信令制到步骤3中网页的提交框中，并提交。顺利的话，可以两个浏览器可以显示到对方的媒体流

屏幕共享

屏幕共享的原理和音视频通话的原理类似，唯一不同的是媒体流的数据来源不一样，因此，我们可以在音视频通话的基础上，修改一个屏幕共享的实现。

Safari浏览器对MediaStream支持不够友好，建议使用两个Chrome浏览器测试。

捕捉屏幕

Chrome浏览器在2018年后才开始支持navigator.mediaDevices.getDisplayMedia


xxxxxxxxxx
navigator.mediaDevices.getDisplayMedia({
                video: true,
                audio: true
            }).then( (stream)=>{
                // stream 屏幕数据
            }).catch(() => {
                (e) => {console.log(e)}
            })

完整代码


xxxxxxxxxx
<html>
    <head>
        <meta charset="utf-8"/>
        <meta name="viewport" content="width=device-width,initial-scale=1"/>
    head>
  <body>
    <style>
        #outgoing {
          width: 100%;
          word-wrap: break-word;
          white-space: normal;
        }
      style>
    <form>
      <textarea id="incoming">textarea>
      <button type="submit">提交button>
    form>
    <div>口令div>
    <pre id="outgoing">pre>
    
    <video id="screenShare" playsinline webkit-playsinline="true">video>

    <script src="simplepeer.min.js">script>
    <script>
        // get video/voice stream


        if (location.hash === '#1') {
            navigator.mediaDevices.getDisplayMedia({
                video: true,
                audio: true
            }).then( gotMedia).catch(() => {(e) => {console.log(e)}})
        } else {
            gotMedia(null)
        }
        var peer;
        function gotMedia (stream) {
            if (stream !== null) {
                peer = new SimplePeer({ initiator: true,
                                        trickle: false,
                                        stream: stream })
            } else {
                peer = new SimplePeer({initiator:false,
                                       trickle: false})
            }
            peer.on('error', err => console.log('error', err))

            peer.on('signal', data => {
                console.log('SIGNAL', JSON.stringify(data))
                document.querySelector('#outgoing').textContent = JSON.stringify(data)
            })

            document.querySelector('form').addEventListener('submit', ev => {
                ev.preventDefault()
                peer.signal(JSON.parse(document.querySelector('#incoming').value))
            })

            peer.on('stream', stream => {
                // got remote video stream, now let's show it in a video tag
                showVideoStream("#screenShare",stream)
            })
        }

        function showVideoStream(id,stream) {
            var video = document.querySelector(id)
            if ('srcObject' in video) {
                video.srcObject = stream
            } else {
                video.src = window.URL.createObjectURL(stream) // for older browsers
            }
            video.play()
        }
    script>
  body>
html>

演示步骤和音视频通话的例子基本一样。

NAT穿透之STUN/TURN

NAT（Network Address Translation，网络地址转换），典型的应用场景是公网IP地址和私有IP地址转换，通过使用少量的公网IP地址来代表较多的私有IP地址的方式，将有助于减缓可用的IP地址空间的枯竭。

NAT分为四种类型，Full Cone（完全锥形）、Restricted Cone（限制锥形）、Port Restricted Cone（端口限制锥形）和Symmetric（对称形）。

为了能让两个处在不同NAT网络的WebRTC终端能够进行数据、媒体通信，需要借助STUN/TURN来实现NAT穿透。

一般来说，STUN（Simple Traversal of User Datagram Protocol Through Network Address Translators）， NAT的UDP的简单穿越，是一种网络协议，通过暴露两个WebRTC终端在公网上的地址，可以在锥形NAT（完全锥形、限制锥形、端口限制锥形）进行穿透，从而实现P2P通信。

TURN（Traversal Using Relays around NAT），也是一种网络协议，可以解决STUN不能穿透对称形NAT的问题。和STUN不同的是，TURN实现穿透的方法是中转。

如果在公网上架设了STUN/TURN服务器，那么处在不同NAT网络的WebRTC终端进行通信就变得比较容易了。在初始化WebRTC终端时，可以配置STUN/TURN服务地址列表：


xxxxxxxxxx
peer = new SimplePeer({ config: { iceServers: [{ urls: 'stun:stun.l.google.com:19302' }, { urls: 'stun:global.stun.twilio.com:3478?transport=udp' }] }, })

//ICE，与STUN和TURN相比，ICE并非是解决NAT穿透问题的协议，而是一个框架，整合其他现存的NAT穿透协议，如STUN、TURN、RSIP等。

使用STUN/TURN后，可以较为方便的实现NAT穿透。当然，STUN/TURN不是必需的，但是强烈推荐使用。

信令服务器

为何还需要引入信令服务器？先回顾下本文上面的例子，使用simple-peer创建WebRTC终端，生成SDP信令（如offer、answer）,那么他们如何交换信令呢？本文上文的例子是通过手动复制粘贴实现的，而真实的业务场景中，这个人工操作是由信令服务器完成的。

WebRTC并没有规定信令服务使用哪种协议实现，所以本文采用最简单的实现方式（真实业务场景不会使用），HTTP + GET + POST实现。先来熟悉下引入信令服务器后，两个WebRTC终端建立连接的过程：

1、A端初始化offer信令.
2、A端向STUN/TURN查询自己的公网地址，STUN/TURN会返回candidate列表A（可连接的候选地址列表）.
3、A端将offer信令和candidate列表A一同发给信令务器，由信令服务器转发给 B端.
4、B端收到offer信令和candidate列表A, 从candidate列表A选择合适的地址发送NAT穿透报文, 同时向STUN/TURN查询自己的公网地址获取candidate列表B.
5、B端生成answer信令，并将answer信令和candidate列表B发送给信令服务器，由信令服务器转发给 A端.
6、A端收到answer信令和candidate列表B,从candidate列表B选择合适的地址发送NAT穿透报文.
7、A、B建立连接。

以上只是基本的连接建立过程，当然真实业务场景会比较复杂，如可能有媒体协商。真实的业务场景下，连接过程依然可以从上面的基本过程演变出来。

信令服务实现

上面说到本文使用HTTP + GET + POST实现，客户端使用POST负责发送信令，通过GET轮询获取信令。依然适用Python实现。


xxxxxxxxxx
import sys

if sys.version_info.major > 2:   # python 3
    from http.server import HTTPServer as BaseHTTPServer
    from http.server import BaseHTTPRequestHandler as SimpleHTTPRequestHandler
else: #python 2
    from BaseHTTPServer import HTTPServer
    from SimpleHTTPServer import SimpleHTTPRequestHandler

import ssl

WEBRTC_OFFER = None
WEBRTC_ANSWER = None

class  WebRtcSignalHandler (SimpleHTTPRequestHandler):
    def do_GET(self):
        if (self.path == "/webrtc_offer"):
            self.do_http_response_with(200,WEBRTC_OFFER)
        elif (self.path == "/webrtc_answer"):
            self.do_http_response_with(200,WEBRTC_ANSWER)
        else:
            SimpleHTTPRequestHandler.do_GET(self)
    
    def do_POST(self):
        length = int(self.headers.getheader('content-length'))
        body = self.rfile.read(length)
        if (self.path == "/webrtc_offer"):
           global WEBRTC_OFFER
           WEBRTC_OFFER = body
           WEBRTC_ANSWER = None
           self.do_http_response_with(200,"Success")
        elif (self.path == "/webrtc_answer"):
           global WEBRTC_ANSWER
           WEBRTC_ANSWER = body
           self.do_http_response_with(200,"Success")
        else:
            SimpleHTTPRequestHandler.do_POST(self)

    def do_http_response_with(self,code,msg):
        self.send_response(code)
        self.end_headers()
        if (msg):
            if not self.wfile.closed:
                self.wfile.write(msg)
                # self.wfile.flush()


httpd = HTTPServer(('', 4443),WebRtcSignalHandler)

httpd.socket = ssl.wrap_socket (httpd.socket,
        keyfile="key.pem", # 密码123456
        certfile='cert.pem', server_side=True)

httpd.serve_forever()

完整代码


xxxxxxxxxx
<html>
    <head>
        <meta charset="utf-8"/>
        <meta name="viewport" content="width=device-width,initial-scale=1"/>
    head>
  <body>
    <div>媒体流div>

    
    <video width="40%" id="streamLocal" playsinline webkit-playsinline="true">video>
    <video width="40%" id="streamRemote" playsinline webkit-playsinline="true">video>

    <script src="simplepeer.min.js">script>
    <script>
        // get video/voice stream
        navigator.mediaDevices.getUserMedia({
            video: true,
            audio: true
        }).then(gotMedia).catch(() => {})
      
        var peer
        var candidateList = []
        var sdp = undefined
        const initiator = (location.hash === '#1')
        function gotMedia (stream)
        {
            // show local record video stream 
            showVideoStream("#streamLocal",stream)

            // ice config
            let iceConfig = [{ urls: 'stun:stun1.l.google.com:19302' },
                             /*{ urls: 'stun:stun2.l.google.com:19302' },
                             { urls: 'stun:stun3.l.google.com:19302' },
        { urls: 'stun:stun4.l.google.com:19302' },*/]
            
            peer = new SimplePeer({ initiator: initiator,
                                    stream: stream ,
                                    config:{iceServers : iceConfig}})
  
            peer.on('error', err => console.log('error', err))

            peer.on('signal', data => {
                if (data.type === "candidate") {
                    candidateList.push(data);
                }  else if (data.type === "offer" || data.type === "answer")  {
                    sdp = data;
                    // 获取sdp信息 ，2秒后将 sdp 和 candidate 发给 信令服务器
                    setTimeout(() => {
                        msg = {sdp:sdp , candidate:candidateList}
                        sendMsgSdpCandidate(msg);
                        console.log(JSON.stringify(msg))
                    }, 2000)
                }
            })

            setTimeout(() => {
                // 获取 sdp
                fetchMsgSdpCandidate((msg)=>{
                    if ((msg.sdp.type === "answer" && initiator ===true)
                     || (msg.sdp.type === "offer" && initiator ===false))
                    {
                        if (msg.candidate !== undefined ) {
                            msg.candidate.forEach( (c)=>{
                                peer.signal(c)
                            })
                        }
                        peer.signal(msg.sdp)
                    }
                })
            }, 2000);

            peer.on('stream', stream => {
                // got remote video stream, now let's show it in a video tag
                showVideoStream("#streamRemote",stream)
            })
        }

        function sendMsgSdpCandidate(msg)
        {
            let xhr = new XMLHttpRequest()
            xhr.open("POST", initiator ? "webrtc_offer" : "webrtc_answer", true)
            xhr.send(JSON.stringify(msg))
        }

        function fetchMsgSdpCandidate( callback )
        {
            // 为节省服务编码，此处使用http get轮询方式。
            // 正常业务中，可以使用websocket，避免轮询冲击。
            let xhr = new XMLHttpRequest()
            xhr.onload = function() {
                if (xhr.status == 200 && xhr.responseText) {
                    msg = JSON.parse(xhr.responseText)
                    callback(msg)
                }
                else {
                    setTimeout(() => {
                        fetchMsgSdpCandidate(callback)
                    }, 2000);
                }
            }
            xhr.open("GET", initiator ? "webrtc_answer" : "webrtc_offer")
            xhr.send()
        }

        function showVideoStream(id,stream)
        {
            var video = document.querySelector(id)
            if ('srcObject' in video) {
                video.srcObject = stream
            } else {
                video.src = window.URL.createObjectURL(stream) // for older browsers
            }
            video.play()
        }
    script>
  body>
html>

演示步骤:

1、创建index.html文件，文件内容为上面的代码
2、下载simplepeer.min.js，放到和index.html同目录下
3、用浏览器打开https://公网地址/index.html#1。
4、用另外一个浏览器打开https:///公网地址/index.html，注意没有#1。
5、正常情况下，应能建立连接。

手动创建一个electron工程

holdsky — Wed, 28 Oct 2020 11:35:11 +0000

1、创建工程文件夹并进入
mkdir my-electron-app && cd my-electron-app

2、初始化npm
npm init -y

3、安装electron
npm i --save-dev electron

自动化脚本

#!/bin/bash
# -*- coding:utf-8 -*-

import os
import sys
import json

if (len(sys.argv) < 2 ):
    print("缺少electron工程名字 ； python create-electron-app name")
    exit(0)

CURRENT_PATH = sys.path[0]
APP_NAME = sys.argv[1]
APP_DIR = os.path.join(CURRENT_PATH,APP_NAME)

if os.path.exists( APP_DIR ):
    print("目录" + APP_NAME + "已存在")
    exit(0)

# 创建工程目录
os.system("cd {} && mkdir {}".format(CURRENT_PATH,APP_NAME))

# 初始化npm
os.system("cd {} && npm init -y".format(APP_DIR))

#安装electron
os.system("cd {} && npm i --save-dev electron".format(APP_DIR))

#创建主脚本
mainjs = """
const { app, BrowserWindow } = require('electron')

function createWindow () {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  })

  win.loadFile('main.html')
  win.webContents.openDevTools()
}

app.whenReady().then(createWindow)

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', () => {
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow()
  }
})
"""
fs = open(os.path.join(APP_DIR,"main.js"),"w")
fs.write(mainjs)
fs.close()

#创建主html
mainhtml = """



    
    Hello World!
    


    Hello World！
    世界你好


"""
fs = open(os.path.join(APP_DIR,"main.html"),"w")
fs.write(mainhtml)
fs.close()

# 添加快捷启动方式
fs = open(os.path.join(APP_DIR,"package.json"),"r")
jsondata = fs.read()
fs.close()
jsonobj = json.loads(jsondata)
jsonobj["scripts"]["start"] = "electron ."
jsonobj["main"]= "main.js"

jsondata = json.dumps(jsonobj,indent=4)
fs = open(os.path.join(APP_DIR,"package.json"),"w")
fs.write(jsondata)
fs.close()

# 启动
os.system("cd {} && npm start".format(APP_DIR))

参考 https://www.electronjs.org/docs/tutorial/quick-start

判断Unicode码是否落在了中文区间

holdsky — Fri, 04 Sep 2020 08:58:35 +0000

static inline BOOL isChineseC(u_long ch)
{
///https://www.qqxiuzi.cn/zh/hanzi-unicode-bianma.php
return (
(/基本汉字/ ch >= 0x4E00 && ch <= 0x9FA5) ||
(/基本汉字补充/ ch >= 0x9FA6 && ch <= 0x9FEF) ||
(/扩展A/ ch >= 0x3400 && ch <= 0x4DB5) ||
(/扩展B/ ch >= 0x20000 && ch <= 0x2A6D6) ||
(/扩展C/ ch >= 0x2A700 && ch <= 0x2B734) ||
(/扩展D/ ch >= 0x2B740 && ch <= 0x2B81D) ||
(/扩展E/ ch >= 0x2B820 && ch <= 0x2CEA1) ||
(/扩展F/ ch >= 0x2CEB0 && ch <= 0x2EBE0) ||
(/扩展G/ ch >= 0x30000 && ch <= 0x3134A) ||
(/康熙部首/ ch >= 0x2F00 && ch <= 0x2FD5) ||
(/部首扩展/ ch >= 0x2E80 && ch <= 0x2EF3) ||
(/兼容汉/ ch >= 0xF900 && ch <= 0xFAD9) ||
(/兼容扩展/ ch >= 0x2F800 && ch <= 0x2FA1D) ||
(/PUA(GBK)部件/ ch >= 0xE815 && ch <= 0xE86F) ||
(/部件扩展/ ch >= 0xE400 && ch <= 0xE5E8) ||
(/PUA增补/ ch >= 0xE600 && ch <= 0xE6CF) ||
(/汉字笔画/ ch >= 0x31C0 && ch <= 0x31E3) ||
(/汉字结构/ ch >= 0x2FF0 && ch <= 0x2FFB) ||
(/汉语注音/ ch >= 0x3105 && ch <= 0x312F) ||
(/注音扩展/ ch >= 0x31A0 && ch <= 0x31BA) ||
(/〇/ ch == 0x3007)
);
}

Java反编译工具MacOS版–JD-GUI-OSX-1.6.6

holdsky — Tue, 05 May 2020 06:33:15 +0000

官方地址下载速度有点慢，这里备个份。
jd-gui-osx-1.6.6

基于npm项目初始化TypeScript项目

holdsky — Sun, 05 Apr 2020 03:49:10 +0000

# 初始化npm项目
mkdir projectName
cd projectName
npm init

# 初始化TypeScript项目
tsc --init
#安装 node的ts符号生命（用于ts的静态编译检查、语法提示）
npm i @types/node

JS 将html的5种颜色表示，解析为RRGGBBAA

holdsky — Sat, 15 Feb 2020 01:38:44 +0000

let colorNameMap = {
  aliceblue : '#f0f8ff',
  antiquewhite : '#faebd7',
  aqua : '#00ffff',
  aquamarine : '#7fffd4',
  azure : '#f0ffff',
  beige : '#f5f5dc',
  bisque : '#ffe4c4',
  black : '#000000',
  blanchedalmond : '#ffebcd',
  blue : '#0000ff',
  blueviolet : '#8a2be2',
  brown : '#a52a2a',
  burlywood : '#deb887',
  cadetblue : '#5f9ea0',
  chartreuse : '#7fff00',
  chocolate : '#d2691e',
  coral : '#ff7f50',
  cornflowerblue : '#6495ed',
  cornsilk : '#fff8dc',
  crimson : '#dc143c',
  cyan : '#00ffff',
  darkblue : '#00008b',
  darkcyan : '#008b8b',
  darkgoldenrod : '#b8860b',
  darkgray : '#a9a9a9',
  darkgrey : '#a9a9a9',
  darkgreen : '#006400',
  darkkhaki : '#bdb76b',
  darkmagenta : '#8b008b',
  darkolivegreen : '#556b2f',
  darkorange : '#ff8c00',
  darkorchid : '#9932cc',
  darkred : '#8b0000',
  darksalmon : '#e9967a',
  darkseagreen : '#8fbc8f',
  darkslateblue : '#483d8b',
  darkslategray : '#2f4f4f',
  darkslategrey : '#2f4f4f',
  darkturquoise : '#00ced1',
  darkviolet : '#9400d3',
  deeppink : '#ff1493',
  deepskyblue : '#00bfff',
  dimgray : '#696969',
  dimgrey : '#696969',
  dodgerblue : '#1e90ff',
  firebrick : '#b22222',
  floralwhite : '#fffaf0',
  forestgreen : '#228b22',
  fuchsia : '#ff00ff',
  gainsboro : '#dcdcdc',
  ghostwhite : '#f8f8ff',
  gold : '#ffd700',
  goldenrod : '#daa520',
  gray : '#808080',
  grey : '#808080',
  green : '#008000',
  greenyellow : '#adff2f',
  honeydew : '#f0fff0',
  hotpink : '#ff69b4',
  indianred : '#cd5c5c',
  indigo : '#4b0082',
  ivory : '#fffff0',
  khaki : '#f0e68c',
  lavender : '#e6e6fa',
  lavenderblush : '#fff0f5',
  lawngreen : '#7cfc00',
  lemonchiffon : '#fffacd',
  lightblue : '#add8e6',
  lightcoral : '#f08080',
  lightcyan : '#e0ffff',
  lightgoldenrodyellow : '#fafad2',
  lightgray : '#d3d3d3',
  lightgrey : '#d3d3d3',
  lightgreen : '#90ee90',
  lightpink : '#ffb6c1',
  lightsalmon : '#ffa07a',
  lightseagreen : '#20b2aa',
  lightskyblue : '#87cefa',
  lightslategray : '#778899',
  lightslategrey : '#778899',
  lightsteelblue : '#b0c4de',
  lightyellow : '#ffffe0',
  lime : '#00ff00',
  limegreen : '#32cd32',
  linen : '#faf0e6',
  magenta : '#ff00ff',
  maroon : '#800000',
  mediumaquamarine : '#66cdaa',
  mediumblue : '#0000cd',
  mediumorchid : '#ba55d3',
  mediumpurple : '#9370db',
  mediumseagreen : '#3cb371',
  mediumslateblue : '#7b68ee',
  mediumspringgreen : '#00fa9a',
  mediumturquoise : '#48d1cc',
  mediumvioletred : '#c71585',
  midnightblue : '#191970',
  mintcream : '#f5fffa',
  mistyrose : '#ffe4e1',
  moccasin : '#ffe4b5',
  navajowhite : '#ffdead',
  navy : '#000080',
  oldlace : '#fdf5e6',
  olive : '#808000',
  olivedrab : '#6b8e23',
  orange : '#ffa500',
  orangered : '#ff4500',
  orchid : '#da70d6',
  palegoldenrod : '#eee8aa',
  palegreen : '#98fb98',
  paleturquoise : '#afeeee',
  palevioletred : '#db7093',
  papayawhip : '#ffefd5',
  peachpuff : '#ffdab9',
  peru : '#cd853f',
  pink : '#ffc0cb',
  plum : '#dda0dd',
  powderblue : '#b0e0e6',
  purple : '#800080',
  rebeccapurple : '#663399',
  red : '#ff0000',
  rosybrown : '#bc8f8f',
  royalblue : '#4169e1',
  saddlebrown : '#8b4513',
  salmon : '#fa8072',
  sandybrown : '#f4a460',
  seagreen : '#2e8b57',
  seashell : '#fff5ee',
  sienna : '#a0522d',
  silver : '#c0c0c0',
  skyblue : '#87ceeb',
  slateblue : '#6a5acd',
  slategray : '#708090',
  slategrey : '#708090',
  snow : '#fffafa',
  springgreen : '#00ff7f',
  steelblue : '#4682b4',
  tan : '#d2b48c',
  teal : '#008080',
  thistle : '#d8bfd8',
  tomato : '#ff6347',
  turquoise : '#40e0d0',
  violet : '#ee82ee',
  wheat : '#f5deb3',
  white : '#ffffff',
  whitesmoke : '#f5f5f5',
  yellow : '#ffff00',
  yellowgreen : '#9acd32',
}

// 5种模式 全部转换程 'RRGGBBAA'的小写表示
// 1、颜色名，如'red'，'black'
// 2、三位十六进制，如'#fba'
// 3、六位十六进制, 如'#ffbbaa'
// 4、rgb ,如rgb(255,220,123)
// 5、rgba，如rgba(255,220,123,30)
function convertStringToHexColor(colorStr) 
{
    let BLACK = '000000ff'
    if (typeof colorStr !== 'string' || colorStr.length <= 1) {
        return BLACK; //非法，返回黑色
    }
    colorStr = colorStr.toLowerCase();
    if ( colorStr.slice(0,1) === '#') //十六进制
    {
        colorStr = colorStr.slice(1)
        if(colorStr.length < 4) //三位 FFF
        {
            if(colorStr.length < 3){
                colorStr = ('000' + colorStr).slice(-3);
            }
            return colorStr.charAt(0).concat(colorStr.charAt(0),
                                            colorStr.charAt(1),
                                            colorStr.charAt(1),
                                            colorStr.charAt(2),
                                            colorStr.charAt(2),
                                            'ff');
        }
        else //六位 ffbbaa
        {
            if(colorStr.length < 3){
                colorStr = ('000000' + colorStr).slice(-6);
            }
            return colorStr + 'ff';
        }
    }
    else if ( colorStr.length > 4 && colorStr.slice(0,4) === 'rgba')  // rgba(1,2,3,4)
    {
        let start = colorStr.indexOf('(');
        let end = colorStr.indexOf(')');
        if (start === -1 || end === -1 || (start+1) >= end ) {
            return BLACK
        }
        rgb = colorStr.slice(start + 1,end).split(',');
        if (rgb.length !== 4) {
            return BLACK;
        }
        return ''.concat(parseInt(rgb[0]).toString(16).slice(-2),
                         parseInt(rgb[1]).toString(16).slice(-2),
                         parseInt(rgb[2]).toString(16).slice(-2),
                         parseInt(rgb[3]).toString(16).slice(-2));
    }
    else if ( colorStr.length > 3 && colorStr.slice(0,3) === 'rgb' ) //rgb(1,2,3)
    {
        let start = colorStr.indexOf('(');
        let end = colorStr.indexOf(')');
        if (start === -1 || end === -1 || (start+1) >= end ) {
            return BLACK
        }
        rgb = colorStr.slice(start + 1,end).split(',');
        if (rgb.length !== 3) {
            return BLACK;
        }
        return ''.concat(parseInt(rgb[0]).toString(16).slice(-2),
                        parseInt(rgb[1]).toString(16).slice(-2),
                        parseInt(rgb[2]).toString(16).slice(-2),
                        'ff');
    }
    else if (colorNameMap[colorStr] !== undefined)
    {
        colorStr = colorNameMap[colorStr].slice(1);
        return colorStr + 'ff';
    }
    else{
        return BLACK;  //非法，返回黑色
    }
}

console.log(convertStringToHexColor(''))
console.log(convertStringToHexColor('#'))
console.log(convertStringToHexColor('red'))
console.log(convertStringToHexColor('#FBA'))
console.log(convertStringToHexColor('#FFBBAA'))
console.log(convertStringToHexColor('rgb(255,254,253)'))
console.log(convertStringToHexColor('rgba(255,254,253,100)'))

小程序同层渲染–iOS WKWebView实现

holdsky — Mon, 13 Jan 2020 08:18:33 +0000

先上代码
RenderWebViewWithNative
我只在模拟器环境中测了。

本文成文使用的环境

Xcode Version 11.3 (11C29)
模拟器版本Version 11.3 (SimulatorApp-912.5 SimulatorKit-570.3 CoreSimulator-681.17)，对应iOS 13.2

同层渲染步骤

简单说下同层渲染效果，是将Native控件添加到WKWebView的子层级View中，最明显的是z-index 属性可以控制Native控件。详细请阅读https://developers.weixin.qq.com/community/develop/article/doc/000c4e433707c072c1793e56f5c813

需要前端改造的地方

为了让WKWebView为Native控件单独生成一个子层级的View，需要改变对应DOM节点的CSS样式,如

〈div style="position: fixed; font-size: 50px;overflow: scroll;-webkit-overflow-scrolling: touch" id="zl_native" 〉
            〈zl-native id="zl_native_node"〉world〈zl-native〉
〈/div〉

本文成文环境中测试的结果是:

WKWebView只为position: fixed的
标签内容生成单独的子层级视图
overflow: scroll;-webkit-overflow-scrolling: touch,在本文成文环境中不起作用；建议读者自行尝试更多的环境，以得到更准确的结论。

需要客户端改造的地方

首先，当前端加载DOM时，检测到需要Native渲染的节点，需要通过jsbridge通知客户端，把节点的信息告诉客户端。客户端根据节点信息找到对应的子层级view

-(UIView *)find_zl_native_view
{
    UIView *wkcontentview = [self get_wkcontentView];
    NSMutableArray *arr = [wkcontentview.subviews mutableCopy];
    while (arr.count > 0)
    {
        UIView *comp = arr.firstObject;
        [arr removeObjectAtIndex:0];
        if ([@"WKCompositingView" isEqualToString:NSStringFromClass([comp class])])
        {
            if ([comp.layer.name isEqualToString:@"  id='zl_native'"]) {
                return comp;
            }
        }

        if (comp.subviews.count > 0)
        {
            [arr addObjectsFromArray:comp.subviews];
        }
    }
    return nil;
}

找到后，在这个子层级view上添加Native控件，渲染对应内容。

-(void)startNativeRender_zl_native_node
{
    UIView *view = [self find_zl_native_view];
    UILabel *lbl = [[UILabel alloc] initWithFrame:view.bounds];
    [view addSubview:lbl];
    lbl.alpha = 0;
    [UIView animateWithDuration:3 animations:^{
        lbl.alpha = 0.6;
        lbl.text = @"world";
        lbl.textColor = [UIColor yellowColor];
        lbl.backgroundColor = [UIColor redColor];
        lbl.font = [UIFont systemFontOfSize:49.5];
    }];
}